mathbox-react 0.0.11-rc → 0.0.12

package/src/components/components.tsx

@@ -1,443 +0,0 @@
-import React, {
-  forwardRef,
-  useRef,
-  useContext,
-  useEffect,
-  useReducer,
-  useImperativeHandle,
-} from "react"
-import { Props, NodeType, MathboxSelection } from "mathbox"
-import MathboxAPIContext from "./MathboxNodeContext"
-import { WithChildren } from "./types"
-import {
-  isRootDestroyed,
-  isSelectionParent,
-  canNodeHaveChildren,
-  ParentNodeTypes,
-  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>> & {
-      liveProps?: LiveProps<Props[T]>
-    }
->
-
-const mathboxComponentFactory = <T extends NodeType>(
-  type: T
-): MathboxComponent<T> => {
-  const canHaveChildren = canNodeHaveChildren(type)
-  const componentName = capitalize(type)
-  const Comp = (
-    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) {
-          selection.current.remove()
-          selection.current = null
-        }
-      },
-      []
-    )
-    useImperativeHandle(ref, () => selection.current)
-
-    const { children, liveProps, ...others } = props
-    useEffect(() => {
-      if (!parent) return
-      if (isRootDestroyed(parent)) {
-        forceUpdate()
-        return
-      }
-      if (selection.current) {
-        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-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)
-      }
-      prevLiveProps.current = liveProps
-    }, [parent, others, liveProps])
-    if (!canHaveChildren) {
-      if (props.children) {
-        throw new Error(`Component <${componentName} /> cannot have children.`)
-      }
-      return null
-    }
-    return (
-      <MathboxAPIContext.Provider value={selection.current}>
-        {props.children}
-      </MathboxAPIContext.Provider>
-    )
-  }
-  /**
-   * The line below gives a TS error without explicit any.
-   * But if you replace each generic T above with a specific instance, e.g.,
-   * 'cartesian', there is no error.
-   *
-   * So an alternative without "any" would be be to copy the definition of Comp
-   * with all ~64 different node types.
-   *
-   * I'm not 100% sure why there's a ts error here, but the above indicates to
-   * me that this is actually type-safe. And I do not want that much copy pasta.
-   * So instead, use the any and put explicit return type on the factory.
-   */
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  return forwardRef(Comp) as any
-}
-
-/**
- * Component wrapper for mathbox [`area`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#dataarea).
- */
-export const Area = mathboxComponentFactory("area")
-
-/**
- * Component wrapper for mathbox [`array`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#dataarray).
- */
-const MBArray = mathboxComponentFactory("array")
-
-export { MBArray as Array }
-
-/**
- * Component wrapper for mathbox [`axis`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#drawaxis).
- */
-export const Axis = mathboxComponentFactory("axis")
-
-/**
- * Component wrapper for mathbox [`camera`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#cameracamera).
- */
-export const Camera = mathboxComponentFactory("camera")
-
-/**
- * Component wrapper for mathbox [`cartesian`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#viewcartesian).
- */
-export const Cartesian = mathboxComponentFactory("cartesian")
-
-/**
- * Component wrapper for mathbox [`cartesian4`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#viewcartesian4).
- */
-export const Cartesian4 = mathboxComponentFactory("cartesian4")
-
-/**
- * Component wrapper for mathbox [`clamp`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#operatorclamp).
- */
-export const Clamp = mathboxComponentFactory("clamp")
-
-/**
- * Component wrapper for mathbox [`clock`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#timeclock).
- */
-export const Clock = mathboxComponentFactory("clock")
-
-/**
- * Component wrapper for mathbox [`compose`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#rttcompose).
- */
-export const Compose = mathboxComponentFactory("compose")
-
-/**
- * Component wrapper for mathbox [`dom`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#overlaydom).
- */
-export const Dom = mathboxComponentFactory("dom")
-
-/**
- * Component wrapper for mathbox [`face`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#drawface).
- */
-export const Face = mathboxComponentFactory("face")
-
-/**
- * Component wrapper for mathbox [`format`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#textformat).
- */
-export const Format = mathboxComponentFactory("format")
-
-/**
- * Component wrapper for mathbox [`fragment`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#transformfragment).
- */
-export const Fragment = mathboxComponentFactory("fragment")
-
-/**
- * Component wrapper for mathbox [`grid`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#drawgrid).
- */
-export const Grid = mathboxComponentFactory("grid")
-
-/**
- * Component wrapper for mathbox [`group`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#basegroup).
- */
-export const Group = mathboxComponentFactory("group")
-
-/**
- * Component wrapper for mathbox [`grow`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#operatorgrow).
- */
-export const Grow = mathboxComponentFactory("grow")
-
-/**
- * Component wrapper for mathbox [`html`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#overlayhtml).
- */
-export const Html = mathboxComponentFactory("html")
-
-/**
- * Component wrapper for mathbox [`inherit`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#baseinherit).
- */
-export const Inherit = mathboxComponentFactory("inherit")
-
-/**
- * Component wrapper for mathbox [`interval`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#datainterval).
- */
-export const Interval = mathboxComponentFactory("interval")
-
-/**
- * Component wrapper for mathbox [`join`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#operatorjoin).
- */
-export const Join = mathboxComponentFactory("join")
-
-/**
- * Component wrapper for mathbox [`label`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#textlabel).
- */
-export const Label = mathboxComponentFactory("label")
-
-/**
- * Component wrapper for mathbox [`layer`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#transformlayer).
- */
-export const Layer = mathboxComponentFactory("layer")
-
-/**
- * Component wrapper for mathbox [`lerp`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#operatorlerp).
- */
-export const Lerp = mathboxComponentFactory("lerp")
-
-/**
- * Component wrapper for mathbox [`line`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#drawline).
- */
-export const Line = mathboxComponentFactory("line")
-
-/**
- * Component wrapper for mathbox [`mask`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#transformmask).
- */
-export const Mask = mathboxComponentFactory("mask")
-
-/**
- * Component wrapper for mathbox [`matrix`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#datamatrix).
- */
-export const Matrix = mathboxComponentFactory("matrix")
-
-/**
- * Component wrapper for mathbox [`memo`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#operatormemo).
- */
-export const Memo = mathboxComponentFactory("memo")
-
-/**
- * Component wrapper for mathbox [`move`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#presentmove).
- */
-export const Move = mathboxComponentFactory("move")
-
-/**
- * Component wrapper for mathbox [`now`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#timenow).
- */
-export const Now = mathboxComponentFactory("now")
-
-/**
- * Component wrapper for mathbox [`play`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#presentplay).
- */
-export const Play = mathboxComponentFactory("play")
-
-/**
- * Component wrapper for mathbox [`point`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#drawpoint).
- */
-export const Point = mathboxComponentFactory("point")
-
-/**
- * Component wrapper for mathbox [`polar`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#viewpolar).
- */
-export const Polar = mathboxComponentFactory("polar")
-
-/**
- * Component wrapper for mathbox [`present`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#presentpresent).
- */
-export const Present = mathboxComponentFactory("present")
-
-/**
- * Component wrapper for mathbox [`readback`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#operatorreadback).
- */
-export const Readback = mathboxComponentFactory("readback")
-
-/**
- * Component wrapper for mathbox [`repeat`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#operatorrepeat).
- */
-export const Repeat = mathboxComponentFactory("repeat")
-
-/**
- * Component wrapper for mathbox [`resample`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#operatorresample).
- */
-export const Resample = mathboxComponentFactory("resample")
-
-/**
- * Component wrapper for mathbox [`retext`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#textretext).
- */
-export const Retext = mathboxComponentFactory("retext")
-
-/**
- * Component wrapper for mathbox [`reveal`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#presentreveal).
- */
-export const Reveal = mathboxComponentFactory("reveal")
-
-/**
- * Component wrapper for mathbox [`rtt`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#rttrtt).
- */
-export const Rtt = mathboxComponentFactory("rtt")
-
-/**
- * Component wrapper for mathbox [`scale`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#datascale).
- */
-export const Scale = mathboxComponentFactory("scale")
-
-/**
- * Component wrapper for mathbox [`shader`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#shadershader).
- */
-export const Shader = mathboxComponentFactory("shader")
-
-/**
- * Component wrapper for mathbox [`slice`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#operatorslice).
- */
-export const Slice = mathboxComponentFactory("slice")
-
-/**
- * Component wrapper for mathbox [`slide`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#presentslide).
- */
-export const Slide = mathboxComponentFactory("slide")
-
-/**
- * Component wrapper for mathbox [`spherical`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#viewspherical).
- */
-export const Spherical = mathboxComponentFactory("spherical")
-
-/**
- * Component wrapper for mathbox [`split`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#operatorsplit).
- */
-export const Split = mathboxComponentFactory("split")
-
-/**
- * Component wrapper for mathbox [`spread`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#operatorspread).
- */
-export const Spread = mathboxComponentFactory("spread")
-
-/**
- * Component wrapper for mathbox [`step`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#presentstep).
- */
-export const Step = mathboxComponentFactory("step")
-
-/**
- * Component wrapper for mathbox [`stereographic`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#viewstereographic).
- */
-export const Stereographic = mathboxComponentFactory("stereographic")
-
-/**
- * Component wrapper for mathbox [`stereographic4`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#viewstereographic4).
- */
-export const Stereographic4 = mathboxComponentFactory("stereographic4")
-
-/**
- * Component wrapper for mathbox [`strip`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#drawstrip).
- */
-export const Strip = mathboxComponentFactory("strip")
-
-/**
- * Component wrapper for mathbox [`subdivide`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#operatorsubdivide).
- */
-export const Subdivide = mathboxComponentFactory("subdivide")
-
-/**
- * Component wrapper for mathbox [`surface`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#drawsurface).
- */
-export const Surface = mathboxComponentFactory("surface")
-
-/**
- * Component wrapper for mathbox [`swizzle`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#operatorswizzle).
- */
-export const Swizzle = mathboxComponentFactory("swizzle")
-
-/**
- * Component wrapper for mathbox [`text`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#texttext).
- */
-export const Text = mathboxComponentFactory("text")
-
-/**
- * Component wrapper for mathbox [`ticks`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#drawticks).
- */
-export const Ticks = mathboxComponentFactory("ticks")
-
-/**
- * Component wrapper for mathbox [`transform`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#transformtransform).
- */
-export const Transform = mathboxComponentFactory("transform")
-
-/**
- * Component wrapper for mathbox [`transform4`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#transformtransform4).
- */
-export const Transform4 = mathboxComponentFactory("transform4")
-
-/**
- * Component wrapper for mathbox [`transpose`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#operatortranspose).
- */
-export const Transpose = mathboxComponentFactory("transpose")
-
-/**
- * Component wrapper for mathbox [`unit`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#baseunit).
- */
-export const Unit = mathboxComponentFactory("unit")
-
-/**
- * Component wrapper for mathbox [`vector`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#drawvector).
- */
-export const Vector = mathboxComponentFactory("vector")
-
-/**
- * Component wrapper for mathbox [`vertex`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#transformvertex).
- */
-export const Vertex = mathboxComponentFactory("vertex")
-
-/**
- * Component wrapper for mathbox [`view`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#viewview).
- */
-export const View = mathboxComponentFactory("view")
-
-/**
- * Component wrapper for mathbox [`volume`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#datavolume).
- */
-export const Volume = mathboxComponentFactory("volume")
-
-/**
- * Component wrapper for mathbox [`voxel`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#datavoxel).
- */
-export const Voxel = mathboxComponentFactory("voxel")

