@ape-egg/vibe 1.0.0

package/iterate.js

@@ -0,0 +1,451 @@
+import parse from './parse.js';
+import affected from './affected.js';
+import hydrate from './hydrate.js';
+import { resolvePath, getItemKey, computeDiff } from './iteration-utils.js';
+
+// Fast path for iteration rendering (opt-in via window.__VIBE_FAST_ITERATION__)
+// See: _vibe-compiled-iteration-batch.js for implementation details
+// This is a preview of what Vibe Compiled (Phase 2) will do automatically
+import * as fastPath from './_vibe-compiled-iteration-batch.js';
+
+/**
+ * Find a comment node with matching text content in the given nodes.
+ */
+const findComment = (nodes, text) => {
+  for (let i = 0; i < nodes.length; i++) {
+    const node = nodes[i];
+    if (node.nodeType === 8 && node.textContent.trim() === text.trim()) {
+      return node;
+    }
+  }
+  return null;
+};
+
+/**
+ * Clone a parsed tree, mapping element references from original to cloned DOM.
+ * Walks both trees in lockstep - no map building needed since structure is identical.
+ */
+const cloneTreeWithElements = (originalTree, clonedRoot) => {
+  if (!originalTree) return null;
+
+  const cloned = {
+    parsed: originalTree.parsed,
+    element: clonedRoot,
+    children: {},
+    ...(originalTree.attributes && { attributes: originalTree.attributes })
+  };
+
+  if (!originalTree.children) return cloned;
+
+  const clonedChildNodes = clonedRoot?.childNodes;
+
+  // Clone children recursively - use index from key to find cloned element
+  for (const key in originalTree.children) {
+    const child = originalTree.children[key];
+    if (!child || typeof child !== 'object') continue;
+
+    // Handle conditional nodes - need to update comment references
+    if (child.type === 'conditional' && clonedChildNodes) {
+      const { startComment, elseComment, endComment, branches } = child.meta;
+
+      // Find corresponding comments in cloned DOM
+      const clonedStart = findComment(clonedChildNodes, startComment.textContent);
+      const clonedElse = elseComment ? findComment(clonedChildNodes, elseComment.textContent) : null;
+      const clonedEnd = findComment(clonedChildNodes, endComment.textContent);
+
+      cloned.children[key] = {
+        type: 'conditional',
+        meta: {
+          expression: child.meta.expression,
+          startComment: clonedStart || startComment,
+          elseComment: clonedElse,
+          endComment: clonedEnd || endComment,
+          branches // Branch templates are reused (they're cloned during mount)
+        },
+        runtime: {
+          activeBranch: undefined,
+          activeInstance: null,
+          templateRemoved: false
+        },
+        children: {}
+      };
+      continue;
+    }
+
+    // Handle iteration nodes - need to update comment references and fresh runtime
+    if (child.type === 'iteration' && clonedChildNodes) {
+      const { startComment, endComment, template } = child.meta;
+
+      // Find corresponding comments in cloned DOM
+      const clonedStart = findComment(clonedChildNodes, startComment.textContent);
+      const clonedEnd = findComment(clonedChildNodes, endComment.textContent);
+
+      cloned.children[key] = {
+        type: 'iteration',
+        meta: {
+          arrayPath: child.meta.arrayPath,
+          itemAlias: child.meta.itemAlias,
+          indexAlias: child.meta.indexAlias,
+          startComment: clonedStart || startComment,
+          endComment: clonedEnd || endComment,
+          template // Template is reused (cloned during render)
+        },
+        runtime: {
+          instances: [],
+          templateRemoved: false
+        },
+        children: {}
+      };
+      continue;
+    }
+
+    // Extract index from key (format: "nodename_index") - avoid regex for speed
+    const underscoreIdx = key.lastIndexOf('_');
+    const childIndex = underscoreIdx >= 0 ? parseInt(key.slice(underscoreIdx + 1), 10) : -1;
+    const clonedChild = childIndex >= 0 && clonedChildNodes ? clonedChildNodes[childIndex] : null;
+
+    cloned.children[key] = cloneTreeWithElements(child, clonedChild);
+  }
+
+  return cloned;
+};
+
+/**
+ * Initialize a block instance from template nodes.
+ * Uses cached template tree when available for speed.
+ *
+ * @param {NodeList} templateNodes - Template nodes to clone
+ * @param {Object} scopedState - Scoped state (with localVars/parentScope already applied)
+ * @param {Object} cachedTree - Optional cached parsed tree from template
+ * @returns {Object} { element, tree, clonedNodes }
+ */
+export const initializeBlock = (templateNodes, scopedState, cachedTree = null) => {
+  let tree;
+  let clonedNodes = [];
+  let firstElement = null;
+
+  // Fast path: clone cached tree with new element references
+  if (cachedTree) {
+    // Clone nodes directly
+    for (let i = 0; i < templateNodes.length; i++) {
+      const cloned = templateNodes[i].cloneNode(true);
+      clonedNodes.push(cloned);
+      if (!firstElement && cloned.nodeType === 1) {
+        firstElement = cloned;
+      }
+    }
+    // Use virtual root to match template structure (avoids creating DOM container)
+    // cloneTreeWithElements only needs childNodes property
+    tree = cloneTreeWithElements(cachedTree, { childNodes: clonedNodes });
+  } else {
+    // Slow path: clone and parse from scratch
+    for (let i = 0; i < templateNodes.length; i++) {
+      const cloned = templateNodes[i].cloneNode(true);
+      clonedNodes.push(cloned);
+      if (!firstElement && cloned.nodeType === 1) {
+        firstElement = cloned;
+      }
+    }
+
+    // Fallback for text-only templates
+    if (!firstElement && clonedNodes.length > 0) {
+      const container = document.createElement('span');
+      clonedNodes.forEach(node => container.appendChild(node.cloneNode(true)));
+      firstElement = container;
+    }
+
+    tree = firstElement ? parse(firstElement) : null;
+  }
+
+  if (tree) {
+    const affectedElements = affected(tree, {}, scopedState);
+    hydrate(affectedElements, scopedState);
+  }
+
+  return {
+    element: firstElement,
+    tree,
+    clonedNodes
+  };
+};
+
+// Create a proxied state with scoped variables (item, index, array)
+export const createScopedState = (globalState, localVars, parentScope = {}) => {
+  return new Proxy(globalState, {
+    get(target, prop) {
+      // 1. Check local scope first (item, index, array)
+      if (prop in localVars) {
+        return localVars[prop];
+      }
+
+      // 2. Check parent scope (for nested iterations)
+      if (prop in parentScope) {
+        return parentScope[prop];
+      }
+
+      // 3. Fall back to global state
+      return Reflect.get(target, prop);
+    },
+
+    set(target, prop, value) {
+      // Only allow setting global state, not local vars
+      if (prop in localVars) {
+        console.warn(`Cannot modify iteration variable '${prop}'`);
+        return false;
+      }
+      if (prop in parentScope) {
+        console.warn(`Cannot modify parent iteration variable '${prop}'`);
+        return false;
+      }
+      return Reflect.set(target, prop, value);
+    },
+
+    ownKeys(target) {
+      // Return all keys: local vars, parent scope, and global state
+      const localKeys = Object.keys(localVars);
+      const parentKeys = Object.keys(parentScope);
+      const globalKeys = Reflect.ownKeys(target);
+      return [...new Set([...localKeys, ...parentKeys, ...globalKeys])];
+    },
+
+    has(target, prop) {
+      // Check if property exists in local scope, parent scope, or global state
+      return prop in localVars || prop in parentScope || Reflect.has(target, prop);
+    },
+
+    getOwnPropertyDescriptor(target, prop) {
+      // Provide property descriptor for local vars and parent scope
+      if (prop in localVars) {
+        return { configurable: true, enumerable: true, value: localVars[prop] };
+      }
+      if (prop in parentScope) {
+        return { configurable: true, enumerable: true, value: parentScope[prop] };
+      }
+      return Reflect.getOwnPropertyDescriptor(target, prop);
+    }
+  });
+};
+
+// Render all iterations in the parsed tree
+export const renderAllIterations = (tree, state, linkList, parentScope = {}) => {
+  // If this is an iteration node, render it
+  if (tree.type === 'iteration') {
+    renderIteration(tree, state, linkList, parentScope);
+    return;
+  }
+
+  // Recursively render iterations in child nodes
+  if (tree.children) {
+    for (const key in tree.children) {
+      const child = tree.children[key];
+      if (child && typeof child === 'object') {
+        renderAllIterations(child, state, linkList, parentScope);
+      }
+    }
+  }
+};
+
+// Callback for rendering conditionals - set by conditionals.js to avoid circular import
+let _renderAllConditionals = () => {};
+export const setRenderAllConditionals = (fn) => { _renderAllConditionals = fn; };
+
+// Initial render of an iteration block
+export const renderIteration = (iterationNode, state, linkList, parentScope = {}) => {
+  const { arrayPath, itemAlias, indexAlias, template, startComment, endComment } = iterationNode.meta;
+
+  // Already rendered - updates go through updateIteration
+  if (iterationNode.runtime.instances?.length > 0) return;
+
+  // Remove template nodes from DOM on first render
+  if (!iterationNode.runtime.templateRemoved) {
+    let node = startComment.nextSibling;
+    while (node && node !== endComment) {
+      const next = node.nextSibling;
+      node.parentNode?.removeChild(node);
+      node = next;
+    }
+    iterationNode.runtime.templateRemoved = true;
+  }
+
+  const parent = startComment.parentNode;
+
+  const array = resolvePath(state, arrayPath);
+  if (!Array.isArray(array) || array.length === 0) {
+    iterationNode.runtime.instances = [];
+    return;
+  }
+
+  // Fast path: opt-in via window.__VIBE_FAST_ITERATION__ (preview of Vibe Compiled)
+  if (window.__VIBE_FAST_ITERATION__ && fastPath.canUseFastPath(template)) {
+    fastPath.renderFast(iterationNode, array, state, parent, endComment);
+    return;
+  }
+
+  // Standard path: clone and hydrate each item (handles nested iterations/conditionals)
+  const instances = [];
+  const templateNodes = [...template.element.childNodes];
+
+  for (let i = 0; i < array.length; i++) {
+    const item = array[i];
+    const localVars = { [itemAlias]: item, [indexAlias]: i };
+    const scopedState = createScopedState(state, localVars, parentScope);
+
+    // Clone, parse, hydrate
+    const { element, tree, clonedNodes } = initializeBlock(templateNodes, scopedState, template);
+
+    // Insert cloned nodes
+    clonedNodes.forEach(node => parent.insertBefore(node, endComment));
+
+    // Recursively render nested iterations and conditionals
+    if (tree) {
+      const nestedScope = { ...parentScope, ...localVars };
+      renderAllIterations(tree, scopedState, linkList, nestedScope);
+      _renderAllConditionals(tree, scopedState, linkList, nestedScope);
+    }
+
+    instances.push({ element, tree, item, index: i, clonedNodes });
+  }
+
+  iterationNode.runtime.instances = instances;
+};
+
+// Update an iteration block when array changes
+export const updateIteration = (iterationNode, newState, oldState, linkList, parentScope = {}) => {
+  if (!iterationNode.runtime.instances || !iterationNode.runtime.templateRemoved) return;
+
+  const { arrayPath, template, startComment, endComment } = iterationNode.meta;
+  const oldArray = resolvePath(oldState, arrayPath) || [];
+  const newArray = resolvePath(newState, arrayPath) || [];
+
+  // Fast path: opt-in via window.__VIBE_FAST_ITERATION__ (preview of Vibe Compiled)
+  // Use for bulk operations (large arrays or empty→full transitions)
+  const isEmptyToFull = oldArray.length === 0 && newArray.length > 0;
+  const isFullToEmpty = oldArray.length > 0 && newArray.length === 0;
+  const isLargeArray = newArray.length > 100 || oldArray.length > 100;
+
+  if (window.__VIBE_FAST_ITERATION__ && fastPath.canUseFastPath(template) && (isEmptyToFull || isFullToEmpty || isLargeArray)) {
+    fastPath.updateFast(iterationNode, newArray, newState, startComment, endComment);
+    return;
+  }
+
+  // Standard diff-based updates
+  const oldKeys = oldArray.map((item, i) => getItemKey(item, i));
+  const newKeys = newArray.map((item, i) => getItemKey(item, i));
+  const operations = computeDiff(oldKeys, newKeys, oldArray, newArray);
+
+  operations.forEach(op => {
+    switch (op.type) {
+      case 'REMOVE': removeInstance(iterationNode, op.index); break;
+      case 'ADD': addInstance(iterationNode, op.item, op.index, newState, linkList, parentScope); break;
+      case 'MOVE': moveInstance(iterationNode, op.from, op.to); break;
+      case 'UPDATE': updateInstance(iterationNode, op.index, op.item, newState, linkList, parentScope); break;
+    }
+  });
+
+  iterationNode.runtime.instances.forEach((inst, i) => { inst.index = i; });
+};
+
+// Add a new instance at the specified index
+const addInstance = (iterationNode, item, index, state, linkList, parentScope) => {
+  const { itemAlias, indexAlias, template, startComment, endComment } = iterationNode.meta;
+
+  const localVars = { [itemAlias]: item, [indexAlias]: index };
+  const scopedState = createScopedState(state, localVars, parentScope);
+  const templateNodes = [...template.element.childNodes];
+
+  const { element, tree, clonedNodes } = initializeBlock(templateNodes, scopedState, template);
+
+  // Find insertion point
+  const insertBefore = index < iterationNode.runtime.instances.length
+    ? iterationNode.runtime.instances[index].clonedNodes?.[0] || iterationNode.runtime.instances[index].element
+    : endComment;
+
+  // Insert cloned nodes
+  clonedNodes.forEach(node => startComment.parentNode.insertBefore(node, insertBefore));
+
+  // Recursively render nested iterations and conditionals
+  if (tree) {
+    const nestedScope = { ...parentScope, ...localVars };
+    renderAllIterations(tree, scopedState, linkList, nestedScope);
+    _renderAllConditionals(tree, scopedState, linkList, nestedScope);
+  }
+
+  iterationNode.runtime.instances.splice(index, 0, { element, tree, item, index, clonedNodes });
+};
+
+// Remove an instance at the specified index
+const removeInstance = (iterationNode, index) => {
+  if (index < 0 || index >= iterationNode.runtime.instances.length) return;
+
+  const instance = iterationNode.runtime.instances[index];
+
+  // Remove all cloned nodes from DOM
+  (instance.clonedNodes || [instance.element]).forEach(node => node?.parentNode?.removeChild(node));
+
+  iterationNode.runtime.instances.splice(index, 1);
+};
+
+// Move an instance from one position to another
+const moveInstance = (iterationNode, fromIndex, toIndex) => {
+  if (fromIndex === toIndex) return;
+  if (fromIndex < 0 || fromIndex >= iterationNode.runtime.instances.length) return;
+  if (toIndex < 0 || toIndex >= iterationNode.runtime.instances.length) return;
+
+  const instance = iterationNode.runtime.instances[fromIndex];
+  const nodes = instance.clonedNodes || [instance.element];
+  const parent = nodes[0]?.parentNode;
+
+  iterationNode.runtime.instances.splice(fromIndex, 1);
+  iterationNode.runtime.instances.splice(toIndex, 0, instance);
+
+  // Find new insertion point
+  const nextInstance = iterationNode.runtime.instances[toIndex + 1];
+  const insertBefore = nextInstance
+    ? (nextInstance.clonedNodes?.[0] || nextInstance.element)
+    : iterationNode.meta.endComment;
+
+  // Move all nodes
+  nodes.forEach(node => parent.insertBefore(node, insertBefore));
+};
+
+// Update an instance with new item data
+const updateInstance = (iterationNode, index, newItem, state, linkList, parentScope = {}) => {
+  if (index < 0 || index >= iterationNode.runtime.instances.length) return;
+
+  const { itemAlias, indexAlias, template } = iterationNode.meta;
+  const instance = iterationNode.runtime.instances[index];
+
+  const localVars = { [itemAlias]: newItem, [indexAlias]: index };
+  const scopedState = createScopedState(state, localVars, parentScope);
+  const templateNodes = [...template.element.childNodes];
+
+  const { element, tree, clonedNodes } = initializeBlock(templateNodes, scopedState, template);
+
+  // Remove old nodes, insert new ones in same position
+  const oldNodes = instance.clonedNodes || [instance.element];
+  const insertBefore = oldNodes[oldNodes.length - 1]?.nextSibling;
+  const parent = oldNodes[0]?.parentNode;
+
+  oldNodes.forEach(node => node?.parentNode?.removeChild(node));
+  clonedNodes.forEach(node => parent.insertBefore(node, insertBefore));
+
+  // Recursively render nested iterations and conditionals
+  if (tree) {
+    const nestedScope = { ...parentScope, ...localVars };
+    renderAllIterations(tree, scopedState, linkList, nestedScope);
+    _renderAllConditionals(tree, scopedState, linkList, nestedScope);
+  }
+
+  // Update instance
+  instance.element = element;
+  instance.tree = tree;
+  instance.item = newItem;
+  instance.clonedNodes = clonedNodes;
+};
+
+export default {
+  renderIteration,
+  updateIteration,
+  renderAllIterations,
+  createScopedState
+};

