@lukekaalim/act-three 2.0.2 → 3.0.0

package/components.js

@@ -1,26 +1,51 @@
 // @flow strict
-/*:: import type { Mesh } from 'three'; */
-/*:: import type { Component } from '@lukekaalim/act'; */
-
-import { h } from "@lukekaalim/act";
+/*:: import type { Component as ActComponent } from '@lukekaalim/act'; */
+/*:: import type {
+  Vector3,
+  Object3D,
+  Quaternion,
+  BufferGeometry,
+  Material,
+} from "three"; */
+/*:: import * as Three from 'three'; */
 
 /*::
-export type SharedProps<T> = {|
-  ref: { current: ?T }
-|}
-
+export type Object3DProps<T> = {
+  ref?: ((reference: T) => mixed) | { current: T | any },
 
-export type Props = {|
-  width: number,
-  height: number,
-  updateStyle?: boolean,
-|};
+  name?: string,
+  position?: Vector3,
+  quaternion?: Quaternion,
+  visible?: boolean,
+  scale?: Vector3,
+};
+export type MeshProps = {
+  ...Object3DProps<Three.Mesh>,
+  geometry?: BufferGeometry,
+  material?: Material,
+};
+export type InstanceMeshProps = {
+  ...MeshProps,
+  ...Object3DProps<Three.InstanceMesh>,
+};
+export type PointLightsProps = {
+  ...Object3DProps<Three.PointLight>,
+  distance?: number,
+  decay?: number,
+  intensity?: number,
+  power?: number,
+};
+export type PointsProps = {
+  ...Object3DProps<Three.Points>,
+  geometry?: BufferGeometry,
+  material?: Material,
+};
 */
 
