@ohos-ports/stacksjs-stx 0.2.287-beta.0

package/dist/serve.js

@@ -0,0 +1,233 @@
+import { serve as bunServe, default as Bun } from "./bun-shim.js";
+import fs from "node:fs";
+import path from "node:path";
+import { findSfcTemplateBlock } from "./sfc-template.js";
+import { readMarkdownFile } from "./assets.js";
+import { processDirectives } from "./process.js";
+import { extractVariables } from "./utils.js";
+import { compressResponse } from "./compression.js";
+import { readResponseHeaders, readResponseStatus } from "./page-response.js";
+export function htmlResponse(html, status = 200, headers = {}) {
+  return new Response(html, {
+    status,
+    headers: {
+      "Content-Type": "text/html; charset=utf-8",
+      ...headers
+    }
+  });
+}
+async function resolveStxOptions(options) {
+  const { loadStxConfig } = await import("./config.js");
+  return { ...await loadStxConfig(options.configDir ?? process.cwd()).catch(() => ({})), ...options.stxOptions ?? {} };
+}
+export async function serve(options = {}) {
+  const {
+    port = 3000,
+    root = ".",
+    watch = !0,
+    onRequest,
+    routes = {},
+    middleware = [],
+    on404,
+    onError
+  } = options, rootDir = path.resolve(root), stxOptions = await resolveStxOptions(options), fileCache = new Map;
+  async function processStxFile(filePath) {
+    const stats = fs.statSync(filePath), cacheKey = `${filePath}:${stats.mtimeMs}`, cached = fileCache.get(cacheKey);
+    if (cached)
+      return { content: cached.content, status: cached.status, headers: cached.headers };
+    for (const key of fileCache.keys())
+      if (key.startsWith(`${filePath}:`) && key !== cacheKey)
+        fileCache.delete(key);
+    let content = await Bun.file(filePath).text(), workingContent = content;
+    const templateBlock = findSfcTemplateBlock(content);
+    if (templateBlock)
+      workingContent = templateBlock.content.trim();
+    const scriptRegex = /<script\b([^>]*)>([\s\S]*?)<\/script>/gi, clientScripts = [], serverScripts = [];
+    let scriptMatch;
+    while ((scriptMatch = scriptRegex.exec(content)) !== null) {
+      const attrs = scriptMatch[1], scriptContent = scriptMatch[2], fullScript = scriptMatch[0];
+      if (attrs.includes("server"))
+        serverScripts.push(scriptContent);
+      else
+        clientScripts.push(fullScript);
+    }
+    const styleMatches = content.match(/<style\b[^>]*>[\s\S]*?<\/style>/gi) || [];
+    let templateContent = workingContent.replace(/<script\b[^>]*>[\s\S]*?<\/script>/gi, "").replace(/<style\b[^>]*>[\s\S]*?<\/style>/gi, "");
+    const context = {
+      __filename: filePath,
+      __dirname: path.dirname(filePath)
+    };
+    for (const scriptContent of serverScripts)
+      await extractVariables(scriptContent, context, filePath);
+    let output = await processDirectives(templateContent, context, filePath, stxOptions, new Set);
+    if (styleMatches.length > 0) {
+      const stylesHtml = styleMatches.join(`
+`);
+      if (output.match(/(<\/head>)/i))
+        output = output.replace(/(<\/head>)/i, `${stylesHtml}
+$1`);
+    }
+    if (clientScripts.length > 0) {
+      const { interpolateScriptsInTemplate } = await import("./expressions.js"), scriptsHtml = interpolateScriptsInTemplate(clientScripts.join(`
+`), context);
+      if (output.match(/(<\/body>)/i))
+        output = output.replace(/(<\/body>)/i, `${scriptsHtml}
+$1`);
+      else
+        output += `
+${scriptsHtml}`;
+    }
+    const status = readResponseStatus(context), headers = readResponseHeaders(context);
+    fileCache.set(cacheKey, { content: output, mtime: stats.mtimeMs, status, headers });
+    return { content: output, status, headers };
+  }
+  async function processMarkdownFile(filePath) {
+    const stats = fs.statSync(filePath), cacheKey = `${filePath}:${stats.mtimeMs}`, cached = fileCache.get(cacheKey);
+    if (cached)
+      return cached.content;
+    const { content } = await readMarkdownFile(filePath, stxOptions);
+    fileCache.set(cacheKey, { content, mtime: stats.mtimeMs });
+    return content;
+  }
+  function resolveRequestPath(pathname) {
+    const relPath = pathname.startsWith("/") ? pathname.slice(1) : pathname, possiblePaths = [
+      relPath,
+      `${relPath}.stx`,
+      `${relPath}.md`,
+      `${relPath}.html`,
+      path.join(relPath, "index.stx"),
+      path.join(relPath, "index.md"),
+      path.join(relPath, "index.html")
+    ];
+    for (const possiblePath of possiblePaths) {
+      const fullPath = path.join(rootDir, possiblePath);
+      if (fs.existsSync(fullPath) && fs.statSync(fullPath).isFile())
+        return fullPath;
+    }
+    return null;
+  }
+  async function handleRequest(request) {
+    const url = new URL(request.url);
+    let next = async () => {
+      if (routes[url.pathname])
+        return await routes[url.pathname](request);
+      if (onRequest) {
+        const customResponse = await onRequest(request);
+        if (customResponse)
+          return customResponse;
+      }
+      const filePath = resolveRequestPath(url.pathname);
+      if (!filePath) {
+        if (on404)
+          return await on404(request);
+        return new Response("Not Found", { status: 404 });
+      }
+      try {
+        let content, contentType = "text/html", pageStatus, pageHeaders;
+        if (filePath.endsWith(".stx")) {
+          const page = await processStxFile(filePath);
+          content = page.content;
+          pageStatus = page.status;
+          pageHeaders = page.headers;
+        } else if (filePath.endsWith(".md"))
+          content = await processMarkdownFile(filePath);
+        else if (filePath.endsWith(".html"))
+          content = await Bun.file(filePath).text();
+        else if (filePath.endsWith(".css")) {
+          content = await Bun.file(filePath).text();
+          contentType = "text/css";
+        } else if (filePath.endsWith(".js")) {
+          content = await Bun.file(filePath).text();
+          contentType = "text/javascript";
+        } else if (filePath.endsWith(".json")) {
+          content = await Bun.file(filePath).text();
+          contentType = "application/json";
+        } else
+          return new Response(Bun.file(filePath));
+        return new Response(content, {
+          status: pageStatus ?? 200,
+          headers: { "Content-Type": contentType, ...pageHeaders }
+        });
+      } catch (error) {
+        if (onError)
+          return await onError(error, request);
+        const msg = error instanceof Error ? error.message : String(error), body = stxOptions?.debug === !0 ? `<h1>Error</h1><pre>${msg}
+${error instanceof Error ? error.stack : ""}</pre>` : "<h1>Internal Server Error</h1><p>An error occurred while processing your request.</p>";
+        return new Response(body, {
+          status: 500,
+          headers: { "Content-Type": "text/html" }
+        });
+      }
+    };
+    for (let i = middleware.length - 1;i >= 0; i--) {
+      const mw = middleware[i], currentNext = next;
+      next = async () => await mw(request, currentNext);
+    }
+    return await next();
+  }
+  const server = bunServe({
+    port,
+    fetch: async (request) => compressResponse(request, await handleRequest(request))
+  });
+  let watcher = null;
+  if (watch)
+    watcher = fs.watch(rootDir, { recursive: !0 }, (eventType, filename) => {
+      if (filename && (filename.endsWith(".stx") || filename.endsWith(".md") || filename.endsWith(".html")))
+        fileCache.clear();
+    });
+  return {
+    server,
+    url: server.url.toString(),
+    stop() {
+      if (watcher)
+        watcher.close();
+      server.stop();
+    }
+  };
+}
+export async function serveFile(filePath, options = {}) {
+  const absolutePath = path.resolve(filePath);
+  if (!await Bun.file(absolutePath).exists())
+    throw Error(`File not found: ${absolutePath}`);
+  const isMarkdown = absolutePath.endsWith(".md"), isStx = absolutePath.endsWith(".stx");
+  if (!isMarkdown && !isStx)
+    throw Error(`Unsupported file type: ${absolutePath}. Only .stx and .md files are supported.`);
+  const stxOptions = await resolveStxOptions(options);
+  return await serve({
+    ...options,
+    root: path.dirname(absolutePath),
+    routes: {
+      "/": async () => {
+        let content, status = 200, headers;
+        if (isMarkdown) {
+          const { content: md } = await readMarkdownFile(absolutePath, stxOptions);
+          content = md;
+        } else {
+          const fileContent = await Bun.file(absolutePath).text(), serverScriptContents = [], scriptRe = /<script\b([^>]*)>([\s\S]*?)<\/script>/gi;
+          let scriptM;
+          while ((scriptM = scriptRe.exec(fileContent)) !== null)
+            if (scriptM[1].includes("server"))
+              serverScriptContents.push(scriptM[2]);
+          const scriptContent = serverScriptContents.join(`
+`), templateContent = fileContent.replace(/<script\b[^>]*>[\s\S]*?<\/script>/gi, ""), context = {};
+          if (scriptContent.trim())
+            await extractVariables(scriptContent, context, absolutePath);
+          content = await processDirectives(templateContent, context, absolutePath, stxOptions, new Set);
+          status = readResponseStatus(context) ?? 200;
+          headers = readResponseHeaders(context);
+        }
+        return new Response(content, {
+          status,
+          headers: { "Content-Type": "text/html", ...headers }
+        });
+      },
+      ...options.routes
+    }
+  });
+}
+export function createMiddleware(handler) {
+  return handler;
+}
+export function createRoute(handler) {
+  return handler;
+}

