@stacksjs/stx 0.2.129 → 0.2.131

package/dist/utils.js

@@ -22,8 +22,37 @@ export {
   extractVariables,
   hasVariables
 } from "./variable-extractor.js";
-const componentsCache = new LRUCache(500);
+const componentsCache = new LRUCache(500), componentResolutionCache = new LRUCache(1000), componentRenderCache = new LRUCache(2000);
 let scopeIdCounter = 0;
+function serializeComponentRenderInput(value) {
+  const seen = new WeakSet;
+  try {
+    const normalize = (input) => {
+      if (input === void 0)
+        return { __stxType: "undefined" };
+      if (typeof input === "bigint")
+        return { __stxType: "bigint", value: input.toString() };
+      if (typeof input === "function" || typeof input === "symbol")
+        throw TypeError("Non-serializable component input");
+      if (input === null || typeof input !== "object")
+        return input;
+      if (seen.has(input))
+        throw TypeError("Circular component input");
+      seen.add(input);
+      if (input instanceof Date)
+        return { __stxType: "date", value: input.toISOString() };
+      if (Array.isArray(input))
+        return input.map(normalize);
+      const normalized = {};
+      for (const key of Object.keys(input).sort())
+        normalized[key] = normalize(input[key]);
+      return normalized;
+    };
+    return JSON.stringify(normalize(value));
+  } catch {
+    return null;
+  }
+}
 function escapeAttr(str) {
   return str.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
@@ -441,10 +470,16 @@ export async function renderComponentWithSlot(componentPath, props, slotContent,
       }))];
       searchDirs.length = 0;
       searchDirs.push(...normalizedSearchDirs);
