@cfdez11/vex 0.8.2 → 0.9.0

package/server/utils/streaming.js

@@ -1,324 +0,0 @@
-import {
-  processClientComponent,
-  renderHtmlFile,
-} from "./component-processor.js";
-
-
-/**
- * Parses a string of raw HTML-like attributes into a structured object.
- * Return object will be used to pass props to components through template
- *
- * Supports:
- *   - Dynamic props with `:` prefix (e.g., `:prop="value"`).
- *   - Event handlers with `@` prefix (e.g., `@click="handler"`).
- *   - Static attributes (e.g., `id="my-id"` or `class="my-class"`).
- *
- * @param {string} rawAttrs - The raw attribute string extracted from an element tag.
- *
- * @returns {Record<string, string>} An object mapping attribute names to their values.
- *                                   Dynamic props and event handlers retain their raw
- *                                   string representations (e.g., template expressions).
- *
- * @example
- * parseAttributes(':links="${links}" @click="handleClick" id="my-component"');
- * // Returns:
- * // {
- * //   links: '${links}',
- * //   click: 'handleClick',
- * //   id: 'my-component'
- * // }
- */
-function decodeAttrValue(raw) {
-  const decoded = raw.replace(/&quot;/g, '"');
-  if (decoded.startsWith("[") || decoded.startsWith("{")) {
-    try { return JSON.parse(decoded); } catch {}
-  }
-  return decoded;
-}
-
-function parseAttributes(rawAttrs) {
-  const attrs = {};
-  const regex =
-    /:([\w-]+)=(?:"([^"]*)"|'([^']*)')|@([\w-]+)=(?:"([^"]*)"|'([^']*)')|([\w:-]+)=(?:"([^"]*)"|'([^']*)')/g;
-  let match;
-
-  while ((match = regex.exec(rawAttrs)) !== null) {
-    if (match[1]) {
-      // Dynamic prop :prop
-      attrs[match[1]] = match[2] ?? match[3] ?? "";
-    } else if (match[4]) {
-      // Event handler @event
-      attrs[match[4]] = match[5] ?? match[6] ?? "";
-    } else if (match[7]) {
-      // Static prop — decode &quot; and recover arrays/objects serialized by template.js
-      attrs[match[7]] = decodeAttrValue(match[8] ?? match[9] ?? "");
-    }
-  }
-
-  return attrs;
-}
-
-
-/**
- * Renders components in HTML
- * @param {string} html
- * @param {Map<string, { path: string }>} serverComponents
- * @returns {Promise<string>}
- */
-/**
- * Renders server component instances in parallel.
- *
- * Each component type found in `serverComponents` may appear multiple times in
- * the HTML (e.g. three `<UserCard>` tags). Previously they were rendered one by
- * one in a serial `for` loop, even though each instance is fully independent.
- *
- * Now, all instances of a given component are kicked off at the same time with
- * `Promise.all` and their results are applied in reverse-index order so that
- * string offsets stay valid (replacing from the end of the string backwards).
- *
- * @param {string} html
- * @param {Map<string, { path: string }>} serverComponents
- * @returns {Promise<string>}
- */
-async function processServerComponents(html, serverComponents) {
-  let processedHtml = html;
-
-  for (const [componentName, componentData] of serverComponents.entries()) {
-    const escapedName = componentName.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-    const componentRegex = new RegExp(
-      `<${escapedName}(?![a-zA-Z0-9_-])\\s*([^>]*?)\\s*(?:\\/>|>\\s*<\\/${escapedName}(?![a-zA-Z0-9_-])>)`,
-      "gi"
-    );
-
-    const replacements = [];
-    let match;
-
-    while ((match = componentRegex.exec(processedHtml)) !== null) {
-      replacements.push({
-        name: componentName,
-        attrs: parseAttributes(match[1]),
-        fullMatch: match[0],
-        start: match.index,
-        end: match.index + match[0].length,
-      });
-    }
-
-    if (replacements.length === 0) continue;
-
-    // Render all instances of this component concurrently, then apply results
-    // from the end of the string backwards so earlier offsets stay valid.
-    const rendered = await Promise.all(
-      replacements.map(({ attrs }) => renderHtmlFile(componentData.path, attrs))
-    );
-
-    for (let i = replacements.length - 1; i >= 0; i--) {
-      const { start, end } = replacements[i];
-      processedHtml =
-        processedHtml.slice(0, start) +
-        rendered[i].html +
-        processedHtml.slice(end);
-    }
-  }
-
-  return processedHtml;
-}
-
-/**
- * Renders components in HTML and client scripts to load them
- * @param {string} html
- * @param {Map<string, { path: string }>} clientComponents
- * @returns {Promise<{
- *  html: string,
- *  allScripts: Array<string>,
- * }>}
- */
-async function renderClientComponents(html, clientComponents) {
-  let processedHtml = html;
-  const allScripts = [];
-
-  for (const [componentName, { path: componentAbsPath }] of clientComponents.entries()) {
-    const escapedName = componentName.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-
-    const componentRegex = new RegExp(
-      `<${escapedName}\\b((?:\\s+(?:[^\\s>"'=]+(?:=(?:"[^"]*"|'[^']*'|[^\\s"'=<>]+))?))*?)\\s*\\/?>`,
-      "gi"
-    );
-    
-    const replacements = [];
-    let match;
-    const htmlToProcess = processedHtml;
-
-    while ((match = componentRegex.exec(htmlToProcess)) !== null) {
-      const matchData = {
-        name: componentName,
-        attrs: parseAttributes(match[1]),
-        fullMatch: match[0],
-        start: match.index,
-        end: match.index + match[0].length,
-      };
-
-      replacements.push(matchData);
-    }
-
-    // Render in reverse order to maintain indices
-    for (let i = replacements.length - 1; i >= 0; i--) {
-      const { start, end, attrs } = replacements[i];
-
-      const htmlComponent = await processClientComponent(componentName, componentAbsPath, attrs);
-
-      processedHtml =
-        processedHtml.slice(0, start) +
-        htmlComponent +
-        processedHtml.slice(end);
-    }
-  }
-
-  return { html: processedHtml, allScripts };
-}
-
-/**
- * Renders server components, handling both regular and suspense boundaries
- * Server components without suspense are rendered immediately.
- * Server components inside <Suspense> boundaries are saved in suspenseComponents.
- * @param {string} pageHtml
- * @param {Map<string, { path: string }>} serverComponents
- * @param {boolean} awaitSuspenseComponents - If true, renders suspense components immediately
- * @returns {Promise<{
- *   html: string,
- *   suspenseComponents: Array<{
- *     id: string,
- *     content: string,
- *   }>
- * }>}
- */
-async function renderServerComponents(pageHtml, serverComponents = new Map(), awaitSuspenseComponents = false) {
-  const suspenseComponents = [];
-  let suspenseId = 0;
-  let html = pageHtml;
-
-  // Fresh regex per call — avoids the shared-lastIndex race condition.
-  // Each request gets its own regex instance with lastIndex starting at 0.
-  const suspenseRegex = /<Suspense\s+fallback="([^"]*)">([\s\S]*?)<\/Suspense>/g;
-
-  let match;
-  while ((match = suspenseRegex.exec(html)) !== null) {
-    const id = `suspense-${suspenseId++}`;
-    const [fullMatch, fallback, content] = match;
-
-    const suspenseContent = awaitSuspenseComponents ? content : fallback;
-
-    // Render components in fallback if not awaiting suspense or in content if awaiting suspense
-    const fallbackHtml = await processServerComponents(
-      suspenseContent,
-      serverComponents
-    );
-
-    suspenseComponents.push({
-      id,
-      content: content,
-    });
-
-    // Replace suspense block with container and restart the search from the
-    // beginning of the modified string (indices have shifted after the replace).
-    const replacement = `<div id="${id}">${fallbackHtml}</div>`;
-    html = html.replace(fullMatch, replacement);
-    suspenseRegex.lastIndex = 0;
-  }
-
-  // Render all non-suspended components
-  html = await processServerComponents(html, serverComponents);
-
-  return { html, suspenseComponents };
-}
-
-/**
- * Renders server components, client components in HTML, suspense components and client scripts to load client components
- * @param {{
- *  pageHtml: string,
- *  serverComponents: Map<string, { path: string, originalPath: string, importStatement: string }>,
- *  clientComponents: Map<string, { path: string, originalPath: string, importStatement: string }>,
- *  awaitSuspenseComponents: boolean,
- * }}
- * @returns {Promise<{
- *   html: string,
- *   clientComponentsScripts: Array<string>,
- *   suspenseComponents: Array<{
- *    id: string,
- *    content: string,
- *   }>
- * }>}
- */
-export async function renderComponents({
-  html,
-  serverComponents = new Map(),
-  clientComponents = new Map(),
-  awaitSuspenseComponents = false,
-}) {
-  const hasServerComponents = serverComponents.size > 0;
-  const hasClientComponents = clientComponents.size > 0;
-  
-  const { html: htmlServerComponents,  suspenseComponents } = hasServerComponents ? 
-    await renderServerComponents(html, serverComponents, awaitSuspenseComponents) : 
-    { 
-      html, 
-      suspenseComponents: [],
-    };
-
-  const { html: htmlClientComponents, allScripts: clientComponentsScripts } = 
-    hasClientComponents ?
-      await renderClientComponents(htmlServerComponents, clientComponents) :
-      { 
-        html: htmlServerComponents, 
-        allScripts: [],
-      };
-
-  return {
-    html: htmlClientComponents,
-    suspenseComponents,
-    clientComponentsScripts,
-  };
-}
-
-/**
- * Generates the streaming HTML payload that replaces a Suspense fallback with
- * the real rendered content once it is ready.
- *
- * The payload consists of two parts streamed back-to-back:
- *  1. A `<template id="…">` holding the rendered HTML (invisible to the user).
- *  2. A tiny inline `<script>` that calls `window.hydrateTarget(targetId, sourceId)`.
- *
- * `window.hydrateTarget` is defined once in root.html via a single
- * `<script src="hydrate.js">`. Using an inline call instead of a per-boundary
- * `<script src="hydrate.js">` avoids the browser parsing and initialising the
- * same script N times.
- *
- * @param {string} suspenseId     - The id of the fallback <div> to replace.
- * @param {string} renderedContent - The real HTML to swap in.
- * @returns {string}
- */
-export function generateReplacementContent(suspenseId, renderedContent) {
-  const contentId = `${suspenseId}-content`;
-  return `<template id="${contentId}">${renderedContent}</template><script>window.hydrateTarget("${suspenseId}","${contentId}")</script>`;
-}
-
-/**
- * Renders all components inside a suspense boundary
- * @param {{
- *   id: string,
- *   content: string,
- *   components: Array<{name: string, attrs: object, fullMatch: string}>
- * }} suspenseComponent
- * @param {Map<string, { path: string }>} serverComponents
- * @returns {Promise<string>}
- */
-export async function renderSuspenseComponent(
-  suspenseComponent,
-  serverComponents
-) {
-  const html = await processServerComponents(
-    suspenseComponent.content,
-    serverComponents
-  );
-
-  return html;
-}