package/src/components/index.ts

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

package/src/components/types.ts

@@ -1,9 +0,0 @@
-import type { ReactNode } from "react"
-import type { MathboxSelection, NodeType } from "mathbox"
-import React from "react"
-
-export type WithChildren<T> = {
-  children?: ReactNode | ReactNode[]
-} & T
-
-export type MathboxRef<T extends NodeType> = React.Ref<MathboxSelection<T>>

package/src/components/util.ts

@@ -1,106 +0,0 @@
-/* eslint-disable no-underscore-dangle */
-import isEqual from "lodash/isEqual"
-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/src/index.ts

@@ -1 +0,0 @@
-export * from "./components"

package/src/stories/Cartesian.stories.tsx

@@ -1,36 +0,0 @@
-import React from "react"
-import { Story, Meta } from "@storybook/react"
-
-import { CustomMathbox as Mathbox } from "./utils"
-import { Cartesian, Grid } from "../components/components"
-
-export default {
-  title: "Cartesian",
-  component: Cartesian,
-  argTypes: {
-    range: {
-      type: "array",
-      default: [
-        [-1, 1],
-        [-1, 1],
-        [-1, 1],
-        [-1, 1],
-      ],
-    },
-    scale: {
-      type: "array",
-      default: [1, 1, 1],
-    },
-  },
-} as Meta<typeof Cartesian>
-
-const Template: Story<React.ComponentProps<typeof Cartesian>> = (args) => (
-  <Mathbox containerStyle={{ height: 450 }}>
-    <Cartesian {...args}>
-      <Grid />
-    </Cartesian>
-  </Mathbox>
-)
-
-export const DefaultCartesian = Template.bind({})
-DefaultCartesian.args = {}

