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

package/dist/story/renderer.js

@@ -0,0 +1,209 @@
+import fs from "node:fs";
+import { extractVariables } from "../utils.js";
+const componentCache = new Map;
+export async function renderStoryComponent(ctx, componentPath, options = {}) {
+  const startTime = performance.now(), errors = [];
+  try {
+    const stat = await fs.promises.stat(componentPath), cached = componentCache.get(componentPath);
+    let content;
+    if (cached && cached.mtime === stat.mtimeMs)
+      content = cached.content;
+    else {
+      content = await fs.promises.readFile(componentPath, "utf-8");
+      componentCache.set(componentPath, {
+        content,
+        mtime: stat.mtimeMs,
+        analyzed: null
+      });
+    }
+    const { processDirectives } = await import("../process.js"), propsContext = {}, scriptContent = extractScripts(content);
+    if (scriptContent)
+      try {
+        await extractVariables(scriptContent, propsContext, componentPath);
+      } catch (extractError) {
+        errors.push(`Warning: Could not extract script variables: ${extractError instanceof Error ? extractError.message : String(extractError)}`);
+      }
+    if (options.props)
+      Object.assign(propsContext, options.props);
+    let html = await processDirectives(content, propsContext, componentPath, {}, new Set);
+    const css = extractStyles(content), js = extractScripts(content);
+    html = stripTagsForPreview(html);
+    html = injectPropsIntoHtml(html, propsContext);
+    return {
+      html,
+      css,
+      js,
+      errors,
+      duration: performance.now() - startTime
+    };
+  } catch (error) {
+    errors.push(error instanceof Error ? error.message : String(error));
+    return {
+      html: `<div class="stx-render-error">${escapeHtml(errors[0])}</div>`,
+      css: "",
+      js: "",
+      errors,
+      duration: performance.now() - startTime
+    };
+  }
+}
+async function extractVariantsFromScript(componentPath) {
+  try {
+    const content = await fs.promises.readFile(componentPath, "utf-8"), scriptContent = extractScripts(content);
+    if (!scriptContent)
+      return null;
+    const context = {};
+    await extractVariables(scriptContent, context, componentPath);
+    if (Array.isArray(context.variants))
+      return context.variants;
+    return null;
+  } catch {
+    return null;
+  }
+}
+export async function renderStoryVariant(ctx, story, variantId, props) {
+  let variants = story.story?.variants;
+  if (!variants) {
+    const extractedVariants = await extractVariantsFromScript(story.path);
+    if (extractedVariants)
+      variants = extractedVariants;
+  }
+  if (!variants && variantId === "default")
+    return renderStoryComponent(ctx, story.path, { props: props || {} });
+  if (!variants)
+    return renderStoryComponent(ctx, story.path, { props: props || {} });
+  const variant = variants.find((v) => v.id === variantId);
+  if (!variant && variantId === "default")
+    return renderStoryComponent(ctx, story.path, { props: props || {} });
+  if (!variant)
+    return {
+      html: '<div class="stx-render-error">Variant not found</div>',
+      css: "",
+      js: "",
+      errors: [`Variant '${variantId}' not found`],
+      duration: 0
+    };
+  const mergedProps = { ...variant.state, ...props };
+  if (variant.source)
+    return renderInlineTemplate(ctx, variant.source, mergedProps);
+  return renderStoryComponent(ctx, story.path, { props: mergedProps });
+}
+export async function renderInlineTemplate(ctx, template, props = {}) {
+  const startTime = performance.now(), errors = [];
+  try {
+    const { processDirectives } = await import("../process.js"), context = { ...props }, scriptContent = extractScripts(template);
+    if (scriptContent)
+      try {
+        await extractVariables(scriptContent, context, "inline-template.stx");
+      } catch {}
+    let html = await processDirectives(template, context, "inline-template.stx", {}, new Set);
+    html = stripTagsForPreview(html);
+    html = injectPropsIntoHtml(html, context);
+    return {
+      html,
+      css: extractStyles(template),
+      js: extractScripts(template),
+      errors,
+      duration: performance.now() - startTime
+    };
+  } catch (error) {
+    errors.push(error instanceof Error ? error.message : String(error));
+    return {
+      html: `<div class="stx-render-error">${escapeHtml(errors[0])}</div>`,
+      css: "",
+      js: "",
+      errors,
+      duration: performance.now() - startTime
+    };
+  }
+}
+function extractStyles(content) {
+  const styles = [], styleRegex = /<style\b[^>]*>([\s\S]*?)<\/style>/gi;
+  let match = styleRegex.exec(content);
+  while (match !== null) {
+    styles.push(match[1].trim());
+    match = styleRegex.exec(content);
+  }
+  return styles.join(`
+`);
+}
+function stripTagsForPreview(content) {
+  return content.replace(/<!--[\s\S]*?-->/g, "").replace(/<style\b[^>]*>[\s\S]*?<\/style>/gi, "").replace(/<script\b[^>]*>[\s\S]*?<\/script>/gi, "").replace(/^\s*\n/gm, "").trim();
+}
+function extractScripts(content) {
+  const scripts = [], scriptRegex = /<script\b[^>]*>([\s\S]*?)<\/script>/gi;
+  let match = scriptRegex.exec(content);
+  while (match !== null) {
+    scripts.push(match[1].trim());
+    match = scriptRegex.exec(content);
+  }
+  return scripts.join(`
+`);
+}
+function injectPropsIntoHtml(html, props) {
+  const propsScript = `<script>window.__stxProps = ${JSON.stringify(props)};</script>`;
+  return html + propsScript;
+}
+function escapeHtml(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+export function clearStoryCache() {
+  componentCache.clear();
+}
+export function getCacheStats() {
+  return {
+    size: componentCache.size,
+    entries: Array.from(componentCache.keys())
+  };
+}
+export async function preloadComponents(paths) {
+  let loaded = 0;
+  for (const componentPath of paths)
+    try {
+      const stat = await fs.promises.stat(componentPath), content = await fs.promises.readFile(componentPath, "utf-8");
+      componentCache.set(componentPath, {
+        content,
+        mtime: stat.mtimeMs,
+        analyzed: null
+      });
+      loaded++;
+    } catch {}
+  return loaded;
+}
+export function generatePreviewDocument(result, options = {}) {
+  const { title = "Preview", theme = "light", background = "#ffffff", cssCss = "" } = options;
+  return `<!DOCTYPE html>
+<html lang="en" class="${theme === "dark" ? "dark" : ""}">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${escapeHtml(title)}</title>
+  <style>
+    * { box-sizing: border-box; }
+    body {
+      margin: 0;
+      padding: 16px;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: ${background};
+    }
+    .stx-render-error {
+      padding: 16px;
+      background: #fee2e2;
+      border: 1px solid #ef4444;
+      border-radius: 4px;
+      color: #dc2626;
+      font-family: monospace;
+      white-space: pre-wrap;
+    }
+    ${cssCss}
+    ${result.css}
+  </style>
+</head>
+<body>
+  ${result.html}
+  <script>
+    ${result.js}
+  </script>
+</body>
+</html>`;
+}

package/dist/story/search-index.d.ts

@@ -0,0 +1,47 @@
+import path from 'node:path';
+import type { AnalyzedComponent, ServerStoryFile, StoryContext } from './types';
+/**
+ * Load search index from disk
+ */
+export declare function loadSearchIndex(ctx: StoryContext): Promise<PersistedSearchIndex | null>;
+/**
+ * Save search index to disk
+ */
+export declare function saveSearchIndex(ctx: StoryContext, entries: SearchIndexEntry[]): Promise<void>;
+/**
+ * Build persisted search index from story files
+ */
+export declare function buildPersistedSearchIndex(storyFiles: ServerStoryFile[], components: Map<string, AnalyzedComponent>): SearchIndexEntry[];
+/**
+ * Check if index is stale (any file modified since index was built)
+ */
+export declare function isIndexStale(ctx: StoryContext, index: PersistedSearchIndex): Promise<boolean>;
+/**
+ * Search the index
+ */
+export declare function searchIndex(index: PersistedSearchIndex, query: string): SearchIndexEntry[];
+/**
+ * Get or build search index
+ */
+export declare function getOrBuildSearchIndex(ctx: StoryContext, storyFiles: ServerStoryFile[], components: Map<string, AnalyzedComponent>, forceRebuild?: boolean): Promise<SearchIndexEntry[]>;
+/**
+ * Search index entry
+ */
+export declare interface SearchIndexEntry {
+  id: string
+  name: string
+  path: string
+  searchText: string
+  props: string[]
+  tags: string[]
+  mtime: number
+}
+/**
+ * Persisted search index
+ */
+export declare interface PersistedSearchIndex {
+  version: number
+  created: number
+  updated: number
+  entries: SearchIndexEntry[]
+}

package/dist/story/search-index.js

@@ -0,0 +1,106 @@
+import fs from "node:fs";
+import path from "node:path";
+const INDEX_VERSION = 1, INDEX_FILE = ".stx/story/search-index.json";
+function getIndexPath(root) {
+  return path.join(root, INDEX_FILE);
+}
+export async function loadSearchIndex(ctx) {
+  const indexPath = getIndexPath(ctx.root);
+  try {
+    const content = await fs.promises.readFile(indexPath, "utf-8"), index = JSON.parse(content);
+    if (index.version !== INDEX_VERSION)
+      return null;
+    return index;
+  } catch {
+    return null;
+  }
+}
+export async function saveSearchIndex(ctx, entries) {
+  const indexPath = getIndexPath(ctx.root), indexDir = path.dirname(indexPath);
+  await fs.promises.mkdir(indexDir, { recursive: !0 });
+  const index = {
+    version: INDEX_VERSION,
+    created: Date.now(),
+    updated: Date.now(),
+    entries
+  };
+  await fs.promises.writeFile(indexPath, JSON.stringify(index, null, 2));
+}
+export function buildPersistedSearchIndex(storyFiles, components) {
+  const entries = [];
+  for (const file of storyFiles) {
+    const component = components.get(file.fileName), searchParts = [
+      file.fileName.toLowerCase(),
+      file.relativePath.toLowerCase()
+    ], props = [], tags = [];
+    if (component) {
+      if (component.description)
+        searchParts.push(component.description.toLowerCase());
+      for (const prop of component.props) {
+        props.push(prop.name);
+        searchParts.push(prop.name.toLowerCase());
+        if (prop.description)
+          searchParts.push(prop.description.toLowerCase());
+      }
+      for (const slot of component.slots)
+        tags.push(`slot:${slot.name}`);
+      for (const directive of component.directives || [])
+        tags.push(`directive:${directive.name}`);
+      for (const dep of component.dependencies)
+        tags.push(`uses:${dep}`);
+    }
+    entries.push({
+      id: file.id,
+      name: file.fileName,
+      path: file.relativePath,
+      searchText: searchParts.join(" "),
+      props,
+      tags,
+      mtime: Date.now()
+    });
+  }
+  return entries;
+}
+export async function isIndexStale(ctx, index) {
+  for (const entry of index.entries)
+    try {
+      const fullPath = path.join(ctx.root, entry.path);
+      if ((await fs.promises.stat(fullPath)).mtimeMs > entry.mtime)
+        return !0;
+    } catch {
+      return !0;
+    }
+  return !1;
+}
+export function searchIndex(index, query) {
+  const terms = query.toLowerCase().split(/\s+/).filter(Boolean);
+  if (terms.length === 0)
+    return index.entries;
+  return index.entries.map((entry) => {
+    let score = 0;
+    for (const term of terms)
+      if (entry.name.toLowerCase() === term)
+        score += 100;
+      else if (entry.name.toLowerCase().startsWith(term))
+        score += 50;
+      else if (entry.name.toLowerCase().includes(term))
+        score += 25;
+      else if (entry.props.some((p) => p.toLowerCase().includes(term)))
+        score += 15;
+      else if (entry.tags.some((t) => t.toLowerCase().includes(term)))
+        score += 10;
+      else if (entry.searchText.includes(term))
+        score += 5;
+    return { entry, score };
+  }).filter((s) => s.score > 0).sort((a, b) => b.score - a.score).map((s) => s.entry);
+}
+export async function getOrBuildSearchIndex(ctx, storyFiles, components, forceRebuild = !1) {
+  if (!forceRebuild) {
+    const cached = await loadSearchIndex(ctx);
+    if (cached && !await isIndexStale(ctx, cached))
+      return cached.entries;
+  }
+  const entries = buildPersistedSearchIndex(storyFiles, components);
+  saveSearchIndex(ctx, entries).catch(() => {});
+  return entries;
+}

package/dist/story/search.d.ts

@@ -0,0 +1,56 @@
+/**
+ * STX Story - Search functionality
+ * Full-text search across stories and components
+ */
+import type { AnalyzedComponent, StoryContext } from './types';
+/**
+ * Search result item
+ */
+export interface SearchResult {
+    /** Result type */
+    type: 'story' | 'component' | 'prop' | 'slot';
+    /** Display title */
+    title: string;
+    /** Description or context */
+    description?: string;
+    /** Story file ID */
+    storyId: string;
+    /** Variant ID (if applicable) */
+    variantId?: string;
+    /** Match score (higher is better) */
+    score: number;
+    /** Matched text */
+    match: string;
+}
+/**
+ * Build search index from story files
+ */
+export declare function buildSearchIndex(ctx: StoryContext): void;
+/**
+ * Build search index from analyzed components
+ */
+export declare function buildComponentSearchIndex(components: AnalyzedComponent[]): void;
+/**
+ * Search the index
+ */
+export declare function search(query: string, limit?: number): SearchResult[];
+/**
+ * Get recent searches from localStorage (client-side)
+ */
+export declare function getRecentSearches(): string[];
+/**
+ * Clear the search index
+ */
+export declare function clearSearchIndex(): void;
+/**
+ * Get search index size
+ */
+export declare function getSearchIndexSize(): number;
+/**
+ * Generate search index JSON for static builds
+ */
+export declare function exportSearchIndex(): string;
+/**
+ * Import search index from JSON
+ */
+export declare function importSearchIndex(json: string): void;

package/dist/story/search.js

@@ -0,0 +1,140 @@
+let searchIndex = [];
+export function buildSearchIndex(ctx) {
+  searchIndex = [];
+  for (const file of ctx.storyFiles) {
+    searchIndex.push({
+      text: file.fileName.toLowerCase(),
+      original: file.fileName,
+      type: "story",
+      storyId: file.id
+    });
+    searchIndex.push({
+      text: file.relativePath.toLowerCase(),
+      original: file.relativePath,
+      type: "story",
+      storyId: file.id
+    });
+    if (file.story)
+      for (const variant of file.story.variants)
+        searchIndex.push({
+          text: variant.title.toLowerCase(),
+          original: variant.title,
+          type: "story",
+          storyId: file.id,
+          variantId: variant.id
+        });
+  }
+}
+export function buildComponentSearchIndex(components) {
+  for (const component of components) {
+    const storyId = component.name.toLowerCase().replace(/[^a-z0-9]+/g, "-");
+    searchIndex.push({
+      text: component.name.toLowerCase(),
+      original: component.name,
+      type: "component",
+      storyId
+    });
+    if (component.description)
+      searchIndex.push({
+        text: component.description.toLowerCase(),
+        original: component.description,
+        type: "component",
+        storyId
+      });
+    for (const prop of component.props) {
+      searchIndex.push({
+        text: prop.name.toLowerCase(),
+        original: prop.name,
+        type: "prop",
+        storyId,
+        meta: { propType: prop.type }
+      });
+      if (prop.description)
+        searchIndex.push({
+          text: prop.description.toLowerCase(),
+          original: prop.description,
+          type: "prop",
+          storyId,
+          meta: { propName: prop.name }
+        });
+    }
+    for (const slot of component.slots)
+      searchIndex.push({
+        text: slot.name.toLowerCase(),
+        original: slot.name,
+        type: "slot",
+        storyId
+      });
+    if (component.tags)
+      for (const tag of component.tags)
+        searchIndex.push({
+          text: tag.toLowerCase(),
+          original: tag,
+          type: "component",
+          storyId,
+          meta: { tag: !0 }
+        });
+  }
+}
+export function search(query, limit = 20) {
+  if (!query || query.length < 2)
+    return [];
+  const queryLower = query.toLowerCase(), results = [], seen = new Set;
+  for (const entry of searchIndex) {
+    const matchIndex = entry.text.indexOf(queryLower);
+    if (matchIndex === -1)
+      continue;
+    let score = 100;
+    if (entry.text === queryLower)
+      score += 50;
+    if (matchIndex === 0)
+      score += 30;
+    if (matchIndex === 0 || entry.text[matchIndex - 1] === " " || entry.text[matchIndex - 1] === "-")
+      score += 20;
+    if (entry.type === "story")
+      score += 10;
+    if (entry.type === "component")
+      score += 5;
+    score -= entry.text.length * 0.5;
+    const key = `${entry.storyId}-${entry.variantId || ""}-${entry.type}`;
+    if (seen.has(key))
+      continue;
+    seen.add(key);
+    results.push({
+      type: entry.type,
+      title: entry.original,
+      storyId: entry.storyId,
+      variantId: entry.variantId,
+      score,
+      match: highlightMatch(entry.original, query)
+    });
+  }
+  results.sort((a, b) => b.score - a.score);
+  return results.slice(0, limit);
+}
+function highlightMatch(text, query) {
+  const index = text.toLowerCase().indexOf(query.toLowerCase());
+  if (index === -1)
+    return text;
+  const before = text.slice(0, index), match = text.slice(index, index + query.length), after = text.slice(index + query.length);
+  return `${before}<mark>${match}</mark>${after}`;
+}
+export function getRecentSearches() {
+  return [];
+}
+export function clearSearchIndex() {
+  searchIndex = [];
+}
+export function getSearchIndexSize() {
+  return searchIndex.length;
+}
+export function exportSearchIndex() {
+  return JSON.stringify(searchIndex);
+}
+export function importSearchIndex(json) {
+  try {
+    searchIndex = JSON.parse(json);
+  } catch {
+    searchIndex = [];
+  }
+}

package/dist/story/server.d.ts

@@ -0,0 +1,31 @@
+/**
+ * STX Story - Development server
+ * Serves the story UI and handles API requests with WebSocket HMR
+ */
+import type { StoryContext } from './types';
+/**
+ * Server options
+ */
+export interface ServerOptions {
+    /** Port to listen on */
+    port: number;
+    /** Open browser automatically */
+    open?: boolean;
+    /** Host to bind to */
+    host?: string | boolean;
+}
+/**
+ * Story server instance
+ */
+export interface StoryServer {
+    /** Bun server instance */
+    server: ReturnType<typeof Bun.serve>;
+    /** Server URL */
+    url: string;
+    /** Close the server */
+    close: () => Promise<void>;
+}
+/**
+ * Create and start the story server
+ */
+export declare function createStoryServer(ctx: StoryContext, options: ServerOptions): Promise<StoryServer>;