@lukekaalim/act-three 5.5.0 → 5.6.2

package/hooks.js

@@ -58,6 +58,7 @@ export const useResizingRenderer = (
   canvasRef/*: Ref<?HTMLCanvasElement>*/,
   renderer/*: ?WebGLRenderer*/,
   cameraRef/*: ?Ref<?PerspectiveCamera>*/ = null,
+  onResize/*: () => mixed*/ = () => {},
 )/*: ?Vector2*/ => {
   const [size, setSize] = useState(null)
   useEffect(() => {
@@ -77,6 +78,7 @@ export const useResizingRenderer = (
           camera.aspect = width / height;
           camera.updateProjectionMatrix();
         }
+        onResize();
       }
     });
     observer.observe(canvas, { box: 'content-box' });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lukekaalim/act-three",
-  "version": "5.5.0",
+  "version": "5.6.2",
   "description": "Render threejs content using act",
   "main": "entry.js",
   "type": "module",
@@ -16,8 +16,8 @@
   },
   "dependencies": {
     "@lukekaalim/act": "^2.2.0",
-    "@lukekaalim/act-renderer-core": "^3.2.0",
+    "@lukekaalim/act-renderer-core": "^3.2.2",
     "@lukekaalim/act-reconciler": "^3.0.1",
-    "@lukekaalim/act-web": "^1.2.0"
+    "@lukekaalim/act-web": "^2.0.1"
   }
 }

package/reconciler.js

@@ -10,8 +10,13 @@ import { createSceneRenderer } from "./renderer";
 export const render = (element/*: Element*/, node/*: HTMLElement*/) => {
 
   const scene = createSceneRenderer();
-  const web = createWebRenderer({
-    'scene': scene,
+  const web = createWebRenderer(diff => {
+    switch (diff.next.element.type) {
+      case 'scene':
+        return scene.render(diff);
+      default:
+        return web.render(diff);
+    }
   });
   const onDiff = diff => {
     const children = web.render(diff);

package/renderer.js

@@ -1,20 +1,25 @@
 // @flow strict
-/*:: import type { Renderer } from '@lukekaalim/act-renderer-core'; */
+/*:: 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 { createObject } from "./objects";
 import { setObjectProps } from "./props";
 
-export const createObjectRenderer = ()/*: Renderer<Object3D>*/ => {
-  return createManagedRenderer({
+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({
     remove(object) {
       object.removeFromParent();
     },
     update(object, diff, children) {
       if (typeof diff.next.element.type === 'function')
         return;
-      setObjectProps(diff, object);
+      setProps(diff, object);
       if (children.length > 0)
         object.add(...children.map(c => c.node));
     },
@@ -23,9 +28,15 @@ export const createObjectRenderer = ()/*: Renderer<Object3D>*/ => {
         return null;
       if (diff.next.element.type === 'act:context')
         return null;
-      return createObject(diff.next.element.type);
+      return create(diff.next.element.type);
+    },
+    next(diff, parent) {
+      if (next)
+        return next(diff, parent)
+      return objectRenderer.render(diff);
     }
   });
+  return objectRenderer;
 };
 
 export const createSceneRenderer = /*:: <T>*/()/*: Renderer<T>*/ => {