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

package/dist/story/collect/tree.js

@@ -0,0 +1,110 @@
+export function createTreePath(config, file) {
+  const treeFile = file.treeFile || {
+    title: file.fileName,
+    path: file.relativePath
+  };
+  if (config.tree.file === "title")
+    return treeFile.title.split("/");
+  if (config.tree.file === "path")
+    return [...file.relativePath.split("/").slice(0, -1), treeFile.title];
+  if (typeof config.tree.file === "function")
+    return config.tree.file(treeFile);
+  return [treeFile.title];
+}
+export function buildTree(config, files) {
+  for (const file of files)
+    file.treePath = createTreePath(config, file);
+  const groups = (config.tree.groups || []).map((g) => ({
+    groupConfig: { id: g.id || g.title, title: g.title, include: g.include },
+    treeObject: {}
+  })), defaultGroup = { treeObject: {} };
+  groups.push(defaultGroup);
+  for (let index = 0;index < files.length; index++) {
+    const file = files[index], group = getGroup(file, groups, defaultGroup);
+    setPath(file.treePath, index, group.treeObject);
+  }
+  const sortFn = config.tree.order === "asc" ? (a, b) => a.localeCompare(b) : config.tree.order, result = [];
+  for (const group of groups)
+    if (group === defaultGroup)
+      result.push(...buildTreeFromObject(group.treeObject, sortFn));
+    else if (group.groupConfig && Object.keys(group.treeObject).length > 0)
+      result.push({
+        group: !0,
+        id: group.groupConfig.id,
+        title: group.groupConfig.title,
+        children: buildTreeFromObject(group.treeObject, sortFn)
+      });
+  return result;
+}
+function getGroup(file, groups, defaultGroup) {
+  const treeFile = file.treeFile || { title: file.fileName, path: file.relativePath };
+  for (const group of groups)
+    if (group.groupConfig?.include && group.groupConfig.include(treeFile))
+      return group;
+  return defaultGroup;
+}
+function setPath(path, value, tree) {
+  let current = tree;
+  for (let i = 0;i < path.length; i++) {
+    const key = path[i];
+    if (i === path.length - 1)
+      if (current[key] !== void 0) {
+        let copyNumber = 1;
+        while (current[`${key}-${copyNumber}`] !== void 0)
+          copyNumber++;
+        current[`${key}-${copyNumber}`] = value;
+      } else
+        current[key] = value;
+    else {
+      if (current[key] === void 0)
+        current[key] = {};
+      else if (typeof current[key] === "number") {
+        const leafValue = current[key];
+        current[key] = { "": leafValue };
+      }
+      current = current[key];
+    }
+  }
+}
+function buildTreeFromObject(obj, sortFn) {
+  const nodes = [];
+  for (const [key, value] of Object.entries(obj))
+    if (typeof value === "number")
+      nodes.push({
+        title: key,
+        index: value
+      });
+    else
+      nodes.push({
+        title: key,
+        children: buildTreeFromObject(value, sortFn)
+      });
+  nodes.sort((a, b) => sortFn(a.title, b.title));
+  return nodes;
+}
+export function flattenTree(tree) {
+  const indices = [];
+  function walk(nodes) {
+    for (const node of nodes)
+      if ("index" in node)
+        indices.push(node.index);
+      else if ("children" in node)
+        walk(node.children);
+  }
+  walk(tree);
+  return indices;
+}
+export function findStoryInTree(tree, index) {
+  function walk(nodes, currentPath) {
+    for (const node of nodes)
+      if ("index" in node && node.index === index)
+        return { path: [...currentPath, node.title], node };
+      else if ("children" in node) {
+        const result = walk(node.children, [...currentPath, node.title]);
+        if (result)
+          return result;
+      }
+    return null;
+  }
+  return walk(tree, []);
+}

package/dist/story/commands/build.d.ts

