@lukekaalim/act-three 5.4.0 → 5.6.0

package/hooks.js

@@ -54,10 +54,11 @@ export const useWebGLRenderer = (
 // 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 = /*:: <TCam: (PerspectiveCamera | OrthographicCamera)>*/(
+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 = /*:: <TCam: (PerspectiveCamera | Orthographic
           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.4.0",
+  "version": "5.6.0",
   "description": "Render threejs content using act",
   "main": "entry.js",
   "type": "module",
@@ -12,11 +12,11 @@
   "author": "Luke Kaalim",
   "license": "ISC",
   "peerDependencies": {
-    "three": "^0.130.0"
+    "three": "^0.141.0"
   },
   "dependencies": {
     "@lukekaalim/act": "^2.2.0",
-    "@lukekaalim/act-renderer-core": "^3.1.1",
+    "@lukekaalim/act-renderer-core": "^3.2.0",
     "@lukekaalim/act-reconciler": "^3.0.1",
     "@lukekaalim/act-web": "^1.2.0"
   }

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>*/ => {