mathbox-react 0.0.10 → 0.0.12

package/build/index.d.ts

@@ -1,14 +1,19 @@
 import React, { ReactNode } from 'react';
 import { NodeType, Props, MathboxSelection, RootProps } from 'mathbox';
 
-declare type WithChildren<T> = {
+type WithChildren<T> = {
     children?: ReactNode | ReactNode[];
 } & 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];
+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>>>;
+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>> & {
+    liveProps?: LiveProps<Props[T]>;
+}>;
 /**
  * Component wrapper for mathbox [`area`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#dataarea).
  */

package/package.json

@@ -1,62 +1,57 @@
 {
   "name": "mathbox-react",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "description": "React wrapper for Mathbox",
   "license": "ISC",
   "author": "Chris Chudzicki",
   "main": "build/cjs/index.js",
   "module": "build/esm/index.js",
-  "types": "build/esm/types",
+  "types": "build/index.d.ts",
+  "files": [
+    "build"
+  ],
   "scripts": {
-    "build": "rm -rf build && rollup -c",
-    "build-storybook": "build-storybook",
+    "build": "rm -rf build && rollup --config",
+    "build-watch": "rollup --config --watch",
     "storybook": "start-storybook -p 6006",
-    "lint": "eslint \"src/**/*.{ts,tsx}\" --max-warnings=0",
-    "format": "prettier src",
-    "autofix": "npm run format -- --write && npm run lint -- --fix",
-    "prepack": "npm run build",
+    "lint": "yarn global:lint",
+    "format": "yarn global:format",
+    "autofix": "yarn global:autofix",
+    "prepack": "yarn build",
     "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",
+    "jest": "27.5.1",
+    "mathbox": "2.2.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"
   },
   "peerDependencies": {
-    "mathbox": "^2.1.4",
+    "mathbox": "^2.2.1",
     "react": "^17.0.2 || ^18.0.0",
     "three": ">=0.118.0"
   },

package/.eslintrc.js

@@ -1,72 +0,0 @@
-module.exports = {
-  extends: [
-    "react-app",
-    "react-app/jest",
-    "airbnb",
-    "airbnb-typescript",
-    "prettier",
-    "eslint:recommended",
-    "plugin:react/recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:react-hooks/recommended",
-  ],
-  plugins: ["react", "@typescript-eslint", "prettier"],
-  rules: {
-    "import/no-extraneous-dependencies": [
-      "error",
-      {
-        devDependencies: ["**/*.stories.*", "**/*.spec.*"],
-      },
-    ],
-    "import/prefer-default-export": "off",
-    "max-classes-per-file": "off",
-    "react/destructuring-assignment": "off",
-    "react/function-component-definition": [
-      "error",
-      {
-        namedComponents: "arrow-function",
-        unnamedComponents: "arrow-function",
-      },
-    ],
-    "@typescript-eslint/no-unused-vars": [
-      "warn",
-      {
-        ignoreRestSiblings: true,
-        argsIgnorePattern: "^_",
-        varsIgnorePattern: "^_",
-        caughtErrorsIgnorePattern: "^_",
-      },
-    ],
-    "@typescript-eslint/naming-convention": [
-      "error",
-      {
-        selector: "variable",
-        format: ["camelCase", "PascalCase", "UPPER_CASE"],
-        filter: {
-          regex: "^_",
-          match: false,
-        },
-      },
-    ],
-  },
-  settings: {},
-  overrides: [
-    {
-      files: ["**/*.ts?(x)"],
-      rules: {
-        "react/prop-types": "off",
-        "react/require-default-props": "off",
-        "react/jsx-props-no-spreading": "off",
-      },
-    },
-    {
-      files: ["**/*.stories.*"],
-      rules: {
-        "import/no-anonymous-default-export": "off",
-      },
-    },
-  ],
-  parserOptions: {
-    project: "./tsconfig.base.json",
-  },
-}

package/.github/workflows/lint.yaml

@@ -1,20 +0,0 @@
-name: tests
-
-on:
-  pull_request:
-    branches: [main]
-
-jobs:
-  linting_and_tests:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
-        with:
-          node-version: "16"
-          cache: "npm"
-          cache-dependency-path: package-lock.json
-      - run: npm ci
-      - run: npm run format
-      - run: npm run lint
-      - run: npm run test

package/.prettierrc

@@ -1 +0,0 @@
-semi: false

package/.storybook/main.js

@@ -1,9 +0,0 @@
-module.exports = {
-  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
-  addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
-  ],
-  framework: "@storybook/react",
-};

package/.storybook/preview.js

@@ -1,11 +0,0 @@
-import "mathbox/build/mathbox.css";
-
-export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
-  },
-};

package/LICENSE

@@ -1,29 +0,0 @@
-BSD 3-Clause License
-
-Copyright (c) 2022, Chris Chudzicki
-All rights reserved.
-
-Redistribution and use in source and binary forms, with or without
-modification, are permitted provided that the following conditions are met:
-
-1. Redistributions of source code must retain the above copyright notice, this
-   list of conditions and the following disclaimer.
-
-2. Redistributions in binary form must reproduce the above copyright notice,
-   this list of conditions and the following disclaimer in the documentation
-   and/or other materials provided with the distribution.
-
-3. Neither the name of the copyright holder nor the names of its
-   contributors may be used to endorse or promote products derived from
-   this software without specific prior written permission.
-
-THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
-AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
-IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
-DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
-FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
-DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
-SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
-CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
-OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/README.md

