Threestrap

packages/examples/package.json

@@ -2,7 +2,7 @@
   "name": "examples",
   "private": true,
   "dependencies": {
-    "mathbox": "^2.3.0",
+    "mathbox": "^2.3.1",
     "mathbox-react": "workspace:*",
     "mathjs": "10.5.2",
     "memoize-one": "6.0.0",
@@ -23,7 +23,6 @@
   },
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build",
     "preview": "vite preview",
     "lint": "eslint \"**/*.ts?(x)\""
   }

packages/examples/tsconfig.json

@@ -10,7 +10,7 @@
     "strict": true,
     "forceConsistentCasingInFileNames": true,
     "module": "ESNext",
-    "moduleResolution": "Node",
+    "moduleResolution": "Node16",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,

packages/mathbox-react/package.json

@@ -10,7 +10,16 @@
   },
   "author": "Chris Chudzicki",
   "main": "build/cjs/index.js",
-  "module": "build/esm/index.js",
+  "exports": {
+    ".": {
+      "import": "./build/esm/index.js",
+      "require": "./build/cjs/index.js"
+    },
+    "./threestrap": {
+      "import": "./build/esm/threestrap/index.js",
+      "require": "./build/cjs/threestrap/index.js"
+    }
+  },
   "files": [
     "build"
   ],
@@ -54,7 +63,7 @@
     "typescript": "^4.9.4"
   },
   "peerDependencies": {
-    "mathbox": "^2.3.0",
+    "mathbox": "^2.3.1",
     "react": "^17.0.2 || ^18.0.0",
     "three": ">=0.118.0"
   },

packages/mathbox-react/src/components/Mathbox.tsx

@@ -9,6 +9,7 @@ import { mathBox, RootProps, MathboxSelection, MathBoxOptions } from "mathbox"
 import MathboxAPIContext from "./MathboxAPIContext"
 import { WithChildren } from "./types"
 import { useDeepCompareMemo } from "./util"
+import ThreestrapContext from "../threestrap/ThreestrapContext"
 
 type Props = WithChildren<
   {
@@ -54,9 +55,13 @@ const Mathbox = (
 
   useImperativeHandle(ref, () => selection, [selection])
   return (
-    <MathboxAPIContext.Provider value={selection}>
-      {children}
-    </MathboxAPIContext.Provider>
+    selection && (
+      <MathboxAPIContext.Provider value={selection}>
+        <ThreestrapContext.Provider value={selection.three}>
+          {children}
+        </ThreestrapContext.Provider>
+      </MathboxAPIContext.Provider>
+    )
   )
 }
 

packages/mathbox-react/src/components/MathboxAPIContext.ts

@@ -1,6 +1,21 @@
-import { createContext } from "react"
+import { createContext, useContext } from "react"
 import { MathboxSelection, NodeType } from "mathbox"
 
 const MathboxAPIContext = createContext<MathboxSelection<NodeType> | null>(null)
 
+/**
+ * Returns Mathbox API Selection object for the nearest enclosing Mathbox node.
+ */
+const useMathbox = () => {
+  const selection = useContext(MathboxAPIContext)
+  if (!selection) {
+    throw new Error(
+      "useMathbox must be used within Mathbox or ContainedMathbox"
+    )
+  }
+  return selection
+}
+
 export default MathboxAPIContext
+
+export { useMathbox }

packages/mathbox-react/src/components/index.ts

@@ -1,3 +1,5 @@
 export * from "./components"
 export { default as Mathbox } from "./Mathbox"
 export { default as ContainedMathbox } from "./ContainedMathbox"
+
+export { useMathbox } from "./MathboxAPIContext"

packages/mathbox-react/src/threestrap/Renderer.ts

@@ -0,0 +1,19 @@
+import React, { useEffect } from "react"
+import type { ColorRepresentation } from "three"
+import { useThreestrap } from "./ThreestrapContext"
+
+type RendererProps = {
+  clearColor?: ColorRepresentation
+}
+
+const Renderer: React.FC<RendererProps> = (props) => {
+  const threestrap = useThreestrap()
+  useEffect(() => {
+    if (props.clearColor) {
+      threestrap.renderer.setClearColor(props.clearColor)
+    }
+  })
+  return null
+}
+
+export default Renderer

packages/mathbox-react/src/threestrap/ThreestrapContext.ts

@@ -0,0 +1,16 @@
+import { createContext, useContext } from "react"
+import type { Threestrap } from "./threestrap"
+
+const ThreestrapContext = createContext<Threestrap | null>(null)
+
+export default ThreestrapContext
+
+const useThreestrap = () => {
+  const threestrap = useContext(ThreestrapContext)
+  if (!threestrap) {
+    throw new Error("Threestrap context is not available")
+  }
+  return threestrap
+}
+
+export { useThreestrap }

packages/mathbox-react/src/threestrap/index.ts

@@ -0,0 +1,2 @@
+export { default as Renderer } from "./Renderer"
+export type { Threestrap } from "./threestrap"

packages/mathbox-react/src/threestrap/threestrap.ts

@@ -0,0 +1,16 @@
+import type { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
+import type { FirstPersonControls } from "three/examples/jsm/controls/FirstPersonControls"
+import type { WebGLRenderer } from "three"
+
+export interface ThreestrapControls {
+  orbit: OrbitControls
+  firstPerson: FirstPersonControls
+}
+
+type Controls = ThreestrapControls[keyof ThreestrapControls]
+
+// TODO: This should be in threestrap package
+export interface Threestrap {
+  renderer: WebGLRenderer
+  controls: Controls | null
+}

packages/mathbox-react/tsconfig.cjs.json

@@ -4,4 +4,5 @@
     "module": "CommonJS",
     "outDir": "./build/cjs",
   },
+  "include": ["src/**/*"],
 }

