@lukekaalim/act-web 2.1.0 → 2.2.0

package/node.js

@@ -1,27 +1,21 @@
 // @flow strict
 /*:: import type { Element } from '@lukekaalim/act'; */
-/*:: import type { RenderResult } from '@lukekaalim/act-renderer-core'; */
+/*:: import type { RenderResult, RenderResult2 } from '@lukekaalim/act-renderer-core'; */
 /*:: import type { CommitDiff } from '@lukekaalim/act-reconciler'; */
 
-export const createNode = (element/*: Element*/, namespace/*: string*/)/*: null | Node*/ => {
-  if (typeof element.type !== 'string')
-    return null;
-  if (element.type === 'act:null')
-    return null;
-  if (element.type === 'act:string')
+import { calculateIndexChanges } from "@lukekaalim/act-reconciler/util";
+
+export const createNode = (type/*: string*/, namespace/*: string*/)/*: Node*/ => {
+  if (type === 'act:string')
     return document.createTextNode('');
-  if (element.type === 'act:context')
-    return null;
-  if (element.type === 'act:boundary')
-    return null;
-  return document.createElementNS(namespace, element.type);
+  return document.createElementNS(namespace, type);
 };
 export const removeNode = (node/*: Node*/) => {
   const parent = node.parentNode;
   if (parent)
     parent.removeChild(node);
 }
-export const setNodeChildren = (diff/*: CommitDiff*/, parent/*: Node*/, children/*: RenderResult<Node>[]*/) => {
+export const setNodeChildren = (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++)
@@ -36,3 +30,25 @@ export const setNodeChildren = (diff/*: CommitDiff*/, parent/*: Node*/, children
     }
   }
 }
+
+export const setNodeChildren2 = (parent/*: Node*/, children/*: Node[]*/) => {
+  const parentNodeLength = parent.childNodes.length;
+  const parentNodes = [...parent.childNodes];
+  
+  for (let i  = 0; i < parentNodeLength; i++) {
+    if (!children.includes(parentNodes[i]))
+      parent.removeChild(parentNodes[i]);
+  }
+
+  for (let i = 0; i < children.length; i++) {
+    const prevChild = parent.childNodes[i] || null;
+    const nextChild = children[i] || null;
+
+    if (prevChild !== nextChild) {
+      if (!prevChild)
+        parent.appendChild(nextChild)
+      else
+        parent.replaceChild(nextChild, prevChild);
+    }
+  }
+}

package/package.json

