elementdrawing 1.0.0

package/src/jsx/runtime/commit.js

@@ -0,0 +1,903 @@
+/**
+ * commit - Commit Phase Operations
+ * ElementDrawing Framework - Applies reconciliation results to the DOM with
+ * insertions, deletions, updates, move operations, effect execution,
+ * ref management, error handling, snapshots, batch commit, and
+ * priority-based commit scheduling.
+ */
+
+'use strict';
+
+const { INSERT, MOVE, REMOVE, UPDATE, REPLACE, SKIP, REORDER } = require('./reconcile');
+
+// ─── Commit Priority ──────────────────────────────────────────────────────────
+
+const COMMIT_PRIORITY = {
+  IMMEDIATE: 0,
+  NORMAL: 1,
+  LOW: 2,
+};
+
+// ─── Internal State ───────────────────────────────────────────────────────────
+
+let isCommitting = false;
+const commitQueue = [];
+const pendingLayoutEffects = [];
+const pendingPassiveEffects = [];
+const pendingInsertionEffects = [];
+const pendingRefCleanups = [];
+const pendingRefAssignments = [];
+const errorRecoveryStack = [];
+let snapshotBeforeMutations = null;
+let currentCommitPriority = COMMIT_PRIORITY.NORMAL;
+
+// ─── Commit Statistics ────────────────────────────────────────────────────────
+
+let commitStats = {
+  totalCommits: 0,
+  totalOperations: 0,
+  totalInsertions: 0,
+  totalDeletions: 0,
+  totalUpdates: 0,
+  totalReplacements: 0,
+  totalMoves: 0,
+  lastCommitTime: 0,
+  lastCommitDuration: 0,
+};
+
+/**
+ * Get commit statistics.
+ * @returns {Object}
+ */
+function getCommitStats() {
+  return Object.assign({}, commitStats);
+}
+
+/**
+ * Reset commit statistics.
+ */
+function resetCommitStats() {
+  commitStats = {
+    totalCommits: 0,
+    totalOperations: 0,
+    totalInsertions: 0,
+    totalDeletions: 0,
+    totalUpdates: 0,
+    totalReplacements: 0,
+    totalMoves: 0,
+    lastCommitTime: 0,
+    lastCommitDuration: 0,
+  };
+}
+
+// ─── Commit Phase Entry ───────────────────────────────────────────────────────
+
+/**
+ * Commit reconciliation results to the DOM.
+ * Processes all diff operations in the correct order:
+ * 1. Snapshot before mutations
+ * 2. DOM deletions
+ * 3. DOM insertions
+ * 4. DOM updates
+ * 5. DOM moves
+ * 6. DOM replacements
+ * 7. Layout effects
+ * 8. Ref cleanups and assignments
+ * 9. Passive effects
+ *
+ * @param {Array} operations - Diff operations from reconciliation
+ * @param {HTMLElement} container - Root DOM container
+ * @param {Object} [options] - Commit options
+ * @param {boolean} [options.batchCommit=false]
+ * @param {Function} [options.onComplete]
+ * @param {number} [options.priority]
+ * @returns {boolean} True if commit succeeded
+ */
+function commitWork(operations, container, options = {}) {
+  if (isCommitting && !options.batchCommit) {
+    commitQueue.push({ operations, container, options });
+    return false;
+  }
+
+  const commitStart = Date.now();
+  isCommitting = true;
+
+  try {
+    // ─── Phase 1: Snapshot before mutations ──────────────────────────────
+    if (operations.some((op) => op.type === REMOVE || op.type === REPLACE)) {
+      snapshotBeforeMutations = captureSnapshot(container);
+    }
+
+    // ─── Phase 2: Process deletions ──────────────────────────────────────
+    const deletions = operations.filter((op) => op.type === REMOVE);
+    processDeletions(deletions, container);
+    commitStats.totalDeletions += deletions.length;
+
+    // ─── Phase 3: Process insertions ─────────────────────────────────────
+    const insertions = operations.filter((op) => op.type === INSERT);
+    processInsertions(insertions, container);
+    commitStats.totalInsertions += insertions.length;
+
+    // ─── Phase 4: Process updates ────────────────────────────────────────
+    const updates = operations.filter((op) => op.type === UPDATE);
+    processUpdates(updates, container);
+    commitStats.totalUpdates += updates.length;
+
+    // ─── Phase 5: Process moves ──────────────────────────────────────────
+    const moves = operations.filter((op) => op.type === MOVE);
+    processMoves(moves, container);
+    commitStats.totalMoves += moves.length;
+
+    // ─── Phase 6: Process replacements ───────────────────────────────────
+    const replacements = operations.filter((op) => op.type === REPLACE);
+    processReplacements(replacements, container);
+    commitStats.totalReplacements += replacements.length;
+
+    // ─── Phase 7: Execute insertion effects ──────────────────────────────
+    flushPendingInsertionEffects();
+
+    // ─── Phase 8: Execute layout effects ─────────────────────────────────
+    flushPendingLayoutEffects();
+
+    // ─── Phase 9: Ref cleanups and assignments ───────────────────────────
+    processRefCleanups();
+    processRefAssignments();
+
+    // ─── Phase 10: Schedule passive effects ──────────────────────────────
+    schedulePassiveEffects();
+
+    // ─── Update stats ────────────────────────────────────────────────────
+    commitStats.totalCommits++;
+    commitStats.totalOperations += operations.length;
+    commitStats.lastCommitTime = commitStart;
+    commitStats.lastCommitDuration = Date.now() - commitStart;
+
+    // ─── Phase 11: Notify completion ──────────────────────────────────────
+    if (typeof options.onComplete === 'function') {
+      options.onComplete();
+    }
+
+    return true;
+  } catch (error) {
+    console.error('[commit] Commit phase error:', error);
+    handleErrorDuringCommit(error, container);
+    return false;
+  } finally {
+    isCommitting = false;
+
+    // Process queued commits
+    if (commitQueue.length > 0) {
+      const next = commitQueue.shift();
+      commitWork(next.operations, next.container, next.options);
+    }
+  }
+}
+
+// ─── DOM Insertions ───────────────────────────────────────────────────────────
+
+/**
+ * Process INSERT operations from the diff.
+ */
+function processInsertions(operations, container) {
+  operations.forEach((op) => {
+    if (op.type !== INSERT) return;
+
+    const { vnode, parentVNode, index } = op.payload;
+    if (!vnode) return;
+
+    try {
+      const domNode = createDOMNodeFromVNode(vnode);
+      if (!domNode) return;
+
+      // Find the parent DOM node
+      const parentDOMNode = findParentDOMNode(container, parentVNode);
+      if (!parentDOMNode) {
+        container.appendChild(domNode);
+        return;
+      }
+
+      // Insert at the correct position
+      if (index !== undefined && index !== null) {
+        const referenceNode = parentDOMNode.childNodes[index];
+        if (referenceNode) {
+          parentDOMNode.insertBefore(domNode, referenceNode);
+        } else {
+          parentDOMNode.appendChild(domNode);
+        }
+      } else {
+        parentDOMNode.appendChild(domNode);
+      }
+
+      // Queue layout effects for the inserted node
+      queueLayoutEffects(vnode, 'mount');
+
+      // Queue ref assignments
+      if (vnode.ref) {
+        pendingRefAssignments.push({ ref: vnode.ref, domNode });
+      }
+
+      // Recursively insert children
+      if (vnode.props && vnode.props.children) {
+        insertChildren(vnode, domNode);
+      }
+    } catch (error) {
+      console.error('[commit] Insertion error:', error);
+      handleErrorDuringCommit(error, container);
+    }
+  });
+}
+
+/**
+ * Recursively insert children of a vnode.
+ */
+function insertChildren(vnode, parentDOMNode) {
+  if (!vnode.props || !vnode.props.children) return;
+
+  const children = Array.isArray(vnode.props.children)
+    ? vnode.props.children
+    : [vnode.props.children];
+
+  children.forEach((child) => {
+    if (!child) return;
+
+    const childDOMNode = createDOMNodeFromVNode(child);
+    if (childDOMNode) {
+      parentDOMNode.appendChild(childDOMNode);
+
+      if (child.ref) {
+        pendingRefAssignments.push({ ref: child.ref, domNode: childDOMNode });
+      }
+
+      insertChildren(child, childDOMNode);
+    }
+  });
+}
+
+// ─── DOM Deletions ────────────────────────────────────────────────────────────
+
+/**
+ * Process REMOVE operations from the diff.
+ */
+function processDeletions(operations, container) {
+  operations.forEach((op) => {
+    if (op.type !== REMOVE) return;
+
+    const { vnode, parentVNode } = op.payload;
+    if (!vnode) return;
+
+    try {
+      const domNode = findDOMNodeForVNode(container, vnode);
+      if (!domNode) return;
+
+      // Queue ref cleanups before removal
+      if (vnode.ref) {
+        pendingRefCleanups.push({ ref: vnode.ref });
+      }
+
+      // Queue unmount layout effects
+      queueLayoutEffects(vnode, 'unmount');
+
+      // Queue unmount passive effects
+      queuePassiveEffects(vnode, 'unmount');
+
+      // Recursively clean up children
+      cleanupChildVNodes(vnode);
+
+      // Remove the DOM node
+      if (domNode.parentNode) {
+        domNode.parentNode.removeChild(domNode);
+      }
+
+      // Clean up stored vnode reference
+      if (domNode.__ed_vnode) {
+        delete domNode.__ed_vnode;
+      }
+    } catch (error) {
+      console.error('[commit] Deletion error:', error);
+      handleErrorDuringCommit(error, container);
+    }
+  });
+}
+
+/**
+ * Recursively clean up child vnodes during deletion.
+ */
+function cleanupChildVNodes(vnode) {
+  if (!vnode.props || !vnode.props.children) return;
+
+  const children = Array.isArray(vnode.props.children)
+    ? vnode.props.children
+    : [vnode.props.children];
+
+  children.forEach((child) => {
+    if (!child || typeof child !== 'object') return;
+
+    if (child.ref) {
+      pendingRefCleanups.push({ ref: child.ref });
+    }
+
+    queueLayoutEffects(child, 'unmount');
+    queuePassiveEffects(child, 'unmount');
+    cleanupChildVNodes(child);
+  });
+}
+
+// ─── DOM Updates ──────────────────────────────────────────────────────────────
+
+/**
+ * Process UPDATE operations from the diff.
+ */
+function processUpdates(operations, container) {
+  operations.forEach((op) => {
+    if (op.type !== UPDATE) return;
+
+    const { vnode, changes, changeType } = op.payload;
+    if (!vnode) return;
+
+    try {
+      const domNode = findDOMNodeForVNode(container, vnode);
+      if (!domNode) return;
+
+      switch (changeType) {
+        case 'props':
+          applyPropChanges(domNode, changes);
+          break;
+        case 'style':
+          applyStyleChanges(domNode, changes);
+          break;
+        case 'events':
+          applyEventChanges(domNode, changes);
+          break;
+        case 'ref':
+          applyRefChanges(domNode, changes);
+          break;
+        case 'text':
+          applyTextChanges(domNode, changes);
+          break;
+        case 'innerHTML':
+          applyInnerHTMLChanges(domNode, changes);
+          break;
+      }
+
+      // Queue update layout effects
+      queueLayoutEffects(vnode, 'update');
+    } catch (error) {
+      console.error('[commit] Update error:', error);
+      handleErrorDuringCommit(error, container);
+    }
+  });
+}
+
+/**
+ * Apply prop changes to a DOM node.
+ */
+function applyPropChanges(domNode, changes) {
+  changes.forEach((change) => {
+    switch (change.type) {
+      case 'set':
+        if (change.key === 'className') {
+          domNode.className = change.value || '';
+        } else if (change.key === 'dangerouslySetInnerHTML') {
+          if (change.value && change.value.__html) {
+            domNode.innerHTML = change.value.__html;
+          }
+        } else if (change.key === 'value') {
+          domNode.value = change.value;
+        } else if (change.key === 'checked') {
+          domNode.checked = change.value;
+        } else if (typeof change.value === 'boolean') {
+          if (change.value) {
+            domNode.setAttribute(change.key, '');
+          } else {
+            domNode.removeAttribute(change.key);
+          }
+        } else {
+          domNode.setAttribute(change.key, change.value);
+        }
+        break;
+
+      case 'remove':
+        if (change.key === 'className') {
+          domNode.className = '';
+        } else if (change.key === 'value') {
+          domNode.value = '';
+        } else if (change.key === 'checked') {
+          domNode.checked = false;
+        } else if (change.key === 'dangerouslySetInnerHTML') {
+          domNode.innerHTML = '';
+        } else {
+          domNode.removeAttribute(change.key);
+        }
+        break;
+    }
+  });
+}
+
+/**
+ * Apply style changes to a DOM node.
+ */
+function applyStyleChanges(domNode, changes) {
+  changes.forEach((change) => {
+    switch (change.type) {
+      case 'replace':
+        domNode.style.cssText = change.value;
+        break;
+      case 'set':
+        domNode.style.setProperty(change.key, change.value);
+        break;
+      case 'remove':
+        domNode.style.removeProperty(change.key);
+        break;
+    }
+  });
+}
+
+/**
+ * Apply event handler changes.
+ */
+function applyEventChanges(domNode, changes) {
+  changes.forEach((change) => {
+    const eventType = change.key.slice(2).toLowerCase();
+    const isCapture = change.key.endsWith('Capture');
+    const handlerKey = isCapture ? '__ed_capture_' + eventType : '__ed_handler_' + eventType;
+
+    switch (change.type) {
+      case 'set':
+        if (domNode[handlerKey]) {
+          domNode.removeEventListener(eventType, domNode[handlerKey], isCapture);
+        }
+        if (typeof change.value === 'function') {
+          domNode[handlerKey] = change.value;
+          domNode.addEventListener(eventType, change.value, isCapture);
+        }
+        break;
+
+      case 'remove':
+        if (domNode[handlerKey]) {
+          domNode.removeEventListener(eventType, domNode[handlerKey], isCapture);
+          domNode[handlerKey] = null;
+        }
+        break;
+    }
+  });
+}
+
+/**
+ * Apply ref changes.
+ */
+function applyRefChanges(domNode, changes) {
+  changes.forEach((change) => {
+    if (change.oldRef) {
+      if (typeof change.oldRef === 'function') {
+        change.oldRef(null);
+      } else if (typeof change.oldRef === 'object') {
+        change.oldRef.current = null;
+      }
+    }
+
+    if (change.newRef) {
+      if (typeof change.newRef === 'function') {
+        change.newRef(domNode);
+      } else if (typeof change.newRef === 'object') {
+        change.newRef.current = domNode;
+      }
+    }
+  });
+}
+
+/**
+ * Apply text content changes.
+ */
+function applyTextChanges(domNode, changes) {
+  changes.forEach((change) => {
+    if (change.key === 'nodeValue' && domNode.nodeType === 3) {
+      domNode.textContent = change.value;
+    }
+  });
+}
+
+/**
+ * Apply innerHTML changes.
+ */
+function applyInnerHTMLChanges(domNode, changes) {
+  changes.forEach((change) => {
+    if (change.type === 'set' && change.value) {
+      domNode.innerHTML = change.value.__html || '';
+    } else if (change.type === 'remove') {
+      domNode.innerHTML = '';
+    }
+  });
+}
+
+// ─── DOM Moves ────────────────────────────────────────────────────────────────
+
+/**
+ * Process MOVE operations (child reordering).
+ */
+function processMoves(operations, container) {
+  operations.forEach((op) => {
+    if (op.type !== MOVE) return;
+
+    const { vnode, fromIndex, toIndex } = op.payload;
+    if (!vnode) return;
+
+    try {
+      const domNode = findDOMNodeForVNode(container, vnode);
+      if (!domNode || !domNode.parentNode) return;
+
+      const parent = domNode.parentNode;
+
+      // Remove from old position
+      parent.removeChild(domNode);
+
+      // Insert at new position
+      const referenceNode = parent.childNodes[toIndex];
+      if (referenceNode) {
+        parent.insertBefore(domNode, referenceNode);
+      } else {
+        parent.appendChild(domNode);
+      }
+
+      // Queue update effects
+      queueLayoutEffects(vnode, 'update');
+    } catch (error) {
+      console.error('[commit] Move error:', error);
+      handleErrorDuringCommit(error, container);
+    }
+  });
+}
+
+// ─── DOM Replacements ─────────────────────────────────────────────────────────
+
+/**
+ * Process REPLACE operations from the diff.
+ */
+function processReplacements(operations, container) {
+  operations.forEach((op) => {
+    if (op.type !== REPLACE) return;
+
+    const { oldVNode, newVNode } = op.payload;
+    if (!oldVNode || !newVNode) return;
+
+    try {
+      const oldDOMNode = findDOMNodeForVNode(container, oldVNode);
+      if (!oldDOMNode) return;
+
+      // Clean up old ref
+      if (oldVNode.ref) {
+        pendingRefCleanups.push({ ref: oldVNode.ref });
+      }
+
+      // Queue unmount effects for old node
+      queueLayoutEffects(oldVNode, 'unmount');
+      queuePassiveEffects(oldVNode, 'unmount');
+      cleanupChildVNodes(oldVNode);
+
+      // Create new DOM node
+      const newDOMNode = createDOMNodeFromVNode(newVNode);
+      if (!newDOMNode) return;
+
+      // Replace in DOM
+      if (oldDOMNode.parentNode) {
+        oldDOMNode.parentNode.replaceChild(newDOMNode, oldDOMNode);
+      }
+
+      // Queue mount effects for new node
+      queueLayoutEffects(newVNode, 'mount');
+      queuePassiveEffects(newVNode, 'mount');
+
+      // Assign new ref
+      if (newVNode.ref) {
+        pendingRefAssignments.push({ ref: newVNode.ref, domNode: newDOMNode });
+      }
+    } catch (error) {
+      console.error('[commit] Replacement error:', error);
+      handleErrorDuringCommit(error, container);
+    }
+  });
+}
+
+// ─── Effect Execution ─────────────────────────────────────────────────────────
+
+/**
+ * Queue a layout effect for execution.
+ */
+function queueLayoutEffects(vnode, phase) {
+  if (!vnode || !vnode._hooks) return;
+
+  vnode._hooks.forEach((hook) => {
+    if (hook && (hook.type === 'layout-effect' || hook.type === 'insertion-effect')) {
+      pendingLayoutEffects.push({ hook, phase });
+    }
+  });
+}
+
+/**
+ * Queue a passive effect for execution.
+ */
+function queuePassiveEffects(vnode, phase) {
+  if (!vnode || !vnode._hooks) return;
+
+  vnode._hooks.forEach((hook) => {
+    if (hook && hook.type === 'passive-effect') {
+      pendingPassiveEffects.push({ hook, phase });
+    }
+  });
+}
+
+/**
+ * Flush pending insertion effects (synchronous, before layout).
+ */
+function flushPendingInsertionEffects() {
+  while (pendingInsertionEffects.length > 0) {
+    const { hook, phase } = pendingInsertionEffects.shift();
+    try {
+      if (phase === 'unmount' && typeof hook.cleanup === 'function') {
+        hook.cleanup();
+        hook.cleanup = null;
+      } else if (hook._shouldRun !== false) {
+        const cleanup = hook.create();
+        if (typeof cleanup === 'function') {
+          hook.cleanup = cleanup;
+        }
+      }
+    } catch (error) {
+      console.error('[commit] Insertion effect error:', error);
+    }
+  }
+}
+
+/**
+ * Flush pending layout effects (synchronous).
+ */
+function flushPendingLayoutEffects() {
+  while (pendingLayoutEffects.length > 0) {
+    const { hook, phase } = pendingLayoutEffects.shift();
+
+    try {
+      if (phase === 'unmount' && typeof hook.cleanup === 'function') {
+        hook.cleanup();
+        hook.cleanup = null;
+      } else if ((phase === 'mount' || phase === 'update') && hook._shouldRun !== false) {
+        const cleanup = hook.create();
+        if (typeof cleanup === 'function') {
+          hook.cleanup = cleanup;
+        }
+      }
+    } catch (error) {
+      console.error('[commit] Layout effect error:', error);
+    }
+  }
+}
+
+/**
+ * Schedule passive effects for async execution after paint.
+ */
+function schedulePassiveEffects() {
+  if (pendingPassiveEffects.length === 0) return;
+
+  const effects = pendingPassiveEffects.splice(0);
+  requestAnimationFrame(() => {
+    setTimeout(() => {
+      effects.forEach(({ hook, phase }) => {
+        try {
+          if (phase === 'unmount' && typeof hook.cleanup === 'function') {
+            hook.cleanup();
+            hook.cleanup = null;
+          } else if ((phase === 'mount' || phase === 'update') && hook._shouldRun !== false) {
+            const cleanup = hook.create();
+            if (typeof cleanup === 'function') {
+              hook.cleanup = cleanup;
+            }
+          }
+        } catch (error) {
+          console.error('[commit] Passive effect error:', error);
+        }
+      });
+    }, 0);
+  });
+}
+
+// ─── Ref Management ───────────────────────────────────────────────────────────
+
+function processRefCleanups() {
+  while (pendingRefCleanups.length > 0) {
+    const { ref } = pendingRefCleanups.shift();
+    try {
+      if (typeof ref === 'function') {
+        ref(null);
+      } else if (typeof ref === 'object' && ref !== null) {
+        ref.current = null;
+      }
+    } catch (error) {
+      console.error('[commit] Ref cleanup error:', error);
+    }
+  }
+}
+
+function processRefAssignments() {
+  while (pendingRefAssignments.length > 0) {
+    const { ref, domNode } = pendingRefAssignments.shift();
+    try {
+      if (typeof ref === 'function') {
+        ref(domNode);
+      } else if (typeof ref === 'object' && ref !== null) {
+        ref.current = domNode;
+      }
+    } catch (error) {
+      console.error('[commit] Ref assignment error:', error);
+    }
+  }
+}
+
+// ─── Error Handling ───────────────────────────────────────────────────────────
+
+function handleErrorDuringCommit(error, container) {
+  errorRecoveryStack.push({ error, container, timestamp: Date.now() });
+
+  if (container && container.__ed_errorBoundary) {
+    const boundary = container.__ed_errorBoundary;
+    if (typeof boundary._handleError === 'function') {
+      try {
+        boundary._handleError(error);
+      } catch (recoveryError) {
+        console.error('[commit] Error boundary also failed:', recoveryError);
+      }
+    }
+  }
+}
+
+// ─── Snapshot ─────────────────────────────────────────────────────────────────
+
+function captureSnapshot(container) {
+  if (!container) return null;
+
+  try {
+    return {
+      scrollTop: container.scrollTop,
+      scrollLeft: container.scrollLeft,
+      scrollHeight: container.scrollHeight,
+      scrollWidth: container.scrollWidth,
+      clientHeight: container.clientHeight,
+      clientWidth: container.clientWidth,
+      timestamp: Date.now(),
+    };
+  } catch (error) {
+    return null;
+  }
+}
+
+function getSnapshot() {
+  return snapshotBeforeMutations;
+}
+
+// ─── Batch Commit Operations ──────────────────────────────────────────────────
+
+function batchCommitWork(callback) {
+  isCommitting = true;
+  const batchedOperations = [];
+
+  try {
+    const originalCommitWork = commitWork;
+    const collectOps = (ops, container, opts) => {
+      batchedOperations.push({ ops, container, opts });
+    };
+
+    callback(collectOps);
+
+    batchedOperations.forEach(({ ops, container, opts }) => {
+      originalCommitWork(ops, container, opts);
+    });
+  } finally {
+    isCommitting = false;
+  }
+}
+
+// ─── Utility Functions ────────────────────────────────────────────────────────
+
+function findParentDOMNode(container, parentVNode) {
+  if (!parentVNode) return container;
+
+  if (container.__ed_vnode === parentVNode) return container;
+
+  const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT);
+  let node;
+  while ((node = walker.nextNode())) {
+    if (node.__ed_vnode === parentVNode) return node;
+  }
+
+  return container;
+}
+
+function findDOMNodeForVNode(container, vnode) {
+  if (!vnode || !container) return null;
+
+  // Fast path: text node lookup
+  if (vnode.type === '#text') {
+    const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT);
+    let node;
+    while ((node = walker.nextNode())) {
+      if (node.__ed_vnode === vnode) return node;
+    }
+    return null;
+  }
+
+  const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT);
+  let node;
+  while ((node = walker.nextNode())) {
+    if (node.__ed_vnode === vnode) return node;
+  }
+
+  return null;
+}
+
+function createDOMNodeFromVNode(vnode) {
+  if (!vnode) return null;
+
+  if (typeof vnode === 'string' || typeof vnode === 'number') {
+    return document.createTextNode(String(vnode));
+  }
+
+  if (vnode.type === '#text') {
+    return document.createTextNode(vnode.props.nodeValue || '');
+  }
+
+  if (typeof vnode.type === 'string') {
+    const domNode = document.createElement(vnode.type);
+
+    if (vnode.props) {
+      Object.keys(vnode.props).forEach((key) => {
+        if (key === 'children') return;
+        if (key === 'dangerouslySetInnerHTML') return;
+
+        const value = vnode.props[key];
+        if (key === 'className') {
+          domNode.className = value || '';
+        } else if (key === 'style' && typeof value === 'object') {
+          Object.assign(domNode.style, value);
+        } else if (key === 'style' && typeof value === 'string') {
+          domNode.style.cssText = value;
+        } else if (value === true) {
+          domNode.setAttribute(key, '');
+        } else if (value !== false && value !== null && value !== undefined) {
+          domNode.setAttribute(key, value);
+        }
+      });
+
+      if (vnode.props.dangerouslySetInnerHTML) {
+        domNode.innerHTML = vnode.props.dangerouslySetInnerHTML.__html || '';
+      }
+    }
+
+    domNode.__ed_vnode = vnode;
+    return domNode;
+  }
+
+  return null;
+}
+
+// ─── Exports ──────────────────────────────────────────────────────────────────
+
+module.exports = {
+  commitWork,
+  batchCommitWork,
+  processInsertions,
+  processDeletions,
+  processUpdates,
+  processMoves,
+  processReplacements,
+  flushPendingLayoutEffects,
+  flushPendingInsertionEffects,
+  schedulePassiveEffects,
+  processRefCleanups,
+  processRefAssignments,
+  handleErrorDuringCommit,
+  captureSnapshot,
+  getSnapshot,
+  findDOMNodeForVNode,
+  findParentDOMNode,
+  createDOMNodeFromVNode,
+  getCommitStats,
+  resetCommitStats,
+  COMMIT_PRIORITY,
+};