mathbox-react 0.0.9-dev → 0.0.10

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

@@ -1,7 +1,8 @@
 import React from "react";
 import { Props, NodeType, MathboxSelection } from "mathbox";
 import { WithChildren } from "./types";
-declare type MathboxComponent<T extends NodeType> = React.ForwardRefExoticComponent<WithChildren<Props[T]> & React.RefAttributes<MathboxSelection<T>>>;
+import { ParentNodeTypes } from "./util";
+declare type MathboxComponent<T extends NodeType> = React.ForwardRefExoticComponent<(T extends ParentNodeTypes ? WithChildren<Props[T]> : Props[T]) & React.RefAttributes<MathboxSelection<T>>>;
 /**
  * Component wrapper for mathbox [`area`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#dataarea).
  */

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

@@ -0,0 +1,38 @@
+import { MathboxSelection, NodeType } from "mathbox";
+export declare const isRootDestroyed: (selection: MathboxSelection) => boolean;
+/**
+ * Check that parent is actually the selection's parent.
+ * The mathbox components occasionally render with a selection value whose
+ * parent does not match the parent specified in MathboxContext.
+ *
+ * I believe this fundamentally this is happening because
+ * - we store parent value in context...
+ * - we update the context parent value using useEffect hooks..
+ * - useEffect hooks are called children before parents.
+ *
+ * One wonders whether we really need to be using useEffect hooks for the
+ * mathbox components, or if we can just put all the node creation/removal stuff
+ * in a render function. Hooks seem nice for dependencies, but mathbox is pretty
+ * smart about diffing out the actual changes.
+ */
+export declare const isSelectionParent: (selection: MathboxSelection, parent: MathboxSelection) => boolean;
+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"];
+export declare type ParentNodeTypes = typeof CAN_HAVE_CHILDREN[number];
+export declare const canNodeHaveChildren: (type: NodeType) => boolean;
+export declare const capitalize: (s: string) => string;
+/**
+ * Returns the same reference to `value` as long as the the given values are
+ * deep equal.
+ *
+ * This is, in general, not a great idea. See
+ * https://github.com/facebook/react/issues/14476#issuecomment-471199055
+ *
+ * This should work OK for mathbox options because the objects in question are
+ * either shallow, or are deep equal at a fairly shallow level.
+ * E.g., OrbitControls may not be a shall object, but if it's not, it will at
+ * least be deep equal between renders.
+ *
+ * But should work OK for mathbox options.
+ */
+export declare const useDeepCompareMemo: <T>(value: T, initial: T) => T;
+export {};

package/build/index.d.ts

@@ -5,7 +5,10 @@ declare type WithChildren<T> = {
     children?: ReactNode | ReactNode[];
 } & T;
 
-declare type MathboxComponent<T extends NodeType> = React.ForwardRefExoticComponent<WithChildren<Props[T]> & React.RefAttributes<MathboxSelection<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>>>;
 /**
  * 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.9-dev",
+  "version": "0.0.10",
   "description": "React wrapper for Mathbox",
   "license": "ISC",
   "author": "Chris Chudzicki",
@@ -31,6 +31,7 @@
     "@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",
@@ -42,7 +43,7 @@
     "eslint-import-resolver-typescript": "^2.5.0",
     "eslint-plugin-prettier": "^4.0.0",
     "jest": "^27.5.1",
-    "mathbox": "^2.1.2",
+    "mathbox": "^2.1.4",
     "prettier": "^2.5.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
@@ -55,8 +56,11 @@
     "typescript": "^4.5.5"
   },
   "peerDependencies": {
-    "mathbox": "^2.1.2",
+    "mathbox": "^2.1.4",
     "react": "^17.0.2 || ^18.0.0",
     "three": ">=0.118.0"
+  },
+  "dependencies": {
+    "lodash": "^4.17.21"
   }
 }

package/src/components/Mathbox.tsx

@@ -3,12 +3,12 @@ import React, {
   useState,
   forwardRef,
   useImperativeHandle,
-  useMemo,
 } from "react"
 import { Color } from "three"
 import { mathBox, RootProps, MathboxSelection, MathBoxOptions } from "mathbox"
 import MathboxAPIContext from "./MathboxNodeContext"
 import { WithChildren } from "./types"
+import { useDeepCompareMemo } from "./util"
 
 type Props = WithChildren<
   {
@@ -22,7 +22,7 @@ const Mathbox = (
   ref: React.Ref<MathboxSelection<"root"> | null>
 ) => {
   const { container, children, options, ...rootProps } = props
-  const mathboxOptions = useMemo(() => options ?? {}, [options])
+  const mathboxOptions = useDeepCompareMemo(options ?? {}, {})
   const [selection, setSelection] = useState<MathboxSelection<"root"> | null>(
     null
   )
@@ -39,6 +39,7 @@ const Mathbox = (
      * TODO: Should Mathbox component allow setting these more easily?
      */
     mathbox.three.renderer.setClearColor(new Color(0xffffff), 1.0)
