mathbox-react 0.0.10 → 0.0.11-rc

package/build/index.d.ts

@@ -8,7 +8,12 @@ declare type WithChildren<T> = {
 declare const CAN_HAVE_CHILDREN: readonly ["view", "cartesian", "cartesian4", "polar", "spherical", "stereographic", "stereographic4", "transform", "transform4", "vertex", "fragment", "layer", "mask", "group", "inherit", "root", "unit", "rtt", "clock", "now", "move", "present", "reveal", "slide"];
 declare type ParentNodeTypes = typeof CAN_HAVE_CHILDREN[number];
 
-declare type MathboxComponent<T extends NodeType> = React.ForwardRefExoticComponent<(T extends ParentNodeTypes ? WithChildren<Props[T]> : Props[T]) & React.RefAttributes<MathboxSelection<T>>>;
+declare type LiveProps<P> = {
+    [K in keyof P]: (t: number, dt: number) => P[K];
+};
+declare type MathboxComponent<T extends NodeType> = React.ForwardRefExoticComponent<(T extends ParentNodeTypes ? WithChildren<Props[T]> : Props[T]) & React.RefAttributes<MathboxSelection<T>> & {
+    liveProps?: LiveProps<Props[T]>;
+}>;
 /**
  * Component wrapper for mathbox [`area`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#dataarea).
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mathbox-react",
-  "version": "0.0.10",
+  "version": "0.0.11-rc",
   "description": "React wrapper for Mathbox",
   "license": "ISC",
   "author": "Chris Chudzicki",
@@ -18,45 +18,45 @@
     "test": "jest"
   },
   "devDependencies": {
-    "@babel/core": "^7.17.5",
-    "@babel/preset-env": "^7.16.11",
-    "@rollup/plugin-commonjs": "^21.0.1",
-    "@rollup/plugin-node-resolve": "^13.1.3",
-    "@rollup/plugin-typescript": "^8.3.0",
-    "@storybook/addon-actions": "^6.4.19",
-    "@storybook/addon-essentials": "^6.4.19",
-    "@storybook/addon-interactions": "^6.4.19",
-    "@storybook/addon-links": "^6.4.19",
-    "@storybook/react": "^6.4.19",
-    "@storybook/testing-library": "^0.0.9",
-    "@testing-library/react": "^12.1.3",
-    "@types/jest": "^27.4.1",
-    "@types/lodash": "^4.14.181",
-    "@types/react": "^17.0.39",
-    "@types/three": "^0.137.0",
-    "babel-jest": "^27.5.1",
-    "babel-loader": "^8.2.3",
-    "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-airbnb-typescript": "^16.1.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-config-react-app": "^7.0.0",
-    "eslint-import-resolver-typescript": "^2.5.0",
-    "eslint-plugin-prettier": "^4.0.0",
-    "jest": "^27.5.1",
-    "mathbox": "^2.1.4",
-    "prettier": "^2.5.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "rollup": "^2.67.3",
-    "rollup-plugin-dts": "^4.1.0",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-terser": "^7.0.2",
-    "three": "^0.137.5",
-    "ts-jest": "^27.1.3",
-    "typescript": "^4.5.5"
+    "@babel/core": "7.19.3",
+    "@babel/preset-env": "7.19.4",
+    "@rollup/plugin-commonjs": "23.0.0",
+    "@rollup/plugin-node-resolve": "15.0.0",
+    "@rollup/plugin-typescript": "9.0.1",
+    "@storybook/addon-actions": "6.5.12",
+    "@storybook/addon-essentials": "6.5.12",
+    "@storybook/addon-interactions": "6.5.12",
+    "@storybook/addon-links": "6.5.12",
+    "@storybook/react": "6.5.12",
+    "@storybook/testing-library": "0.0.13",
+    "@testing-library/react": "12.1.5",
+    "@types/jest": "27.5.2",
+    "@types/lodash": "4.14.186",
+    "@types/react": "18.0.21",
+    "@types/three": "0.140.0",
+    "babel-jest": "27.5.1",
+    "babel-loader": "8.2.5",
+    "eslint-config-airbnb": "19.0.4",
+    "eslint-config-airbnb-typescript": "17.0.0",
+    "eslint-config-prettier": "8.5.0",
+    "eslint-config-react-app": "7.0.1",
+    "eslint-import-resolver-typescript": "3.5.1",
+    "eslint-plugin-prettier": "4.2.1",
+    "jest": "27.5.1",
+    "mathbox": "2.2.1",
+    "prettier": "2.7.1",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "rollup": "2.79.1",
+    "rollup-plugin-dts": "4.2.3",
+    "rollup-plugin-peer-deps-external": "2.2.4",
+    "rollup-plugin-terser": "7.0.2",
+    "three": "0.140.0",
+    "ts-jest": "27.1.5",
+    "typescript": "4.8.4"
   },
   "peerDependencies": {
-    "mathbox": "^2.1.4",
+    "mathbox": "^2.2.1",
     "react": "^17.0.2 || ^18.0.0",
     "three": ">=0.118.0"
   },

package/rollup.config.js

@@ -31,7 +31,7 @@ export default [
     external: ["react", "react-dom", "styled-components"],
   },
   {
-    input: "build/esm/types/index.d.ts",
+    input: "build/esm/index.d.ts",
     output: [{ file: "build/index.d.ts", format: "esm" }],
     plugins: [dts()],
   },

package/src/components/components.spec.tsx

@@ -134,6 +134,41 @@ describe("Cartesian", () => {
     expect(cartesian.get("visible")).toBe(false)
   })
 
+  it("updates liveProps on its mathbox instance when rerendered", async () => {
+    const mbRef: MathboxRef<"root"> = { current: null }
+    const { rerender } = render(
+      <ContainedMathbox ref={mbRef}>
+        <Cartesian>
+          <Grid
+            liveProps={{
+              width: (t) => 1 + t,
+            }}
+          />
+        </Cartesian>
+      </ContainedMathbox>
+    )
+    const grid = mbRef.current?.select<"grid">("grid")
+    assertNotNil(grid)
+
+    const w1 = grid.get("width")
+    await new Promise((resolve) => {
+      setTimeout(resolve, 500)
+    })
+    const w2 = grid.get("width")
+    expect(w1).toBe(1)
+    // Mathbox uses seconds
+    expect(w2 - w1).toBeGreaterThan(0.45)
+    expect(w2 - w1).toBeLessThanOrEqual(0.5)
+    rerender(
+      <ContainedMathbox ref={mbRef}>
+        <Cartesian>
+          <Grid width={10} />
+        </Cartesian>
+      </ContainedMathbox>
+    )
+    expect(grid.get("width")).toBe(10)
+  })
+
   it("re-renders inside new instance when root changes", () => {
     const mbRef: MathboxRef<"root"> = { current: null }
     const cartesianRef: MathboxRef<"cartesian"> = { current: null }
@@ -264,7 +299,7 @@ describe("<Voxel />", () => {
         <ContainedMathbox>
           <Cartesian>
             {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment  */}