-      if (baseName.startsWith("./") || baseName.startsWith("../")) {
+      const resolutionCacheKey = `${baseName}\x00${parentFilePath}\x00${normalizedSearchDirs.join("\x00")}`, cachedResolution = componentResolutionCache.get(resolutionCacheKey);
+      if (cachedResolution)
+        if (await fileExists(cachedResolution))
+          componentFilePath = cachedResolution;
+        else
+          componentResolutionCache.delete(resolutionCacheKey);
+      if (!componentFilePath && (baseName.startsWith("./") || baseName.startsWith("../"))) {
         componentFilePath = path.resolve(path.dirname(parentFilePath), `${baseName}.stx`);
         triedPaths.push(componentFilePath);
-      } else
+      } else if (!componentFilePath)
         for (const dir of searchDirs) {
           if (!dir)
             continue;
@@ -497,6 +532,8 @@ export async function renderComponentWithSlot(componentPath, props, slotContent,
           if (componentFilePath)
             break;
         }
+      if (componentFilePath)
+        componentResolutionCache.set(resolutionCacheKey, componentFilePath);
     }
     if (!componentFilePath || !await fileExists(componentFilePath)) {
       const searchInfo = triedPaths.length > 0 ? `
@@ -540,7 +577,26 @@ ${triedPaths.map((p) => `  - ${p}`).join(`
     const templateBlock = findSfcTemplateBlock(workingContent);
     if (templateBlock)
       workingContent = templateBlock.content.trim();
-    const scriptRegex = /<script\b([^>]*)>([\s\S]*?)<\/script>/gi, scriptMatches = [...componentContent.matchAll(scriptRegex)], clientScripts = [];
+    const scriptRegex = /<script\b([^>]*)>([\s\S]*?)<\/script>/gi, scriptMatches = [...componentContent.matchAll(scriptRegex)], clientScripts = [], cacheableServerComponent = scriptMatches.some((match) => /\bserver\b/.test(match[1] || "") && /\bcache\b/.test(match[1] || "")) && scriptMatches.every((match) => /\bserver\b/.test(match[1] || ""));
+    let componentRenderCacheKey = null, dependencyBaseline = null;
+    if (cacheableServerComponent) {
+      const serializedInput = serializeComponentRenderInput({
+        props,
+        slot: slotContent,
+        buildMode: options.buildMode ?? "",
+        skipEventDirectives: options.skipEventDirectives === !0
+      });
+      if (serializedInput !== null) {
+        componentRenderCacheKey = `${componentFilePath}\x00${serializedInput}`;
+        const cachedRender = componentRenderCache.get(componentRenderCacheKey);
+        if (cachedRender) {
+          for (const dependency of cachedRender.dependencies)
+            dependencies.add(dependency);
+          return cachedRender.output;
+        }
+        dependencyBaseline = new Set(dependencies);
+      }
+    }
     for (const match of scriptMatches) {
       const attrs = match[1] || "";
       let content = match[2] || "";
@@ -701,6 +757,11 @@ finally {
       if (scopedStyleResult.hasScoped)
         output = scopedStyleResult.html;
     }
+    if (componentRenderCacheKey && dependencyBaseline)
+      componentRenderCache.set(componentRenderCacheKey, {
+        output,
+        dependencies: [...dependencies].filter((dependency) => !dependencyBaseline.has(dependency))
+      });
     return output;
   } catch (error) {
     return `[Error processing component: ${error instanceof Error ? error.message : String(error)}]`;
@@ -989,6 +1050,8 @@ ${colors.dim}${context}${colors.reset}
 }
 export function clearComponentCache() {
   componentsCache.clear();
+  componentResolutionCache.clear();
+  componentRenderCache.clear();
 }
 export function getComponentCacheStats() {
   return {

package/dist/variable-extractor.d.ts

@@ -26,6 +26,28 @@ export declare function extractVariables(scriptContent: string, context: Record<
  */
 export declare function isCompleteImport(statement: string): boolean;
 export declare function convertToCommonJS(scriptContent: string, filePath?: string): string;
+/**
+ * Parse variable declarations (including multi-line objects and arrays)
+ */
+/**
+ * Split `const name: Type = value` into its parts.
+ *
+ * The pattern this supports used to require the `=` to follow the name
+ * directly, so any TypeScript annotation made the declaration unparseable. That
+ * is not a small failure: an unparseable declaration throws out of
+ * `convertToCommonJS`, the whole server script falls back to static
+ * extraction, and the page renders with every variable undefined and no error.
+ * A single `const rows: any = await db...` was enough to blank a page.
+ *
+ * The annotation is erased at runtime, so it only has to be skipped. It is
+ * scanned rather than matched because it can contain almost anything: `=` in a
+ * generic default, braces in an object type, commas and angle brackets in a
+ * generic argument list.
+ *
+ * Returns null when the line is not a simple declaration, which leaves the
+ * destructuring and multi-line paths below to handle it as before.
+ */
+export declare function splitDeclaration(line: string): { type: string, name: string, value: string } | null;
 /**
  * Extract script content from an HTML template
  *

package/dist/variable-extractor.js

@@ -877,8 +877,61 @@ function extractDestructuredNames(pattern) {
     names.push(currentName.trim());
   return names;
 }
+export function splitDeclaration(line) {
+  const head = /^(?:export\s+)?(const|let|var)\s+([A-Za-z_$][\w$]*)/.exec(line);
+  if (!head)
+    return null;
+  let index = head[0].length;
+  const isSpace = (character) => character === " " || character === "\t";
+  while (index < line.length && isSpace(line[index]))
+    index++;
+  if (line[index] === ":") {
+    let depth = 0, quote = null;
+    index++;
+    for (;index < line.length; index++) {
+      const character = line[index];
+      if (quote) {
+        if (character === "\\") {
+          index++;
+          continue;
+        }
+        if (character === quote)
+          quote = null;
+        continue;
+      }
+      if (character === "'" || character === '"' || character === "`") {
+        quote = character;
+        continue;
+      }
+      if (character === "(" || character === "[" || character === "{" || character === "<") {
+        depth++;
+        continue;
+      }
+      if (character === ")" || character === "]" || character === "}" || character === ">") {
+        depth--;
+        continue;
+      }
+      if (character === "=" && depth <= 0) {
+        const next = line[index + 1], previous = line[index - 1];
+        if (next !== "=" && next !== ">" && previous !== "=" && previous !== "!" && previous !== "<" && previous !== ">")
+          break;
+      }
+    }
+    if (line[index] !== "=")
+      return null;
+  }
+  while (index < line.length && isSpace(line[index]))
+    index++;
+  if (line[index] !== "=")
+    return null;
+  return {
+    type: head[1],
+    name: head[2],
+    value: line.slice(index + 1).trim()
+  };
+}
 function parseVariableDeclaration(lines, startIndex) {
-  const firstLine = lines[startIndex].trim(), match = firstLine.match(/^(?:export\s+)?(const|let|var)\s+(\w+)\s*=\s*(.*)$/);
+  const firstLine = lines[startIndex].trim(), split = splitDeclaration(firstLine), match = split ? [firstLine, split.type, split.name, split.value] : null;
   if (!match) {
     const destructuringPrefix = firstLine.match(/^(?:export\s+)?(const|let|var)\s+/);
     if (destructuringPrefix) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stacksjs/stx",
   "type": "module",
-  "version": "0.2.129",
+  "version": "0.2.131",
   "description": "A performant UI Framework. Powered by Bun.",
   "author": "Chris Breuer <chris@stacksjs.org>",
   "license": "MIT",
@@ -117,12 +117,12 @@
   "dependencies": {
     "@cwcss/crosswind": "^0.2.12",
     "@stacksjs/clapp": "^0.2.0",
-    "@stacksjs/desktop": "0.2.129",
-    "@stacksjs/sanitizer": "0.2.129",
+    "@stacksjs/desktop": "0.2.131",
+    "@stacksjs/sanitizer": "0.2.131",
     "@stacksjs/ts-i18n": "^0.1.11",
-    "bun-plugin-stx": "0.2.129",
+    "bun-plugin-stx": "0.2.131",
     "bunfig": "^0.15.15",
-    "stx-router": "0.2.129",
+    "stx-router": "0.2.131",
     "ts-broadcasting": "^0.0.9",
     "ts-images": "^0.1.9",
     "ts-syntax-highlighter": "^0.2.1"