+    mathbox.three.camera.position.set(1, 1, 2)
     return () => {
       mathbox.select("*").remove()
       mathbox.three.destroy()

package/src/components/{Cartesian.spec.tsx → components.spec.tsx}

@@ -3,7 +3,7 @@ import { render, act } from "@testing-library/react"
 import { MathboxSelection } from "mathbox"
 import ContainedMathbox from "./ContainedMathbox"
 import Mathbox from "./Mathbox"
-import { Cartesian, Grid } from "./components"
+import { Cartesian, Grid, Voxel } from "./components"
 import { MathboxRef } from "./types"
 
 function assertNotNil<T>(value: T): asserts value is NonNullable<T> {
@@ -27,6 +27,24 @@ const assertSelectionsEqual = (s1: MathboxSelection, s2: MathboxSelection) => {
     })
 }
 
+describe("ContainedMathbox", () => {
+  it("makes a new mathbox instance only if the options have changed", () => {
+    const mbRef: MathboxRef<"root"> = { current: null }
+    const { rerender } = render(<ContainedMathbox options={{}} ref={mbRef} />)
+
+    const mb0 = mbRef.current
+    assertNotNil(mb0)
+    rerender(<ContainedMathbox options={{}} ref={mbRef} />)
+    const mb1 = mbRef.current
+    expect(mb1).toBe(mb0)
+    assertNotNil(mb1)
+    rerender(<ContainedMathbox options={{ plugins: ["core"] }} ref={mbRef} />)
+    const mb2 = mbRef.current
+    assertNotNil(mb2)
+    expect(mb2).not.toBe(mb1)
+  })
+})
+
 describe("Cartesian", () => {
   it("exposes Mathbox instance via ref", () => {
     const mbRef: MathboxRef<"root"> = { current: null }
@@ -145,7 +163,7 @@ describe("Cartesian", () => {
      * When re-rendered, this will create a new mathBox since the options
      * object prop will have changed.
      */
-    const options2 = {}
+    const options2 = { plugins: ["core"] }
     expect(options1).not.toBe(options2)
 
     rerender(
@@ -163,7 +181,7 @@ describe("Cartesian", () => {
     assertNotNil(cartesian2)
     assertNotNil(grid2)
 
-    // It creates a new instance b/c the options prop has changed by reference
+    // The options have changed (via deep equal) so a new instance is created
     expect(mb1).not.toBe(mb2)
 
     expect(cartesian2).toHaveLength(1)
@@ -201,4 +219,58 @@ describe("Cartesian", () => {
     expect(mbRef.current.three.element).toBe(containerDiv)
     expect(mbRef.current.select("cartesian").length).toBe(1)
   })
+
+  it("Can add and remove children without error", async () => {
+    const mbRef: MathboxRef<"root"> = { current: null }
+
+    const { rerender } = render(
+      <ContainedMathbox ref={mbRef} options={{}}>
+        <Cartesian>
+          <Grid />
+        </Cartesian>
+      </ContainedMathbox>
+    )
+
+    assertNotNil(mbRef.current)
+    expect(mbRef.current.select("grid").length).toBe(1)
+
+    rerender(
+      <ContainedMathbox ref={mbRef} options={{}}>
+        <Cartesian>
+          <Grid />
+          <Grid />
+        </Cartesian>
+      </ContainedMathbox>
+    )
+
+    assertNotNil(mbRef.current)
+    expect(mbRef.current.select("grid").length).toBe(2)
+
+    rerender(
+      <ContainedMathbox ref={mbRef} options={{}}>
+        <Cartesian />
+      </ContainedMathbox>
+    )
+
+    assertNotNil(mbRef.current)
+    expect(mbRef.current.select("grid").length).toBe(0)
+  })
+})
+
+describe("<Voxel />", () => {
+  it("throws a runtime error if it has children", () => {
+    const willThrow = () =>
+      render(
+        <ContainedMathbox>
+          <Cartesian>
+            {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment  */}
+            {/* @ts-ignore */}
+            <Voxel>
+              <Grid />
+            </Voxel>
+          </Cartesian>
+        </ContainedMathbox>
+      )
+    expect(willThrow).toThrow("Component <Voxel /> cannot have children.")
+  })
 })

package/src/components/components.tsx

@@ -9,14 +9,24 @@ import React, {
 import { Props, NodeType, MathboxSelection } from "mathbox"
 import MathboxAPIContext from "./MathboxNodeContext"
 import { WithChildren } from "./types"
+import {
+  isRootDestroyed,
+  isSelectionParent,
+  canNodeHaveChildren,
+  ParentNodeTypes,
+  capitalize,
+} from "./util"
 
 type MathboxComponent<T extends NodeType> = React.ForwardRefExoticComponent<
-  WithChildren<Props[T]> & React.RefAttributes<MathboxSelection<T>>
+  (T extends ParentNodeTypes ? WithChildren<Props[T]> : Props[T]) &
+    React.RefAttributes<MathboxSelection<T>>
 >
 
 const mathboxComponentFactory = <T extends NodeType>(
   type: T
 ): MathboxComponent<T> => {
+  const canHaveChildren = canNodeHaveChildren(type)
+  const componentName = capitalize(type)
   const Comp = (
     props: WithChildren<Props[T]>,
     ref: React.Ref<MathboxSelection<T> | null>
@@ -28,6 +38,7 @@ const mathboxComponentFactory = <T extends NodeType>(
       () => () => {
         if (selection.current) {
           selection.current.remove()
+          selection.current = null
         }
       },
       []
@@ -37,16 +48,19 @@ const mathboxComponentFactory = <T extends NodeType>(
     const { children, ...others } = props
     useEffect(() => {
       if (!parent) return
+      if (isRootDestroyed(parent)) {
+        forceUpdate()
+        return
+      }
       if (selection.current) {
-        // @ts-ignore
-        if (selection.current._up[0] !== parent[0]) {
+        if (!isSelectionParent(selection.current, parent)) {
           selection.current.remove()
           selection.current = null
           forceUpdate()
         }
       }
-
       if (!selection.current) {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         selection.current = parent[type](others)
         forceUpdate()
@@ -54,7 +68,12 @@ const mathboxComponentFactory = <T extends NodeType>(
         selection.current.set(others)
       }
     }, [parent, others])
-
+    if (!canHaveChildren) {
+      if (props.children) {
+        throw new Error(`Component <${componentName} /> cannot have children.`)
+      }
+      return null
+    }
     return (
       <MathboxAPIContext.Provider value={selection.current}>
         {props.children}

package/src/components/util.ts

@@ -0,0 +1,106 @@
+/* eslint-disable no-underscore-dangle */
+import { isEqual } from "lodash"
+import { useRef, useMemo } from "react"
+import { MathboxSelection, NodeType } from "mathbox"
+
+type WithPrivateUp = MathboxSelection & { _up?: WithPrivateUp }
+
+/**
+ * Get root node given any node in Mathbox tree
+ */
+const getRoot = (selection: MathboxSelection) => {
+  let current = selection as WithPrivateUp
+  while (current._up) {
+    current = current._up
+  }
+  return current
+}
+
+export const isRootDestroyed = (selection: MathboxSelection) => {
+  const root = getRoot(selection)
+  return root.three === undefined
+}
+
+/**
+ * Check that parent is actually the selection's parent.
+ * The mathbox components occasionally render with a selection value whose
+ * parent does not match the parent specified in MathboxContext.
+ *
+ * I believe this fundamentally this is happening because
+ * - we store parent value in context...
+ * - we update the context parent value using useEffect hooks..
+ * - useEffect hooks are called children before parents.
+ *
+ * One wonders whether we really need to be using useEffect hooks for the
+ * mathbox components, or if we can just put all the node creation/removal stuff
+ * in a render function. Hooks seem nice for dependencies, but mathbox is pretty
+ * smart about diffing out the actual changes.
+ */
+export const isSelectionParent = (
+  selection: MathboxSelection,
+  parent: MathboxSelection
+) => {
+  const selectionParentNode = (selection as WithPrivateUp)._up?.[0]
+  return selectionParentNode === parent[0]
+}
+
+const CAN_HAVE_CHILDREN = [
+  "view",
+  "cartesian",
+  "cartesian4",
+  "polar",
+  "spherical",
+  "stereographic",
+  "stereographic4",
+  "transform",
+  "transform4",
+  "vertex",
+  "fragment",
+  "layer",
+  "mask",
+  "group",
+  "inherit",
+  "root",
+  "unit",
+  "rtt",
+  "clock",
+  "now",
+  "move",
+  "present",
+  "reveal",
+  "slide",
+] as const
+
+export type ParentNodeTypes = typeof CAN_HAVE_CHILDREN[number]
+
+export const canNodeHaveChildren = (type: NodeType) =>
+  (CAN_HAVE_CHILDREN as readonly string[]).includes(type)
+
+export const capitalize = (s: string) => {
+  if (!s) return ""
+  return s[0].toLocaleUpperCase() + s.slice(1)
+}
+
+/**
+ * Returns the same reference to `value` as long as the the given values are
+ * deep equal.
+ *
+ * This is, in general, not a great idea. See
+ * https://github.com/facebook/react/issues/14476#issuecomment-471199055
+ *
+ * This should work OK for mathbox options because the objects in question are
+ * either shallow, or are deep equal at a fairly shallow level.
+ * E.g., OrbitControls may not be a shall object, but if it's not, it will at
+ * least be deep equal between renders.
+ *
+ * But should work OK for mathbox options.
+ */
+export const useDeepCompareMemo = <T>(value: T, initial: T): T => {
+  const oldValue = useRef<T>(initial)
+  const memoOptions = useMemo(() => {
+    if (isEqual(value, oldValue.current)) return oldValue.current
+    oldValue.current = value
+    return value
+  }, [value])
+  return memoOptions
+}

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

@@ -1,23 +0,0 @@
-import React from "react";
-import type { MathboxSelection, Props } from "mathbox";
-import type { WithChildren } from "./types";
-/**
- * Check that parent is actually the selection's parent.
- * The mathbox components occasionally render with a selection value whose
- * parent does not match the parent specified in MathboxContext.
- *
- * I believe this fundamentally this is happening because
- * - we store parent value in context...
- * - we update the context parent value using useEffect hooks..
- * - useEffect hooks are called children before parents.
- *
- * One wonders whether we really need to be using useEffect hooks for the
- * mathbox components, or if we can just put all the node creation/removal stuff
- * in a render function. Hooks seem nice for dependencies, but mathbox is pretty
- * smart about diffing out the actual changes.
- */
-export declare const isSelectionParent: (selection: MathboxSelection, parent: MathboxSelection) => boolean;
-export declare const useMathboxAPI: <T extends keyof Props>(name: T, props: WithChildren<Props[T]>, ref: React.Ref<MathboxSelection<T> | null>) => {
-    selection: MathboxSelection<T> | null;
-    parent: MathboxSelection<keyof Props> | null;
-};

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

@@ -1,23 +0,0 @@
-import React from "react";
-import type { MathboxSelection, Props } from "mathbox";
-import type { WithChildren } from "./types";
-/**
- * Check that parent is actually the selection's parent.
- * The mathbox components occasionally render with a selection value whose
- * parent does not match the parent specified in MathboxContext.
- *
- * I believe this fundamentally this is happening because
- * - we store parent value in context...
- * - we update the context parent value using useEffect hooks..
- * - useEffect hooks are called children before parents.
- *
- * One wonders whether we really need to be using useEffect hooks for the
- * mathbox components, or if we can just put all the node creation/removal stuff
- * in a render function. Hooks seem nice for dependencies, but mathbox is pretty
- * smart about diffing out the actual changes.
- */
-export declare const isSelectionParent: (selection: MathboxSelection, parent: MathboxSelection) => boolean;
-export declare const useMathboxAPI: <T extends keyof Props>(name: T, props: WithChildren<Props[T]>, ref: React.Ref<MathboxSelection<T> | null>) => {
-    selection: MathboxSelection<T> | null;
-    parent: MathboxSelection<keyof Props> | null;
-};

package/src/components/hooks.ts

@@ -1,78 +0,0 @@
-import React, {
-  useContext,
-  useEffect,
-  useState,
-  useImperativeHandle,
-} from "react"
-import type { MathboxSelection, NodeType, Props } from "mathbox"
-import MathboxAPIContext from "./MathboxNodeContext"
-import type { WithChildren } from "./types"
-
-type WithPrivateUp = MathboxSelection & { _up: WithPrivateUp | null }
-
-/**
- * Check that parent is actually the selection's parent.
- * The mathbox components occasionally render with a selection value whose
- * parent does not match the parent specified in MathboxContext.
- *
- * I believe this fundamentally this is happening because
- * - we store parent value in context...
- * - we update the context parent value using useEffect hooks..
- * - useEffect hooks are called children before parents.
- *
- * One wonders whether we really need to be using useEffect hooks for the
- * mathbox components, or if we can just put all the node creation/removal stuff
- * in a render function. Hooks seem nice for dependencies, but mathbox is pretty
- * smart about diffing out the actual changes.
- */
-export const isSelectionParent = (
-  selection: MathboxSelection,
-  parent: MathboxSelection
-) => {
-  // eslint-disable-next-line no-underscore-dangle
-  const selectionParentNode = (selection as WithPrivateUp)._up?.[0]
-  return selectionParentNode === parent[0]
-}
-
-export const useMathboxAPI = <T extends NodeType>(
-  name: T,
-  props: WithChildren<Props[T]>,
-  ref: React.Ref<MathboxSelection<T> | null>
-) => {
-  const parent = useContext(MathboxAPIContext)
-  const [selection, setSelection] = useState<MathboxSelection<T> | null>(null)
-
-  useEffect(
-    () => () => {
-      if (selection) {
-        selection.remove()
-        setSelection(null)
-      }
-    },
-    [selection, parent]
-  )
-
-  useEffect(() => {
-    const { children, ...mbProps } = props
-    if (!parent) return
-    if (!selection || !isSelectionParent(selection, parent)) {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      const thisNode: MathboxSelection<T> = parent[name](mbProps)
-      setSelection(thisNode)
-    } else {
-      /**
-       * Set all the props anew. It's MathBox's responsibility to diff out the
-       * unchanged props if it wants to do that optimization.
-       *
-       * (In fact, Mathbox delegates that optimization to Threestrap through
-       * some rather byzantine inheritance.)
-       */
-      selection.set(mbProps)
-    }
-  }, [parent, selection, setSelection, props, name])
-
-  useImperativeHandle(ref, () => selection, [selection])
-
-  return { selection, parent }
-}