@lukekaalim/act-three 5.15.0 → 6.0.0

package/deps.ts

@@ -0,0 +1,3 @@
+export * as act from '@lukekaalim/act/mod.ts';
+export * as recon from '@lukekaalim/act-recon/mod.ts';
+export * as three from "three";

package/elements.ts

@@ -0,0 +1,69 @@
+import { DirectionalLight, Group, Line, LineLoop, LineSegments, Mesh, Object3D, OrthographicCamera, PerspectiveCamera, PointLight, Points, Scene, SkinnedMesh, Sprite } from "three";
+import { act } from "./deps";
+import { Object3DProps, setProps } from "./props";
+import { Component, ElementType, h, Node } from "@lukekaalim/act";
+
+const handlers = new Map<string | Symbol, ThreeNodeHandler<any>>();
+
+export type ThreeNodeHandler<T extends Object3D> = {
+  type: string | Symbol,
+  create: (props: act.Props) => T,
+  setProps: (instance: T, prevProps: null | act.Props, nextProps: act.Props) => unknown,
+}
+
+export const registerElementHandler = <T extends Object3D>(handler: ThreeNodeHandler<T>): void => {
+  handlers.set(handler.type, handler);
+}
+
+export const getElementHandler = (type: act.ElementType): null | ThreeNodeHandler<Object3D> => {
+  if (typeof type === 'string' || typeof type === 'symbol') {
+    const handler = handlers.get(type);
+    if (handler)
+      return handler;
+  }
+  return null;
+}
+
+export type Newable<T> = { new (): T; };
+
+export const addSimpleElement = <T extends Object3D>(type: string | symbol, ElementClass: Newable<T>) => {
+  registerElementHandler<T>({
+    type,
+    create() {
+      return new ElementClass();
+    },
+    setProps(instance, prevProps, nextProps) {
+      setProps(instance, nextProps as Object3DProps<T>);
+    },
+  })
+}
+
+const elementMap = {
+  mesh: Mesh,
+  points: Points,
+  group: Group,
+  scene: Scene,
+  sprite: Sprite,
+  skinnedMesh: SkinnedMesh,
+
+  pointLight: PointLight,
+  directionalLight: DirectionalLight,
+
+  line: Line,
+  lineLoop: LineLoop,
+  lineSegments: LineSegments,
+
+  perspectiveCamera: PerspectiveCamera,
+  orthographicCamera: OrthographicCamera,
+} as const;
+type ElementMap = typeof elementMap;
+
+for (const key in elementMap) {
+  addSimpleElement(key, elementMap[key as keyof ElementMap] as any)
+}
+
+type ElementNodes = {
+  readonly [key in keyof ElementMap]: Component<Object3DProps<InstanceType<ElementMap[key]>>>
+};
+
+export const node: ElementNodes = Object.fromEntries(Object.keys(elementMap).map(k => [k, k as ElementType])) as ElementNodes;

package/mod.ts

@@ -0,0 +1,5 @@
+export { three } from './deps.ts';
+export * from './space.ts';
+export * from './render.ts';
+export * from './props.ts';
+export * from './elements.ts';

package/package.json