@@ -1,6 +0,0 @@
-To run the example, clone this repo and:
-```
-cd example
-npm install
-npm run start
-```

package/babel.config.js

@@ -1,3 +0,0 @@
-module.exports = {
-  presets: [["@babel/preset-env", { targets: { node: "current" } }]],
-}

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/cjs/types/components/components.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/build/cjs/types/stories/utils.d.ts

@@ -1,5 +0,0 @@
-import React from "react";
-import { ContainedMathbox } from "../components";
-declare type MathboxProps = React.ComponentProps<typeof ContainedMathbox>;
-export declare const CustomMathbox: (props: MathboxProps) => JSX.Element;
-export {};

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/build/esm/types/components/components.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/build/esm/types/stories/utils.d.ts

@@ -1,5 +0,0 @@
-import React from "react";
-import { ContainedMathbox } from "../components";
-declare type MathboxProps = React.ComponentProps<typeof ContainedMathbox>;
-export declare const CustomMathbox: (props: MathboxProps) => JSX.Element;
-export {};

package/jest.config.js

@@ -1,12 +0,0 @@
-module.exports = {
-  preset: "ts-jest",
-  transform: {
-    "^.+\\.(ts|tsx)?$": "ts-jest",
-    "^.+\\.(js|jsx)$": "babel-jest",
-  },
-  transformIgnorePatterns: [
-    "node_modules/(?!(mathbox|threestrap|three|shadergraph)/)",
-  ],
-  testEnvironment: "jsdom",
-  setupFiles: ["./src/testSetup.ts"],
-}

package/rollup.config.js

@@ -1,38 +0,0 @@
-import resolve from "@rollup/plugin-node-resolve";
-import commonjs from "@rollup/plugin-commonjs";
-import typescript from "@rollup/plugin-typescript";
-import dts from "rollup-plugin-dts";
-import { terser } from "rollup-plugin-terser";
-import peerDepsExternal from "rollup-plugin-peer-deps-external";
-import packageJson from "./package.json";
-
-export default [
-  {
-    input: "src/index.ts",
-    output: [
-      {
-        file: packageJson.main,
-        format: "cjs",
-        sourcemap: true,
-      },
-      {
-        file: packageJson.module,
-        format: "esm",
-        sourcemap: true,
-      },
-    ],
-    plugins: [
-      peerDepsExternal(),
-      resolve(),
-      commonjs(),
-      typescript({ tsconfig: "./tsconfig.json" }),
-      terser(),
-    ],
-    external: ["react", "react-dom", "styled-components"],
-  },
-  {
-    input: "build/esm/types/index.d.ts",
-    output: [{ file: "build/index.d.ts", format: "esm" }],
-    plugins: [dts()],
-  },
-];

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)

package/src/components/ContainedMathbox.tsx

@@ -1,38 +0,0 @@
-import React, { useState, forwardRef } from "react"
-import { RootProps, MathBoxOptions, MathboxSelection } from "mathbox"
-import Mathbox from "./Mathbox"
-import { WithChildren } from "./types"
-
-type Props = WithChildren<
-  {
-    containerId?: string
-    containerClass?: string
-    containerStyle?: React.CSSProperties
-    options?: MathBoxOptions
-  } & RootProps
->
-
-const ContainedMathbox = (
-  props: Props,
-  ref: React.Ref<MathboxSelection<"root">>
-) => {
-  const { children, containerId, containerClass, containerStyle, ...others } =
-    props
-  const [container, setContainer] = useState<HTMLDivElement | null>(null)
-  return (
-    <div
-      ref={setContainer}
-      id={containerId}
-      className={containerClass}
-      style={containerStyle}
-    >
-      {container && (
-        <Mathbox ref={ref} container={container} {...others}>
-          {children}
-        </Mathbox>
-      )}
-    </div>
-  )
-}
-
-export default forwardRef(ContainedMathbox)

package/src/components/Mathbox.tsx

@@ -1,63 +0,0 @@
-import React, {
-  useEffect,
-  useState,
-  forwardRef,
-  useImperativeHandle,
-} 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<
-  {
-    container: HTMLElement
-    options?: MathBoxOptions
-  } & RootProps
->
-
-const Mathbox = (
-  props: Props,
-  ref: React.Ref<MathboxSelection<"root"> | null>
-) => {
-  const { container, children, options, ...rootProps } = props
-  const mathboxOptions = useDeepCompareMemo(options ?? {}, {})
-  const [selection, setSelection] = useState<MathboxSelection<"root"> | null>(
-    null
-  )
-  useEffect(() => {
-    if (!container) return () => {}
-
-    const mathbox = mathBox({
-      ...mathboxOptions,
-      element: container,
-    })
-    setSelection(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()
-      setSelection(null)
-    }
-  }, [container, mathboxOptions])
-
-  useEffect(() => {
-    if (!selection) return
-    selection.set(rootProps)
-  }, [selection, rootProps])
-
-  useImperativeHandle(ref, () => selection, [selection])
-  return (
-    <MathboxAPIContext.Provider value={selection}>
-      {children}
-    </MathboxAPIContext.Provider>
-  )
-}
-
-export default forwardRef(Mathbox)

package/src/components/MathboxNodeContext.ts

@@ -1,6 +0,0 @@
-import { createContext } from "react"
-import { MathboxSelection, NodeType } from "mathbox"
-
-const MathboxAPIContext = createContext<MathboxSelection<NodeType> | null>(null)
-
-export default MathboxAPIContext