-            {/* @ts-ignore */}
+            {/* @ts-expect-error */}
             <Voxel>
               <Grid />
             </Voxel>

package/src/components/components.tsx

@@ -17,9 +17,14 @@ import {
   capitalize,
 } from "./util"
 
+type LiveProps<P> = {
+  [K in keyof P]: (t: number, dt: number) => P[K]
+}
 type MathboxComponent<T extends NodeType> = React.ForwardRefExoticComponent<
   (T extends ParentNodeTypes ? WithChildren<Props[T]> : Props[T]) &
-    React.RefAttributes<MathboxSelection<T>>
+    React.RefAttributes<MathboxSelection<T>> & {
+      liveProps?: LiveProps<Props[T]>
+    }
 >
 
 const mathboxComponentFactory = <T extends NodeType>(
@@ -28,12 +33,13 @@ const mathboxComponentFactory = <T extends NodeType>(
   const canHaveChildren = canNodeHaveChildren(type)
   const componentName = capitalize(type)
   const Comp = (
-    props: WithChildren<Props[T]>,
+    props: WithChildren<Props[T]> & { liveProps?: LiveProps<Props[T]> },
     ref: React.Ref<MathboxSelection<T> | null>
   ) => {
     const [_ignored, forceUpdate] = useReducer((x) => x + 1, 0)
     const parent = useContext(MathboxAPIContext)
     const selection = useRef<MathboxSelection<T> | null>(null)
+    const prevLiveProps = useRef<LiveProps<Props[T]> | undefined>(undefined)
     useEffect(
       () => () => {
         if (selection.current) {
@@ -45,7 +51,7 @@ const mathboxComponentFactory = <T extends NodeType>(
     )
     useImperativeHandle(ref, () => selection.current)
 
-    const { children, ...others } = props
+    const { children, liveProps, ...others } = props
     useEffect(() => {
       if (!parent) return
       if (isRootDestroyed(parent)) {
@@ -61,13 +67,31 @@ const mathboxComponentFactory = <T extends NodeType>(
       }
       if (!selection.current) {
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        selection.current = parent[type](others)
+        // @ts-expect-error
+        selection.current = parent[type](others, liveProps)
         forceUpdate()
       } else {
+        /**
+         * If liveProps have changed, remove all the old liveProps.
+         * (The same prop cannot be re-assigned live without being un-assigned
+         * first.)
+         *
+         * We could unbind just the ones that have changed, but simpler to
+         * unbind them all.
+         */
+        if (prevLiveProps.current && liveProps !== prevLiveProps.current) {
+          Object.keys(prevLiveProps.current).forEach((key) => {
+            // @ts-expect-error this is not in ts yet
+            selection.current.unbind(key)
+          })
+        }
+        if (liveProps && liveProps !== prevLiveProps.current) {
+          selection.current.bind(liveProps)
+        }
         selection.current.set(others)
       }
-    }, [parent, others])
+      prevLiveProps.current = liveProps
+    }, [parent, others, liveProps])
     if (!canHaveChildren) {
       if (props.children) {
         throw new Error(`Component <${componentName} /> cannot have children.`)

package/src/components/util.ts

@@ -1,5 +1,5 @@
 /* eslint-disable no-underscore-dangle */
-import { isEqual } from "lodash"
+import isEqual from "lodash/isEqual"
 import { useRef, useMemo } from "react"
 import { MathboxSelection, NodeType } from "mathbox"
 

package/src/stories/Point.stories.tsx

@@ -29,7 +29,7 @@ export default {
 
 const Template: Story<React.ComponentProps<typeof Point>> = (args) => {
   const { points, ...otherArgs } = args
-  const [data, setData] = useState<MathboxSelection<"array">>()
+  const [data, setData] = useState<MathboxSelection<"array"> | null>(null)
   return (
     <Mathbox containerStyle={{ height: 450 }}>
       <Cartesian
@@ -66,3 +66,10 @@ const Template: Story<React.ComponentProps<typeof Point>> = (args) => {
 
 export const DefaultPoint = Template.bind({})
 DefaultPoint.args = {}
+
+export const LiveProps = Template.bind({})
+LiveProps.args = {
+  liveProps: {
+    size: (t: number) => 20 * (1 + 0.5 * Math.sin(t)),
+  },
+}

package/build/cjs/types/components/MathboxNodeContext.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import { MathboxSelection } from "mathbox";
-declare const MathboxAPIContext: import("react").Context<MathboxSelection<keyof import("mathbox").Props> | null>;
-export default MathboxAPIContext;

package/build/esm/types/components/MathboxNodeContext.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import { MathboxSelection } from "mathbox";
-declare const MathboxAPIContext: import("react").Context<MathboxSelection<keyof import("mathbox").Props> | null>;
-export default MathboxAPIContext;

package/scratch.js

@@ -1,149 +0,0 @@
-const classDescriptions = {
-  axis: ["draw", "Draw an axis", {}, { end: "true", zBias: "-1" }],
-  face: ["draw", "Draw polygon faces"],
-  grid: ["draw", "Draw a 2D line grid", {}, { width: "1", zBias: "-2" }],
-  line: ["draw", "Draw lines"],
-  point: ["draw", "Draw points"],
-  strip: ["draw", "Draw triangle strips"],
-  surface: ["draw", "Draw surfaces", {}, { lineX: "false", lineY: "false" }],
-  ticks: ["draw", "Draw ticks"],
-  vector: ["draw", "Draw vectors"],
-
-  view: ["view", "Adjust view range"],
-  cartesian: ["view", "Apply cartesian view"],
-  cartesian4: ["view", "Apply 4D cartesian view"],
-  polar: ["view", "Apply polar view"],
-  spherical: ["view", "Apply spherical view"],
-  stereographic: ["view", "Apply stereographic projection"],
-  stereographic4: ["view", "Apply 4D stereographic projection"],
-
-  transform: ["transform", "Transform geometry in 3D"],
-  transform4: ["transform", "Transform geometry in 4D"],
-  vertex: ["transform", "Apply custom vertex shader pass"],
-  fragment: ["transform", "Apply custom fragment shader pass"],
-  layer: ["transform", "Independent 2D layer/overlay"],
-  mask: ["transform", "Apply custom mask pass"],
-
-  array: [
-    "data",
-    "1D array",
-    { expr: "function (emit, i, time, delta) { ... }" },
-  ],
-  interval: [
-    "data",
-    "1D sampled array",
-    { expr: "function (emit, x, i, time, delta) { ... }" },
-  ],
-  matrix: [
-    "data",
-    "2D matrix",
-    { expr: "function (emit, i, j, time, delta) { ... }" },
-  ],
-  area: [
-    "data",
-    "2D sampled matrix",
-    { expr: "function (emit, x, y, i, j, time, delta) { ... }" },
-  ],
-  voxel: [
-    "data",
-    "3D voxels",
-    { expr: "function (emit, i, j, k, time, delta) { ... }" },
-  ],
-  volume: [
-    "data",
-    "3D sampled voxels",
-    { expr: "function (emit, x, y, z, i, j, k, time, delta) { ... }" },
-  ],
-  scale: ["data", "Human-friendly divisions on an axis, subdivided as needed"],
-
-  html: ["overlay", "HTML element source"],
-  dom: ["overlay", "HTML DOM injector"],
-
-  text: [
-    "text",
-    "GL text source",
-    {},
-    { minFilter: '"linear"', magFilter: '"linear"' },
-  ],
-  format: [
-    "text",
-    "Text formatter",
-    { expr: "function (x, y, z, w, i, j, k, l, time, delta) { ... }" },
-    { minFilter: '"linear"', magFilter: '"linear"' },
-  ],
-  retext: ["text", "Text atlas resampler"],
-  label: ["text", "Draw GL labels"],
-
-  clamp: ["operator", "Clamp out-of-bounds samples to the nearest data point"],
-  grow: ["operator", "Scale data relative to reference data point"],
-  join: [
-    "operator",
-    "Join two array dimensions into one by concatenating rows/columns/stacks",
-  ],
-  lerp: ["operator", "Linear interpolation of data"],
-  memo: ["operator", "Memoize data to an array/texture"],
-  readback: [
-    "operator",
-    "Read data back to a binary JavaScript array",
-    { expr: "function (x, y, z, w, i, j, k, l) { ... }" },
-  ],
-  resample: ["operator", "Resample data to new dimensions with a shader"],
-  repeat: ["operator", "Repeat data in one or more dimensions"],
-  swizzle: ["operator", "Swizzle data values"],
-  spread: ["operator", "Spread data values according to array indices"],
-  split: [
-    "operator",
-    "Split one array dimension into two by splitting rows/columns/etc",
-  ],
-  slice: ["operator", "Select one or more rows/columns/stacks"],
-  subdivide: ["operator", "Subdivide data points evenly or with a bevel"],
-  transpose: ["operator", "Transpose array dimensions"],
-
-  group: ["base", "Group elements for visibility and activity"],
-  inherit: ["base", "Inherit and inject a trait from another element"],
-  root: ["base", "Tree root"],
-  unit: ["base", "Change unit sizing for drawing ops"],
-
-  shader: ["shader", "Custom shader snippet"],
-
-  camera: ["camera", "Camera instance or proxy"],
-
-  rtt: [
-    "rtt",
-    "Render objects to a texture",
-    {},
-    { minFilter: '"linear"', magFilter: '"linear"', type: '"unsignedByte"' },
-  ],
-  compose: [
-    "rtt",
-    "Full-screen render pass",
-    {},
-    { zWrite: "false", zTest: "false", color: '"white"' },
-  ],
-
-  clock: ["time", "Relative clock that starts from zero."],
-  now: ["time", "Absolute UNIX time in seconds since 01/01/1970"],
-
-  move: ["present", "Move elements in/out on transition"],
-  play: ["present", "Play a sequenced animation"],
-  present: ["present", "Present a tree of slides"],
-  reveal: ["present", "Reveal/hide elements on transition"],
-  slide: ["present", "Presentation slide"],
-  step: ["present", "Step through a sequenced animation"],
-}
-
-const capitalize = (s) => `${s[0].toUpperCase()}${s.slice(1)}`
-
-const makeDef = (name) => {
-  const [group] = classDescriptions[name]
-  const Name = capitalize(name)
-  const dest = `https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#${group}${name}`
-  const def = `
-/**
- * Component wrapper for mathbox [\`${name}\`](${dest}).
- */
-export const ${Name} = mathboxComponentFactory('${name}');`
-  console.log(def)
-}
-
-Object.keys(classDescriptions).sort().forEach(makeDef)