@@ -1,27 +1,15 @@
 {
   "name": "@lukekaalim/act-three",
-  "version": "5.15.0",
-  "description": "Render threejs content using act",
-  "main": "entry.js",
-  "types": "entry.d.ts",
-  "type": "module",
-  "scripts": {
-    "test": "cd ../../; npm test;",
-    "postversion": "../../scripts/postversion.sh",
-    "preversion": "npm run test"
-  },
-  "author": "Luke Kaalim",
-  "license": "ISC",
-  "peerDependencies": {
-    "three": "^0.155.0"
-  },
+  "main": "mod.ts",
+  "version": "6.0.0",
   "dependencies": {
-    "@lukekaalim/act": "^2.5.0",
-    "@lukekaalim/act-reconciler": "^3.7.5",
-    "@lukekaalim/act-renderer-core": "^3.5.5",
-    "@lukekaalim/act-web": "^2.5.5"
+    "@types/three": ">= 0.171.0",
+    "@lukekaalim/act-web": "^3.0.0",
+    "@lukekaalim/act": "^3.0.0",
+    "@lukekaalim/act-recon": "^1.0.0",
+    "@lukekaalim/act-backstage": "^1.0.0"
   },
-  "devDependencies": {
-    "@types/three": "^0.155.0"
+  "peerDependencies": {
+    "three": ">= 0.171.0"
   }
 }

package/props.ts

@@ -0,0 +1,39 @@
+import { Object3D } from "three";
+import { act, three } from "./deps";
+
+export type Object3DProps<T extends Object3D> = {
+  position?: three.Vector3,
+  scale?: three.Vector3,
+  quaternion?: three.Quaternion,
+  rotation?: three.Euler,
+
+  ref?: act.ReadonlyRef<null | three.Object3D>,
+}
+  & (T extends three.Mesh ? { geometry?: three.BufferGeometry, material?: three.Material } : {})
+  & (T extends three.Scene ? { background?: three.Color } : {})
+
+export const setProps = <T extends Object3D>(object: T, props: Object3DProps<T>) => {
+  if (props.position)
+    object.position.copy(props.position as three.Vector3);
+  if (props.scale)
+    object.scale.copy(props.scale as three.Vector3);
+  if (props.quaternion)
+    object.quaternion.copy(props.quaternion as three.Quaternion);
+  if (props.rotation)
+    object.rotation.copy(props.rotation as three.Euler);
+  if (props.ref)
+    (props.ref as Record<string, unknown>).current = object;
+  
+  if (object instanceof three.Mesh) {
+    const meshProps = props as Object3DProps<three.Mesh>;
+    object.geometry = meshProps.geometry;
+    object.material = meshProps.material;
+  }
+  if (object instanceof three.PerspectiveCamera) {
+    object.updateProjectionMatrix();
+  }
+  if (object instanceof three.Scene) {
+    const sceneProps = props as Object3DProps<three.Scene>;
+    object.background = (sceneProps.background as three.Color);
+  }
+};

package/render.ts

@@ -0,0 +1,14 @@
+import { createRenderFunction, RenderSpace, Scheduler } from "@lukekaalim/act-backstage";
+import { createWebSpace } from '@lukekaalim/act-web';
+import { createFinaleSpace } from "./space";
+
+const intervalScheduler: Scheduler<NodeJS.Timeout> = {
+  duration: 10,
+  request: func => setInterval(func, 10),
+  cancel: id => clearInterval(id),
+}
+
+export const render = createRenderFunction<NodeJS.Timeout, HTMLElement>(intervalScheduler, (tree, root) => RenderSpace.combine([
+  createWebSpace(tree, root),
+  createFinaleSpace(tree),
+]));

package/space.ts

@@ -0,0 +1,33 @@
+import { createSimpleRenderSpace } from "@lukekaalim/act-backstage/mod.ts"
+import { act, recon, three } from "./deps"
+import { setProps } from "./props";
+import { primitiveNodeTypes } from "@lukekaalim/act";
+import { getElementHandler } from "./elements";
+
+export const ThreeJS: act.Component = ({ children }) => act.h(primitiveNodeTypes.render, { type: 'threejs' }, children)
+
+export const createFinaleSpace = (tree: recon.CommitTree) => {
+  return createSimpleRenderSpace(tree, {
+    rootTypes: new Set(['threejs']),
+    create(element) {
+      const handler = getElementHandler(element.type);
+      if (handler)
+        return handler.create(element.props);
+      return null;
+    },
+    update(el, next, prev) {
+      const handler = getElementHandler(next.type);
+      if (handler)
+        handler.setProps(el, prev && prev.props, next.props);
+    },
+    link(el, parent) {
+      parent && parent.add(el)
+    },
+    destroy(el) {
+      if (el.parent)
+        el.removeFromParent()
+    },
+  })
+}
+
+export const finale = createFinaleSpace;

package/components/groups.js

@@ -1,37 +0,0 @@
-// @flow strict
-/*:: import type { Component, Ref } from '@lukekaalim/act'; */
-/*:: import type { Euler, Group, Object3D } from "three"; */
-/*:: import type { GroupProps, RefProp } from '../components'; */
-
-import { h, useEffect, useRef, useState } from '@lukekaalim/act';
-import { Matrix4, Vector3 } from "three";
-import { group } from '../components.js';
-
-/*::
-export type LookAtGroupProps = {
-  ...$Diff<GroupProps, { rotation?: Euler, ref?: RefProp<Group> }>,
-  target: Vector3,
-  deps?: mixed[],
-};
-*/
-
-export const LookAtGroup/*: Component<LookAtGroupProps>*/ = ({
-  target,
-  children,
-  position = new Vector3(0, 0, 0),
-  deps = [],
-  ...groupProps
-}) => {
-  const groupRef = useRef(null);
-
-  useEffect(() => {
-    const { current: groupNode } = groupRef;
-    if (!groupNode)
-      return;
-      
-    groupNode.setRotationFromMatrix(new Matrix4().lookAt(position, target, new Vector3(0, 1, 0)));
-    groupNode.updateMatrix();
-  }, [target.x, target.y, target.z, position.x, position.y, position.z, ...deps]);
-
-  return h(group, { ...groupProps, position, ref: groupRef }, children);
-}

package/components/lights.js

@@ -1 +0,0 @@
-// @flow strict

package/components/scene.js

@@ -1,21 +0,0 @@
-// @flow strict
-/*::
-import type { SceneProps } from "../components";
-import type { Scene, Texture } from "three";
-*/
-import { Color } from "three";
-
-/*::
-export type PropSetters<T> = {
-  [string]: (object: T, nextProp: any, prevProp: any) => void,
-}
-*/
-
-export const scenePropSetters/*: PropSetters<Scene>*/ = {
-  'background': (scene/*: Scene*/, prop/*: null | Color | Texture*/) => {
-    if (scene.background instanceof Color && prop instanceof Color)
-      scene.background.copy(prop)
-    else
-      scene.background = prop;
-  }
-}

package/components.d.ts

@@ -1,129 +0,0 @@
-import { Component, Ref } from "@lukekaalim/act";
-import {
-  AmbientLight,
-  DirectionalLight,
-  Euler,
-  Group,
-  HemisphereLight,
-  Light,
-  Line,
-  LineLoop,
-  LineSegments,
-  Mesh,
-  PerspectiveCamera,
-  PointLight,
-  Points,
-  Quaternion,
-  Scene,
-  Sprite,
-  Texture,
-  Vector3,
-} from "three";
-
-export type ReferenceProps<T> = {
-  ref?: ((reference: T) => unknown) | Ref<null | T>;
-};
-
-type PropsFromList<TObject, TPropList extends (keyof TObject)[]> = {
-  [Property in TPropList[number]]?: undefined | TObject[Property];
-};
-
-export type Object3DProps<T> =
-  & ReferenceProps<T>
-  & {
-    name?: string;
-    position?: Vector3;
-    rotation?: Euler;
-    quaternion?: Quaternion;
-    visible?: boolean;
-    scale?: Vector3;
-  };
-
-export const scene: Component<SceneProps>;
-export type SceneProps =
-  & Object3DProps<Scene>
-  & PropsFromList<Scene, [
-    "fog",
-    "backgroundBlurriness",
-    "backgroundIntensity",
-    "overrideMaterial",
-    "background",
-    "environment",
-  ]>;
-
-export const group: Component<GroupProps>;
-export type GroupProps = Object3DProps<Group>;
-
-export const mesh: Component<MeshProps>;
-export type MeshProps =
-  & Object3DProps<Mesh>
-  & PropsFromList<Mesh, ["geometry", "material"]>;
-
-export const sprite: Component<SpriteProps>;
-export type SpriteProps =
-  & Object3DProps<Sprite>
-  & PropsFromList<Sprite, ["geometry", "material", "center"]>;
-
-export const points: Component<PointsProps>;
-export type PointsProps =
-  & Object3DProps<Points>
-  & PropsFromList<Points, ["geometry", "material"]>;
-
-export const line: Component<LineProps>;
-export const lineLoop: Component<LineProps>;
-export const lineSegments: Component<LineProps>;
-export type LineProps =
-  & Object3DProps<Line>
-  & PropsFromList<Line, ["geometry", "material"]>;
-
-export type LightProps = PropsFromList<Light, [
-  "color",
-  "intensity",
-  "shadow",
-]>;
-
-export const pointLight: Component<PointerLightProps>;
-export type PointerLightProps =
-  & Object3DProps<PointLight>
-  & LightProps
-  & PropsFromList<PointLight, [
-    "distance",
-    "castShadow",
-    "decay",
-    "shadow",
-    "power",
-  ]>;
-
-export const ambientLight: Component<AmbientLightProps>;
-export type AmbientLightProps =
-  & Object3DProps<AmbientLight>
-  & LightProps;
-
-export const directionalLight: Component<DirectionalLightProps>;
-export type DirectionalLightProps =
-  & Object3DProps<DirectionalLight>
-  & LightProps
-  & PropsFromList<DirectionalLight, [
-    "shadow",
-    "target",
-  ]>;
-
-export const hemisphereLight: Component<HemisphereLightProps>;
-export type HemisphereLightProps =
-  & Object3DProps<HemisphereLight>
-  & LightProps;
-
-export const perspectiveCamera: Component<PerspectiveCameraProps>;
-export type PerspectiveCameraProps =
-  & Object3DProps<PerspectiveCamera>
-  & PropsFromList<PerspectiveCamera, [
-    "aspect",
-    "near",
-    "far",
-    "zoom",
-    "fov",
-    "focus",
-    "view",
-    "filmGauge",
-    "filmOffset",
-  ]>;

package/components.js

@@ -1,138 +0,0 @@
-// @flow strict
-/*:: import type { Component } from '@lukekaalim/act'; */
-/*:: import type {
-  Vector3,
-  Vector2,
-  Object3D,
-  Quaternion,
-  BufferGeometry,
-  Material,
-  Texture,
-  Color,
-  Group,
-  Camera,
-  PerspectiveCamera,
-  Euler,
-  Scene,
-  CubeTexture,
-  Fog,
-  Line,
-  LineSegments,
-  WebGLRenderer,
-} from "three"; */
-/*:: import * as Three from 'three'; */
-
-/*::
-export type RefProp<T> = ((reference: T) => mixed) | { current: T | any }
-
-export type Object3DProps<T> = {
-  ref?: RefProp<?T>,
-
-  name?: string,
-  position?: Vector3,
-  rotation?: Euler,
-  quaternion?: Quaternion,
-  visible?: boolean,
-  scale?: Vector3,
-};
-
-export type SceneProps = {
-  ...Object3DProps<Scene>,
-  autoUpdate?: ?boolean,
-  background?: ?(Color | Texture | CubeTexture),
-  environment?: ?Texture,
-  fog?: ?Fog,
-  overrideMaterial?: ?Material
-};
-
-export type MeshProps = {
-  ...Object3DProps<Three.Mesh>,
-  geometry?: BufferGeometry,
-  material?: Material,
-};
-export type SpriteProps = {
-  ...Object3DProps<Three.Sprite>,
-  material: Material;
-  center: Vector2;
-};
-export type InstancedMeshProps = {
-  ...MeshProps,
-  ...Object3DProps<Three.InstancedMesh>,
-};
-export type PointLightsProps = {
-  ...Object3DProps<Three.PointLight>,
-  distance?: number,
-  decay?: number,
-  intensity?: number,
-  power?: number,
-};
-export type DirectionalLightProps = {
-  ...Object3DProps<Three.DirectionalLight>,
-  distance?: number,
-  decay?: number,
-  intensity?: number,
-  power?: number,
-};
-export type AmbientLightProps = {
-  ...Object3DProps<Three.AmbientLight>,
-  intensity?: number,
-  power?: number,
-};
-export type PointsProps = {
-  ...Object3DProps<Three.Points>,
-  geometry?: BufferGeometry,
-  material?: Material,
-};
-export type GroupProps = {
-  ...Object3DProps<Three.Group>,
-  group?: ?Three.Object3D,
-}
-export type PerspectiveCameraProps = {
-  ...Object3DProps<Three.PerspectiveCamera>,
-  aspect?: number,
-  near?: number,
-  far?: number,
-  fov?: number,
-  zoom?: number,
-}
-export type OrthographicCameraProps = {
-  ...Object3DProps<Three.OrthographicCamera>,
-  aspect?: number,
-  near?: number,
-  far?: number,
-  zoom?: number,
-}
-*/
-
-export const scene = ('scene'/*: Component<SceneProps>*/);
-export const group = ('group'/*: Component<GroupProps>*/);
-
-export const perspectiveCamera = ('perspectiveCamera'/*: Component<PerspectiveCameraProps>*/);
-export const orthographicCamera = ('orthographicCamera'/*: Component<OrthographicCameraProps>*/);
-
-export const mesh = ('mesh'/*: Component<MeshProps>*/);
-export const sprite = ('sprite'/*: Component<SpriteProps>*/);
-export const instancedMesh = ('instancedMesh'/*: Component<InstancedMeshProps>*/);
-
-
-export const points = ('points'/*: Component<PointsProps>*/);
-
-/*::
-export type LineProps = {
-  ...Object3DProps<Line>,
-  geometry?: BufferGeometry,
-  material?: Material,
-}
-*/
-export const line = ('line'/*: Component<LineProps>*/);
-export const lineLoop = ('lineLoop'/*: Component<LineProps>*/);
-export const lineSegments = ('lineSegments'/*: Component<LineProps>*/);
-
-export const pointLight = ('pointLight'/*: Component<PointLightsProps>*/);
-export const ambientLight = ('ambientLight'/*: Component<AmbientLightProps>*/);
-export const hemisphereLight = ('hemisphereLight'/*: Component<PointLightsProps>*/);
-export const directionalLight = ('directionalLight'/*: Component<DirectionalLightProps>*/);
-
-
-export * from './components/groups.js';
-export * from './components/lights.js';

package/entry.d.ts

@@ -1,5 +0,0 @@
-export * from './renderer.js';
-export * from './props.js';
-export * from './components.js';
-export * from './hooks.js';
-export * from './reconciler.js';

package/entry.js

@@ -1,8 +0,0 @@
-// @flow strict
-
-export * from './reconciler.js';
-export * from './renderer.js';
-export * from './objects.js';
-export * from './components.js';
-export * from './hooks.js';
-export * from './props.js';

package/hooks/matrix.js

@@ -1,28 +0,0 @@
-// @flow strict
-/*:: import type { Component, Ref } from '@lukekaalim/act'; */
-/*:: import type { Euler, Group, Object3D } from "three"; */
-/*:: import type { GroupProps, RefProp } from '../components'; */
-
-import { h, useEffect, useRef, useState } from '@lukekaalim/act';
-import { Matrix4, Vector3 } from "three";
-import { group } from '../components.js';
-
-export const defaultUp/*: Vector3*/ = new Vector3(0, 1, 0);
-
-export const useLookAt = /*:: <T: Object3D>*/(
-  objectRef/*: Ref<?T>*/,
-  target/*: Vector3*/,
-  deps/*: mixed[]*/ = [],
-  up/*: Vector3*/ = defaultUp,
-) => {
-
-  useEffect(() => {
-    const { current: object } = objectRef;
-    if (!object)
-      return;
-      
-    object.setRotationFromMatrix(new Matrix4().lookAt(object.position, target, up));
-    object.updateMatrix();
-
-  }, [target.x, target.y, target.z, ...deps]);
-}

package/hooks.d.ts

@@ -1,19 +0,0 @@
-import { Deps, Ref } from "@lukekaalim/act";
-import { WebGLRenderer } from "three";
-
-export type WebGLOptions = {
-  antialias?: boolean,
-  alpha?: boolean,
-
-  shadowMap?: {
-    enabled?: boolean,
-    autoUpdate?: boolean,
-    type?: number,
-  }
-};
-
-export function useWebGLRenderer(
-  canvasRef: Ref<null | HTMLCanvasElement>,
-  options?: WebGLOptions,
-  deps?: Deps
-): null | WebGLRenderer

package/hooks.js

@@ -1,190 +0,0 @@
-// @flow strict
-/*:: import type { Ref } from '@lukekaalim/act'; */
-/*:: import type {
-  Camera,
-  Scene,
-  Texture,
-  Object3D,
-  PerspectiveCamera,
-  OrthographicCamera,
-} from "three"; */
-import { TextureLoader, Vector2, WebGLRenderer } from "three";
-
-import { useEffect, useState } from "@lukekaalim/act";
-import { useRef } from "@lukekaalim/act";
-
-
-/*::
-export type WebGLOptions = {
-  antialias?: boolean,
-  alpha?: boolean,
-
-  shadowMap?: {
-    enabled?: boolean,
-    autoUpdate?: boolean,
-    type?: number,
-  }
-};
-*/
-
-export const useWebGLRenderer = (
-  canvasRef/*: Ref<?HTMLCanvasElement>*/,
-  options/*: WebGLOptions*/ = {},
-  deps/*: mixed[]*/ = []
-)/*: ?WebGLRenderer*/ => {
-  const [renderer, setRenderer] = useState/*:: <?WebGLRenderer>*/(null);
-  useEffect(() => {
-    const { current: canvas } = canvasRef; 
-    if (!canvas)
-      return;
-    
-    const renderer = new WebGLRenderer({ ...options, canvas });
-    renderer.shadowMap.enabled = options.shadowMap?.enabled || false;
-    setRenderer(renderer);
-
-    return () => {
-      setRenderer(null);
-      renderer.dispose();
-    }
-  }, deps);
-
-  return renderer;
-};
-
-// Resize the canvas's resolution whenever it changes size
-// useful for when the canvas is some percentage of the screen
-// like: width: 100%
-export const useResizingRenderer = (
-  canvasRef/*: Ref<?HTMLCanvasElement>*/,
-  renderer/*: ?WebGLRenderer*/,
-  cameraRef/*: ?Ref<?PerspectiveCamera>*/ = null,
-  onResize/*: () => mixed*/ = () => {},
-)/*: ?Vector2*/ => {
-  const [size, setSize] = useState(null)
-  useEffect(() => {
-    const { current: canvas } = canvasRef; 
-    const { current: camera } = (cameraRef || { current: null })
-    if (!canvas || !renderer)
-      return null;
-    
-    const observer = new ResizeObserver((entries) => {
-      for (const entry of entries.filter(e => e.target === canvas)) {
-        const width = entry.contentBoxSize[0].inlineSize;
-        const height = entry.contentBoxSize[0].blockSize;
-        const size = new Vector2(width, height);
-        setSize(size);
-        renderer.setSize(width, height, false);
-        if (camera) {
-          camera.aspect = width / height;
-          camera.updateProjectionMatrix();
-        }
-        onResize();
-      }
-    });
-    observer.observe(canvas, { box: 'content-box' });
-
-    return () => {
-      observer.unobserve(canvas);
-      setSize(null);
-    }
-  }, [renderer]);
-
-  return size;
-}
-
-export const useAnimationFrame = (
-  onAnimate/*: ?(now: DOMHighResTimeStamp, delta: number) => mixed*/ = null,
-  deps/*: mixed[]*/ = []
-) => {
-  useEffect(() => {
-    if (!onAnimate)
-      return;
-    
-    let lastFrame = performance.now();
-    const animate = (now) => {
-      const delta = now - lastFrame;
-      lastFrame = now;
-
-      onAnimate(now, delta);
-      id = requestAnimationFrame(animate);
-    };
-    let id = requestAnimationFrame(animate);
-
-    return () => {
-      if (id)
-        cancelAnimationFrame(id);
-    }
-  }, deps);
-}
-
-export const useRenderLoop = /*:: <TCamera: Camera, TScene: Object3D>*/(
-  renderer/*: ?WebGLRenderer*/,
-  camera/*: Ref<?TCamera>*/,
-  scene/*: Ref<?TScene>*/,
-  onAnimate/*: (now: DOMHighResTimeStamp, delta: number) => mixed*/ = (_, __) => {},
-  deps/*: mixed[]*/ = []
-) => {
-  const renderFunction = renderer && ((now, delta) => {
-    onAnimate(now, delta);
-    if (camera.current && scene.current)
-      renderer.render(scene.current, camera.current);
-  });
-
-  useEffect(() => {
-    if (renderFunction)
-      renderFunction(performance.now(), 0);
-  }, [renderer, ...deps])
-
-  useAnimationFrame(renderFunction, [renderer, ...deps])
-}
-
-/*::
-export interface Disposable {
-  dispose(): void;
-}
-*/
-
-export const useDisposable = /*:: <T: Disposable>*/(
-  create/*: () => T*/,
-  deps/*: mixed[]*/ = []
-)/*: T*/ => {
-  const [resource, setResource] = useState/*:: <T>*/(() => create());
-  const disposedRef = useRef(false);
-
-  useEffect(() => {
-    const { current: disposed } = disposedRef
-
-    if (disposed) {
-      setResource(create());
-      disposedRef.current = false;
-    }
-  
-    return () => {
-      resource.dispose();
-      disposedRef.current = true;
-    }
-  }, deps);
-  return resource;
-};
-
-export const useTexture = (url/*: string*/)/*: Texture*/ => {
-  const [texture, setTexture] = useState(null)
-  useEffect(() => {
-    const loader = new TextureLoader();
-
-    const texture = loader.load(url);
-    setTexture(texture);
-    
-    return () => {
-      texture.dispose();
-    }
-  }, []);
-
-  if (!texture)
-    throw { type: 'loading' };
-  
-  return texture;
-};
-
-
-export * from './hooks/matrix.js';

package/objects.js

@@ -1,69 +0,0 @@
-// @flow strict
-/*:: import type { PropDiff } from '@lukekaalim/act-renderer-core'; */ 
-import {
-  Group,
-  Mesh,
-  PerspectiveCamera,
-  PointLight,
-  Points,
-  Scene,
-  InstancedMesh,
-  OrthographicCamera,
-  DirectionalLight,
-  HemisphereLight,
-  AmbientLight,
-  Skeleton,
-  LineSegments,
-  Line,
-  LineLoop,
-  Bone,
-  Sprite,
-  LOD,
-  Object3D,
-} from "three";
-
-export const threeObjectClasses/*: { [string]: Class<Object3D> }*/ = Object.fromEntries(Object.entries({
-  // grouping
-  Scene,
-  Group,
-  Object3D,
-
-  // lights
-  DirectionalLight,
-  HemisphereLight,
-  PointLight,
-  AmbientLight,
-
-  // camera
-  PerspectiveCamera,
-  OrthographicCamera,
-
-  // lines
-  Points,
-  LineSegments,
-  Line,
-  LineLoop,
-
-  // skinning
-  Skeleton,
-  Bone,
-
-  Sprite,
-
-  // mesh
-  Mesh,
-  InstancedMesh,
-  LOD,
-}).map(([key, value]) => [key.toLowerCase(), (value/*: any*/)]));
-
-class UnsupportedObjectTypeError extends Error {}
-
-export const createObject = (type/*: string*/)/*: Object3D*/ => {
-  const objectClass = threeObjectClasses[type.toLowerCase()];
-
-  if (!objectClass) {
-    throw new UnsupportedObjectTypeError()
-  }
-
-  return new objectClass(); 
-};

package/props.d.ts

@@ -1,7 +0,0 @@
-import { Object3D } from "three";
-import { PropDiffRegistry } from "@lukekaalim/act-renderer-core";
-
-declare function setObjectProps2(
-  diff: PropDiffRegistry,
-  object: Object3D
-): void;

package/props.js

@@ -1,160 +0,0 @@
-// @flow strict
-/*:: import type { WebGLRenderer, LightShadow } from "three"; */
-/*::
-import type { Props } from '@lukekaalim/act';
-import type { PropDiff, PropDiffRegistry } from '@lukekaalim/act-renderer-core';
-import type { CommitDiff, Diff3, DiffSet } from '@lukekaalim/act-reconciler';
-*/
-
-import { calculatePropsDiff, setRef2 } from '@lukekaalim/act-renderer-core'
-import { setHTMLProp } from "@lukekaalim/act-web";
-import {
-  BufferGeometry,
-  Camera,
-  Color,
-  DirectionalLight,
-  Euler,
-  Group,
-  Light,
-  Material,
-  Matrix3,
-  Matrix4,
-  Object3D,
-  OrthographicCamera,
-  Quaternion,
-  Scene,
-  Vector2,
-  Vector3,
-} from "three";
-import { setRef } from "@lukekaalim/act-renderer-core";
-import { scenePropSetters } from './components/scene';
-
-export const setTransformProp = (target/*: mixed*/, diff/*: PropDiff*/)/*: boolean*/ => {
-  if (target instanceof Vector2 && diff.next instanceof Vector2) {
-    target.copy(diff.next);
-    return true;
-  }
-  if (target instanceof Vector3 && diff.next instanceof Vector3) {
-    target.copy(diff.next);
-    return true;
-  }
-  if (target instanceof Matrix3 && diff.next instanceof Matrix3) {
-    target.copy(diff.next);
-    return true;
-  }
-  if (target instanceof Matrix4 && diff.next instanceof Matrix4) {
-    target.copy(diff.next);
-    return true;
-  }
-  if (target instanceof Quaternion && diff.next instanceof Quaternion) {
-    target.copy(diff.next);
-    return true;
-  }
-  if (target instanceof Euler && diff.next instanceof Euler) {
-    target.copy(diff.next);
-    return true;
-  }
-  return false;
-}
-export const setValueProp = (object/*: { [string]: mixed }*/, name/*: string*/, diff/*: PropDiff*/)/*: boolean*/ => {
-  if (typeof object[name] !== typeof diff.next)
-    return false;
-
-  switch (typeof object[name]) {
-    case 'string':
-    case 'number':
-    case 'boolean':
-      object[name] = diff.next;
-      return true;
-    default:
-      return false;
-  }
-}
-export const setMeshProp = (object/*: { [string]: mixed }*/, name/*: string*/, diff/*: PropDiff*/)/*: boolean*/ => {
-  if (object[name] instanceof BufferGeometry && diff.next instanceof BufferGeometry) {
-    object[name] = diff.next;
-    return true;
-  }
-  if (object[name] instanceof Material && diff.next instanceof Material) {
-    object[name] = diff.next;
-    return true;
-  }
-  return false;
-}
-export const setInstanceProp = (object/*: { [string]: mixed }*/, name/*: string*/, diff/*: PropDiff*/)/*: boolean*/ => {
-  if (object[name] instanceof Color) {
-    if (diff.next instanceof Color || typeof diff.next === 'string' || typeof diff.next === 'number') {
-      object[name].set(diff.next)
-      return true;
-    }
-  }
-  return false;
-}
-
-export const setLightShadowProps = (
-  diffs/*: PropDiffRegistry*/,
-  lightShadow/*: LightShadow*/,
-) => {
-  for (const [key, propDiff] of diffs.map) {
-    const target = (lightShadow/*: any*/)[key];
-    if (setTransformProp(target, propDiff))
-      continue;
-    if (setValueProp((lightShadow/*: any*/), key, propDiff))
-      continue;
-    if (target instanceof Object3D) {
-      if (propDiff.next instanceof Object3D) {
-        (lightShadow/*: any*/)[key] = propDiff.next;
-        continue;
-      }
-      const propRegistry = calculatePropsDiff((propDiff.prev/*: any*/) || {}, (propDiff.next/*: any*/) || {});
-      setObjectProps2(propRegistry, target);
-      continue;
-    }
-
-    console.warn(`Unhandled prop ${key}`, propDiff.next, target);
-  }
-}
-
-const skipProps = new Set(['ref', 'key', 'children'])
-
-export const setObjectProps2 = (
-  diff/*: PropDiffRegistry*/,
-  object/*: Object3D*/,
-) => {
-  for (const [key, propDiff] of diff.map) {
-    if (skipProps.has(key))
-      continue;
-
-    const target = (object/*: any*/)[key];
-    if (key === 'shadow' && object instanceof Light) {
-      const propRegistry = calculatePropsDiff((propDiff.prev/*: any*/) || {}, (propDiff.next/*: any*/) || {});
-      setLightShadowProps(propRegistry, target)
-      continue;
-    }
-    if (setInstanceProp((object/*: any*/), key, propDiff))
-      continue;
-
-    if (setMeshProp((object/*: any*/), key, propDiff)) {
-      continue;
-    }
-    if (setTransformProp(target, propDiff))
-      continue;
-    if (setValueProp((object/*: any*/), key, propDiff))
-      continue;
-    if (object instanceof Scene) {
-      const setter = scenePropSetters[propDiff.key];
-      if (setter) {
-        setter(object, propDiff.next, propDiff.prev);
-        continue;
-      }
-    }
-      
-
-
-    console.warn(`Unhandled prop ${key}`, propDiff.next, object);
-  }
-
-  if (object instanceof OrthographicCamera)
-    object.updateProjectionMatrix();
-
-}

package/reconciler.d.ts

@@ -1,3 +0,0 @@
-import { Element } from "@lukekaalim/act";
-
-export function render(element: Element, node: HTMLElement): void;

package/reconciler.js

@@ -1,54 +0,0 @@
-// @flow strict
-/*:: import type { Element } from '@lukekaalim/act'; */
-/*:: import type { Renderer } from '@lukekaalim/act-renderer-core'; */
-
-import { createBoundaryService, createEffectService, createReconciler, createSchedule2, createTree, createTreeService2 } from "@lukekaalim/act-reconciler";
-import { createNullRenderer2 } from "@lukekaalim/act-renderer-core";
-import { createWebRenderer, setNodeChildren } from "@lukekaalim/act-web";
-import { setNodeChildren2 } from "@lukekaalim/act-web/node";
-
-import { createObjectRenderer } from "./renderer.js";
-
-export const render = (element/*: Element*/, node/*: HTMLElement*/) => {
-  const webToThree = createNullRenderer2(() => object, ['three']);
-  const threeToWeb = createNullRenderer2(() => web, ['web']);
-
-  const object = createObjectRenderer((type) => {
-    switch (type) {
-      case 'web':
-        return threeToWeb;
-      default:
-        return null;
-    }
-  });
-  const web = createWebRenderer(type => {
-    switch (type) {
-      case 'scene':
-      case 'three':
-        return webToThree;
-      default:
-        return null;
-    }
-  });
-
-  const scheduler = createSchedule2((callback) => {
-    const id = requestAnimationFrame(() => callback(16));
-    return () => cancelAnimationFrame(id);
-  })
-  const effect = createEffectService(scheduler);
-  const boundary = createBoundaryService();
-
-  const reconciler = createReconciler(scheduler);
-  
-  reconciler.diff.subscribeDiff(set => {
-    const children = web.render(set, set.root);
-    setNodeChildren2(node, children);
-
-    reconciler.tree.live.registry = effect.runEffectRegistry(set.registry);
-
-
-    const map = boundary.calcBoundaryMap(set);
-    boundary.getRootBoundaryValue(set.suspensions, set, map);
-  })
-  reconciler.tree.mount(element);
-};

package/renderer.d.ts

@@ -1,13 +0,0 @@
-import { ElementType } from "@lukekaalim/act";
-import { Renderer2 } from "@lukekaalim/act-renderer-core";
-import { Object3D } from "three";
-
-export declare function createObjectRenderer(
-  getNextRenderer?: null | ((type: ElementType) => null | Renderer2<Object3D>)
-): Renderer2<Object3D>;
-
-/**
- * A scene renderer is just an object renderer connected to
- * a null renderer
- */
-export declare function createSceneRenderer<T>(): Renderer2<T>;

package/renderer.js

@@ -1,60 +0,0 @@
-// @flow strict
-/*:: import type { Renderer, RenderResult, PropDiff } from '@lukekaalim/act-renderer-core'; */
-/*:: import type { Component, ElementType } from '@lukekaalim/act'; */
-/*:: import type { CommitDiff, CommitID } from '@lukekaalim/act-reconciler'; */
-/*::
-import type { Object3D } from 'three';
-import type { Renderer2 } from "../core/renderer2";
-*/
-import { calculatePropsDiff, createRenderer2, createNullRenderer2, setRef2 } from '@lukekaalim/act-renderer-core';
-import { createObject } from "./objects";
-import { setObjectProps2 } from "./props";
-
-export const createObjectRenderer = (
-  getNextRenderer/*: null | ((type: ElementType) => null | Renderer2<Object3D>)*/ = null
-)/*: Renderer2<Object3D>*/ => {
-
-  const getRenderer = (set, commitId) => {
-    const commit = set.nexts.map.get(commitId) || set.prevs.get(commitId);
-    return getNextRenderer && getNextRenderer(commit.element.type) || objectRenderer;
-  }
-
-  const getNodes = (set, commitId) => {
-    const renderer = getRenderer(set, commitId)
-    return renderer.getNodes(set, commitId);
-  }
-
-  const render = (set, commitId) => {
-    const renderer = getRenderer(set, commitId)
-    return renderer.render(set, commitId);
-  }
-
-  const objectRenderer = createRenderer2({
-    remove(object) {
-      object.removeFromParent();
-    },
-    update(object, set, diff) {
-      setRef2(object, diff.commit, diff.change);
-      const prev = set.prevs.map.get(diff.commit.id);
-      const propDiff = calculatePropsDiff(prev ? prev.element.props : {}, diff.commit.element.props)
-      setObjectProps2(propDiff, object);
-    },
-    create(type) {
-      return createObject(type);
-    },
-    attach(object, set, diff, children) {
-      const missingChildren = children
-        .filter(n => n.parent !== object);
-      
-      if (missingChildren.length > 0)
-        object.add(...missingChildren);
-    }
-  }, { getNodes, render });
-
-  return objectRenderer;
-};
-
-export const createSceneRenderer = /*:: <T>*/()/*: Renderer2<T>*/ => {
-  const object = createObjectRenderer();
-  return createNullRenderer2(object);
-}