@elenajs/core 1.0.0-rc.7 → 1.0.0

package/src/common/render.js

@@ -1,12 +1,18 @@
-import { collapseWhitespace, isRaw, resolveValue, toPlainText } from "./utils.js";
+import { collapseWhitespace, isArray, isRaw, nothing, resolveValue, toPlainText } from "./utils.js";
 
 const stringsCache = new WeakMap();
-const markerKey = "e" + Math.random().toString(36).slice(2, 6);
+const markerKey = "e" + Math.random().toString(36).slice(2);
+const SHOW_COMMENT = 128;
+const ELEMENT_NODE = 1;
+const TEXT_NODE = 3;
+
+const newTemplate = () => document.createElement("template");
+const treeWalker = node => document.createTreeWalker(node, SHOW_COMMENT);
 
 /**
  * Render a tagged template into an Elena Element with DOM diffing.
- * Returns true if the DOM was fully rebuilt, false if only text
- * nodes were patched in place.
+ * Returns true if the DOM was fully rebuilt, false if parts were
+ * patched in place.
  *
  * @param {HTMLElement} element
  * @param {TemplateStringsArray} strings - Static parts of the tagged template
@@ -14,129 +20,165 @@ const markerKey = "e" + Math.random().toString(36).slice(2, 6);
  * @returns {boolean}
  */
 export function renderTemplate(element, strings, values) {
-  if (patchTextNodes(element, strings, values)) {
+  if (patch(element, strings, values)) {
     return false;
   }
-  fullRender(element, strings, values);
+  morph(element, strings, values);
   return true;
 }
 
 /**
- * Fast path: patch only the text nodes whose values changed.
+ * Patch only changed text nodes and attribute values.
  *
  * @param {HTMLElement} element - The host element with cached template state
  * @param {TemplateStringsArray} strings - Static parts of the tagged template
  * @param {Array} values - Dynamic interpolated values
- * @returns {boolean} Whether patching was sufficient (false = full render)
+ * @returns {boolean} Whether patching was sufficient (false = do morph instead)
  */
-function patchTextNodes(element, strings, values) {
+function patch(element, strings, values) {
   // Only works when re-rendering the same template shape
-  if (element._tplStrings !== strings || !element._tplParts) {
+  if (element._templateStrings !== strings || !element._templateParts) {
     return false;
   }
 
+  const parts = element._templateParts;
+  const cached = element._templateValues;
+
   for (let i = 0; i < values.length; i++) {
     const v = values[i];
-    const comparable = Array.isArray(v) ? toPlainText(v) : v;
+    const comparable = isArray(v) ? toPlainText(v) : v;
 
-    if (comparable === element._tplValues[i]) {
+    if (comparable === cached[i]) {
       continue;
     }
 
-    if (isRaw(v) || !element._tplParts[i]) {
+    if (isRaw(v) && v !== nothing) {
       return false;
     }
 
-    element._tplValues[i] = comparable;
-    element._tplParts[i].textContent = toPlainText(v);
+    const part = parts[i];
+
+    if (!part) {
+      return false;
+    }
+
+    cached[i] = comparable;
+    const str = String(comparable ?? "");
+
+    if (part.nodeType) {
+      part.textContent = str;
+    } else {
+      part[0].setAttribute(part[1], str);
+    }
   }
 
   return true;
 }
 
 /**
- * Cold path: clone a cached <template> and patch in values.
+ * Clone a cached <template> and morph in new structure.
  *
  * @param {HTMLElement} element - The host element to render into
  * @param {TemplateStringsArray} strings - Static parts of the tagged template
  * @param {Array} values - Dynamic interpolated values
  */
-function fullRender(element, strings, values) {
+function morph(element, strings, values) {
   let entry = stringsCache.get(strings);
 
   if (!entry) {
-    const processedStrings = Array.from(strings, collapseWhitespace);
+    const _strings = strings.map(collapseWhitespace);
     entry = {
-      processedStrings,
-      template: values.length > 0 ? createTemplate(processedStrings, values.length) : null,
+      _strings,
+      _template: values.length > 0 ? createTemplate(_strings, values.length) : null,
     };
     stringsCache.set(strings, entry);
   }
 
-  if (entry.template) {
-    element._tplParts = cloneAndPatch(element, entry.template, values);
+  if (entry._template) {
+    element._templateParts = cloneAndPatch(element, entry._template, values);
   } else {
-    // Fallback for attribute-position values or static templates.
+    // Fallback for static templates or templates where marker detection failed.
     // White space collapsing here protects against Vue SSR mismatches.
-    const renderedValues = values.map(value => resolveValue(value));
-    const markup = entry.processedStrings
+    const renderedValues = values.map(resolveValue);
+    const markup = entry._strings
       .reduce((out, str, i) => out + str + (renderedValues[i] ?? ""), "")
       .replace(/>\s+</g, "><")
       .trim();
 
     // Morph existing DOM to match new markup instead of replacing it.
-    const tpl = document.createElement("template");
-    tpl.innerHTML = markup;
-    morphContent(element, tpl.content.childNodes);
-    element._tplParts = null;
+    const template = newTemplate();
+    template.innerHTML = markup;
+    morphContent(element, template.content.childNodes);
+    element._templateParts = null;
   }
 
-  element._tplStrings = strings;
-  element._tplValues = values.map(v => (Array.isArray(v) ? toPlainText(v) : v));
+  element._templateStrings = strings;
+  element._templateValues = values.map(v => (isArray(v) ? toPlainText(v) : v));
 }
 
 /**
- * Build a <template> element with comment markers.
+ * Create a <template> element with comment markers and string placeholders.
  *
- * @param {string[]} processedStrings - Whitespace-collapsed static parts
+ * @param {string[]} _strings - Whitespace-collapsed static parts
  * @param {number} valueCount - Number of dynamic values
- * @returns {HTMLTemplateElement | null}
+ * @returns {{ _tpl: HTMLTemplateElement, _attrs: (string|null)[] } | null}
  */
-function createTemplate(processedStrings, valueCount) {
+function createTemplate(_strings, valueCount) {
   const marker = `<!--${markerKey}-->`;
-  const markup = processedStrings
-    .reduce((out, str, i) => out + str + (i < valueCount ? marker : ""), "")
-    .trim();
+  const attrs = [];
+  let markup = "";
+
+  for (let i = 0; i < _strings.length; i++) {
+    markup += _strings[i];
 
-  const tpl = document.createElement("template");
-  tpl.innerHTML = markup;
+    if (i < valueCount) {
+      const match = _strings[i].match(/([^\s"'>/=]+)\s*=\s*["']$/);
+
+      if (match) {
+        attrs.push(match[1]);
+        markup += markerKey + "_" + i;
+      } else {
+        attrs.push(null);
+        markup += marker;
+      }
+    }
+  }
+
+  const template = newTemplate();
+  template.innerHTML = markup.trim();
 
   // Mismatch means this template shape cannot use the clone path.
-  const walker = document.createTreeWalker(tpl.content, NodeFilter.SHOW_COMMENT);
-  let count = 0;
+  const walker = treeWalker(template.content);
+  let commentCount = 0;
 
   while (walker.nextNode()) {
     if (walker.currentNode.data === markerKey) {
-      count++;
+      commentCount++;
     }
   }
 
-  return count === valueCount ? tpl : null;
+  const expectedComments = attrs.filter(n => n === null).length;
+
+  if (commentCount !== expectedComments) {
+    return null;
+  }
+
+  return { _tpl: template, _attrs: attrs };
 }
 
 /**
- * Clone a cached template and replace comment markers
- * with actual content.
+ * Clone a cached template and replace markers with actual content.
  *
  * @param {HTMLElement} element - The host element to render into
- * @param {HTMLTemplateElement} template - Cached template with markers
+ * @param {{ _tpl: HTMLTemplateElement, _attrs: (string|null)[] }} templateInfo
  * @param {Array} values - Raw interpolated values
- * @returns {Array<Text | undefined>} Text node map for fast-path patching
+ * @returns {Array<Text | [Element, string] | undefined> | null}
  */
-function cloneAndPatch(element, template, values) {
-  const clone = template.content.cloneNode(true);
-  const walker = document.createTreeWalker(clone, NodeFilter.SHOW_COMMENT);
-  const parts = new Array(values.length);
+function cloneAndPatch(element, templateInfo, values) {
+  const { _tpl, _attrs } = templateInfo;
+  const clone = _tpl.content.cloneNode(true);
+  const walker = treeWalker(clone);
+  const parts = Array(values.length);
   const markers = [];
   let node;
 
@@ -147,24 +189,46 @@ function cloneAndPatch(element, template, values) {
     }
   }
 
-  for (let i = 0; i < markers.length; i++) {
-    const value = values[i];
+  let contentIdx = 0;
+
+  for (let i = 0; i < values.length; i++) {
+    const attr = _attrs[i];
 
-    if (isRaw(value)) {
-      // Raw HTML: parse and insert as fragment
-      const tmp = document.createElement("template");
-      tmp.innerHTML = resolveValue(value);
-      markers[i].parentNode.replaceChild(tmp.content, markers[i]);
+    if (attr) {
+      // Find the element with the placeholder value
+      const placeholder = markerKey + "_" + i;
+      const el = clone.querySelector(`[${attr}="${placeholder}"]`);
 
-      // Raw values can't be fast-patched; leave parts undefined
+      if (el) {
+        const value = values[i];
+        const str = String((isArray(value) ? toPlainText(value) : value) ?? "");
+        el.setAttribute(attr, str);
+        parts[i] = [el, attr];
+      }
     } else {
-      // Create text node with unescaped content
-      const textNode = document.createTextNode(toPlainText(value));
-      markers[i].parentNode.replaceChild(textNode, markers[i]);
-      parts[i] = textNode;
+      // Replace comment marker with value
+      const marker = markers[contentIdx++];
+      const value = values[i];
+
+      // Parse and insert raw HTML as a fragment
+      if (isRaw(value) && value !== nothing) {
+        const tmp = newTemplate();
+        tmp.innerHTML = resolveValue(value);
+        marker.parentNode.replaceChild(tmp.content, marker);
+
+        // Create text node with unescaped content
+      } else {
+        const textNode = document.createTextNode(toPlainText(value));
+        marker.parentNode.replaceChild(textNode, marker);
+        parts[i] = textNode;
+      }
     }
   }
 
+  if (element._templateStrings) {
+    morphContent(element, clone.childNodes);
+    return null;
+  }
   element.replaceChildren(clone);
   return parts;
 }
@@ -191,14 +255,14 @@ function morphContent(parent, nextNodes) {
       parent.removeChild(cur);
     } else if (
       cur.nodeType !== nxt.nodeType ||
-      (cur.nodeType === Node.ELEMENT_NODE && cur.tagName !== nxt.tagName)
+      (cur.nodeType === ELEMENT_NODE && cur.tagName !== nxt.tagName)
     ) {
       parent.replaceChild(nxt, cur);
-    } else if (cur.nodeType === Node.TEXT_NODE) {
+    } else if (cur.nodeType === TEXT_NODE) {
       if (cur.textContent !== nxt.textContent) {
         cur.textContent = nxt.textContent;
       }
-    } else if (cur.nodeType === Node.ELEMENT_NODE) {
+    } else if (cur.nodeType === ELEMENT_NODE) {
       morphAttributes(cur, nxt);
       morphContent(cur, nxt.childNodes);
     }
@@ -206,7 +270,7 @@ function morphContent(parent, nextNodes) {
 }
 
 /**
- * Morhp element’s attributes without rebuilding the DOM.
+ * Morph element’s attributes without rebuilding the DOM.
  *
  * @param {Element} current - The current existing DOM element
  * @param {Element} next - The desired element from the new render

package/src/common/utils.js

@@ -1,15 +1,23 @@
+const prefix = "░█ [ELENA]: ";
+const isArray = Array.isArray;
+const RAW = Symbol("elena.raw");
+
+/**
+ * @param {string} msg
+ * @internal
+ */
+export const warn = msg => console.warn(prefix + msg);
+export { prefix, isArray };
+
 /**
  * Register the Elena Element if the browser supports it.
  *
  * @param {string} tagName
  * @param {Function} Element
  */
-export function defineElement(tagName, Element) {
-  if (typeof window !== "undefined" && "customElements" in window) {
-    if (!window.customElements.get(tagName)) {
-      window.customElements.define(tagName, Element);
-    }
-  }
+export function defineElement(tagName, Element, registry) {
+  const reg = registry ?? globalThis.customElements;
+  reg?.get(tagName) || reg?.define(tagName, Element);
 }
 
 /**
@@ -31,8 +39,8 @@ export function escapeHtml(str) {
  * @returns {string}
  */
 export function resolveValue(value) {
-  if (Array.isArray(value)) {
-    return value.map(item => resolveItem(item)).join("");
+  if (isArray(value)) {
+    return value.map(resolveItem).join("");
   }
   return resolveItem(value);
 }
@@ -45,8 +53,29 @@ export function resolveValue(value) {
  * @returns {string}
  */
 function resolveItem(value) {
-  return value?.__raw ? String(value) : escapeHtml(String(value ?? ""));
+  return value?.[RAW] ? String(value) : escapeHtml(value ?? "");
+}
+
+/**
+ * Lightweight template result.
+ *
+ * @internal
+ */
+class HtmlResult {
+  constructor(strings, values) {
+    this.strings = strings;
+    this.values = values;
+  }
+  toString() {
+    if (this._str == null) {
+      this._str = this.strings.reduce((acc, s, i) => {
+        return acc + s + resolveValue(this.values[i]);
+      }, "");
+    }
+    return this._str;
+  }
 }
+HtmlResult.prototype[RAW] = true;
 
 /**
  * Tagged template for trusted HTML. Use as the return value
@@ -54,42 +83,29 @@ function resolveItem(value) {
  *
  * @param {TemplateStringsArray} strings
  * @param {...*} values
- * @returns {{ __raw: true, strings: TemplateStringsArray, values: Array, toString(): string }}
+ * @returns {{ strings: TemplateStringsArray, values: Array, toString(): string }}
  */
 export function html(strings, ...values) {
-  let str;
-  return {
-    __raw: true,
-    strings,
-    values,
-    toString: () => {
-      if (str === undefined) {
-        str = strings.reduce((acc, s, i) => {
-          return acc + s + resolveValue(values[i]);
-        }, "");
-      }
-      return str;
-    },
-  };
+  return new HtmlResult(strings, values);
 }
 
 /**
  * Renders a string as HTML rather than text.
  *
  * @param {string} str - The raw HTML string to trust.
- * @returns {{ __raw: true, toString(): string }}
+ * @returns {{ toString(): string }}
  */
 export function unsafeHTML(str) {
-  return { __raw: true, toString: () => str ?? "" };
+  return { [RAW]: true, toString: () => str ?? "" };
 }
 
 /**
  * A placeholder you can return from a conditional expression
  * inside a template to render nothing.
  *
- * @type {{ __raw: true, toString(): string }}
+ * @type {{ toString(): string }}
  */
-export const nothing = Object.freeze({ __raw: true, toString: () => "" });
+export const nothing = { [RAW]: true, toString: () => "" };
 
 /**
  * Check if a value contains trusted HTML fragments.
@@ -97,8 +113,7 @@ export const nothing = Object.freeze({ __raw: true, toString: () => "" });
  * @param {*} value
  * @returns {boolean}
  */
-export const isRaw = value =>
-  Array.isArray(value) ? value.some(item => item?.__raw) : value?.__raw;
+export const isRaw = value => (isArray(value) ? value.some(item => item?.[RAW]) : !!value?.[RAW]);
 
 /**
  * Convert a value to its plain text string.
@@ -106,8 +121,7 @@ export const isRaw = value =>
  * @param {*} value
  * @returns {string}
  */
-export const toPlainText = value =>
-  Array.isArray(value) ? value.map(item => String(item ?? "")).join("") : String(value ?? "");
+export const toPlainText = value => (isArray(value) ? value.join("") : String(value ?? ""));
 
 /**
  * Collapse whitespace from a static string part.
@@ -117,8 +131,7 @@ export const toPlainText = value =>
  */
 export function collapseWhitespace(string) {
   return string
-    .replace(/>\n\s*/g, ">") // newline after tag close
-    .replace(/\n\s*</g, "<") // newline before tag open
+    .replace(/(>)\n\s*|\n\s*(<)/g, "$1$2") // newlines adjacent to tags
     .replace(/\n\s*/g, " ") // newline in text content, preserve word boundary
     .replace(/>\s+</g, "><"); // whitespace between tags
 }