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

package/dist/components/StxImage.stx

@@ -0,0 +1,12 @@
+<img
+  src='{{ src }}'
+  alt='{{ alt || "" }}'
+  @if(typeof width !== 'undefined' && width) width='{{ width }}' @endif
+  @if(typeof height !== 'undefined' && height) height='{{ height }}' @endif
+  loading='{{ typeof lazy !== "undefined" && lazy === false ? "eager" : "lazy" }}'
+  decoding='async'
+  @if(typeof sizes !== 'undefined' && sizes) sizes='{{ sizes }}' @endif
+  @if(typeof srcset !== 'undefined' && srcset) srcset='{{ srcset }}' @endif
+  @if(typeof placeholder !== 'undefined' && placeholder) style='background-image: url({{ placeholder }}); background-size: cover;' @endif
+  class='{{ className || "" }}'
+/>

package/dist/components/StxLink.stx

@@ -0,0 +1,18 @@
+@if(typeof __bindTo !== 'undefined' && __bindTo)
+<stx-link
+  :to="{{ __bindTo }}"
+  class='{{ className || "" }}'
+  active-class='{{ activeClass || "active" }}'
+  exact-active-class='{{ exactActiveClass || "exact-active" }}'
+  @if(typeof prefetch !== 'undefined' && prefetch) prefetch @endif
+>{!! slot !!}</stx-link>
+@endif
+@if(typeof __bindTo === 'undefined' || !__bindTo)
+<stx-link
+  to='{{ to }}'
+  class='{{ className || "" }}'
+  active-class='{{ activeClass || "active" }}'
+  exact-active-class='{{ exactActiveClass || "exact-active" }}'
+  @if(typeof prefetch !== 'undefined' && prefetch) prefetch @endif
+>{!! slot !!}</stx-link>
+@endif

package/dist/components.d.ts

@@ -0,0 +1,28 @@
+import type { ComponentPropsSchema, CustomDirective } from './types';
+/**
+ * Validate component props against a schema
+ *
+ * @param props - The props to validate
+ * @param schema - The props schema
+ * @param componentName - Component name for error messages
+ * @returns Array of validation errors (empty if valid)
+ *
+ * @example
+ * ```typescript
+ * const schema: ComponentPropsSchema = {
+ *   title: { type: 'string', required: true },
+ *   count: { type: 'number', default: 0 }
+ * }
+ * const errors = validateComponentProps({ title: 'Hello' }, schema, 'MyComponent')
+ * ```
+ */
+export declare function validateComponentProps(props: Record<string, any>, schema: ComponentPropsSchema, componentName: string): string[];
+/**
+ * Apply default values to props from schema
+ */
+export declare function applyPropDefaults(props: Record<string, any>, schema: ComponentPropsSchema): Record<string, any>;
+/**
+ * Register component directives
+ */
+export declare function registerComponentDirectives(): CustomDirective[];
+export declare const componentDirective: CustomDirective;

package/dist/components.js

