@lukekaalim/act-web 0.4.5 → 1.2.0

package/entry.js

@@ -0,0 +1,6 @@
+// @flow strict
+export * from './renderer.js';
+export * from './reconciler.js';
+
+export * from './prop.js';
+export * from './node.js';

package/node.js

@@ -1,9 +1,9 @@
 // @flow strict
 /*:: import type { Element } from '@lukekaalim/act'; */
+/*:: import type { RenderResult } from '@lukekaalim/act-renderer-core'; */
 /*:: import type { CommitDiff } from '@lukekaalim/act-reconciler'; */
-/*:: import type { RenderService } from './main.js'; */
 
-export const createNode = (element/*: Element*/, namespace/*: string*/)/*: ?Node*/ => {
+export const createNode = (element/*: Element*/, namespace/*: string*/)/*: null | Node*/ => {
   if (typeof element.type !== 'string')
     return null;
   if (element.type === 'act:null')
@@ -12,6 +12,8 @@ export const createNode = (element/*: Element*/, namespace/*: string*/)/*: ?Node
     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*/) => {
@@ -19,12 +21,18 @@ export const removeNode = (node/*: Node*/) => {
   if (parent)
     parent.removeChild(node);
 }
-export const attachNodes = (parent/*: Node*/, children/*: Node[]*/, sibling/*: ?Node*/ = null) => {
-  for (let i = 0; i < children.length; i++) {
-    const child = children[children.length - i - 1];
-    const prevChild = children[children.length - i] || sibling;
-    if (parent !== child.parentNode || (prevChild && child.nextSibling !== prevChild)) {
-      parent.insertBefore(child, prevChild);
+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 = 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

@@ -1,8 +1,8 @@
 {
   "name": "@lukekaalim/act-web",
-  "main": "main.js",
+  "main": "entry.js",
   "type": "module",
-  "version": "0.4.5",
+  "version": "1.2.0",
   "sideEffects": false,
   "scripts": {
     "test": "cd ../..; npm test",
@@ -10,7 +10,8 @@
     "preversion": "npm run test"
   },
   "dependencies": {
-    "@lukekaalim/act-reconciler": "^2.0.4"
+    "@lukekaalim/act-renderer-core": "^3.1.1",
+    "@lukekaalim/act-reconciler": "^3.0.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 = (
@@ -77,7 +84,8 @@ export const setTextProps = (
   diff/*: CommitDiff*/
 ) => {
   const { content } = diff.next.element.props;
-  element.textContent = typeof content === 'string' ? content : '';
+  if (content !== element.textContent)
+    element.textContent = typeof content === 'string' ? content : '';
 };
 
 export const setProps = (

package/reconciler.js

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

package/renderer.js

@@ -0,0 +1,66 @@
+// @flow strict
+/*:: import type { ElementType } from '@lukekaalim/act'; */
+/*:: import type { Renderer, RenderResult } from '@lukekaalim/act-renderer-core'; */
+import { createManagedRenderer } from '@lukekaalim/act-renderer-core';
+import { setProps, setRef } from './prop.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*/ => {
+    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);
+  };
+  const update = (node, diff, children) => {
+    setRef(node, diff);
+
+    if (diff.next.pruned)
+      return;
+
+    setProps(node, diff);
+    setNodeChildren(diff, node, children);
+  }
+
+  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 nodeRenderer = createManagedRenderer({ add, remove, update, next, getExternalNodes });
+
+  return nodeRenderer;
+};
+
+export const createWebRenderer = (
+  subRenderers/*: { [type: string]: ?Renderer<Node> }*/ = {},
+)/*: Renderer<Node>*/ => {
+  const svgRenderer = createDOMRenderer('http://www.w3.org/2000/svg')
+
+  const htmlRenderer = createDOMRenderer('http://www.w3.org/1999/xhtml', {
+    ...subRenderers,
+    svg: svgRenderer,
+  });
+
+  return htmlRenderer;
+}

package/dom.js

@@ -1,60 +0,0 @@
-// @flow strict
-/*:: import type { ElementType } from '@lukekaalim/act'; */
-/*:: import type { CommitDiff, CommitID } from '@lukekaalim/act-reconciler'; */
-/*:: import type { RenderService } from './main.js'; */
-import { setProps, setRef } from './prop.js';
-import { createNode, attachNodes, removeNode } from './node.js';
-
-export const createDOMRenderer = (
-  namespace/*: string*/,
-  subRenderers/*: Map<ElementType, RenderService>*/ = new Map(),
-)/*: RenderService*/ => {
-  const nodeByCommit = new Map/*:: <CommitID, Node>*/();
-
-  const getNodeForDiff = (diff) => {
-    if (diff.prev.pruned)
-      return createNode(diff.next.element, namespace);
-    return nodeByCommit.get(diff.next.id);
-  };
-
-  const findNodesById = (commit)/*: Node[]*/ => {
-    const node = nodeByCommit.get(commit.id);
-    if (node)
-      return [node];
-    return commit.children.map(findNodesById).flat(1);
-  };
-
-  const renderDiffToNodes = (diff/*: CommitDiff*/)/*: Node[]*/ => {
-    if (diff.prev.version === diff.next.version)
-      return findNodesById(diff.next);
-    const node = getNodeForDiff(diff);
-
-    const children = diff.diffs.map(render).flat(1);
-
-    if (!node)
-      return children;
-
-    setRef(node, diff);
-    if (diff.next.pruned)
-      return (removeNode(node), []);
-  
-    setProps(node, diff);
-    attachNodes(node, children);
-    nodeByCommit.set(diff.next.id, node);
-  
-    return [node];
-  }
-
-  const render = (diff/*: CommitDiff*/)/*: Node[]*/ => {
-    const element = (diff.next || diff.prev || diff.curr).element;
-
-    const subRenderer = subRenderers.get(element.type);
-    if (subRenderer)
-      return subRenderer.render(diff);
-    return renderDiffToNodes(diff);
-  };
-
-  return {
-    render
-  };
-};

package/main.js

@@ -1,25 +0,0 @@
-// @flow strict
-/*:: import type { Element } from '@lukekaalim/act'; */
-/*:: import type { CommitDiff } from '@lukekaalim/act-reconciler'; */
-import { createTree } from '@lukekaalim/act-reconciler';
-import { attachNodes } from './node.js';
-import { createWebRenderService } from './web.js';
-
-/*::
-export type RenderService = {
-  render: CommitDiff => Node[]
-};
-*/
-
-export const render = (element/*: Element*/, node/*: HTMLElement*/) => {
-  const web = createWebRenderService();
-  const onDiff = diff => attachNodes(node, web.render(diff));
-  const options = {
-    onDiff,
-    scheduleWork: (c) => requestAnimationFrame(() => void c()),
-  };
-  const tree = createTree(element, options);
-};
-
-export * from './web';
-export * from './dom';

package/web.js

@@ -1,19 +0,0 @@
-// @flow strict
-/*:: import type { ElementType } from '@lukekaalim/act'; */
-/*:: import type { CommitDiff } from '@lukekaalim/act-reconciler'; */
-/*:: import type { RenderService } from './main.js'; */
-
-import { createDOMRenderer } from "./dom";
-
-export const createWebRenderService = (
-  subRenderers/*: Map<ElementType, RenderService>*/ = new Map(),
-)/*: RenderService*/ => {
-  const svgRenderer = createDOMRenderer('http://www.w3.org/2000/svg')
-
-  const htmlRenderer = createDOMRenderer('http://www.w3.org/1999/xhtml', new Map([
-    ...subRenderers,
-    ['svg', svgRenderer],
-  ]));
-
-  return htmlRenderer;
-}