package/server/utils/template.js

@@ -1,274 +0,0 @@
-import { parseDocument, DomUtils } from "htmlparser2";
-import { render } from "dom-serializer";
-
-/**
- * Compiled-function cache.
- *
- * `Function(...keys, body)` compiles a new function object on every call.
- * With ~20 template expressions and 100 req/s that is ~2000 allocations/s
- * that the GC has to reclaim. The compiled function only depends on the
- * expression string and the names of the scope keys — not their values —
- * so it can be reused across requests by calling it with different arguments.
- *
- * Key format: `"<expression>::<key1>,<key2>,..."` — must include both the
- * expression and the key names because the same expression with a different
- * scope shape produces a different function signature.
- */
-const fnCache = new Map();
-
-/**
- * Evaluates a template expression against the provided data scope.
- *
- * The compiled `Function` is cached by expression + scope key names so it is
- * only created once per unique (expression, scope shape) pair.
- *
- * @param {string} expression
- * @param {object} scope
- * @returns {any}
- */
-function getDataValue(expression, scope) {
-  const keys = Object.keys(scope);
-  const cacheKey = `${expression}::${keys.join(",")}`;
-  if (!fnCache.has(cacheKey)) {
-    fnCache.set(cacheKey, Function(...keys, `return (${expression})`));
-  }
-  try {
-    return fnCache.get(cacheKey)(...Object.values(scope));
-  } catch (e) {
-    return "";
-  }
-}
-
-/**
- * Checks if a DOM node is an empty text node
- * @param {ChildNode} node
- * @returns {boolean}
- */
-function isEmptyTextNode(node) {
-  return node.type === "text" && /^\s*$/.test(node.data);
-}
-
-/**
- * Parses HTML string and returns DOM nodes
- * @param {string} html
- * @returns {ChildNode[]}
- */
-function parseHTMLToNodes(html) {
-  try {
-    const cleanHtml = html
-      .replace(/[\r\n\t]+/g, " ")
-      .replace(/ +/g, " ")
-      .trim();
-    const dom = parseDocument(cleanHtml, { xmlMode: true });
-    return DomUtils.getChildren(dom);
-  } catch (error) {
-    console.error('Error parsing HTML:', error);
-    return [];
-  }
-}
-
-
-/**
- * Processes an HTML file to extract script, template, metadata, client code, and component registry
- * @param {ChildNode} node
- * @param {Object} scope
- * @param {boolean} previousRendered
- * @returns {ChildNode | ChildNode[] | null}
- */
-function processNode(node, scope, previousRendered = false) {
-  if (node.type === "text") {
-    // Replace {{expr}} with its value from scope (SSR interpolation).
-    // The lookbehind (?<!\\) skips escaped \{{expr}}, which are then
-    // unescaped to literal {{expr}} by the second replace.
-    node.data = node.data
-      .replace(/(?<!\\)\{\{(.+?)\}\}/g, (_, expr) => getDataValue(expr.trim(), scope))
-      .replace(/\\\{\{/g, "{{");
-    return node;
-  }
-
-  if (node.type === "tag") {
-    const attrs = node.attribs || {};
-
-    for (const [attrName, attrValue] of Object.entries(attrs)) {
-      if (typeof attrValue === "string") {
-        attrs[attrName] = attrValue
-          .replace(/(?<!\\)\{\{(.+?)\}\}/g, (_, expr) => getDataValue(expr.trim(), scope))
-          .replace(/\\\{\{/g, "{{");
-      }
-    }
-
-    if ("x-if" in attrs) {
-      const show = getDataValue(attrs["x-if"], scope);
-      delete attrs["x-if"];
-      if (!show) return null;
-    }
-
-    if ("x-else-if" in attrs) {
-      const show = getDataValue(attrs["x-else-if"], scope);
-      delete attrs["x-else-if"];
-      if (previousRendered || !show) return null;
-    }
-
-    if ("x-else" in attrs) {
-      delete attrs["x-else"];
-      if (previousRendered) {
-        return null;
-      }
-    }
-
-    if ("x-show" in attrs) {
-      const show = getDataValue(attrs["x-show"], scope);
-      delete attrs["x-show"];
-      if (!show) {
-        attrs.style = (attrs.style || "") + "display:none;";
-      }
-    }
-
-    if ("x-for" in attrs) {
-      const exp = attrs["x-for"];
-      delete attrs["x-for"];
-
-      // format: item in items
-      const match = exp.match(/(.+?)\s+in\s+(.+)/);
-      if (!match) throw new Error("Invalid x-for format: " + exp);
-
-      const itemName = match[1].trim();
-      const listExpr = match[2].trim();
-      const list = getDataValue(listExpr, scope);
-
-      if (!Array.isArray(list)) return null;
-
-      const clones = [];
-
-      for (const item of list) {
-        const cloned = structuredClone(node);
-        const newScope = { ...scope, [itemName]: item };
-        clones.push(processNode(cloned, newScope));
-      }
-
-      return clones;
-    }
-
-    for (const [name, value] of Object.entries({ ...attrs })) {
-      if (name.startsWith(":")) {
-        const isSuspenseFallback =
-          name === ":fallback" && node.name === "Suspense";
-        const realName = name.slice(1);
-        if (!isSuspenseFallback) {
-          const val = getDataValue(value, scope);
-          attrs[realName] = (val !== null && val !== undefined && typeof val === "object")
-            ? JSON.stringify(val)
-            : String(val ?? "");
-        } else {
-          attrs[realName] = value;
-        }
-        delete attrs[name];
-      }
-
-      if (name.startsWith("x-bind:")) {
-        const realName = name.slice(7);
-        const val = getDataValue(value, scope);
-        attrs[realName] = (val !== null && val !== undefined && typeof val === "object")
-          ? JSON.stringify(val)
-          : String(val ?? "");
-        delete attrs[name];
-      }
-    }
-
-    for (const [name] of Object.entries({ ...attrs })) {
-      if (name.startsWith("@") || name.startsWith("x-on:")) {
-        delete attrs[name];
-      }
-    }
-
-    if (node.children) {
-      const result = [];
-      let isPreviousRendered = false;
-      for (const child of node.children) {
-        if (isEmptyTextNode(child)) {
-          continue;
-        }
-        const processed = processNode(child, scope, isPreviousRendered);
-        if (Array.isArray(processed)) {
-          result.push(...processed);
-          isPreviousRendered = processed.length > 0;
-        } else if (processed) {
-          result.push(processed);
-          isPreviousRendered = true;
-        } else {
-          isPreviousRendered = false;
-        }
-      }
-      node.children = result;
-    }
-
-    return node;
-  }
-
-  return node;
-}
-
-/**
- * Renders HTML template content with provided data
- * @param {string} templateContent
- * @param {{
- *  [name: string]: string,
- *  clientScripts?: string[],
- *  metadata?: {
- *    title?: string,
- *    description?: string,
- *  }
- * }} data
- * @returns {string}
- *
- */
-/**
- * Parsed-template cache (PERF-05).
- *
- * `parseHTMLToNodes` runs `parseDocument` (htmlparser2) on every call, which
- * tokenises and builds a full DOM tree from the template string. The template
- * string is constant between requests — only `data` changes — so the resulting
- * tree can be cached and deep-cloned before each processing pass.
- *
- * `structuredClone` is used to deep-clone the cached nodes. htmlparser2 nodes
- * are plain objects (no functions / Symbols), so structuredClone handles them
- * correctly including the circular parent ↔ children references.
- *
- * Key:   raw template string
- * Value: array of parsed DOM nodes (never mutated — always clone before use)
- */
-const parsedTemplateCache = new Map();
-
-/**
- * Compiles a Vue-like HTML template string into a rendered HTML string.
- *
- * Parsing is performed only on the first call for a given template string.
- * Subsequent calls clone the cached node tree and process the clone directly,
- * avoiding repeated `parseDocument` invocations.
- *
- * @param {string} template
- * @param {{
- *  [name: string]: string,
- *  clientScripts?: string[],
- *  metadata?: { title?: string, description?: string }
- * }} data
- * @returns {string}
- */
-export function compileTemplateToHTML(template, data = {}) {
-  try {
-    if (!parsedTemplateCache.has(template)) {
-      parsedTemplateCache.set(template, parseHTMLToNodes(template));
-    }
-    // Clone before processing — processNode mutates the nodes in place
-    const nodes = structuredClone(parsedTemplateCache.get(template));
-    const processed = nodes
-      .map((n) => processNode(n, data))
-      .flat()
-      .filter(Boolean);
-
-    return render(processed, { encodeEntities: false });
-  } catch (error) {
-    console.error("Error compiling template:", error);
-    throw error;
-  }
-}