@@ -0,0 +1,19 @@
+/**
+ * STX Story - Build command
+ * Build static story site for deployment
+ */
+/**
+ * Options for the build command
+ */
+export interface BuildOptions {
+    /** Output directory (overrides config) */
+    outDir?: string;
+}
+/**
+ * Build static story site
+ */
+export declare function buildCommand(options?: BuildOptions): Promise<void>;
+/**
+ * Run build command (alias)
+ */
+export declare const build: typeof buildCommand;

package/dist/story/commands/build.js

@@ -0,0 +1,172 @@
+import fs from "node:fs";
+import path from "node:path";
+import { scanStoryFiles } from "../collect/scanner.js";
+import { buildTree } from "../collect/tree.js";
+import { createContext, updateContextStoryFiles, updateContextTree } from "../context.js";
+import { printBanner, printBuildSummary, printStoryCount, printWarning } from "../output.js";
+import { buildSearchIndex, exportSearchIndex } from "../search.js";
+export async function buildCommand(options = {}) {
+  const startTime = Date.now();
+  printBanner();
+  const ctx = await createContext({ mode: "build" });
+  if (!ctx.config.enabled) {
+    printWarning("Story feature is disabled in config.");
+    return;
+  }
+  const storyFiles = await scanStoryFiles(ctx);
+  updateContextStoryFiles(ctx, storyFiles);
+  const tree = buildTree(ctx.config, storyFiles);
+  updateContextTree(ctx, tree);
+  printStoryCount(storyFiles.length);
+  const outDir = options.outDir ?? ctx.config.outDir, absoluteOutDir = path.resolve(ctx.root, outDir);
+  await fs.promises.mkdir(absoluteOutDir, { recursive: !0 });
+  console.log(`  Building to ${outDir}...`);
+  const indexHtml = generateStaticHTML(ctx);
+  await fs.promises.writeFile(path.join(absoluteOutDir, "index.html"), indexHtml);
+  const storiesData = {
+    files: storyFiles.map((f) => ({
+      id: f.id,
+      fileName: f.fileName,
+      relativePath: f.relativePath,
+      treePath: f.treePath
+    })),
+    tree
+  };
+  await fs.promises.writeFile(path.join(absoluteOutDir, "stories.json"), JSON.stringify(storiesData, null, 2));
+  const configData = {
+    theme: ctx.config.theme,
+    responsivePresets: ctx.config.responsivePresets,
+    backgroundPresets: ctx.config.backgroundPresets
+  };
+  await fs.promises.writeFile(path.join(absoluteOutDir, "config.json"), JSON.stringify(configData, null, 2));
+  const storiesDir = path.join(absoluteOutDir, "stories");
+  await fs.promises.mkdir(storiesDir, { recursive: !0 });
+  for (const file of storyFiles) {
+    const content = await fs.promises.readFile(file.path, "utf-8");
+    await fs.promises.writeFile(path.join(storiesDir, `${file.id}.stx`), content);
+  }
+  buildSearchIndex(ctx);
+  const searchIndexJson = exportSearchIndex();
+  await fs.promises.writeFile(path.join(absoluteOutDir, "search-index.json"), searchIndexJson);
+  const duration = Date.now() - startTime;
+  printBuildSummary(storyFiles.length, outDir, duration);
+}
+function generateStaticHTML(ctx) {
+  const { theme } = ctx.config, title = theme.title || "STX Story";
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${title}</title>
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    :root {
+      --bg: #ffffff;
+      --bg-secondary: #f5f5f5;
+      --text: #333333;
+      --text-secondary: #666666;
+      --border: #e0e0e0;
+      --primary: #3b82f6;
+    }
+    .dark {
+      --bg: #1a1a1a;
+      --bg-secondary: #2a2a2a;
+      --text: #ffffff;
+      --text-secondary: #a0a0a0;
+      --border: #404040;
+    }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: var(--bg);
+      color: var(--text);
+      display: flex;
+      height: 100vh;
+    }
+    .sidebar {
+      width: 280px;
+      background: var(--bg-secondary);
+      border-right: 1px solid var(--border);
+      overflow-y: auto;
+      padding: 1rem;
+    }
+    .sidebar h1 {
+      font-size: 1.25rem;
+      margin-bottom: 1rem;
+      padding-bottom: 0.5rem;
+      border-bottom: 1px solid var(--border);
+    }
+    .story-list { list-style: none; }
+    .story-item {
+      padding: 0.5rem 0.75rem;
+      border-radius: 4px;
+      cursor: pointer;
+      margin-bottom: 2px;
+    }
+    .story-item:hover { background: var(--border); }
+    .story-item.active { background: var(--primary); color: white; }
+    .main { flex: 1; display: flex; flex-direction: column; }
+    .toolbar {
+      padding: 0.75rem 1rem;
+      border-bottom: 1px solid var(--border);
+      display: flex;
+      gap: 0.5rem;
+    }
+    .canvas { flex: 1; padding: 2rem; overflow: auto; }
+    .empty-state {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      color: var(--text-secondary);
+    }
+  </style>
+</head>
+<body>
+  <aside class="sidebar">
+    <h1>\uD83D\uDCD6 ${title}</h1>
+    <ul class="story-list" id="story-list"></ul>
+  </aside>
+  <main class="main">
+    <div class="toolbar">
+      <button onclick="toggleTheme()">\uD83C\uDF13 Theme</button>
+    </div>
+    <div class="canvas" id="canvas">
+      <div class="empty-state">Select a story</div>
+    </div>
+  </main>
+  <script>
+    fetch('stories.json')
+      .then(r => r.json())
+      .then(data => {
+        const list = document.getElementById('story-list');
+        list.innerHTML = data.files.map(f =>
+          '<li class="story-item" onclick="selectStory(\\'' + f.id + '\\')">' + f.fileName + '</li>'
+        ).join('');
+      });
+
+    function selectStory(id) {
+      document.querySelectorAll('.story-item').forEach(el => el.classList.remove('active'));
+      event.target.classList.add('active');
+      fetch('stories/' + id + '.stx')
+        .then(r => r.text())
+        .then(content => {
+          document.getElementById('canvas').innerHTML =
+            '<pre style="padding:1rem;overflow:auto;height:100%">' + escapeHtml(content) + '</pre>';
+        });
+    }
+
+    function escapeHtml(t) {
+      const d = document.createElement('div');
+      d.textContent = t;
+      return d.innerHTML;
+    }
+
+    function toggleTheme() {
+      document.documentElement.classList.toggle('dark');
+    }
+  </script>
+</body>
+</html>`;
+}
+export const build = buildCommand;

package/dist/story/commands/dev.d.ts

@@ -0,0 +1,23 @@
+/**
+ * STX Story - Dev command
+ * Start the story development server
+ */
+/**
+ * Options for the dev command
+ */
+export interface DevOptions {
+    /** Server port (default: 6006) */
+    port?: number;
+    /** Open browser automatically */
+    open?: boolean;
+    /** Host to bind to */
+    host?: string | boolean;
+}
+/**
+ * Start the story development server
+ */
+export declare function devCommand(options?: DevOptions): Promise<void>;
+/**
+ * Run dev command (alias for devCommand)
+ */
+export declare const dev: typeof devCommand;

package/dist/story/commands/dev.js

@@ -0,0 +1,78 @@
+import { watchConfigFile } from "../config-watcher.js";
+import { createContext } from "../context.js";
+import { printBanner, printError, printHelp, printServerUrls, printStoryCount, printWarning } from "../output.js";
+import { createStoryServer } from "../server.js";
+import { loadSetupFile } from "../setup.js";
+export async function devCommand(options = {}) {
+  printBanner();
+  const ctx = await createContext({ mode: "dev" });
+  if (!ctx.config.enabled) {
+    printWarning("Story feature is disabled in config.");
+    return;
+  }
+  await loadSetupFile(ctx);
+  const port = options.port ?? ctx.config.port;
+  let serverInstance;
+  const startServer = async () => {
+    serverInstance = await createStoryServer(ctx, {
+      port,
+      open: options.open,
+      host: options.host
+    });
+    printStoryCount(ctx.storyFiles.length);
+    printServerUrls(serverInstance.url);
+    printHelp();
+  };
+  await startServer();
+  const configWatcher = watchConfigFile(ctx, {
+    onChange: async () => {
+      await serverInstance.close();
+      const newCtx = await createContext({ mode: "dev" });
+      Object.assign(ctx, newCtx);
+      await startServer();
+    }
+  }), shutdown = async () => {
+    console.log(`
+`);
+    configWatcher.stop();
+    await serverInstance.close();
+    process.exit(0);
+  };
+  process.on("SIGINT", shutdown);
+  process.on("SIGTERM", shutdown);
+  if (process.stdin.isTTY) {
+    process.stdin.setRawMode(!0);
+    process.stdin.resume();
+    process.stdin.on("data", async (data) => {
+      switch (data.toString()) {
+        case "h":
+          printHelp();
+          break;
+        case "o":
+          try {
+            const { exec } = await import("node:child_process"), cmd = process.platform === "darwin" ? "open" : process.platform === "win32" ? "start" : "xdg-open";
+            exec(`${cmd} ${serverInstance.url}`);
+          } catch {
+            printError("Failed to open browser");
+          }
+          break;
+        case "r":
+          await serverInstance.close();
+          await startServer();
+          break;
+        case "c":
+          console.clear();
+          printBanner();
+          printStoryCount(ctx.storyFiles.length);
+          printServerUrls(serverInstance.url);
+          break;
+        case "q":
+        case "\x03":
+          await shutdown();
+          break;
+      }
+    });
+  }
+  await new Promise(() => {});
+}
+export const dev = devCommand;

package/dist/story/commands/index.d.ts

@@ -0,0 +1,9 @@
+export type { BuildOptions } from './build';
+export type { DevOptions } from './dev';
+export type { PreviewOptions } from './preview';
+/**
+ * STX Story - CLI commands
+ */
+export { build, buildCommand } from './build';
+export { dev, devCommand } from './dev';
+export { preview, previewCommand } from './preview';

package/dist/story/commands/index.js

@@ -0,0 +1,3 @@
+export { build, buildCommand } from "./build.js";
+export { dev, devCommand } from "./dev.js";
+export { preview, previewCommand } from "./preview.js";

package/dist/story/commands/preview.d.ts

@@ -0,0 +1,21 @@
+/**
+ * STX Story - Preview command
+ * Preview the built story site locally
+ */
+/**
+ * Options for the preview command
+ */
+export interface PreviewOptions {
+    /** Server port (default: 4173) */
+    port?: number;
+    /** Open browser automatically */
+    open?: boolean;
+}
+/**
+ * Preview the built story site
+ */
+export declare function previewCommand(options?: PreviewOptions): Promise<void>;
+/**
+ * Run preview command (alias)
+ */
+export declare const preview: typeof previewCommand;

package/dist/story/commands/preview.js

@@ -0,0 +1,56 @@
+import fs from "node:fs";
+import path from "node:path";
+import { createContext } from "../context.js";
+export async function previewCommand(options = {}) {
+  console.log(`
+\uD83D\uDCD6 Previewing STX Story build...
+`);
+  const ctx = await createContext({ mode: "build" }), outDir = path.resolve(ctx.root, ctx.config.outDir), indexPath = path.join(outDir, "index.html");
+  try {
+    await fs.promises.access(indexPath);
+  } catch {
+    console.log(`  \u274C No build found at ${ctx.config.outDir}`);
+    console.log(`  Run "stx story build" first.
+`);
+    return;
+  }
+  const port = options.port ?? 4173, server = Bun.serve({
+    port,
+    async fetch(req) {
+      let pathname = new URL(req.url).pathname;
+      if (pathname === "/")
+        pathname = "/index.html";
+      const filePath = path.join(outDir, pathname);
+      try {
+        const file = Bun.file(filePath);
+        if (!await file.exists()) {
+          const htmlPath = `${filePath}.html`, htmlFile = Bun.file(htmlPath);
+          if (await htmlFile.exists())
+            return new Response(htmlFile);
+          return new Response("Not found", { status: 404 });
+        }
+        return new Response(file);
+      } catch {
+        return new Response("Error", { status: 500 });
+      }
+    }
+  });
+  console.log("  \uD83D\uDCDA Preview server running at:");
+  console.log(`     http://localhost:${port}
+`);
+  if (options.open)
+    try {
+      const { exec } = await import("node:child_process"), platform = process.platform;
+      exec(`${platform === "darwin" ? "open" : platform === "win32" ? "start" : "xdg-open"} http://localhost:${port}`);
+    } catch {}
+  const shutdown = () => {
+    console.log(`
+  Shutting down...`);
+    server.stop();
+    process.exit(0);
+  };
+  process.on("SIGINT", shutdown);
+  process.on("SIGTERM", shutdown);
+  await new Promise(() => {});
+}
+export const preview = previewCommand;