packages/mathbox-react/tsconfig.json

@@ -3,4 +3,5 @@
   "compilerOptions": {
     "outDir": "./build/esm",
   },
+  "include": ["src/**/*"],
 }

packages/tsconfig/base.json

@@ -4,10 +4,10 @@
       "strict": true,
       "jsx": "react",
       "module": "ESNext",
+      "moduleResolution": "node16",
       "declaration": true,
       "sourceMap": true,
       "skipLibCheck": true,
-      "moduleResolution": "node",
       "allowSyntheticDefaultImports": true,
       "forceConsistentCasingInFileNames": true,
       "resolveJsonModule": true

yarn.lock

@@ -8400,7 +8400,7 @@ __metadata:
     "@types/three": 0.148.0
     "@vitejs/plugin-react": ^3.0.0
     eslint: ^8.32.0
-    mathbox: ^2.3.0
+    mathbox: ^2.3.1
     mathbox-react: "workspace:*"
     mathjs: 10.5.2
     memoize-one: 6.0.0
@@ -11900,13 +11900,13 @@ __metadata:
     ts-jest: 27.1.5
     typescript: ^4.9.4
   peerDependencies:
-    mathbox: ^2.3.0
+    mathbox: ^2.3.1
     react: ^17.0.2 || ^18.0.0
     three: ">=0.118.0"
   languageName: unknown
   linkType: soft
 
-"mathbox@npm:2.3.1":
+"mathbox@npm:2.3.1, mathbox@npm:^2.3.1":
   version: 2.3.1
   resolution: "mathbox@npm:2.3.1"
   dependencies:
@@ -11920,20 +11920,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mathbox@npm:^2.3.0":
-  version: 2.3.0
-  resolution: "mathbox@npm:2.3.0"
-  dependencies:
-    css-select: ^4.2.1
-    lodash: ^4.17.21
-    shadergraph: ^2.1.3
-    threestrap: ^0.5.1
-  peerDependencies:
-    three: ">=0.118.0"
-  checksum: a70e3e6f5bd63df5478301bf3f9b14b6ef4a7f04bc6f494b20919cf02634c754578c03e5e99f2acb8c2b5e6ec008ba61a077faba104bfe5b535d35c2f0e3cc66
-  languageName: node
-  linkType: hard
-
 "mathjs@npm:10.5.2":
   version: 10.5.2
   resolution: "mathjs@npm:10.5.2"