@@ -3,7 +3,7 @@
   "main": "entry.js",
   "types": "entry.d.ts",
   "type": "module",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "sideEffects": false,
   "scripts": {
     "test": "cd ../..; npm test",
@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@lukekaalim/act-renderer-core": "^3.2.2",
-    "@lukekaalim/act-reconciler": "^3.0.1"
+    "@lukekaalim/act-reconciler": "^3.1.0"
   },
   "devDependencies": {
     "@lukekaalim/act": "*"

package/prop.js

@@ -1,6 +1,11 @@
 // @flow strict
-/*:: import type { PropDiff, CommitDiff } from '@lukekaalim/act-reconciler'; */
-import { calculatePropsDiff } from '@lukekaalim/act-reconciler'
+/*::
+import type { Commit3 } from "../../reconciler/commit3";
+import type { Diff3, DiffSet } from "../../reconciler/diff";
+import type { CommitDiff } from '@lukekaalim/act-reconciler';
+import type { PropDiff, PropDiffRegistry } from '@lukekaalim/act-renderer-core';
+*/
+import { calculatePropsDiff } from '@lukekaalim/act-renderer-core'
 
 const propBlacklist = new Set(['ref', 'key', 'children']);
 
@@ -12,9 +17,9 @@ export const setStylesProp = (
   const prevRules = typeof prev === 'object' && prev || {};
   const nextRules = typeof next === 'object' && next || {};
 
-  const diff = calculatePropsDiff(prevRules, nextRules);
+  const reg = calculatePropsDiff(prevRules, nextRules);
 
-  for (const [rule, { next }] of diff.entries()) {
+  for (const [rule, { next }] of reg.map) {
     const nextRuleValue = (typeof next === 'string' || typeof next === 'number') ? next : null;
     if (typeof (style/*: any*/)[rule] !== 'undefined')
       (style/*: any*/)[rule] = nextRuleValue;
@@ -93,18 +98,17 @@ export const setHTMLProp = (
 
 export const setHTMLProps = (
   element/*: HTMLElement | SVGElement*/,
-  diff/*: CommitDiff*/
+  registry/*: PropDiffRegistry*/
 ) => {
-  const propDiffs = calculatePropsDiff(diff.prev.element.props, diff.next.element.props)
-  for (const [_, propDiff] of propDiffs)
+  for (const [_, propDiff] of registry.map)
     setHTMLProp(element, propDiff);
 };
 
 export const setTextProps = (
   element/*: Text*/,
-  diff/*: CommitDiff*/
+  registry/*: PropDiffRegistry*/
 ) => {
-  const { content } = diff.next.element.props;
+  const content = registry.prop('content', '').next;
   if (content !== element.textContent)
     element.textContent = typeof content === 'string' ? content : '';
 };
@@ -113,12 +117,26 @@ export const setProps = (
   element/*: ?Node*/,
   diff/*: CommitDiff*/
 ) => {
+  const propDiff = calculatePropsDiff(diff.prev.element.props, diff.next.element.props);
   if (element instanceof HTMLElement || element instanceof SVGElement)
-    setHTMLProps(element, diff);
+    setHTMLProps(element, propDiff);
   if (element instanceof Text)
-    setTextProps(element, diff);
+    setTextProps(element, propDiff);
 };
 
+export const setWebProps2 = (
+  element/*: Node*/,
+  set/*: DiffSet*/,
+  diff/*: Diff3*/,
+) => {
+  const prev = set.prevs.map.get(diff.commit.id);
+  const propDiff = calculatePropsDiff(prev ? prev.element.props : {}, diff.commit.element.props);
+  if (element instanceof HTMLElement || element instanceof SVGElement)
+    setHTMLProps(element, propDiff);
+  if (element instanceof Text)
+    setTextProps(element, propDiff);
+}
+
 export const setRef = (
   node/*: ?Node*/,
   diff/*: CommitDiff*/
@@ -135,4 +153,4 @@ export const setRef = (
     else if (diff.next.pruned)
       ref['current'] = null;
   }
-};
+};

package/reconciler.js

@@ -1,16 +1,36 @@
 // @flow strict
 /*:: import type { Element } from '@lukekaalim/act'; */
-import { createTree } from '@lukekaalim/act-reconciler';
+import { createBoundaryService, createEffectService, createReconciler, createSchedule2, createTree, createTreeService2 } from '@lukekaalim/act-reconciler';
 import { createWebRenderer } from './renderer.js';
-import { setNodeChildren } from "./node.js";
+import { setNodeChildren2 } 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),
+
+  const onScheduleRequest = (callback) => {
+    const id = requestAnimationFrame(() => callback(5));
+    return () => cancelAnimationFrame(id);
   };
-  createTree(element, options);
+  const scheduler = createSchedule2(onScheduleRequest)
+  const effect = createEffectService(scheduler);
+  const boundary = createBoundaryService();
+  const reconciler = createReconciler(scheduler);
+
+  reconciler.diff.subscribeDiff((set) => {
+    performance.mark('act:web:nodes:start')
+    setNodeChildren2(node, web.render(set, set.root));
+    performance.mark('act:web:nodes:end')
+    performance.measure('act:web:nodes', 'act:web:nodes:start', 'act:web:nodes:end')
+    performance.mark('act:web:effects:start')
+    reconciler.tree.live.registry = effect.runEffectRegistry(set.registry);
+    performance.mark('act:web:effects:end')
+    performance.measure('act:web:effects', 'act:web:effects:start', 'act:web:effects:end')
+
+    performance.mark('act:web:suspense:start')
+    const map = boundary.calcBoundaryMap(set);
+    boundary.getRootBoundaryValue(set.suspensions, set, map);
+    performance.mark('act:web:suspense:end')
+    performance.measure('act:web:suspense', 'act:web:suspense:start', 'act:web:suspense:end')
+  });
+  reconciler.tree.mount(element);
 };

package/renderer.js

@@ -2,80 +2,77 @@
 /*::
 import type { ElementType } from '@lukekaalim/act'; 
 import type { CommitDiff, Commit } from '@lukekaalim/act-reconciler'; 
+import type { Renderer2 } from "../core/renderer2";
 */
 /*:: 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';
+import { setProps, setRef, setWebProps2 } from './prop.js';
+import { createNode, removeNode, setNodeChildren, setNodeChildren2 } from './node.js';
+import { createRenderer2 } from '@lukekaalim/act-renderer-core/renderer2.js';
+import { setRef2 } from "../core/props";
 
 export const createDOMRenderer = (
   namespace/*: string*/,
-  nextDOMNode/*: ?((diff: CommitDiff) => RenderResult<Node>[])*/ = null,
-  getExternalDOMNode/*: ?((diff: Commit) => null | RenderResult<Node>[])*/ = null,
-)/*: 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;
+  getNextRenderer/*: null | (ElementType => null | Renderer2<Node>)*/ = null,
+)/*: Renderer2<Node>*/ => {
+  const create = (type) => {
+    return createNode(type, namespace);
   }
-  const remove = (node) => {
+  const remove = (node, children, diff) => {
+    setRef2(node, diff.commit, diff.change);
     removeNode(node);
   };
-  const update = (node, diff, children) => {
-    setRef(node, diff);
+  const update = (node, set, diff) => {
+    if (diff.change.type === 'create')
+      setRef2(node, diff.commit, diff.change);
 
-    if (diff.next.pruned)
+    setWebProps2(node, set, diff);
+  }
+  const attach = (node, set, diff, children) => {
+    if (diff.commit.element.props["ignoreChildren"])
       return;
+    setNodeChildren2(node, children);
+  }
 
-    setProps(node, diff);
-    setNodeChildren(diff, node, children);
+  const getRenderer = (set, commitId) => {
+    const commit = set.nexts.get(commitId);
+    return getNextRenderer && getNextRenderer(commit.element.type) || nodeRenderer;
   }
 
-  const getExternalNodes = (commit) => {
-    if (getExternalDOMNode) {
-      return getExternalDOMNode(commit);
-    }
-    return null;
+  const getNodes = (set, commitId) => {
+    const renderer = getRenderer(set, commitId)
+    return renderer.getNodes(set, commitId);
   }
 
-  const next = (diff) => {
-    if (nextDOMNode) {
-      return nextDOMNode(diff)
-    }
-    return nodeRenderer.render(diff);
+  const render = (set, commitId) => {
+    const renderer = getRenderer(set, commitId)
+    return renderer.render(set, commitId);
   }
 
-  const nodeRenderer = createManagedRenderer({ add, remove, update, next, getExternalNodes });
+  const nodeRenderer = createRenderer2({
+    create,
+    update,
+    remove,
+    attach,
+  }, {
+    getNodes,
+    render,
+  });
 
   return nodeRenderer;
 };
 
 export const createWebRenderer = (
-  nextDOMNode/*: ?((diff: CommitDiff) => RenderResult<Node>[])*/ = null,
-  getExternalDOMNode/*: ?((diff: Commit) => null | RenderResult<Node>[])*/ = null,
-)/*: Renderer<Node>*/ => {
+  getNextRenderer/*: null | (ElementType => null | Renderer2<Node>)*/ = null,
+)/*: Renderer2<Node>*/ => {
   const svgRenderer = createDOMRenderer('http://www.w3.org/2000/svg')
 
-  const htmlRenderer = createDOMRenderer('http://www.w3.org/1999/xhtml', diff => {
-    switch (diff.next.element.type) {
-      case 'svg':
-        return svgRenderer.render(diff);
-      default:
-        if (nextDOMNode)
-          return nextDOMNode(diff);
-        return htmlRenderer.render(diff)
-    }
-  }, commit => {
-    switch (commit.element.type) {
+  const htmlRenderer = createDOMRenderer('http://www.w3.org/1999/xhtml', type => {
+    switch (type) {
       case 'svg':
-        return svgRenderer.getNodes(commit);
+        return svgRenderer;
       default:
-        if (getExternalDOMNode)
-          return getExternalDOMNode(commit);
-        return null;
+        return getNextRenderer && getNextRenderer(type);
     }
   });