package/dist/server-bindings.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Server-Side Attribute Binding Resolution
+ *
+ * Resolves `:attr="expr"` bindings server-side when the expression can be
+ * evaluated in the server context. This allows Vue-style shorthand binding
+ * syntax to work in server-rendered templates without client-side JS.
+ *
+ * Supported patterns:
+ * - `:src="imageUrl"` → `src="https://example.com/image.png"`
+ * - `:href="link.url"` → `href="/about"`
+ * - `:class="isActive ? 'active' : ''"` → `class="active"`
+ * - `:class="{ active: isActive, hidden: !show }"` → `class="active"`
+ * - `:class="[baseClass, isActive && 'active']"` → `class="btn active"`
+ * - `:disabled="isLoading"` → `disabled` (boolean attributes)
+ * - `:id="'item-' + item.id"` → `id="item-42"`
+ *
+ * Bindings that can't be resolved server-side (e.g., referencing signals or
+ * undefined variables) are left intact for client-side processing.
+ *
+ * @module server-bindings
+ */
+/**
+ * Find reactive loop regions whose bindings belong to the browser scope.
+ *
+ * Server scripts may leave placeholder objects for iteration variables in the
+ * render context. Evaluating a descendant binding against that placeholder can
+ * look successful while producing a permanently wrong value, such as
+ * `:href="pathFor(row.id)"` becoming `href="/rows/undefined"`. The loop runtime
+ * owns the iteration scope, so bindings on the loop element and its descendants
+ * must remain intact until each row is cloned in the browser.
+ */
+export declare function reactiveLoopRanges(template: string): Array<[number, number]>;
+/**
+ * Process server-side `:attr="expr"` bindings in a template.
+ *
+ * Called after server scripts have executed and before expression processing,
+ * so the context contains all server-side variables.
+ */
+export declare function processServerBindings(template: string, context: Record<string, any>): string;