@@ -0,0 +1,213 @@
+import * as path from "node:path";
+import { ErrorCodes, inlineError } from "./error-handling.js";
+import { safeEvaluateObject } from "./safe-evaluator.js";
+import { renderComponentWithSlot } from "./utils.js";
+function parsePropsString(propsString, context) {
+  const props = {};
+  let inner = propsString.trim();
+  if (inner.startsWith("{"))
+    inner = inner.slice(1);
+  if (inner.endsWith("}"))
+    inner = inner.slice(0, -1);
+  inner = inner.trim();
+  if (!inner)
+    return props;
+  let pos = 0;
+  while (pos < inner.length) {
+    while (pos < inner.length && /\s/.test(inner[pos]))
+      pos++;
+    if (pos >= inner.length)
+      break;
+    let key = "";
+    if (inner[pos] === '"' || inner[pos] === "'") {
+      const quote = inner[pos];
+      pos++;
+      while (pos < inner.length && inner[pos] !== quote)
+        if (inner[pos] === "\\" && pos + 1 < inner.length) {
+          key += inner[pos + 1];
+          pos += 2;
+        } else {
+          key += inner[pos];
+          pos++;
+        }
+      pos++;
+    } else
+      while (pos < inner.length && /[\w$]/.test(inner[pos])) {
+        key += inner[pos];
+        pos++;
+      }
+    while (pos < inner.length && /\s/.test(inner[pos]))
+      pos++;
+    if (inner[pos] === ":")
+      pos++;
+    while (pos < inner.length && /\s/.test(inner[pos]))
+      pos++;
+    let value;
+    const valueStart = pos;
+    if (inner[pos] === '"' || inner[pos] === "'") {
+      const quote = inner[pos];
+      pos++;
+      let strValue = "";
+      while (pos < inner.length && inner[pos] !== quote)
+        if (inner[pos] === "\\" && pos + 1 < inner.length) {
+          strValue += inner[pos + 1];
+          pos += 2;
+        } else {
+          strValue += inner[pos];
+          pos++;
+        }
+      pos++;
+      value = strValue;
+    } else if (inner[pos] === "{") {
+      let depth = 1;
+      pos++;
+      while (pos < inner.length && depth > 0) {
+        if (inner[pos] === "{")
+          depth++;
+        else if (inner[pos] === "}")
+          depth--;
+        else if (inner[pos] === '"' || inner[pos] === "'") {
+          const q = inner[pos];
+          pos++;
+          while (pos < inner.length && inner[pos] !== q) {
+            if (inner[pos] === "\\")
+              pos++;
+            pos++;
+          }
+        }
+        pos++;
+      }
+      const objStr = inner.slice(valueStart, pos);
+      value = parsePropsString(objStr, context);
+    } else if (inner[pos] === "[") {
+      let depth = 1;
+      pos++;
+      while (pos < inner.length && depth > 0) {
+        if (inner[pos] === "[")
+          depth++;
+        else if (inner[pos] === "]")
+          depth--;
+        else if (inner[pos] === '"' || inner[pos] === "'") {
+          const q = inner[pos];
+          pos++;
+          while (pos < inner.length && inner[pos] !== q) {
+            if (inner[pos] === "\\")
+              pos++;
+            pos++;
+          }
+        }
+        pos++;
+      }
+      const arrStr = inner.slice(valueStart, pos);
+      try {
+        value = JSON.parse(arrStr.replace(/'/g, '"'));
+      } catch {
+        value = arrStr;
+      }
+    } else {
+      let rawValue = "";
+      while (pos < inner.length && inner[pos] !== "," && !/\s/.test(inner[pos])) {
+        rawValue += inner[pos];
+        pos++;
+      }
+      rawValue = rawValue.trim();
+      if (rawValue === "true")
+        value = !0;
+      else if (rawValue === "false")
+        value = !1;
+      else if (rawValue === "null")
+        value = null;
+      else if (rawValue === "undefined")
+        value = void 0;
+      else if (/^-?\d+(\.\d+)?$/.test(rawValue))
+        value = Number(rawValue);
+      else if (rawValue in context)
+        value = context[rawValue];
+      else
+        value = rawValue;
+    }
+    if (key)
+      props[key] = value;
+    while (pos < inner.length && /\s/.test(inner[pos]))
+      pos++;
+    if (inner[pos] === ",")
+      pos++;
+  }
+  return props;
+}
+export function validateComponentProps(props, schema, componentName) {
+  const errors = [];
+  for (const [propName, definition] of Object.entries(schema)) {
+    const value = props[propName];
+    if (definition.required && (value === void 0 || value === null)) {
+      errors.push(`Component "${componentName}": Missing required prop "${propName}"`);
+      continue;
+    }
+    if (value === void 0 || value === null)
+      continue;
+    const types = Array.isArray(definition.type) ? definition.type : [definition.type];
+    if (!types.includes("any")) {
+      const actualType = getActualType(value);
+      if (!types.includes(actualType))
+        errors.push(`Component "${componentName}": Prop "${propName}" expected ${types.join(" | ")}, got ${actualType}`);
+    }
+    if (definition.validator && !definition.validator(value))
+      errors.push(`Component "${componentName}": Prop "${propName}" failed custom validation`);
+  }
+  return errors;
+}
+export function applyPropDefaults(props, schema) {
+  const result = { ...props };
+  for (const [propName, definition] of Object.entries(schema))
+    if (result[propName] === void 0 && definition.default !== void 0)
+      result[propName] = typeof definition.default === "function" ? definition.default() : definition.default;
+  return result;
+}
+function getActualType(value) {
+  if (Array.isArray(value))
+    return "array";
+  if (value === null)
+    return "null";
+  return typeof value;
+}
+export const componentDirective = {
+  name: "component",
+  handler: async (content, params, context, filePath) => {
+    if (params.length < 1)
+      return inlineError("Component", "component directive requires at least the component name", ErrorCodes.INVALID_DIRECTIVE_SYNTAX);
+    const componentName = params[0].replace(/['"]/g, "");
+    let props = {};
+    if (params.length > 1)
+      try {
+        const propsString = params.slice(1).join(",").trim();
+        if (propsString.startsWith("{")) {
+          props = safeEvaluateObject(propsString, context);
+          if (Object.keys(props).length === 0)
+            props = parsePropsString(propsString, context);
+        } else {
+          const varName = propsString.trim(), contextValue = context[varName];
+          if (contextValue && typeof contextValue === "object" && !Array.isArray(contextValue))
+            props = contextValue;
+        }
+      } catch (error) {
+        const message = error instanceof Error ? error.message : String(error);
+        console.error("Component props parsing error:", message);
+        return inlineError("Component", `Error parsing component props: ${message}`, ErrorCodes.EVALUATION_ERROR);
+      }
+    const options = context.__stx_options || {}, componentsDir = options.componentsDir || "components", dependencies = new Set;
+    if (!context.__processedComponents)
+      context.__processedComponents = new Set;
+    const processedComponents = context.__processedComponents;
+    try {
+      return await renderComponentWithSlot(componentName, props, "", componentsDir, context, filePath, options, processedComponents, dependencies);
+    } catch (error) {
+      console.error("Component rendering error:", error);
+      const msg = error instanceof Error ? error.message : String(error);
+      return inlineError("Component", `Error rendering component: ${msg}`, ErrorCodes.COMPONENT_RENDER_ERROR);
+    }
+  },
+  hasEndTag: !1
+};
+export function registerComponentDirectives() {
+  return [componentDirective];
+}

package/dist/composable-loader.d.ts

@@ -0,0 +1,62 @@
+/**
+ * Composable Auto-Loader
+ *
+ * Discovers .ts files in `composablesDir`, bundles them into a single script,
+ * and exposes every exported binding on `window.__composables`. That object is
+ * what `import { useThing } from '@composables'` compiles to — store-imports.ts
+ * rewrites the import into `const { useThing } = window.__composables`, a plain
+ * destructure in the page's own scope, which is exactly where template
+ * directives can see it.
+ *
+ * Before this loader existed the rewrite had nothing feeding it: `@composables`
+ * imports compiled to a destructure of `undefined`, so every binding that
+ * referenced a composable silently did nothing — `@click` never fired, `@show`
+ * never flipped, and there was no console error or build warning to notice.
+ * Sharing client logic between pages was effectively impossible, so the same
+ * block got copy-pasted into page after page. See #1780.
+ *
+ * Mirrors store-loader.ts, with one deliberate difference: stores are
+ * side-effectful (running `defineStore(...)` registers them globally, so
+ * nothing needs to be exported), whereas composables are *values* — their
+ * exported names have to be collected and attached to `window.__composables`.
+ *
+ * @module composable-loader
+ */
+/** One composable file and the names it exports. */
+export interface ComposableModule {
+    /** Absolute path to the `.ts` file. */
+    file: string;
+    /** Exported binding names, excluding `default`. */
+    names: string[];
+}
+/**
+ * Every composable file in the resolved directory, with its exported names.
+ *
+ * Shared by the two consumers that need the names without the bundle: the
+ * typechecker, which has to declare them or an app's own composables read as
+ * undefined (#1934), and the per-page pruning that decides which of them a page
+ * actually references (#1936).
+ *
+ * Returns an empty array when there is no composables directory, which is the
+ * common case and not an error.
+ */
+export declare function listComposableModules(composablesDir?: string): Promise<ComposableModule[]>;
+/**
+ * @param pageSource - the rendered page, used to drop composables it cannot
+ * reach. Omit to emit every composable, which is what a caller with no page in
+ * hand needs.
+ */
+export declare function getComposableScript(composablesDir?: string, pageSource?: string, 
+/**
+ * Text that is not (yet) part of `pageSource` but will ship with the page --
+ * the store bundle and the framework-composable bundle, which are collected
+ * alongside this one and spliced into the document together (#1945). They are
+ * scanned for reachability the same way the page is, because a composable
+ * used only from a store still has to be kept (#1936); passing them here
+ * rather than splicing them in first is what lets the three share one splice.
+ */
+extraSources?: readonly string[]): Promise<string | null>;
+/**
+ * Clear the cached composable script (for dev mode hot reload).
+ */
+export declare function clearComposableCache(): void;

package/dist/composable-loader.js

@@ -0,0 +1,190 @@
+import path from "node:path";
+import { loadStxConfig } from "./config.js";
+import { getPublicEnvDefine } from "./public-env.js";
+import { readSigned, sourceSignature, writeSigned } from "./source-signature.js";
+import { stripModuleImports } from "./store-imports.js";
+import { STX_RUNTIME_GLOBALS } from "./runtime-globals.js";
+import { transformStoreImports } from "./store-imports.js";
+import { getSharedTranspiler } from "./utils.js";
+const _cachedComposableScripts = new Map, _cachedDirs = new Map, DEFAULT_DIR_CANDIDATES = ["composables", "functions"];
+function isSkippedFile(file) {
+  const name = path.basename(file, ".ts");
+  return name === "index" || name === "types" || file.endsWith(".d.ts");
+}
+async function resolveComposablesDir(composablesDir) {
+  if (composablesDir)
+    return path.resolve(composablesDir);
+  const cacheKey = `<default>:${process.cwd()}`, cachedDir = _cachedDirs.get(cacheKey);
+  if (cachedDir !== void 0)
+    return cachedDir;
+  const resolved = await probeDefaultDirs();
+  if (resolved !== null)
+    _cachedDirs.set(cacheKey, resolved);
+  return resolved;
+}
+async function probeDefaultDirs() {
+  const config = await loadStxConfig(), root = config.root || process.cwd(), configured = config.composablesDir;
+  if (configured)
+    return path.resolve(root, configured);
+  for (const candidate of DEFAULT_DIR_CANDIDATES) {
+    const dir = path.resolve(root, candidate);
+    try {
+      const glob = new Bun.Glob("**/*.ts");
+      for await (const file of glob.scan({ cwd: dir, absolute: !0 }))
+        if (!isSkippedFile(file))
+          return dir;
+    } catch {}
+  }
+  return null;
+}
+export async function listComposableModules(composablesDir) {
+  const resolvedDir = await resolveComposablesDir(composablesDir);
+  if (!resolvedDir)
+    return [];
+  const files = [];
+  try {
+    const glob = new Bun.Glob("**/*.ts");
+    for await (const file of glob.scan({ cwd: resolvedDir, absolute: !0 }))
+      if (!isSkippedFile(file))
+        files.push(file);
+  } catch {
+    return [];
+  }
+  files.sort();
+  const transpiler = getSharedTranspiler({ loader: "ts", target: "browser", define: getPublicEnvDefine() }), modules = [];
+  for (const file of files)
+    try {
+      const code = await Bun.file(file).text(), names = transpiler.scan(code).exports.filter((name) => name !== "default");
+      if (names.length > 0)
+        modules.push({ file, names });
+    } catch {}
+  return modules;
+}
+function mentions(text, name) {
+  return new RegExp(`\\b${name.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}\\b`).test(text);
+}
+function selectReachable(modules, codeByFile, pageSources) {
+  const fileForName = new Map;
+  for (const { file, names } of modules)
+    for (const name of names)
+      if (!fileForName.has(name))
+        fileForName.set(name, file);
+  const filesMentionedIn = (text) => {
+    const found = [];
+    for (const [name, file] of fileForName)
+      if (mentions(text, name))
+        found.push(file);
+    return found;
+  }, selected = new Set;
+  let frontier = pageSources.flatMap(filesMentionedIn);
+  while (frontier.length > 0) {
+    const next = [];
+    for (const file of frontier) {
+      if (selected.has(file))
+        continue;
+      selected.add(file);
+      for (const dependency of filesMentionedIn(codeByFile.get(file) ?? ""))
+        if (!selected.has(dependency))
+          next.push(dependency);
+    }
+    frontier = next;
+  }
+  return selected;
+}
+export async function getComposableScript(composablesDir, pageSource, extraSources) {
+  const resolvedDir = await resolveComposablesDir(composablesDir);
+  if (!resolvedDir)
+    return null;
+  const composableFiles = [];
+  try {
+    const glob = new Bun.Glob("**/*.ts");
+    for await (const file of glob.scan({ cwd: resolvedDir, absolute: !0 })) {
+      if (isSkippedFile(file))
+        continue;
+      composableFiles.push(file);
+    }
+  } catch {
+    writeSigned(_cachedComposableScripts, resolvedDir, "", "");
+    return null;
+  }
+  const signature = sourceSignature(composableFiles);
+  if (composableFiles.length === 0) {
+    writeSigned(_cachedComposableScripts, resolvedDir, signature, "");
+    return null;
+  }
+  composableFiles.sort();
+  const transpiler = getSharedTranspiler({ loader: "ts", target: "browser", define: getPublicEnvDefine() }), codeByFile = new Map, modules = [];
+  for (const file of composableFiles)
+    try {
+      const code = await Bun.file(file).text();
+      codeByFile.set(file, code);
+      const names = transpiler.scan(code).exports.filter((name) => name !== "default");
+      if (names.length > 0)
+        modules.push({ file, names });
+    } catch {
+      codeByFile.set(file, "");
+    }
+  const selected = pageSource === void 0 ? new Set(composableFiles) : selectReachable(modules, codeByFile, extraSources ? [pageSource, ...extraSources] : [pageSource]);
+  if (selected.size === 0)
+    return null;
+  const includedFiles = composableFiles.filter((file) => selected.has(file)), cacheKey = `${resolvedDir}\x00${includedFiles.join("\x00")}`, cached = readSigned(_cachedComposableScripts, cacheKey, signature);
+  if (cached !== void 0)
+    return cached || null;
+  const chunks = [], exportedNames = new Set, declaredNames = new Set;
+  for (const file of includedFiles)
+    try {
+      let code = codeByFile.get(file) ?? await Bun.file(file).text();
+      const composableName = path.basename(file, ".ts");
+      for (const match of code.matchAll(/\b(?:const|let|var|function|class)\s+([A-Z_a-z$][\w$]*)/g))
+        if (match[1])
+          declaredNames.add(match[1]);
+      try {
+        for (const name of transpiler.scan(code).exports)
+          if (name !== "default")
+            exportedNames.add(name);
+      } catch {}
+      code = transformStoreImports(code);
+      code = stripModuleImports(code);
+      code = code.replace(/^export\s+(default\s+)?/gm, "");
+      code = transpiler.transformSync(code);
+      chunks.push(`// Composable: ${composableName}
+${code.trim()}`);
+    } catch (e) {
+      console.warn(`[stx] Failed to load composable ${file}:`, e);
+    }
+  if (chunks.length === 0 || exportedNames.size === 0) {
+    writeSigned(_cachedComposableScripts, cacheKey, signature, "");
+    return null;
+  }
+  const assignments = [...exportedNames].map((name) => `  try { __c[${JSON.stringify(name)}] = ${name}; } catch (e) {}`).join(`
+`), globalNames = JSON.stringify([...exportedNames]), joinedChunks = chunks.join(`
+
+`), code = `;(function(){
+window.__composables = window.__composables || {};
+var __c = window.__composables;
+var __stx = window.stx || {};
+${STX_RUNTIME_GLOBALS.filter((name) => !declaredNames.has(name) && new RegExp(`\\b${name}\\b`).test(joinedChunks)).map((name) => `var ${name} = __stx[${JSON.stringify(name)}];`).join(`
+`)}
+${joinedChunks}
+${assignments}
+  var __names = ${globalNames};
+  for (var __i = 0; __i < __names.length; __i++) {
+    var __n = __names[__i];
+    if (!(__n in __c)) continue;
+    var __takenByBuiltin = !!(window.stx && __n in window.stx);
+    if (__takenByBuiltin || __n in window) {
+      console.warn('[stx] composable "' + __n + '" is not available as a bare identifier: '
+        + (__takenByBuiltin ? 'a built-in of that name already exists' : 'window already defines that property')
+        + '. Rename it, or use: import { ' + __n + ' } from "@composables"');
+      continue;
+    }
+    window[__n] = __c[__n];
+  }
+})();`;
+  writeSigned(_cachedComposableScripts, cacheKey, signature, code);
+  return code;
+}
+export function clearComposableCache() {
+  _cachedComposableScripts.clear();
+  _cachedDirs.clear();
+}