@dinoreic/fez 0.4.0 → 0.5.2

package/src/fez/lib/template.js

@@ -1,128 +1,123 @@
-function parseBlock(data, ifStack) {
-  data = data
-    .replace(/^#?raw/, '@html')
-    .replace(/^#?html/, '@html')
-
-  // Handle #if directive
-  if (data.startsWith('#if') || data.startsWith('if')) {
-    ifStack.push(false)
-    data = data.replace(/^#?if/, '')
-    return `\${ ${data} ? \``
-  }
-  else if (data.startsWith('#unless') || data.startsWith('unless')) {
-    ifStack.push(false)
-    data = data.replace(/^#?unless/, '')
-    return `\${ !(${data}) ? \``
-  }
-  else if (data == '/block') {
-    return '`) && \'\'}'
-  }
-  else if (data.startsWith('#for') || data.startsWith('for')) {
-    data = data.replace(/^#?for/, '')
-    const el = data.split(' in ', 2)
-    return '${' + el[1] + '.map((' + el[0] + ')=>`'
-  }
-  else if (data.startsWith('#each') || data.startsWith('each')) {
-    data = data.replace(/^#?each/, '')
-    const el = data.split(' as ', 2)
-    return '${' + el[0] + '.map((' + el[1] + ')=>`'
-  }
-  else if (data == ':else' || data == 'else') {
-    ifStack[ifStack.length - 1] = true
-    return '` : `'
-  }
-  else if (data == '/if' || data == '/unless') {
-    return ifStack.pop() ? '`}' : '` : ``}'
+/**
+ * Fez Template Compiler
+ *
+ * Compiles Svelte-style templates to render functions.
+ * Supports legacy {{ }} and [[ ]] syntax via auto-conversion.
+ *
+ * Syntax:
+ *   {expression}        - Output escaped value
+ *   {@html expr}        - Output raw HTML
+ *   {@json expr}        - Output formatted JSON
+ *   {#if cond}...{/if}  - Conditional
+ *   {#each arr as item} - Loop
+ *   {#for item in arr}  - Loop (alt syntax)
+ */
+
+import createSvelteTemplate from "./svelte-template.js";
+
+// Template cache
+const cache = new Map();
+
+// =============================================================================
+// MAIN EXPORT
+// =============================================================================
+
+/**
+ * Create a template render function
+ *
+ * @param {string} text - Template HTML
+ * @param {Object} opts - { name: componentName }
+ * @returns {Function} Render function (ctx) => html
+ */
+export default function createTemplate(text, opts = {}) {
+  // Check cache
+  if (cache.has(text)) {
+    return cache.get(text);
   }
-  else if (data == '/for' || data == '/each') {
-    return '`).join("")}'
+
+  // Convert legacy syntax if detected
+  if (hasLegacySyntax(text)) {
+    text = convertLegacySyntax(text, opts.name);
   }
-  else {
-    const prefix = '@html '
 
-    if (data.startsWith('json ')) {
-      data = data.replace('json ', "@html '<pre class=json>'+JSON.stringify(")
-      data += ", null, 2) + '</pre>'"
-    }
+  // Compile
+  const fn = createSvelteTemplate(text, opts);
+  cache.set(text, fn);
 
-    if (data.startsWith(prefix)) {
-      data = data.replace(prefix, '')
-    } else {
-      data = `Fez.htmlEscape(${data})`
-    }
+  return fn;
+}
 
-    return '${' + data + '}'
-  }
+/**
+ * Clear template cache (for testing)
+ */
+export function clearTemplateCache() {
+  cache.clear();
 }
 
-// let tpl = createTemplate(string)
-// tpl({ ... this state ...})
-export default function createTemplate(text, opts = {}) {
-  const ifStack = []
-
-  // some templating engines, as GoLangs use {{ for templates. Allow usage of [[ for fez
-  text = text
-    .replaceAll('[[', '{{')
-    .replaceAll(']]', '}}')
-
-  text = text.replace(/(\w+)=\{\{\s*(.*?)\s*\}\}([\s>])/g, (match, p1, p2, p3) => {
-    return `${p1}="{`+`{ ${p2} }`+`}"${p3}`
-  })
-
-  // {{block foo}} ... {{/block}}
-  // {{block:foo}}
-  const blocks = {}
-  text = text.replace(/\{\{block\s+(\w+)\s*\}\}([^§]+)\{\{\/block\}\}/g, (_, name, block) => {
-    blocks[name] = block
-    return ''
-  })
-  text = text.replace(/\{\{block:([\w\-]+)\s*\}\}/g, (_, name) => blocks[name] || `block:${name}?`)
-
-  // {{#for el in list }}}}
-  //   <ui-comment :comment="el"></ui-comment>
-  //   -> :comment="{{ JSON.stringify(el) }}"
-  // skip attr="foo.bar"
-  text = text.replace(/:(\w+)="([\w\.\[\]]+)"/, (_, m1, m2) => {
-    return `:${m1}=Fez.store.delete({{ Fez.store.set(${m2}) }})`
-  })
-
-  let result = text.replace(/{{(.*?)}}/g, (_, content) => {
-    content = content.replaceAll('&#x60;', '`')
-
-    content = content
-      .replaceAll('&lt;', '<')
-      .replaceAll('&gt;', '>')
-      .replaceAll('&amp;', '&')
-    const parsedData = parseBlock(content, ifStack);
-
-    return parsedData
-  });
-
-  result = result
-    .replace(/<!\-\-.*?\-\->/g, '')
-    .replace(/>\s+</g, '><')
-
-  result = '`' + result.trim() + '`'
-
-  try {
-    const funcBody = `const fez = this;
-      with (this) {
-        return ${result}
-      }
-    `
-    const tplFunc = new Function(funcBody);
-    const outFunc = (o) => {
-      try {
-        return tplFunc.bind(o)()
-      } catch(e) {
-        e.message = `FEZ template runtime error: ${e.message}\n\nTemplate source: ${result}`
-        console.error(e)
-      }
-    }
-    return outFunc
-  } catch(e) {
-    e.message = `FEZ template compile error: ${e.message}Template source:\n${result}`
-    console.error(e)
-    return ()=>Fez.error(`Template Compile Error`, true)
+// =============================================================================
+// LEGACY SYNTAX SUPPORT
+// =============================================================================
+
+/**
+ * Check if text uses old {{ }} or [[ ]] syntax
+ */
+function hasLegacySyntax(text) {
+  return (
+    (text.includes("{{") && text.includes("}}")) ||
+    (text.includes("[[") && text.includes("]]"))
+  );
+}
+
+/**
+ * Convert {{ }}/[[ ]] syntax to { } syntax
+ *
+ * Mappings:
+ *   {{ expr }}      -> {expr}
+ *   {{if cond}}     -> {#if cond}
+ *   {{for x in y}}  -> {#for x in y}
+ *   {{each y as x}} -> {#each y as x}
+ *   {{raw x}}       -> {@html x}
+ *   {{json x}}      -> {@json x}
+ *   {{block x}}     -> {@block x}
+ */
+function convertLegacySyntax(text, componentName) {
+  // Normalize [[ ]] to {{ }}
+  text = text.replaceAll("[[", "{{").replaceAll("]]", "}}");
+
+  // Blocks
+  text = text.replace(/\{\{block\s+(\w+)\s*\}\}/g, "{@block $1}");
+  text = text.replace(/\{\{\/block\}\}/g, "{/block}");
+  text = text.replace(/\{\{block:([\w\-]+)\s*\}\}/g, "{@block:$1}");
+
+  // Conditionals
+  text = text.replace(/\{\{#?if\s+(.*?)\}\}/g, "{#if $1}");
+  text = text.replace(/\{\{\/if\}\}/g, "{/if}");
+  text = text.replace(/\{\{#?unless\s+(.*?)\}\}/g, "{#unless $1}");
+  text = text.replace(/\{\{\/unless\}\}/g, "{/unless}");
+  text = text.replace(/\{\{:?else\s+if\s+(.*?)\}\}/g, "{:else if $1}");
+  text = text.replace(/\{\{:?elsif\s+(.*?)\}\}/g, "{:else if $1}");
+  text = text.replace(/\{\{:?elseif\s+(.*?)\}\}/g, "{:else if $1}");
+  text = text.replace(/\{\{:?else\}\}/g, "{:else}");
+
+  // Loops
+  text = text.replace(/\{\{#?for\s+(.*?)\}\}/g, "{#for $1}");
+  text = text.replace(/\{\{\/for\}\}/g, "{/for}");
+  text = text.replace(/\{\{#?each\s+(.*?)\}\}/g, "{#each $1}");
+  text = text.replace(/\{\{\/each\}\}/g, "{/each}");
+
+  // Special directives
+  text = text.replace(/\{\{#?(?:raw|html)\s+(.*?)\}\}/g, "{@html $1}");
+  text = text.replace(/\{\{json\s+(.*?)\}\}/g, "{@json $1}");
+
+  // Expressions
+  text = text.replace(/\{\{\s*(.*?)\s*\}\}/g, "{$1}");
+
+  // Log warning
+  if (componentName) {
+    console.warn(
+      `Fez component "${componentName}" uses old {{ ... }} notation, converting.`,
+    );
   }
+
+  return text;
 }

package/src/fez/morph.js

@@ -0,0 +1,384 @@
+/**
+ * fez-morph - Component-aware DOM differ for Fez
+ *
+ * Replaces Idiomorph with a simpler, Fez-specific algorithm that:
+ * - Matches fez components by UID (never morphs them, only moves/preserves/destroys)
+ * - Matches keyed elements by fez-keep attribute (preserved entirely)
+ * - Matches elements by id (morphed in place)
+ * - Falls back to tag+position matching
+ * - Uses classList.add/remove for class sync (preserves CSS animations)
+ * - Skips value sync on focused INPUT/TEXTAREA/SELECT
+ */
+
+// ---------------------------------------------------------------------------
+// Public API
+// ---------------------------------------------------------------------------
+
+/**
+ * Morph target element to match newNode structure.
+ * Mutates target in-place. newNode is consumed (nodes may be moved out of it).
+ *
+ * @param {Element} target  - live DOM element to update
+ * @param {Element} newNode - detached element with desired state
+ * @param {Object}  opts
+ * @param {Function} opts.skipNode(oldNode)    - return true to preserve subtree as-is
+ * @param {Function} opts.beforeRemove(node)   - called before removing a node
+ */
+export function fezMorph(target, newNode, opts = {}) {
+  // NOTE: We do NOT sync root element attributes here.
+  // The root is the component wrapper (class="fez fez-name goXXX") managed by Fez,
+  // not by the template. Syncing root attrs would strip component CSS classes.
+
+  // Diff children recursively
+  diffChildren(target, newNode, opts);
+
+  // Clean up trailing whitespace text node (matches old behavior)
+  const next = target.nextSibling;
+  if (next?.nodeType === 3 && !next.textContent.trim()) {
+    next.remove();
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Attribute Sync
+// ---------------------------------------------------------------------------
+
+function syncAttributes(oldNode, newNode) {
+  const oldAttrs = oldNode.attributes;
+  const newAttrs = newNode.attributes;
+
+  // Check if this is a focused form input - skip value/checked sync
+  const isActiveInput =
+    oldNode === document.activeElement && isFormInput(oldNode);
+
+  // Remove attributes not present in new node
+  for (let i = oldAttrs.length - 1; i >= 0; i--) {
+    const name = oldAttrs[i].name;
+    if (!newNode.hasAttribute(name)) {
+      oldNode.removeAttribute(name);
+    }
+  }
+
+  // Set/update attributes from new node
+  for (let i = 0; i < newAttrs.length; i++) {
+    const attr = newAttrs[i];
+
+    // Skip value/checked on focused form inputs
+    if (isActiveInput && (attr.name === "value" || attr.name === "checked")) {
+      continue;
+    }
+
+    if (oldNode.getAttribute(attr.name) !== attr.value) {
+      if (attr.name === "class") {
+        syncClassList(oldNode, newNode);
+      } else {
+        try {
+          oldNode.setAttribute(attr.name, attr.value);
+        } catch (error) {
+          console.error("Error setting attribute:", {
+            node: oldNode,
+            attribute: attr.name,
+            error: error.message,
+          });
+        }
+      }
+    }
+  }
+}
+
+/**
+ * Sync classes using classList.add/remove to preserve CSS animations.
+ */
+function syncClassList(oldNode, newNode) {
+  const oldClasses = new Set(
+    (oldNode.getAttribute("class") || "").split(/\s+/).filter(Boolean),
+  );
+  const newClasses = new Set(
+    (newNode.getAttribute("class") || "").split(/\s+/).filter(Boolean),
+  );
+
+  for (const cls of oldClasses) {
+    if (!newClasses.has(cls)) {
+      oldNode.classList.remove(cls);
+    }
+  }
+  for (const cls of newClasses) {
+    if (!oldClasses.has(cls)) {
+      oldNode.classList.add(cls);
+    }
+  }
+}
+
+function isFormInput(node) {
+  const tag = node.nodeName;
+  return tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT";
+}
+
+// ---------------------------------------------------------------------------
+// Node Keys
+// ---------------------------------------------------------------------------
+
+function getNodeKey(node) {
+  if (node.nodeType !== 1) return null;
+
+  // Fez component - match by UID
+  if (node.classList?.contains("fez") && node.fez) {
+    return "fez-uid-" + node.fez.UID;
+  }
+
+  // fez-keep attribute
+  const keepKey = node.getAttribute?.("fez-keep");
+  if (keepKey) return "keep-" + keepKey;
+
+  // id attribute
+  const id = node.id;
+  if (id) return "id-" + id;
+
+  return null;
+}
+
+/**
+ * For new (template) nodes, get the key they SHOULD match against.
+ * New nodes don't have .fez instances, but they may have fez-keep or id.
+ */
+function getNewNodeKey(node) {
+  if (node.nodeType !== 1) return null;
+
+  // fez-keep attribute
+  const keepKey = node.getAttribute?.("fez-keep");
+  if (keepKey) return "keep-" + keepKey;
+
+  // id attribute
+  const id = node.id;
+  if (id) return "id-" + id;
+
+  // Check if this is a placeholder for a fez component (has fez class)
+  // New template nodes don't have .fez but may have class="fez fez-name"
+  if (node.classList?.contains("fez")) {
+    // Match by fez-name class
+    for (const cls of node.classList) {
+      if (cls.startsWith("fez-") && cls !== "fez") {
+        return "fez-class-" + cls;
+      }
+    }
+  }
+
+  return null;
+}
+
+// ---------------------------------------------------------------------------
+// Child Diffing
+// ---------------------------------------------------------------------------
+
+function diffChildren(target, newParent, opts) {
+  const oldChildren = Array.from(target.childNodes);
+  const newChildren = Array.from(newParent.childNodes);
+
+  if (oldChildren.length === 0 && newChildren.length === 0) return;
+
+  // Fast path: no old children, just append all new
+  if (oldChildren.length === 0) {
+    for (const child of newChildren) {
+      target.appendChild(child);
+    }
+    return;
+  }
+
+  // Fast path: no new children, remove all old
+  if (newChildren.length === 0) {
+    for (const child of oldChildren) {
+      if (opts.beforeRemove && child.nodeType === 1) {
+        callBeforeRemoveDeep(child, opts);
+      }
+      target.removeChild(child);
+    }
+    return;
+  }
+
+  // Build key map for old children
+  // A node can have multiple keys (e.g., fez component has UID key + id key)
+  const oldByKey = new Map();
+  for (const child of oldChildren) {
+    const key = getNodeKey(child);
+    if (key) {
+      oldByKey.set(key, child);
+      // Fez components also match by id and class (template placeholders have no .fez)
+      if (key.startsWith("fez-uid-")) {
+        if (child.id) {
+          oldByKey.set("id-" + child.id, child);
+        }
+        // Also match by fez-name class (e.g., "fez-class-fez-my-comp")
+        if (child.classList) {
+          for (const cls of child.classList) {
+            if (cls.startsWith("fez-") && cls !== "fez") {
+              oldByKey.set("fez-class-" + cls, child);
+              break;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // Phase 1: Match each new child to an old child
+  const matches = []; // [{old, new, preserve}]
+  const usedOld = new Set();
+
+  // Pass 1a: match by key (fez-keep, id, fez UID)
+  for (let i = 0; i < newChildren.length; i++) {
+    const newChild = newChildren[i];
+    const key = getNewNodeKey(newChild);
+
+    if (key && oldByKey.has(key)) {
+      const oldChild = oldByKey.get(key);
+      const preserve = key.startsWith("keep-") || key.startsWith("fez-uid-");
+      matches.push({ old: oldChild, new: newChild, preserve });
+      usedOld.add(oldChild);
+    } else {
+      matches.push({ old: null, new: newChild, preserve: false });
+    }
+  }
+
+  // Pass 1b: for unmatched new children, try soft match with unmatched old
+  // Skip elements with fez-keep or fez components - they only match by key
+  const unmatchedOld = oldChildren.filter((c) => !usedOld.has(c));
+  let uIdx = 0;
+  for (let i = 0; i < matches.length; i++) {
+    if (matches[i].old) continue; // already matched
+
+    const newChild = matches[i].new;
+    // Don't soft-match new nodes that have a key (fez-keep, id)
+    // They should only match by their key
+    if (
+      getNewNodeKey(newChild) &&
+      getNewNodeKey(newChild).startsWith("keep-")
+    ) {
+      continue;
+    }
+
+    while (uIdx < unmatchedOld.length) {
+      const candidate = unmatchedOld[uIdx];
+      uIdx++;
+      // Don't soft-match old nodes that have fez-keep or are fez components
+      if (
+        candidate.nodeType === 1 &&
+        (candidate.getAttribute?.("fez-keep") ||
+          (candidate.classList?.contains("fez") && candidate.fez))
+      ) {
+        continue;
+      }
+      if (softMatch(candidate, newChild)) {
+        matches[i].old = candidate;
+        usedOld.add(candidate);
+        break;
+      }
+    }
+  }
+
+  // Phase 2: Remove unmatched old children
+  for (const child of oldChildren) {
+    if (!usedOld.has(child)) {
+      if (child.nodeType === 1) {
+        callBeforeRemoveDeep(child, opts);
+      }
+      target.removeChild(child);
+    }
+  }
+
+  // Phase 3: Apply matches in order (morph + position)
+  let cursor = target.firstChild;
+
+  for (const match of matches) {
+    if (match.old) {
+      // We have a matched old node
+      const oldChild = match.old;
+      const newChild = match.new;
+
+      if (match.preserve) {
+        // fez-keep or fez component: preserve entirely, just ensure position
+        if (oldChild !== cursor) {
+          target.insertBefore(oldChild, cursor);
+        } else {
+          cursor = cursor.nextSibling;
+        }
+        continue;
+      }
+
+      // Morph the matched pair
+      if (oldChild.nodeType === 3 && newChild.nodeType === 3) {
+        // Both text nodes
+        if (oldChild.textContent !== newChild.textContent) {
+          oldChild.textContent = newChild.textContent;
+        }
+      } else if (oldChild.nodeType === 8 && newChild.nodeType === 8) {
+        // Both comment nodes
+        if (oldChild.textContent !== newChild.textContent) {
+          oldChild.textContent = newChild.textContent;
+        }
+      } else if (oldChild.nodeType === 1 && newChild.nodeType === 1) {
+        // Both elements
+        if (opts.skipNode && opts.skipNode(oldChild)) {
+          // Skip this subtree entirely (fez component via skipNode callback)
+        } else if (oldChild.nodeName === newChild.nodeName) {
+          // Same tag: sync attributes and recurse
+          syncAttributes(oldChild, newChild);
+          diffChildren(oldChild, newChild, opts);
+        } else {
+          // Different tag: replace
+          callBeforeRemoveDeep(oldChild, opts);
+          const replacement = newChild;
+          target.insertBefore(replacement, oldChild);
+          target.removeChild(oldChild);
+          cursor = replacement.nextSibling;
+          continue;
+        }
+      } else {
+        // Different node types: replace
+        if (oldChild.nodeType === 1) {
+          callBeforeRemoveDeep(oldChild, opts);
+        }
+        target.insertBefore(newChild, oldChild);
+        target.removeChild(oldChild);
+        cursor = newChild.nextSibling;
+        continue;
+      }
+
+      // Ensure correct position
+      if (oldChild !== cursor) {
+        target.insertBefore(oldChild, cursor);
+      } else {
+        cursor = cursor.nextSibling;
+      }
+    } else {
+      // No old match: insert new node
+      target.insertBefore(match.new, cursor);
+    }
+  }
+}
+
+/**
+ * Soft match: same node type and (for elements) same tag name.
+ */
+function softMatch(oldNode, newNode) {
+  if (oldNode.nodeType !== newNode.nodeType) return false;
+  if (oldNode.nodeType === 1) {
+    return oldNode.nodeName === newNode.nodeName;
+  }
+  return true;
+}
+
+/**
+ * Call beforeRemove on a node and all fez components inside it.
+ */
+function callBeforeRemoveDeep(node, opts) {
+  if (!opts.beforeRemove) return;
+  opts.beforeRemove(node);
+  if (node.querySelectorAll) {
+    node.querySelectorAll(".fez").forEach((child) => {
+      opts.beforeRemove(child);
+    });
+  }
+}
+
+// Export for testing
+export { syncClassList, isFormInput };