package/dist/server-bindings.js

@@ -0,0 +1,171 @@
+import { isRuntimeOwnedColonAttr } from "./runtime-globals.js";
+const BOOLEAN_ATTRS = new Set([
+  "disabled",
+  "checked",
+  "readonly",
+  "required",
+  "autofocus",
+  "autoplay",
+  "controls",
+  "default",
+  "defer",
+  "formnovalidate",
+  "hidden",
+  "ismap",
+  "loop",
+  "multiple",
+  "muted",
+  "nomodule",
+  "novalidate",
+  "open",
+  "playsinline",
+  "reversed",
+  "selected"
+]), VOID_TAGS = new Set([
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "link",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr"
+]);
+export function reactiveLoopRanges(template) {
+  const ranges = [], openingTag = /<([a-zA-Z][a-zA-Z0-9-]*)\b((?:[^>"']|"[^"]*"|'[^']*')*)\s*\/?>/g;
+  let match;
+  while ((match = openingTag.exec(template)) !== null) {
+    const attributes = match[2] || "";
+    if (!/(?:^|\s)(?::for|x-for|v-for|@for)\s*=/.test(attributes))
+      continue;
+    const start = match.index, openingEnd = start + match[0].length, tagName = match[1].toLowerCase();
+    if (match[0].endsWith("/>") || VOID_TAGS.has(tagName)) {
+      ranges.push([start, openingEnd]);
+      continue;
+    }
+    const escapedTag = tagName.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), sameTag = new RegExp(`<\\/?${escapedTag}\\b(?:[^>"']|"[^"]*"|'[^']*')*>`, "gi");
+    sameTag.lastIndex = openingEnd;
+    let depth = 1, closingEnd = openingEnd, nested;
+    while ((nested = sameTag.exec(template)) !== null)
+      if (nested[0].startsWith("</")) {
+        depth--;
+        if (depth === 0) {
+          closingEnd = nested.index + nested[0].length;
+          break;
+        }
+      } else if (!nested[0].endsWith("/>"))
+        depth++;
+    ranges.push([start, closingEnd]);
+  }
+  return ranges;
+}
+function resolveClassBinding(value) {
+  if (typeof value === "string")
+    return value;
+  if (Array.isArray(value))
+    return value.filter(Boolean).map((v) => resolveClassBinding(v)).join(" ");
+  if (value && typeof value === "object")
+    return Object.entries(value).filter(([, active]) => active).map(([className]) => className).join(" ");
+  return value ? String(value) : "";
+}
+export function processServerBindings(template, context) {
+  if (!/:[\w-]+=/.test(template))
+    return template;
+  let output = template;
+  const scriptStyleRegex = /<(script|style)\b[^>]*>[\s\S]*?<\/\1>/gi, protectedRanges = [];
+  let match;
+  while ((match = scriptStyleRegex.exec(template)) !== null)
+    protectedRanges.push([match.index, match.index + match[0].length]);
+  protectedRanges.push(...reactiveLoopRanges(template));
+  function isProtected(pos) {
+    return protectedRanges.some(([start, end]) => pos >= start && pos < end);
+  }
+  const tagRegex = /<([a-zA-Z][a-zA-Z0-9-]*)\b((?:[^>"']|"[^"]*"|'[^']*')*)\s*\/?>/g, replacements = [], compiledBindings = new Map, maxCompiledBindings = 256;
+  while ((match = tagRegex.exec(output)) !== null) {
+    if (isProtected(match.index))
+      continue;
+    const fullTag = match[0], attrs = match[2];
+    if (!attrs || !attrs.includes(":"))
+      continue;
+    const bindingRegex = /\s:([a-zA-Z_][\w-]*)\s*=\s*"([^"]*)"/g;
+    let attrMatch, newAttrs = attrs, hadReplacement = !1;
+    while ((attrMatch = bindingRegex.exec(attrs)) !== null) {
+      const attrName = attrMatch[1], expression = attrMatch[2];
+      if (isRuntimeOwnedColonAttr(attrName))
+        continue;
+      if (expression.includes("()") && !expression.includes(".get(") || expression.includes("$store") || expression.includes("$ref"))
+        continue;
+      try {
+        const contextKeys = Object.keys(context), contextValues = Object.values(context), identMatch = expression.match(/^([a-zA-Z_$][\w$]*)/);
+        if (identMatch && !contextKeys.includes(identMatch[1]) && !["true", "false", "null", "undefined", "Math", "JSON", "String", "Number", "Array", "Object", "Date", "parseInt", "parseFloat"].includes(identMatch[1]))
+          continue;
+        const compileKey = JSON.stringify([contextKeys, expression]);
+        let fn = compiledBindings.get(compileKey);
+        if (!fn) {
+          fn = Function(...contextKeys, `return (${expression})`);
+          if (compiledBindings.size >= maxCompiledBindings)
+            compiledBindings.clear();
+          compiledBindings.set(compileKey, fn);
+        }
+        const value = fn(...contextValues);
+        if (attrName === "class") {
+          const classStr = resolveClassBinding(value);
+          if (classStr) {
+            const existingClassMatch = newAttrs.match(/\sclass="([^"]*)"/);
+            if (existingClassMatch)
+              newAttrs = newAttrs.replace(existingClassMatch[0], ` class="${existingClassMatch[1]} ${classStr}"`);
+            else
+              newAttrs = newAttrs.replace(attrMatch[0], ` class="${classStr}"`);
+          } else
+            newAttrs = newAttrs.replace(attrMatch[0], "");
+          hadReplacement = !0;
+          continue;
+        }
+        if (BOOLEAN_ATTRS.has(attrName)) {
+          if (value)
+            newAttrs = newAttrs.replace(attrMatch[0], ` ${attrName}`);
+          else
+            newAttrs = newAttrs.replace(attrMatch[0], "");
+          hadReplacement = !0;
+          continue;
+        }
+        if (value === null || value === void 0 || value === !1)
+          newAttrs = newAttrs.replace(attrMatch[0], "");
+        else {
+          const escaped = String(value).replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+          newAttrs = newAttrs.replace(attrMatch[0], ` ${attrName}="${escaped}"`);
+        }
+        hadReplacement = !0;
+      } catch {
+        continue;
+      }
+    }
+    if (hadReplacement) {
+      const selfClose = fullTag.endsWith("/>") ? " /" : "", newTag = `<${match[1]}${newAttrs}${selfClose}>`;
+      replacements.push({
+        start: match.index,
+        end: match.index + fullTag.length,
+        replacement: newTag
+      });
+    }
+  }
+  if (replacements.length > 0) {
+    const chunks = Array(replacements.length * 2 + 1);
+    let cursor = 0;
+    for (let i = 0;i < replacements.length; i++) {
+      const { start, end, replacement } = replacements[i];
+      chunks[i * 2] = output.slice(cursor, start);
+      chunks[i * 2 + 1] = replacement;
+      cursor = end;
+    }
+    chunks[replacements.length * 2] = output.slice(cursor);
+    output = chunks.join("");
+  }
+  return output;
+}

package/dist/server-components.d.ts

@@ -0,0 +1,138 @@
+import type { CustomDirective } from './types';
+/**
+ * Register a server component.
+ */
+export declare function registerServerComponent(component: ServerComponent): void;
+/**
+ * Register a client component.
+ */
+export declare function registerClientComponent(component: ClientComponent): void;
+/**
+ * Get a registered component.
+ */
+export declare function getComponent(name: string): ComponentEntry | undefined;
+/**
+ * Check if a component is registered.
+ */
+export declare function hasComponent(name: string): boolean;
+/**
+ * Get all registered component names.
+ */
+export declare function getComponentNames(): string[];
+/**
+ * Clear all registered components.
+ */
+export declare function clearComponents(): void;
+/**
+ * Clear component cache.
+ */
+export declare function clearComponentCache(name?: string): void;
+/**
+ * Render a server component.
+ */
+export declare function renderServerComponent(name: string, options?: RenderOptions): Promise<RenderResult>;
+/**
+ * Render a client component (server-side with hydration markers).
+ */
+export declare function renderClientComponent(name: string, options?: RenderOptions): Promise<RenderResult>;
+/**
+ * Render any registered component.
+ */
+export declare function renderComponent(name: string, options?: RenderOptions): Promise<RenderResult>;
+/**
+ * Clean up resolved/errored suspense states to prevent memory leaks.
+ */
+export declare function cleanupSuspenseStates(): void;
+/**
+ * Create a suspense boundary.
+ */
+export declare function createSuspenseBoundary(id: string, fallback: string): { wrap: (promise: Promise<string>) => Promise<string>, getFallback: () => string };
+/**
+ * Get suspense state by ID.
+ */
+export declare function getSuspenseState(id: string): SuspenseState | undefined;
+/**
+ * Clear suspense state.
+ */
+export declare function clearSuspenseState(id?: string): void;
+/**
+ * Create a streaming renderer for server components.
+ */
+export declare function createStreamingRenderer(components: string[], options?: RenderOptions): {
+    renderToStream: () => ReadableStream<string>
+    renderToString: () => Promise<string>
+  };
+/**
+ * Register all server component directives.
+ */
+export declare function registerServerComponentDirectives(): CustomDirective[];
+/**
+ * Generate client-side runtime for server components hydration.
+ */
+export declare function generateServerComponentsRuntime(): string;
+/**
+ * @serverComponent directive for defining server components inline.
+ */
+export declare const serverComponentDirective: CustomDirective;
+/**
+ * @clientComponent directive for defining client components inline.
+ */
+export declare const clientComponentDirective: CustomDirective;
+/**
+ * @suspense directive for async boundaries.
+ */
+export declare const suspenseDirective: CustomDirective;
+/** Server component definition */
+export declare interface ServerComponent {
+  name: string
+  template: string
+  loader?: (props: Record<string, unknown>) => Promise<Record<string, unknown>>
+  dependencies?: string[]
+  cache?: CacheConfig
+  errorBoundary?: string
+  suspenseFallback?: string
+}
+/** Client component definition */
+export declare interface ClientComponent {
+  name: string
+  template: string
+  clientScript?: string
+  clientProps?: string[]
+  priority?: 'eager' | 'lazy' | 'idle'
+}
+/** Cache configuration */
+export declare interface CacheConfig {
+  enabled: boolean
+  ttl?: number
+  keyGenerator?: (props: Record<string, unknown>) => string
+  staleWhileRevalidate?: boolean
+}
+/** Server component rendering options */
+export declare interface RenderOptions {
+  props?: Record<string, unknown>
+  streaming?: boolean
+  request?: { url: string, headers: Record<string, string> }
+  signal?: AbortSignal
+}
+/** Server component render result */
+export declare interface RenderResult {
+  html: string
+  renderTime: number
+  data?: Record<string, unknown>
+  dependencies: string[]
+  cached: boolean
+  hydrationScript?: string
+}
+/** Component registry entry */
+declare interface ComponentEntry {
+  component: ServerComponent | ClientComponent
+  type: 'server' | 'client'
+}
+/** Suspense boundary state */
+declare interface SuspenseState {
+  id: string
+  status: 'pending' | 'resolved' | 'error'
+  promise?: Promise<unknown>
+  result?: string
+  error?: Error
+}