package/src/stories/Grid.stories.tsx

@@ -1,38 +0,0 @@
-import React from "react"
-import { Story, Meta } from "@storybook/react"
-
-import { CustomMathbox as Mathbox } from "./utils"
-import { Grid } from "../components"
-
-export default {
-  title: "Grid",
-  component: Grid,
-  argTypes: {
-    color: {
-      type: "string",
-      default: "rgb(128, 128, 128)",
-    },
-    axes: {
-      type: "string",
-      default: "xy",
-    },
-  },
-} as Meta<typeof Grid>
-
-const Template: Story<React.ComponentProps<typeof Grid>> = (args) => (
-  <Mathbox containerStyle={{ height: 450 }}>
-    <Grid {...args} />
-  </Mathbox>
-)
-
-export const DefaultGrid = Template.bind({})
-DefaultGrid.args = {}
-
-export const GridXY = Template.bind({})
-GridXY.args = { axes: "xy" }
-
-export const GridYZ = Template.bind({})
-GridYZ.args = { axes: "yz" }
-
-export const GridZX = Template.bind({})
-GridZX.args = { axes: "zx" }

package/src/stories/Mathbox.stories.tsx

@@ -1,16 +0,0 @@
-import React from "react"
-import { Story, Meta } from "@storybook/react"
-
-import { ContainedMathbox } from "../components"
-
-export default {
-  title: "Mathbox",
-  component: ContainedMathbox,
-  argTypes: {},
-} as Meta<typeof ContainedMathbox>
-
-const Template: Story<React.ComponentProps<typeof ContainedMathbox>> = () => (
-  <ContainedMathbox />
-)
-
-export const HelloWorld = Template.bind({})