@lukekaalim/act-web 1.0.0 → 1.1.0

package/node.js

@@ -1,5 +1,6 @@
 // @flow strict
 /*:: import type { Element } from '@lukekaalim/act'; */
+/*:: import type { RenderResult } from '@lukekaalim/act-renderer-core'; */
 /*:: import type { CommitDiff } from '@lukekaalim/act-reconciler'; */
 
 export const createNode = (element/*: Element*/, namespace/*: string*/)/*: null | Node*/ => {
@@ -11,6 +12,8 @@ export const createNode = (element/*: Element*/, namespace/*: string*/)/*: null
     return document.createTextNode('');
   if (element.type === 'act:context')
     return null;
+  if (element.type === 'act:boundary')
+    return null;
   return document.createElementNS(namespace, element.type);
 };
 export const removeNode = (node/*: Node*/) => {
@@ -18,13 +21,18 @@ export const removeNode = (node/*: Node*/) => {
   if (parent)
     parent.removeChild(node);
 }
-export const attachNodes = (parent/*: Node*/, children/*: Node[]*/) => {
+export const setNodeChildren = (diff/*: CommitDiff*/, parent/*: Node*/, children/*: RenderResult<Node>[]*/) => {
+  const childrenToAttach = children.filter(r => !r.commit.suspension).map(r => r.node);
+  const childrenToRemove = children.filter(r => r.commit.suspension).map(r => r.node);
+  for (let i = 0; i < childrenToRemove.length; i++)
+    removeNode(childrenToRemove[i]);
+  
   // iterate backwards through the children
-  for (let i = children.length; i > 0; i--) {
-    const child = children[i - 1];
-    const rightSibling = children[i];
+  for (let i = childrenToAttach.length; i > 0; i--) {
+    const child = childrenToAttach[i - 1];
+    const rightSibling = childrenToAttach[i];
     if (parent !== child.parentNode || (rightSibling && child.nextSibling !== rightSibling)) {
       parent.insertBefore(child, rightSibling);
     }
   }
-};
+}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@lukekaalim/act-web",
   "main": "entry.js",
   "type": "module",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "sideEffects": false,
   "scripts": {
     "test": "cd ../..; npm test",
@@ -10,8 +10,8 @@
     "preversion": "npm run test"
   },
   "dependencies": {
-    "@lukekaalim/act-renderer-core": "^2.0.0",
-    "@lukekaalim/act-reconciler": "^2.0.5"
+    "@lukekaalim/act-renderer-core": "^3.0.0",
+    "@lukekaalim/act-reconciler": "^2.1.0"
   },
   "devDependencies": {
     "@lukekaalim/act": "*"

package/prop.js

@@ -42,10 +42,17 @@ export const setAttributeProp = (
   element/*: Element*/,
   { key, prev, next }/*: PropDiff*/
 ) => {
-  if (next === null && typeof prev === 'string')
+  if (next === null && prev !== null)
     element.removeAttribute(key);
-  else if (typeof next === 'string')
-    element.setAttribute(key, next);
+  else if (next !== null)
+    switch (typeof next) {
+      case 'string':
+        element.setAttribute(key, next);
+      case 'number':
+      case 'boolean':
+        element.setAttribute(key, next.toString());
+      default:
+    }
 };
 
 export const setHTMLProp = (

package/reconciler.js

@@ -1,12 +1,12 @@
 // @flow strict
 /*:: import type { Element } from '@lukekaalim/act'; */
 import { createTree } from '@lukekaalim/act-reconciler';
-import { attachNodes } from './node.js';
 import { createWebRenderer } from './renderer.js';
+import { setNodeChildren } from "./node.js";
 
 export const render = (element/*: Element*/, node/*: HTMLElement*/) => {
   const web = createWebRenderer();
-  const onDiff = diff => attachNodes(node, web.render(diff));
+  const onDiff = diff => setNodeChildren(diff, node, web.render(diff));
   const options = {
     onDiff,
     scheduleWork: (c) => requestAnimationFrame(() => void c()),

package/renderer.js

@@ -1,16 +1,21 @@
 // @flow strict
 /*:: import type { ElementType } from '@lukekaalim/act'; */
-/*:: import type { Renderer } from '@lukekaalim/act-renderer-core'; */
+/*:: import type { Renderer, RenderResult } from '@lukekaalim/act-renderer-core'; */
 import { createManagedRenderer } from '@lukekaalim/act-renderer-core';
 import { setProps, setRef } from './prop.js';
-import { createNode, attachNodes, removeNode } from './node.js';
+import { createNode, removeNode, setNodeChildren } from './node.js';
 
 export const createDOMRenderer = (
   namespace/*: string*/,
   nodeSubRenderers/*: { [type: string]: ?Renderer<Node> }*/ = {},
 )/*: Renderer<Node>*/ => {
   const add = (diff)/*: null | Node*/ => {
-    return createNode(diff.next.element, namespace);
+    const node = createNode(diff.next.element, namespace);
+    if (node !== null) {
+      const parentId = diff.next.path[diff.next.path.length - 1];
+      nodeRenderer.nodesByCommitID.get(parentId);
+    }
+    return node;
   }
   const remove = (node) => {
     removeNode(node);
@@ -22,17 +27,29 @@ export const createDOMRenderer = (
       return;
 
     setProps(node, diff);
-    attachNodes(node, children);
+    setNodeChildren(diff, node, children);
   }
 
-  const next = (diff)/*: Node[]*/ => {
-    const { element: { type } } = (diff.next || diff.prev);
-    return ((typeof type === 'string' && nodeSubRenderers[type]) || node).render(diff);
+  const next = (diff)/*: RenderResult<Node>[]*/ => {
+    const { type } = diff.next.element;
+    const subrenderer = typeof type === 'string' && nodeSubRenderers[type];
+    if (subrenderer) {
+      return subrenderer.render(diff);
+    }
+    return nodeRenderer.render(diff);
   };
+  const getExternalNodes = (commit) => {
+    const { type } = commit.element;
+    const subrenderer = typeof type === 'string' && nodeSubRenderers[type];
+    if (subrenderer) {
+      return subrenderer.getNodes(commit);
+    }
+    return null;
+  }
 
-  const node = createManagedRenderer({ add, remove, update, next });
+  const nodeRenderer = createManagedRenderer({ add, remove, update, next, getExternalNodes });
 
-  return node;
+  return nodeRenderer;
 };
 
 export const createWebRenderer = (