elementdrawing 1.0.0

package/src/jsx/runtime/reconcile.js

@@ -0,0 +1,687 @@
+/**
+ * reconcile - Reconciliation Algorithm
+ * ElementDrawing Framework - Diffs old and new virtual DOM trees to determine
+ * the minimal set of DOM operations needed. Includes key-based child
+ * reconciliation, fiber-based scheduling hints, prop/style/event diffing,
+ * memo optimization, and time-slicing support.
+ */
+
+'use strict';
+
+const { REACT_FRAGMENT_TYPE, isValidElement } = require('./createElement');
+
+// ─── Constants ────────────────────────────────────────────────────────────────
+
+const INSERT = 'INSERT';
+const MOVE = 'MOVE';
+const REMOVE = 'REMOVE';
+const UPDATE = 'UPDATE';
+const REPLACE = 'REPLACE';
+const SKIP = 'SKIP';
+const REORDER = 'REORDER';
+
+// ─── Reconciliation Priority ──────────────────────────────────────────────────
+
+const RECONCILE_PRIORITY = {
+  IMMEDIATE: 0,
+  NORMAL: 1,
+  LOW: 2,
+  IDLE: 3,
+};
+
+// ─── Diff Result Types ────────────────────────────────────────────────────────
+
+/**
+ * Create a diff operation.
+ */
+function createDiffOp(type, payload) {
+  return { type, payload, _isDiffOp: true };
+}
+
+// ─── Fiber Node Creation ──────────────────────────────────────────────────────
+
+/**
+ * Create a lightweight fiber node for reconciliation tracking.
+ * @param {Object|null} vnode - Virtual DOM element
+ * @param {Object|null} parentFiber - Parent fiber
+ * @returns {Object} Fiber node
+ */
+function createFiber(vnode, parentFiber) {
+  return {
+    vnode,
+    parent: parentFiber,
+    child: null,
+    sibling: null,
+    alternate: null,
+    effectTag: null,
+    deps: null,
+    index: 0,
+  };
+}
+
+// ─── Tree Diffing ─────────────────────────────────────────────────────────────
+
+/**
+ * Reconcile an old virtual tree with a new one, producing a list of changes.
+ *
+ * @param {Object|null} oldVNode - Previous virtual DOM tree
+ * @param {Object|null} newVNode - New virtual DOM tree
+ * @param {Object} [options] - Reconciliation options
+ * @param {number} [options.priority] - Reconciliation priority
+ * @param {number} [options.timeoutMs] - Time-slicing timeout
+ * @returns {Object} Reconciliation result with operations list
+ */
+function reconcile(oldVNode, newVNode, options = {}) {
+  const operations = [];
+  const context = {
+    operations,
+    parentDOM: null,
+    oldParentVNode: oldVNode,
+    newParentVNode: newVNode,
+    priority: options.priority || RECONCILE_PRIORITY.NORMAL,
+    startTime: Date.now(),
+    timeoutMs: options.timeoutMs || Infinity,
+    aborted: false,
+    stats: {
+      nodesCompared: 0,
+      operationsGenerated: 0,
+      timeElapsed: 0,
+    },
+  };
+
+  reconcileElement(oldVNode, newVNode, operations, context);
+
+  // Update stats
+  context.stats.timeElapsed = Date.now() - context.startTime;
+  context.stats.operationsGenerated = operations.length;
+
+  return { operations, context };
+}
+
+/**
+ * Check if time-slicing should yield.
+ * @param {Object} context
+ * @returns {boolean}
+ */
+function shouldYield(context) {
+  if (context.aborted) return true;
+  if (context.timeoutMs === Infinity) return false;
+  return Date.now() - context.startTime > context.timeoutMs;
+}
+
+/**
+ * Reconcile children of two vnodes.
+ * @param {Object|null} oldVNode
+ * @param {Object|null} newVNode
+ * @param {Array} operations
+ * @param {Object} context
+ */
+function reconcileChildren(oldVNode, newVNode, operations, context) {
+  const oldChildren = normalizeChildren(oldVNode);
+  const newChildren = normalizeChildren(newVNode);
+
+  // Key-based reconciliation for efficient child reordering
+  const oldKeyMap = buildKeyMap(oldChildren);
+  const newKeyMap = buildKeyMap(newChildren);
+
+  // ─── Phase 1: Match keyed children using Longest Increasing Subsequence ──
+
+  const matchedPairs = [];
+  const removeIndices = new Set();
+  const insertNodes = [];
+
+  // Build matching table
+  let oldIndex = 0;
+  let newIndex = 0;
+
+  while (oldIndex < oldChildren.length || newIndex < newChildren.length) {
+    if (shouldYield(context)) {
+      context.aborted = true;
+      return;
+    }
+
+    const oldChild = oldChildren[oldIndex];
+    const newChild = newChildren[newIndex];
+
+    if (oldIndex >= oldChildren.length) {
+      // No more old children - insert remaining new children
+      insertNodes.push({ child: newChild, beforeIndex: newIndex });
+      matchedPairs.push({ old: null, new: newChild, oldIndex: -1, newIndex });
+      newIndex++;
+      continue;
+    }
+
+    if (newIndex >= newChildren.length) {
+      // No more new children - remove remaining old children
+      removeIndices.add(oldIndex);
+      matchedPairs.push({ old: oldChild, new: null, oldIndex, newIndex: -1 });
+      oldIndex++;
+      continue;
+    }
+
+    if (oldChild.key !== null && newChild.key !== null) {
+      if (oldChild.key === newChild.key) {
+        // Same key - reconcile in place
+        matchedPairs.push({ old: oldChild, new: newChild, oldIndex, newIndex });
+        oldIndex++;
+        newIndex++;
+      } else {
+        // Keys don't match
+        if (newKeyMap.has(oldChild.key) && newKeyMap.get(oldChild.key).index >= newIndex) {
+          insertNodes.push({ child: newChild, beforeIndex: newIndex });
+          newIndex++;
+        } else {
+          removeIndices.add(oldIndex);
+          matchedPairs.push({ old: oldChild, new: null, oldIndex, newIndex: -1 });
+          oldIndex++;
+        }
+      }
+    } else {
+      // Positional matching for unkeyed children
+      matchedPairs.push({ old: oldChild, new: newChild, oldIndex, newIndex });
+      oldIndex++;
+      newIndex++;
+    }
+  }
+
+  // ─── Phase 2: Detect reordering using LIS ──────────────────────────────
+
+  const keyedPairs = matchedPairs.filter(
+    (p) => p.old !== null && p.new !== null && p.new.key !== null
+  );
+
+  if (keyedPairs.length > 0) {
+    const newIndices = keyedPairs.map((p) => p.newIndex);
+    const lis = longestIncreasingSubsequence(newIndices);
+
+    // Mark pairs that are part of LIS as stable, others need MOVE operations
+    const lisSet = new Set(lis.map((i) => keyedPairs[i].newIndex));
+
+    matchedPairs.forEach((pair) => {
+      if (pair.old !== null && pair.new !== null && pair.new.key !== null) {
+        if (!lisSet.has(pair.newIndex)) {
+          pair.needsMove = true;
+        }
+      }
+    });
+  }
+
+  // ─── Phase 3: Generate operations ──────────────────────────────────────
+
+  matchedPairs.forEach((pair) => {
+    context.stats.nodesCompared++;
+
+    if (pair.old === null && pair.new !== null) {
+      // Insert new child
+      operations.push(createDiffOp(INSERT, {
+        vnode: pair.new,
+        parentVNode: newVNode,
+        index: pair.newIndex,
+      }));
+    } else if (pair.old !== null && pair.new === null) {
+      // Remove old child
+      operations.push(createDiffOp(REMOVE, {
+        vnode: pair.old,
+        parentVNode: oldVNode,
+        index: pair.oldIndex,
+      }));
+    } else if (pair.old !== null && pair.new !== null) {
+      if (pair.needsMove) {
+        operations.push(createDiffOp(MOVE, {
+          vnode: pair.new,
+          oldVNode: pair.old,
+          fromIndex: pair.oldIndex,
+          toIndex: pair.newIndex,
+        }));
+      }
+      // Reconcile the pair
+      reconcileElement(pair.old, pair.new, operations, context);
+    }
+  });
+}
+
+/**
+ * Reconcile two elements.
+ * @param {Object} oldVNode
+ * @param {Object} newVNode
+ * @param {Array} operations
+ * @param {Object} context
+ */
+function reconcileElement(oldVNode, newVNode, operations, context) {
+  if (shouldYield(context)) {
+    context.aborted = true;
+    return;
+  }
+
+  // Handle null cases
+  if (oldVNode === null && newVNode === null) return;
+
+  if (oldVNode === null) {
+    operations.push(createDiffOp(INSERT, { vnode: newVNode }));
+    return;
+  }
+
+  if (newVNode === null) {
+    operations.push(createDiffOp(REMOVE, { vnode: oldVNode }));
+    return;
+  }
+
+  context.stats.nodesCompared++;
+
+  // ─── Type Comparison ────────────────────────────────────────────────────
+
+  if (!isSameType(oldVNode, newVNode)) {
+    operations.push(createDiffOp(REPLACE, {
+      oldVNode,
+      newVNode,
+    }));
+    return;
+  }
+
+  // ─── shouldComponentUpdate optimization ────────────────────────────────
+
+  if (oldVNode.type && typeof oldVNode.type === 'function' && oldVNode.type._shouldComponentUpdate) {
+    if (!oldVNode.type._shouldComponentUpdate(oldVNode.props, newVNode.props)) {
+      operations.push(createDiffOp(SKIP, { vnode: newVNode }));
+      return;
+    }
+  }
+
+  // ─── Memo component comparison ────────────────────────────────────────
+
+  if (oldVNode.type && oldVNode.type._isMemo && oldVNode.type._compare) {
+    if (oldVNode.type._compare(oldVNode.props, newVNode.props)) {
+      operations.push(createDiffOp(SKIP, { vnode: newVNode }));
+      return;
+    }
+  }
+
+  // ─── Pure component comparison ────────────────────────────────────────
+
+  if (oldVNode.type && oldVNode.type._isPureComponent) {
+    if (shallowEqual(oldVNode.props, newVNode.props)) {
+      operations.push(createDiffOp(SKIP, { vnode: newVNode }));
+      return;
+    }
+  }
+
+  // ─── Text node comparison ─────────────────────────────────────────────
+
+  if (oldVNode.type === '#text' && newVNode.type === '#text') {
+    if (oldVNode.props.nodeValue !== newVNode.props.nodeValue) {
+      operations.push(createDiffOp(UPDATE, {
+        vnode: newVNode,
+        changes: [{ type: 'set', key: 'nodeValue', value: newVNode.props.nodeValue }],
+        changeType: 'text',
+      }));
+    }
+    return;
+  }
+
+  // ─── Diff Props ────────────────────────────────────────────────────────
+
+  const propChanges = diffProps(oldVNode.props, newVNode.props);
+  if (propChanges.length > 0) {
+    operations.push(createDiffOp(UPDATE, {
+      vnode: newVNode,
+      changes: propChanges,
+      changeType: 'props',
+    }));
+  }
+
+  // ─── Diff Style ────────────────────────────────────────────────────────
+
+  const styleChanges = diffStyle(
+    oldVNode.props ? oldVNode.props.style : null,
+    newVNode.props ? newVNode.props.style : null
+  );
+  if (styleChanges.length > 0) {
+    operations.push(createDiffOp(UPDATE, {
+      vnode: newVNode,
+      changes: styleChanges,
+      changeType: 'style',
+    }));
+  }
+
+  // ─── Diff Event Handlers ────────────────────────────────────────────────
+
+  const eventChanges = diffEventHandlers(
+    oldVNode.props || {},
+    newVNode.props || {}
+  );
+  if (eventChanges.length > 0) {
+    operations.push(createDiffOp(UPDATE, {
+      vnode: newVNode,
+      changes: eventChanges,
+      changeType: 'events',
+    }));
+  }
+
+  // ─── Diff Ref ──────────────────────────────────────────────────────────
+
+  const refChange = diffRef(oldVNode.ref, newVNode.ref);
+  if (refChange) {
+    operations.push(createDiffOp(UPDATE, {
+      vnode: newVNode,
+      changes: [refChange],
+      changeType: 'ref',
+    }));
+  }
+
+  // ─── Diff dangerouslySetInnerHTML ──────────────────────────────────────
+
+  const htmlChange = diffDangerouslySetInnerHTML(
+    oldVNode.props ? oldVNode.props.dangerouslySetInnerHTML : null,
+    newVNode.props ? newVNode.props.dangerouslySetInnerHTML : null
+  );
+  if (htmlChange) {
+    operations.push(createDiffOp(UPDATE, {
+      vnode: newVNode,
+      changes: [htmlChange],
+      changeType: 'innerHTML',
+    }));
+  }
+
+  // ─── Recurse into Children ──────────────────────────────────────────────
+
+  if (oldVNode.type !== '#text' && newVNode.type !== '#text') {
+    reconcileChildren(oldVNode, newVNode, operations, context);
+  }
+}
+
+// ─── Key-Based Reconciliation Helpers ─────────────────────────────────────────
+
+/**
+ * Build a map of keys to child indices.
+ */
+function buildKeyMap(children) {
+  const map = new Map();
+  children.forEach((child, index) => {
+    if (child && child.key !== null) {
+      map.set(child.key, { child, index });
+    }
+  });
+  return map;
+}
+
+/**
+ * Normalize children from a vnode into a flat array.
+ */
+function normalizeChildren(vnode) {
+  if (!vnode) return [];
+  if (!vnode.props || !vnode.props.children) return [];
+
+  const children = vnode.props.children;
+  if (Array.isArray(children)) {
+    return children.filter((c) => c !== null && c !== undefined && typeof c !== 'boolean');
+  }
+  if (children !== null && children !== undefined && typeof children !== 'boolean') {
+    return [children];
+  }
+  return [];
+}
+
+/**
+ * Check if two vnodes are the same type.
+ */
+function isSameType(oldVNode, newVNode) {
+  if (!isValidElement(oldVNode) || !isValidElement(newVNode)) {
+    return false;
+  }
+
+  if (oldVNode.type === newVNode.type) return true;
+
+  if (oldVNode.type === REACT_FRAGMENT_TYPE && newVNode.type === REACT_FRAGMENT_TYPE) {
+    return true;
+  }
+
+  return false;
+}
+
+/**
+ * Compute the Longest Increasing Subsequence of an array.
+ * Used to minimize DOM moves during child reconciliation.
+ * @param {Array<number>} arr
+ * @returns {Array<number>} Indices of LIS elements
+ */
+function longestIncreasingSubsequence(arr) {
+  if (arr.length === 0) return [];
+
+  const dp = new Array(arr.length).fill(1);
+  const prev = new Array(arr.length).fill(-1);
+
+  for (let i = 1; i < arr.length; i++) {
+    for (let j = 0; j < i; j++) {
+      if (arr[j] < arr[i] && dp[j] + 1 > dp[i]) {
+        dp[i] = dp[j] + 1;
+        prev[i] = j;
+      }
+    }
+  }
+
+  // Find the index of the maximum value in dp
+  let maxLen = 0;
+  let maxIdx = 0;
+  for (let i = 0; i < dp.length; i++) {
+    if (dp[i] > maxLen) {
+      maxLen = dp[i];
+      maxIdx = i;
+    }
+  }
+
+  // Backtrack to find the LIS
+  const result = [];
+  let idx = maxIdx;
+  while (idx !== -1) {
+    result.unshift(idx);
+    idx = prev[idx];
+  }
+
+  return result;
+}
+
+// ─── Prop Diffing ─────────────────────────────────────────────────────────────
+
+/**
+ * Diff props between old and new vnodes.
+ */
+function diffProps(oldProps, newProps) {
+  const changes = [];
+  if (!oldProps) oldProps = {};
+  if (!newProps) newProps = {};
+
+  for (const key in newProps) {
+    if (!newProps.hasOwnProperty(key)) continue;
+    if (key === 'children' || key === 'style') continue;
+    if (key.startsWith('on')) continue;
+    if (key === 'dangerouslySetInnerHTML') continue;
+
+    if (!oldProps.hasOwnProperty(key)) {
+      changes.push({ type: 'set', key, value: newProps[key] });
+    } else if (!Object.is(oldProps[key], newProps[key])) {
+      changes.push({ type: 'set', key, value: newProps[key] });
+    }
+  }
+
+  for (const key in oldProps) {
+    if (!oldProps.hasOwnProperty(key)) continue;
+    if (key === 'children' || key === 'style') continue;
+    if (key.startsWith('on')) continue;
+    if (key === 'dangerouslySetInnerHTML') continue;
+
+    if (!newProps.hasOwnProperty(key)) {
+      changes.push({ type: 'remove', key });
+    }
+  }
+
+  return changes;
+}
+
+// ─── Style Diffing ────────────────────────────────────────────────────────────
+
+/**
+ * Diff style objects.
+ */
+function diffStyle(oldStyle, newStyle) {
+  const changes = [];
+
+  if (oldStyle === newStyle) return changes;
+
+  if (typeof oldStyle === 'string' && typeof newStyle === 'string') {
+    if (oldStyle !== newStyle) {
+      changes.push({ type: 'replace', value: newStyle });
+    }
+    return changes;
+  }
+
+  const oldObj = typeof oldStyle === 'object' ? oldStyle : {};
+  const newObj = typeof newStyle === 'object' ? newStyle : {};
+
+  for (const prop in newObj) {
+    if (!newObj.hasOwnProperty(prop)) continue;
+
+    if (!oldObj.hasOwnProperty(prop)) {
+      changes.push({ type: 'set', key: prop, value: newObj[prop] });
+    } else if (!Object.is(oldObj[prop], newObj[prop])) {
+      changes.push({ type: 'set', key: prop, value: newObj[prop] });
+    }
+  }
+
+  for (const prop in oldObj) {
+    if (!oldObj.hasOwnProperty(prop)) continue;
+    if (!newObj.hasOwnProperty(prop)) {
+      changes.push({ type: 'remove', key: prop });
+    }
+  }
+
+  return changes;
+}
+
+// ─── Event Handler Diffing ────────────────────────────────────────────────────
+
+function diffEventHandlers(oldProps, newProps) {
+  const changes = [];
+
+  for (const key in newProps) {
+    if (!newProps.hasOwnProperty(key)) continue;
+    if (!key.startsWith('on')) continue;
+
+    if (!oldProps.hasOwnProperty(key) || oldProps[key] !== newProps[key]) {
+      changes.push({ type: 'set', key, value: newProps[key] });
+    }
+  }
+
+  for (const key in oldProps) {
+    if (!oldProps.hasOwnProperty(key)) continue;
+    if (!key.startsWith('on')) continue;
+
+    if (!newProps.hasOwnProperty(key)) {
+      changes.push({ type: 'remove', key });
+    }
+  }
+
+  return changes;
+}
+
+// ─── Ref Diffing ──────────────────────────────────────────────────────────────
+
+function diffRef(oldRef, newRef) {
+  if (oldRef === newRef) return null;
+
+  if (oldRef && !newRef) {
+    return { type: 'remove', oldRef };
+  }
+
+  if (!oldRef && newRef) {
+    return { type: 'set', newRef };
+  }
+
+  if (oldRef !== newRef) {
+    return { type: 'replace', oldRef, newRef };
+  }
+
+  return null;
+}
+
+// ─── dangerouslySetInnerHTML Diffing ──────────────────────────────────────────
+
+function diffDangerouslySetInnerHTML(oldHtml, newHtml) {
+  if (oldHtml === newHtml) return null;
+  if (!oldHtml && !newHtml) return null;
+
+  const oldStr = oldHtml ? oldHtml.__html : '';
+  const newStr = newHtml ? newHtml.__html : '';
+
+  if (oldStr === newStr) return null;
+
+  return { type: 'set', key: 'dangerouslySetInnerHTML', value: newHtml };
+}
+
+// ─── ShouldComponentUpdate Optimization ────────────────────────────────────────
+
+/**
+ * Create a memo component.
+ */
+function memo(component, areEqual) {
+  const memoComponent = function MemoComponent(props) {
+    return component(props);
+  };
+
+  memoComponent._isMemo = true;
+  memoComponent._compare = areEqual || shallowEqual;
+  memoComponent.displayName = 'Memo(' + (component.displayName || component.name || 'Anonymous') + ')';
+
+  return memoComponent;
+}
+
+/**
+ * Shallow equality comparison.
+ */
+function shallowEqual(objA, objB) {
+  if (Object.is(objA, objB)) return true;
+
+  if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
+    return false;
+  }
+
+  const keysA = Object.keys(objA);
+  const keysB = Object.keys(objB);
+
+  if (keysA.length !== keysB.length) return false;
+
+  for (let i = 0; i < keysA.length; i++) {
+    if (!Object.is(objA[keysA[i]], objB[keysA[i]])) return false;
+  }
+
+  return true;
+}
+
+// ─── Exports ──────────────────────────────────────────────────────────────────
+
+module.exports = {
+  reconcile,
+  reconcileChildren,
+  reconcileElement,
+  diffProps,
+  diffStyle,
+  diffEventHandlers,
+  diffRef,
+  diffDangerouslySetInnerHTML,
+  isSameType,
+  buildKeyMap,
+  normalizeChildren,
+  memo,
+  shallowEqual,
+  createFiber,
+  createDiffOp,
+  longestIncreasingSubsequence,
+  shouldYield,
+  INSERT,
+  MOVE,
+  REMOVE,
+  UPDATE,
+  REPLACE,
+  SKIP,
+  REORDER,
+  RECONCILE_PRIORITY,
+};