@lukekaalim/act-three 5.6.4 → 5.8.0

package/objects.js

@@ -1,6 +1,5 @@
 // @flow strict
-/*:: import type { Object3D } from "three"; */
-/*:: import type { PropDiff } from '@lukekaalim/act-reconciler'; */ 
+/*:: import type { PropDiff } from '@lukekaalim/act-renderer-core'; */ 
 import {
   Group,
   Mesh,
@@ -20,12 +19,14 @@ import {
   Bone,
   Sprite,
   LOD,
+  Object3D,
 } from "three";
 
 export const threeObjectClasses/*: { [string]: Class<Object3D> }*/ = Object.fromEntries(Object.entries({
   // grouping
   Scene,
   Group,
+  Object3D,
 
   // lights
   DirectionalLight,
@@ -55,12 +56,13 @@ export const threeObjectClasses/*: { [string]: Class<Object3D> }*/ = Object.from
   LOD,
 }).map(([key, value]) => [key.toLowerCase(), (value/*: any*/)]));
 
-export const createObject = (type/*: string*/)/*: null | Object3D*/ => {
+class UnsupportedObjectTypeError extends Error {}
+
+export const createObject = (type/*: string*/)/*: Object3D*/ => {
   const objectClass = threeObjectClasses[type.toLowerCase()];
 
   if (!objectClass) {
-    console.warn(`Unknown object type "${type}"`)
-    return null;
+    throw new UnsupportedObjectTypeError()
   }
 
   return new objectClass(); 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lukekaalim/act-three",
-  "version": "5.6.4",
+  "version": "5.8.0",
   "description": "Render threejs content using act",
   "main": "entry.js",
   "type": "module",
@@ -12,12 +12,12 @@
   "author": "Luke Kaalim",
   "license": "ISC",
   "peerDependencies": {
-    "three": "^0.141.0"
+    "three": "^0.149.0"
   },
   "dependencies": {
-    "@lukekaalim/act": "^2.2.0",
+    "@lukekaalim/act": "^2.5.0",
+    "@lukekaalim/act-reconciler": "^3.1.0",
     "@lukekaalim/act-renderer-core": "^3.2.2",
-    "@lukekaalim/act-reconciler": "^3.0.1",
     "@lukekaalim/act-web": "^2.0.1"
   }
 }

package/props.js

@@ -1,78 +1,135 @@
 // @flow strict
-/*:: import type { Object3D, WebGLRenderer } from "three"; */
-/*:: import type { Props, PropDiff, CommitDiff } from '@lukekaalim/act-reconciler'; */
+/*:: 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 } from "@lukekaalim/act-reconciler";
+import { calculatePropsDiff, setRef2 } from '@lukekaalim/act-renderer-core'
 import { setHTMLProp } from "@lukekaalim/act-web";
-import { DirectionalLight, Group, Light, OrthographicCamera } from "three";
+import {
+  BufferGeometry,
+  Camera,
+  DirectionalLight,
+  Euler,
+  Group,
+  Light,
+  Material,
+  Matrix3,
+  Matrix4,
+  Object3D,
+  OrthographicCamera,
+  Quaternion,
+  Vector2,
+  Vector3,
+} from "three";
 import { setRef } from "@lukekaalim/act-renderer-core";
 
-export const setObjectProp = ({ key, prev, next }/*: PropDiff*/, object/*: Object3D*/)/*: void*/ => {
-  switch (key) {
-    case 'position':
-      return object.position.copy((next/*: any*/));
-    case 'quaternion':
-      return void object.quaternion.copy((next/*: any*/));
-    case 'rotation':
-      return object.rotation.copy((next/*: any*/));
-    case 'scale':
-      return object.scale.copy((next/*: any*/));
-    case 'matrix':
-      return void object.matrix.copy((next/*: any*/));
-    default:
-      (object/*: any*/)[key] = next; break;
+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;
 
-export const setGroupProps = (diff/*: CommitDiff*/, group/*: Group*/) => {
-  const diffs = calculatePropsDiff(diff.prev.element.props, diff.next.element.props);
-  for (const [key, diff] of diffs) {
-    switch (key) {
-      case 'group':
-        if (diff.prev && diff.prev !== diff.next)
-          group.remove((diff.prev/*: any*/));
-        if (diff.next)
-          group.add((diff.next/*: any*/));
-        break;
-      default:
-        setObjectProp(diff, group); break;
-    }
+  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 setDirectionalLightProps = (diff/*: CommitDiff*/, light/*: DirectionalLight*/) => {
-  const diffs = calculatePropsDiff(diff.prev.element.props, diff.next.element.props);
-  for (const [key, diff] of diffs) {
-    switch (key) {
-      case 'shadow': {
-        const diffs = calculatePropsDiff((diff.prev/*: any*/) || {}, (diff.next/*: any*/) || {});
-        for (const [key, diff] of diffs)
-          (light/*: any*/).shadow[key] = diff.next;
-        break;
+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;
       }
-      default:
-        setObjectProp(diff, light); break;
+      const propRegistry = calculatePropsDiff((propDiff.prev/*: any*/) || {}, (propDiff.next/*: any*/) || {});
+      setObjectProps2(propRegistry, target);
+      continue;
     }
+
+    console.warn(`Unhandled prop ${key}`, propDiff.next, target);
   }
 }
 
-export const setObjectProps = (diff/*: CommitDiff*/, object/*: ?Object3D*/)/*: void*/ => {
-  setRef(object, diff);
-  if (diff.next.pruned || !object)
-    return;
-  if (object instanceof Group)
-    return setGroupProps(diff, object);
-  if (object instanceof DirectionalLight)
-    return setDirectionalLightProps(diff, object);
-  if (object instanceof OrthographicCamera) {
-    const diffs = calculatePropsDiff(diff.prev.element.props, diff.next.element.props);
-    for (const [key, diff] of diffs)
-      setObjectProp(diff, object);
-    object.updateProjectionMatrix();
-  }
-  else {
-    const diffs = calculatePropsDiff(diff.prev.element.props, diff.next.element.props);
-    for (const [key, diff] of diffs)
-      setObjectProp(diff, object);
+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 (setMeshProp((object/*: any*/), key, propDiff)) {
+      continue;
+    }
+    if (setTransformProp(target, propDiff))
+      continue;
+    if (setValueProp((object/*: any*/), key, propDiff))
+      continue;
+
+    console.warn(`Unhandled prop ${key}`, propDiff.next, object);
   }
-};
+
+  if (object instanceof OrthographicCamera)
+    object.updateProjectionMatrix();
+}

package/reconciler.js

@@ -2,31 +2,62 @@
 /*:: import type { Element } from '@lukekaalim/act'; */
 /*:: import type { Renderer } from '@lukekaalim/act-renderer-core'; */
 
-import { createTree } from "@lukekaalim/act-reconciler";
+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 { createSceneRenderer } from "./renderer";
+import { createObjectRenderer } from "./renderer.js";
 
 export const render = (element/*: Element*/, node/*: HTMLElement*/) => {
+  const webToThree = createNullRenderer2(() => object, ['three']);
+  const threeToWeb = createNullRenderer2(() => web, ['web']);
 
-  const scene = createSceneRenderer();
-  const web = createWebRenderer(diff => {
-    switch (diff.next.element.type) {
+  const object = createObjectRenderer((type) => {
+    switch (type) {
+      case 'web':
+        return threeToWeb;
+      default:
+        return null;
+    }
+  });
+  const web = createWebRenderer(type => {
+    switch (type) {
       case 'scene':
-        return scene.render(diff);
+      case 'three':
+        return webToThree;
       default:
-        return web.render(diff);
+        return null;
     }
   });
-  const onDiff = diff => {
-    const children = web.render(diff);
-    setNodeChildren(diff, node, children)
-  };
-
-  const options = {
-    onDiff,
-    scheduleWork: (c) => requestAnimationFrame(() => void c()),
-    cancelWork: (t) => cancelAnimationFrame(t),
-  };
-  const tree = createTree(element, options);
+
+  const scheduler = createSchedule2((callback) => {
+    const id = requestAnimationFrame(() => callback(5));
+    return () => cancelAnimationFrame(id);
+  })
+  const effect = createEffectService(scheduler);
+  const boundary = createBoundaryService();
+
+  const reconciler = createReconciler(scheduler);
+  
+  reconciler.diff.subscribeDiff(set => {
+    performance.mark('act:three:nodes:start')
+    const children = web.render(set, set.root);
+    setNodeChildren2(node, children);
+    performance.mark('act:three:nodes:end')
+    performance.measure('act:three:nodes', 'act:three:nodes:start', 'act:three:nodes:end')
+
+    performance.mark('act:three:effects:start')
+    reconciler.tree.live.registry = effect.runEffectRegistry(set.registry);
+    performance.mark('act:three:effects:end')
+    performance.measure('act:three:effects', 'act:three:effects:start', 'act:three:effects:end')
+
+
+    performance.mark('act:three:suspense:start')
+    const map = boundary.calcBoundaryMap(set);
+    boundary.getRootBoundaryValue(set.suspensions, set, map);
+    performance.mark('act:three:suspense:end')
+    performance.measure('act:three:suspense', 'act:three:suspense:start', 'act:three:suspense:end')
+  })
+  reconciler.tree.mount(element);
 };

package/renderer.js

@@ -1,48 +1,61 @@
 // @flow strict
-/*:: import type { Renderer, RenderResult} from '@lukekaalim/act-renderer-core'; */
-/*:: import type { Component } from '@lukekaalim/act'; */
-/*:: import type { CommitDiff, PropDiff, CommitID } from '@lukekaalim/act-reconciler'; */
-/*:: import type { Object3D } from 'three'; */
-import { createManagedRenderer, createNullRenderer } from '@lukekaalim/act-renderer-core';
+/*:: 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, createManagedRenderer, createNullRenderer, createNullRenderer2, setRef2 } from '@lukekaalim/act-renderer-core';
+import { createRenderer2 } from '@lukekaalim/act-renderer-core/renderer2';
 import { createObject } from "./objects";
-import { setObjectProps } from "./props";
+import { setObjectProps2 } from "./props";
 
 export const createObjectRenderer = (
-  next/*: ?((diff: CommitDiff, parent: ?Object3D) => RenderResult<Object3D>[])*/ = null,
-  create/*: string => null | Object3D*/ = createObject,
-  setProps/*: (CommitDiff, Object3D) => void*/ = setObjectProps,
-)/*: Renderer<Object3D>*/ => {
-  const objectRenderer = createManagedRenderer({
+  getNextRenderer/*: null | ((type: ElementType) => null | Renderer2<Object3D>)*/ = null
+)/*: Renderer2<Object3D>*/ => {
+
+  const getRenderer = (set, commitId) => {
+    const commit = set.nexts.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, diff, children) {
-      if (typeof diff.next.element.type === 'function')
-        return;
-      setProps(diff, object);
+    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
-        .map(c => c.node)
         .filter(n => n.parent !== object);
+      
       if (missingChildren.length > 0)
         object.add(...missingChildren);
-    },
-    add(diff) {
-      if (typeof diff.next.element.type === 'function')
-        return null;
-      if (diff.next.element.type === 'act:context')
-        return null;
-      return create(diff.next.element.type);
-    },
-    next(diff, parent) {
-      if (next)
-        return next(diff, parent)
-      return objectRenderer.render(diff);
     }
-  });
+  }, { getNodes, render });
+
   return objectRenderer;
 };
 
-export const createSceneRenderer = /*:: <T>*/()/*: Renderer<T>*/ => {
+export const createSceneRenderer = /*:: <T>*/()/*: Renderer2<T>*/ => {
   const object = createObjectRenderer();
-  return createNullRenderer(object);
+  return createNullRenderer2(object);
 }