mathbox-react 0.0.9-dev-3 → 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

@@ -1,4 +1,4 @@
-import { MathboxSelection } from "mathbox";
+import { MathboxSelection, NodeType } from "mathbox";
 export declare const isRootDestroyed: (selection: MathboxSelection) => boolean;
 /**
  * Check that parent is actually the selection's parent.
@@ -16,3 +16,23 @@ export declare const isRootDestroyed: (selection: MathboxSelection) => boolean;
  * 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-3",
+  "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.3",
+    "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.3",
+    "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)
@@ -238,3 +256,21 @@ describe("Cartesian", () => {
     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,15 +9,24 @@ import React, {
 import { Props, NodeType, MathboxSelection } from "mathbox"
 import MathboxAPIContext from "./MathboxNodeContext"
 import { WithChildren } from "./types"
-import { isRootDestroyed, isSelectionParent } from "./util"
+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>
@@ -29,6 +38,7 @@ const mathboxComponentFactory = <T extends NodeType>(
       () => () => {
         if (selection.current) {
           selection.current.remove()
+          selection.current = null
         }
       },
       []
@@ -58,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

@@ -1,5 +1,7 @@
 /* eslint-disable no-underscore-dangle */
-import { MathboxSelection } from "mathbox"
+import { isEqual } from "lodash"
+import { useRef, useMemo } from "react"
+import { MathboxSelection, NodeType } from "mathbox"
 
 type WithPrivateUp = MathboxSelection & { _up?: WithPrivateUp }
 
@@ -41,3 +43,64 @@ export const isSelectionParent = (
   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
+}