-export const Three/*: Component<Props>*/ = (props) => {
-  return h('Three', props, props.children);
+export const Component = {
+  mesh: ('mesh'/*: ActComponent<MeshProps>*/),
+  instanceMesh: ('instanceMesh'/*: ActComponent<InstanceMeshProps>*/),
+  pointLight: ('pointLight'/*: ActComponent<PointLightsProps>*/),
+  points: ('points'/*: ActComponent<PointsProps>*/),
 };
-
-export const Cube/*: Component<{ ...SharedProps<Mesh> }>*/ = () => {
-  return h('Cube');
-};
+export const C = Component;

package/main.js

@@ -1,12 +1,14 @@
 // @flow strict
 /*:: import type { Element } from '@lukekaalim/act'; */
+/*:: import type { ThreeRenderer } from "./render.js"; */
+
 import { createTree } from "@lukekaalim/act-reconciler";
 import { createWebRenderService } from "@lukekaalim/act-web";
 import { attachNodes } from "@lukekaalim/act-web/node.js";
 import { createThreeRenderer } from "./render.js";
 
-export const render = (element/*: Element*/, node/*: HTMLElement*/) => {
-  const { renderRoot } = createThreeRenderer();
+export const render = (element/*: Element*/, node/*: HTMLElement*/, renderer/*: ThreeRenderer*/ = createThreeRenderer()) => {
+  const { renderRoot } = renderer;
   const web = createWebRenderService(new Map([['Three', { render: renderRoot }]]));
 
   const onDiff = diff => attachNodes(node, web.render(diff));
@@ -18,4 +20,6 @@ export const render = (element/*: Element*/, node/*: HTMLElement*/) => {
   const tree = createTree(element, options);
 };
 
+export * from './render.js';
+export * from './node.js';
 export * from './components.js';

package/node.js

@@ -0,0 +1,54 @@
+// @flow strict
+/*:: import type { Object3D } from "three"; */
+/*:: import type { PropDiff } from '@lukekaalim/act-reconciler'; */ 
+import { Mesh, PointLight, Points } from "three";
+
+/*::
+export type NodeInstance = {
+  object: Object3D,
+  update: (props: PropDiff[]) => void,
+  dispose: () => void,
+};
+
+export type NodeDefinition = {
+  type: string,
+  create: () => NodeInstance,
+};
+*/
+
+const createNodeDefinitionFromConstructor = ([type, constructor])/*: NodeDefinition*/ => {
+  const create = () => {
+    const object = new constructor();
+    const update = (props) => {
+      for (const { key, next } of props)
+        switch (key) {
+          case 'position':
+            object.position.copy((next/*: any*/)); break;
+          case 'quaternion':
+            object.quaternion.copy((next/*: any*/)); break;
+          default:
+            (object/*: any*/)[key] = next; break;
+        }
+    };
+    const dispose = () => {
+      return;
+    };
+    const instance = {
+      object,
+      update,
+      dispose,
+    };
+    return instance;
+  };
+  return {
+    type,
+    create,
+  }
+};
+
+export const threeNodes/*: NodeDefinition[]*/ = [
+  ['mesh', Mesh],
+  ['pointLight', PointLight],
+  ['points', Points],
+].map(createNodeDefinitionFromConstructor);
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lukekaalim/act-three",
-  "version": "2.0.2",
+  "version": "3.0.0",
   "description": "Render threejs content using act",
   "main": "main.js",
   "type": "module",

package/render.js

@@ -1,7 +1,10 @@
 // @flow strict
-/*:: import type { CommitDiff } from '@lukekaalim/act-reconciler'; */
+/*:: import type { CommitDiff, PropDiff } from '@lukekaalim/act-reconciler'; */
 /*:: import type { Object3D } from 'three'; */
-import { BoxGeometry, Mesh, MeshBasicMaterial, PerspectiveCamera, Scene, WebGLRenderer } from 'three';
+/*:: import type { NodeDefinition } from './node.js'; */
+import {  PerspectiveCamera, Scene, WebGLRenderer } from 'three';
+import { threeNodes } from './node.js';
+import { calculatePropsDiff } from '@lukekaalim/act-reconciler'
 
 /*::
 export type ThreeRenderer = {
@@ -9,7 +12,9 @@ export type ThreeRenderer = {
 };
 */
 
-export const createThreeRenderer = ()/*: ThreeRenderer*/ => {
+export const createThreeRenderer = (nodeDefs/*: NodeDefinition[]*/ = threeNodes)/*: ThreeRenderer*/ => {
+  const nodeDefsByType = new Map(nodeDefs.map(def => [def.type, def]));
+
   const roots = new Map();
   const objects = new Map();
 
@@ -43,23 +48,43 @@ export const createThreeRenderer = ()/*: ThreeRenderer*/ => {
   };
 
   const createObject = (diff) => {
-    const geometry = new BoxGeometry(1, 1, 1);
-    const material = new MeshBasicMaterial( { color: '#00ff00' } );
-    const cube = new Mesh( geometry, material );
+    const { type } = diff.next.element;
+    if (typeof type !== 'string')
+      return null;
+
+    const nodeDef = nodeDefsByType.get(type);
+    if (!nodeDef)
+      throw new Error(`Unknown type ${type}`);
 
-    objects.set(diff.next.id, cube);
+    const nodeInstance = nodeDef.create();
+    objects.set(diff.next.id, nodeInstance);
 
-    return cube;
+    return nodeInstance;
   }
 
+  const removeObject = (nodeInstance) => {
+    nodeInstance.dispose();
+  };
+
   const renderObject = (diff/*: CommitDiff*/)/*: Object3D[]*/ => {
-    const object = objects.get(diff.next.id) || createObject(diff);
+    const nodeInstance = objects.get(diff.next.id) || createObject(diff);
 
     const { ref } = (diff.next.element.props/*: any*/);
     if (diff.prev.pruned && typeof ref === 'object' && ref)
-      ref.current = object;
-  
-    return [object];
+      ref.current = nodeInstance && nodeInstance.object;
+
+    const children = diff.diffs.map(renderObject).flat(1);
+
+    if (!nodeInstance)
+      return children;
+    
+    if (diff.next.pruned)
+      return (removeObject(nodeInstance), []);
+
+    const props = calculatePropsDiff(diff.prev.element.props, diff.next.element.props);
+    nodeInstance.update([...props.values()]);
+    
+    return [nodeInstance.object];
   };
   const attachObjects = (scene, children) => {
     scene.add(...children);