package/iteration-utils.js

@@ -0,0 +1,261 @@
+// Utility functions for array iteration
+import { ITERATION_START_REGEX, CONDITIONAL_START_REGEX } from './constants.js';
+
+// Resolve nested paths in state (e.g., "user.items" -> state.user.items)
+export const resolvePath = (obj, path) => {
+  if (!path || !obj) return undefined;
+  return path.split(".").reduce((acc, part) => acc?.[part], obj);
+};
+
+// Clone template element preserving structure
+export const cloneTemplate = (templateElement) => {
+  return templateElement.cloneNode(true);
+};
+
+// Find matching <!-- /each --> comment with depth tracking
+export const findEndComment = (nodes, startIndex) => {
+  let depth = 1;
+  for (let i = startIndex; i < nodes.length; i++) {
+    if (nodes[i].nodeName === "#comment") {
+      const text = nodes[i].textContent.trim();
+      if (ITERATION_START_REGEX.test(text)) {
+        depth++;
+      } else if (text === "/each") {
+        depth--;
+        if (depth === 0) {
+          return i;
+        }
+      }
+    }
+  }
+  throw new Error("Unmatched <!-- each --> comment: missing <!-- /each -->");
+};
+
+// Find matching <!-- /if --> and optional <!-- else --> with depth tracking
+// Returns { elseIndex: number | null, endIndex: number }
+export const findConditionalEnd = (nodes, startIndex) => {
+  let depth = 1;
+  let elseIndex = null;
+
+  for (let i = startIndex; i < nodes.length; i++) {
+    if (nodes[i].nodeName === "#comment") {
+      const text = nodes[i].textContent.trim();
+
+      // Check for nested if
+      if (CONDITIONAL_START_REGEX.test(text)) {
+        depth++;
+      }
+      // Check for else at current depth
+      else if (text === "else" && depth === 1 && elseIndex === null) {
+        elseIndex = i;
+      }
+      // Check for /if
+      else if (text === "/if") {
+        depth--;
+        if (depth === 0) {
+          return { elseIndex, endIndex: i };
+        }
+      }
+    }
+  }
+
+  throw new Error("Unmatched <!-- if --> comment: missing <!-- /if -->");
+};
+
+// Generate stable hash for objects
+export const stableHash = (obj) => {
+  if (obj === null || obj === undefined) return "null";
+  if (typeof obj !== "object") return String(obj);
+
+  try {
+    // Sort keys for stable hashing
+    const str = JSON.stringify(obj, Object.keys(obj).sort());
+    return simpleHash(str);
+  } catch (e) {
+    // Fallback for circular references
+    return simpleHash(String(obj));
+  }
+};
+
+// Simple hash function
+const simpleHash = (str) => {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    const char = str.charCodeAt(i);
+    hash = (hash << 5) - hash + char;
+    hash = hash & hash; // Convert to 32-bit integer
+  }
+  return Math.abs(hash).toString(36);
+};
+
+// Deep equality check
+export const deepEqual = (a, b) => {
+  if (a === b) return true;
+
+  if (a === null || b === null || a === undefined || b === undefined) {
+    return a === b;
+  }
+
+  if (typeof a !== "object" || typeof b !== "object") {
+    return a === b;
+  }
+
+  if (Array.isArray(a) !== Array.isArray(b)) {
+    return false;
+  }
+
+  if (Array.isArray(a)) {
+    if (a.length !== b.length) return false;
+    for (let i = 0; i < a.length; i++) {
+      if (!deepEqual(a[i], b[i])) return false;
+    }
+    return true;
+  }
+
+  const keysA = Object.keys(a);
+  const keysB = Object.keys(b);
+
+  if (keysA.length !== keysB.length) return false;
+
+  for (const key of keysA) {
+    if (!keysB.includes(key)) return false;
+    if (!deepEqual(a[key], b[key])) return false;
+  }
+
+  return true;
+};
+
+// Longest Common Subsequence algorithm
+export const longestCommonSubsequence = (arr1, arr2) => {
+  const m = arr1.length;
+  const n = arr2.length;
+  const dp = Array(m + 1)
+    .fill(null)
+    .map(() => Array(n + 1).fill(0));
+
+  // Build LCS table
+  for (let i = 1; i <= m; i++) {
+    for (let j = 1; j <= n; j++) {
+      if (arr1[i - 1] === arr2[j - 1]) {
+        dp[i][j] = dp[i - 1][j - 1] + 1;
+      } else {
+        dp[i][j] = Math.max(dp[i - 1][j], dp[i][j - 1]);
+      }
+    }
+  }
+
+  // Backtrack to find LCS
+  const lcs = [];
+  let i = m,
+    j = n;
+  while (i > 0 && j > 0) {
+    if (arr1[i - 1] === arr2[j - 1]) {
+      lcs.unshift(arr1[i - 1]);
+      i--;
+      j--;
+    } else if (dp[i - 1][j] > dp[i][j - 1]) {
+      i--;
+    } else {
+      j--;
+    }
+  }
+
+  return lcs;
+};
+
+// Generate unique key for array items
+export const getItemKey = (item, index) => {
+  // 1. If item has 'id' property, use it
+  if (item && typeof item === "object" && "id" in item) {
+    return `id_${item.id}`;
+  }
+
+  // 2. If item is primitive, use value + index
+  if (typeof item !== "object" || item === null) {
+    return `val_${item}_${index}`;
+  }
+
+  // 3. For objects without id, use stable hash
+  return `hash_${stableHash(item)}_${index}`;
+};
+
+// Compute diff operations between old and new arrays
+export const computeDiff = (oldKeys, newKeys, oldArray, newArray) => {
+  const operations = [];
+
+  // Use LCS to find common elements
+  const common = longestCommonSubsequence(oldKeys, newKeys);
+
+  // Build index maps for quick lookup
+  const newKeyMap = new Map(newKeys.map((key, idx) => [key, idx]));
+  const oldKeyMap = new Map(oldKeys.map((key, idx) => [key, idx]));
+
+  // Track which keys we've processed
+  const processedOld = new Set();
+  const processedNew = new Set();
+
+  // First pass: identify items to keep and check for updates
+  common.forEach((key) => {
+    const oldIdx = oldKeyMap.get(key);
+    const newIdx = newKeyMap.get(key);
+    processedOld.add(oldIdx);
+    processedNew.add(newIdx);
+
+    // Check if item content changed
+    if (!deepEqual(oldArray[oldIdx], newArray[newIdx])) {
+      operations.push({
+        type: "UPDATE",
+        index: newIdx,
+        oldIndex: oldIdx,
+        item: newArray[newIdx],
+      });
+    }
+
+    // Check if position changed
+    if (oldIdx !== newIdx) {
+      operations.push({
+        type: "MOVE",
+        from: oldIdx,
+        to: newIdx,
+        key,
+      });
+    }
+  });
+
+  // Second pass: identify removals
+  oldKeys.forEach((key, idx) => {
+    if (!processedOld.has(idx)) {
+      operations.push({
+        type: "REMOVE",
+        index: idx,
+        key,
+      });
+    }
+  });
+
+  // Third pass: identify additions
+  newKeys.forEach((key, idx) => {
+    if (!processedNew.has(idx)) {
+      operations.push({
+        type: "ADD",
+        index: idx,
+        item: newArray[idx],
+        key,
+      });
+    }
+  });
+
+  // Sort operations: REMOVE first (from end), then MOVE, then ADD, then UPDATE
+  return operations.sort((a, b) => {
+    const priority = { REMOVE: 0, MOVE: 1, ADD: 2, UPDATE: 3 };
+    if (priority[a.type] !== priority[b.type]) {
+      return priority[a.type] - priority[b.type];
+    }
+    // For REMOVE, process from end to beginning
+    if (a.type === "REMOVE") {
+      return b.index - a.index;
+    }
+    // For others, process in order
+    return a.index - b.index;
+  });
+};