package/dist/story/compiled-output.d.ts

@@ -0,0 +1,27 @@
+import type { ServerStoryFile, StoryContext } from './types';
+/**
+ * Get compiled HTML output for a story variant
+ */
+// eslint-disable-next-line pickier/no-unused-vars
+export declare function getCompiledOutput(ctx: StoryContext, story: ServerStoryFile, variantId: string, options?: CompiledOutputOptions): Promise<string>;
+/**
+ * Generate compiled output panel HTML
+ */
+export declare function generateCompiledOutputPanel(compiledHtml: string): string;
+/**
+ * Get compiled output styles
+ */
+export declare function getCompiledOutputStyles(): string;
+/**
+ * Get compiled output toggle script
+ */
+export declare function getCompiledOutputScript(): string;
+/**
+ * Compiled output options
+ */
+export declare interface CompiledOutputOptions {
+  includeStyles?: boolean
+  includeScripts?: boolean
+  minify?: boolean
+  format?: boolean
+}

package/dist/story/compiled-output.js

@@ -0,0 +1,151 @@
+export async function getCompiledOutput(ctx, story, variantId, options = {}) {
+  const variant = story.story?.variants.find((v) => v.id === variantId);
+  if (!variant)
+    return "<!-- Variant not found -->";
+  let html = variant.source || "";
+  html = processDirectives(html);
+  html = processInterpolation(html, variant.state || {});
+  if (options.format)
+    html = formatHTML(html);
+  if (options.minify)
+    html = minifyHTML(html);
+  return html;
+}
+function processDirectives(html) {
+  let result = html;
+  result = result.replace(/@if\s*\([^)]+\)/g, "<!-- @if -->");
+  result = result.replace(/@endif/g, "<!-- @endif -->");
+  result = result.replace(/@foreach\s*\([^)]+\)/g, "<!-- @foreach -->");
+  result = result.replace(/@endforeach/g, "<!-- @endforeach -->");
+  result = result.replace(/@unless\s*\([^)]+\)/g, "<!-- @unless -->");
+  result = result.replace(/@endunless/g, "<!-- @endunless -->");
+  result = result.replace(/@component\s*\([^)]+\)/g, "<!-- @component -->");
+  result = result.replace(/@endcomponent/g, "<!-- @endcomponent -->");
+  return result;
+}
+function processInterpolation(html, state) {
+  return html.replace(/\{\{\s*(\w+)\s*\}\}/g, (_, key) => {
+    if (key in state) {
+      const value = state[key];
+      if (typeof value === "string")
+        return escapeHtml(value);
+      if (typeof value === "number" || typeof value === "boolean")
+        return String(value);
+      return JSON.stringify(value);
+    }
+    return `{{ ${key} }}`;
+  });
+}
+function formatHTML(html) {
+  let result = "", indent = 0;
+  const lines = html.split(/>\s*</).map((line, i, arr) => {
+    let result = line;
+    if (i > 0)
+      result = `<${result}`;
+    if (i < arr.length - 1)
+      result = `${result}>`;
+    return result;
+  });
+  for (const line of lines) {
+    const trimmed = line.trim();
+    if (!trimmed)
+      continue;
+    if (trimmed.startsWith("</") || trimmed.startsWith("-->"))
+      indent = Math.max(0, indent - 1);
+    result += `${"  ".repeat(indent)}${trimmed}
+`;
+    if (trimmed.startsWith("<") && !trimmed.startsWith("</") && !trimmed.startsWith("<!") && !trimmed.endsWith("/>") && !trimmed.includes("</"))
+      indent++;
+  }
+  return result.trim();
+}
+function minifyHTML(html) {
+  return html.replace(/\s+/g, " ").replace(/>\s+</g, "><").replace(/\s+>/g, ">").replace(/<\s+/g, "<").trim();
+}
+function escapeHtml(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
+}
+export function generateCompiledOutputPanel(compiledHtml) {
+  return `
+    <div class="stx-compiled-output">
+      <div class="stx-compiled-header">
+        <span>Compiled HTML</span>
+        <div class="stx-compiled-actions">
+          <button onclick="window.__stxStory.copyCompiledOutput()" title="Copy">\uD83D\uDCCB</button>
+          <button onclick="window.__stxStory.toggleMinify()" title="Toggle minify">\uD83D\uDDDC\uFE0F</button>
+        </div>
+      </div>
+      <pre class="stx-compiled-code"><code>${escapeHtml(compiledHtml)}</code></pre>
+    </div>
+  `;
+}
+export function getCompiledOutputStyles() {
+  return `
+    .stx-compiled-output {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+    }
+    .stx-compiled-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 8px 12px;
+      background: var(--bg-secondary);
+      border-bottom: 1px solid var(--border);
+      font-size: 12px;
+      font-weight: 500;
+    }
+    .stx-compiled-actions {
+      display: flex;
+      gap: 4px;
+    }
+    .stx-compiled-actions button {
+      padding: 4px 8px;
+      border: 1px solid var(--border);
+      border-radius: 4px;
+      background: var(--bg);
+      cursor: pointer;
+    }
+    .stx-compiled-actions button:hover {
+      background: var(--bg-secondary);
+    }
+    .stx-compiled-code {
+      flex: 1;
+      margin: 0;
+      padding: 12px;
+      overflow: auto;
+      font-family: var(--code-font-family);
+      font-size: 12px;
+      line-height: 1.5;
+      background: var(--bg);
+      white-space: pre-wrap;
+      word-break: break-word;
+    }
+    .stx-compiled-code code {
+      font-family: inherit;
+    }
+  `;
+}
+export function getCompiledOutputScript() {
+  return `
+    window.__stxStory = window.__stxStory || {};
+
+    window.__stxStory.showCompiledOutput = false;
+
+    window.__stxStory.toggleCompiledOutput = function() {
+      this.showCompiledOutput = !this.showCompiledOutput;
+      const panel = document.querySelector('.stx-compiled-output');
+      if (panel) {
+        panel.style.display = this.showCompiledOutput ? 'flex' : 'none';
+      }
+    };
+
+    window.__stxStory.copyCompiledOutput = function() {
+      const code = document.querySelector('.stx-compiled-code code');
+      if (code) {
+        navigator.clipboard.writeText(code.textContent || '');
+      }
+    };
+  `;
+}