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

package/dist/reactivity.js

@@ -0,0 +1,574 @@
+import { enqueueEffect, getActiveSubscriber, isBatching, restoreActiveSubscriber, setActiveSubscriber } from "./reactive-tracking.js";
+let currentInstance = null;
+function structuralEqual(a, b, seen = new WeakSet) {
+  if (Object.is(a, b))
+    return !0;
+  if (typeof a !== "object" || typeof b !== "object" || a === null || b === null)
+    return !1;
+  if (seen.has(a))
+    return !0;
+  seen.add(a);
+  if (a instanceof Date && b instanceof Date)
+    return a.getTime() === b.getTime();
+  if (a instanceof RegExp && b instanceof RegExp)
+    return a.source === b.source && a.flags === b.flags;
+  if (Array.isArray(a)) {
+    if (!Array.isArray(b) || a.length !== b.length)
+      return !1;
+    for (let i = 0;i < a.length; i++)
+      if (!structuralEqual(a[i], b[i], seen))
+        return !1;
+    return !0;
+  }
+  if (Array.isArray(b))
+    return !1;
+  if (a instanceof Map) {
+    if (!(b instanceof Map) || a.size !== b.size)
+      return !1;
+    for (const [k, v] of a)
+      if (!b.has(k) || !structuralEqual(v, b.get(k), seen))
+        return !1;
+    return !0;
+  }
+  if (b instanceof Map)
+    return !1;
+  if (a instanceof Set) {
+    if (!(b instanceof Set) || a.size !== b.size)
+      return !1;
+    for (const v of a)
+      if (!b.has(v))
+        return !1;
+    return !0;
+  }
+  if (b instanceof Set)
+    return !1;
+  const aKeys = Object.keys(a), bKeys = Object.keys(b);
+  if (aKeys.length !== bKeys.length)
+    return !1;
+  for (const k of aKeys) {
+    if (!Object.prototype.hasOwnProperty.call(b, k))
+      return !1;
+    if (!structuralEqual(a[k], b[k], seen))
+      return !1;
+  }
+  return !0;
+}
+export function setCurrentInstance(instance) {
+  currentInstance = instance;
+}
+export function getCurrentInstance() {
+  return currentInstance;
+}
+export function createComponentInstance() {
+  return {
+    isMounted: !1,
+    isUnmounted: !1,
+    hooks: {
+      beforeMount: [],
+      mounted: [],
+      beforeUpdate: [],
+      updated: [],
+      beforeUnmount: [],
+      unmounted: []
+    },
+    effects: [],
+    scope: createScope()
+  };
+}
+export function createScope() {
+  return {
+    refs: new Map,
+    effects: new Set,
+    cleanups: []
+  };
+}
+export function ref(initialValue) {
+  const subscribers = new Set, effectSubscribers = new Set;
+  let value = initialValue;
+  const id = Symbol("ref"), refObj = {
+    get value() {
+      const subscriber = getActiveSubscriber();
+      if (subscriber)
+        effectSubscribers.add(subscriber);
+      return value;
+    },
+    set value(newValue) {
+      if (!Object.is(newValue, value)) {
+        const oldValue = value;
+        value = newValue;
+        for (const callback of subscribers)
+          callback(newValue, oldValue);
+        for (const effect of effectSubscribers)
+          if (isBatching())
+            enqueueEffect(effect);
+          else
+            effect();
+      }
+    },
+    subscribe(callback) {
+      subscribers.add(callback);
+      return () => {
+        subscribers.delete(callback);
+      };
+    }
+  };
+  if (currentInstance)
+    currentInstance.scope.refs.set(id, refObj);
+  return refObj;
+}
+const reactiveMap = new WeakMap;
+export function reactive(target) {
+  const existing = reactiveMap.get(target);
+  if (existing)
+    return existing;
+  const subscribers = new Map, notify = (key) => {
+    const subs = subscribers.get(key);
+    if (!subs)
+      return;
+    for (const callback of [...subs])
+      if (isBatching())
+        enqueueEffect(callback);
+      else
+        callback();
+  }, subscribe = (key, callback) => {
+    if (!subscribers.has(key))
+      subscribers.set(key, new Set);
+    subscribers.get(key).add(callback);
+    return () => {
+      subscribers.get(key)?.delete(callback);
+    };
+  }, proxy = new Proxy(target, {
+    get(obj, prop, receiver) {
+      const value = Reflect.get(obj, prop, receiver), subscriber = getActiveSubscriber();
+      if (subscriber)
+        subscribe(prop, subscriber);
+      if (value !== null && typeof value === "object" && !Array.isArray(value)) {
+        const proto = Object.getPrototypeOf(value);
+        if (proto === Object.prototype || proto === null)
+          return reactive(value);
+      }
+      return value;
+    },
+    set(obj, prop, value, receiver) {
+      const oldValue = Reflect.get(obj, prop, receiver), result = Reflect.set(obj, prop, value, receiver);
+      if (!Object.is(value, oldValue))
+        notify(prop);
+      return result;
+    },
+    deleteProperty(obj, prop) {
+      const result = Reflect.deleteProperty(obj, prop);
+      notify(prop);
+      return result;
+    }
+  });
+  reactiveMap.set(target, proxy);
+  return proxy;
+}
+export function computed(getter) {
+  let cachedValue, dirty = !0;
+  const subscribers = new Set, effectSubscribers = new Set, markDirty = () => {
+    dirty = !0;
+    update();
+  }, update = () => {
+    if (dirty) {
+      const oldValue = cachedValue, prevEffect = setActiveSubscriber(markDirty);
+      cachedValue = getter();
+      restoreActiveSubscriber(prevEffect);
+      dirty = !1;
+      if (!Object.is(cachedValue, oldValue)) {
+        for (const callback of subscribers)
+          callback(cachedValue, oldValue);
+        for (const effect of effectSubscribers)
+          effect();
+      }
+    }
+  }, prevEffect = setActiveSubscriber(markDirty);
+  cachedValue = getter();
+  dirty = !1;
+  restoreActiveSubscriber(prevEffect);
+  return {
+    get value() {
+      const subscriber = getActiveSubscriber();
+      if (subscriber)
+        effectSubscribers.add(subscriber);
+      update();
+      return cachedValue;
+    },
+    set value(_) {
+      console.warn("[stx] Computed properties are readonly");
+    },
+    subscribe(callback) {
+      subscribers.add(callback);
+      return () => {
+        subscribers.delete(callback);
+      };
+    }
+  };
+}
+function afterRender(fn) {
+  if (typeof requestAnimationFrame === "function") {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(fn);
+    });
+    return;
+  }
+  setTimeout(fn, 0);
+}
+export function watch(source, callback, options = {}) {
+  const { immediate = !1, deep = !1, flush = "post" } = options;
+  let oldValue, cleanup, stopped = !1;
+  const job = () => {
+    if (stopped)
+      return;
+    const newValue = getValueTracking();
+    if ((deep ? !structuralEqual(newValue, oldValue) : !Object.is(newValue, oldValue)) || immediate) {
+      callback(newValue, oldValue);
+      if (deep && newValue !== null && typeof newValue === "object")
+        try {
+          oldValue = structuredClone(newValue);
+        } catch {
+          oldValue = newValue;
+        }
+      else
+        oldValue = newValue;
+    }
+  }, scheduler = (fn) => {
+    if (flush === "sync")
+      fn();
+    else if (flush === "pre")
+      Promise.resolve().then(fn);
+    else
+      afterRender(fn);
+  };
+  let scheduled = !1;
+  const onChange = () => {
+    if (stopped || scheduled)
+      return;
+    scheduled = !0;
+    scheduler(() => {
+      scheduled = !1;
+      job();
+    });
+  }, getValueTracking = () => {
+    if (typeof source === "function") {
+      const prevEffect = setActiveSubscriber(onChange);
+      try {
+        return source();
+      } finally {
+        restoreActiveSubscriber(prevEffect);
+      }
+    }
+    return source.value;
+  };
+  if (typeof source !== "function") {
+    const unsubscribe = source.subscribe(() => {
+      scheduler(job);
+    });
+    cleanup = () => {
+      stopped = !0;
+      unsubscribe();
+    };
+  } else
+    cleanup = () => {
+      stopped = !0;
+    };
+  oldValue = getValueTracking();
+  if (immediate)
+    scheduler(job);
+  if (currentInstance)
+    currentInstance.scope.cleanups.push(() => cleanup?.());
+  return () => cleanup?.();
+}
+export function watchMultiple(sources, callback, options = {}) {
+  const cleanups = [];
+  let oldValues = sources.map((s) => s.value);
+  for (const source of sources) {
+    const unwatch = source.subscribe(() => {
+      const newValues = sources.map((s) => s.value);
+      callback(newValues, oldValues);
+      oldValues = [...newValues];
+    });
+    cleanups.push(unwatch);
+  }
+  if (options.immediate) {
+    const newValues = sources.map((s) => s.value);
+    callback(newValues, oldValues);
+  }
+  return () => {
+    for (const cleanup of cleanups)
+      cleanup();
+  };
+}
+export function watchEffect(effect) {
+  let cleanup, stopped = !1;
+  const run = () => {
+    if (stopped)
+      return;
+    if (cleanup)
+      cleanup();
+    const prevEffect = setActiveSubscriber(run);
+    cleanup = effect();
+    restoreActiveSubscriber(prevEffect);
+  };
+  run();
+  if (currentInstance)
+    currentInstance.scope.cleanups.push(() => {
+      stopped = !0;
+      if (cleanup)
+        cleanup();
+    });
+  return () => {
+    stopped = !0;
+    if (cleanup)
+      cleanup();
+  };
+}
+export function onBeforeMount(callback) {
+  if (currentInstance)
+    currentInstance.hooks.beforeMount.push(callback);
+  else
+    console.warn("[stx] onBeforeMount called outside of component setup");
+}
+export function onMounted(callback) {
+  if (currentInstance)
+    currentInstance.hooks.mounted.push(callback);
+  else
+    console.warn("[stx] onMounted called outside of component setup");
+}
+export function onBeforeUpdate(callback) {
+  if (currentInstance)
+    currentInstance.hooks.beforeUpdate.push(callback);
+  else
+    console.warn("[stx] onBeforeUpdate called outside of component setup");
+}
+export function onUpdated(callback) {
+  if (currentInstance)
+    currentInstance.hooks.updated.push(callback);
+  else
+    console.warn("[stx] onUpdated called outside of component setup");
+}
+export function onBeforeUnmount(callback) {
+  if (currentInstance)
+    currentInstance.hooks.beforeUnmount.push(callback);
+  else
+    console.warn("[stx] onBeforeUnmount called outside of component setup");
+}
+export function onUnmounted(callback) {
+  if (currentInstance)
+    currentInstance.hooks.unmounted.push(callback);
+  else
+    console.warn("[stx] onUnmounted called outside of component setup");
+}
+export async function runHooks(instance, hookName) {
+  const hooks = instance.hooks[hookName];
+  for (const hook of hooks)
+    await hook();
+}
+export async function mountInstance(instance) {
+  await runHooks(instance, "beforeMount");
+  instance.isMounted = !0;
+  await runHooks(instance, "mounted");
+}
+export async function updateInstance(instance) {
+  if (!instance.isMounted || instance.isUnmounted)
+    return;
+  await runHooks(instance, "beforeUpdate");
+  await runHooks(instance, "updated");
+}
+export async function unmountInstance(instance) {
+  if (instance.isUnmounted)
+    return;
+  await runHooks(instance, "beforeUnmount");
+  for (const cleanup of instance.scope.cleanups)
+    cleanup();
+  instance.isUnmounted = !0;
+  await runHooks(instance, "unmounted");
+}
+export function generateClientRuntime() {
+  return `
+<script data-stx-client-runtime>
+(function() {
+  'use strict';
+
+  // Reactive ref implementation
+  function ref(initialValue) {
+    const subscribers = new Set();
+    let value = initialValue;
+
+    return {
+      get value() { return value; },
+      set value(newValue) {
+        if (!Object.is(newValue, value)) {
+          const oldValue = value;
+          value = newValue;
+          subscribers.forEach(cb => cb(newValue, oldValue));
+        }
+      },
+      subscribe(callback) {
+        subscribers.add(callback);
+        return () => subscribers.delete(callback);
+      }
+    };
+  }
+
+  // Reactive object implementation
+  function reactive(target) {
+    const subscribers = new Map();
+
+    const notify = (key) => {
+      const subs = subscribers.get(key);
+      if (subs) subs.forEach(cb => cb());
+    };
+
+    return new Proxy(target, {
+      get(obj, prop, receiver) {
+        const value = Reflect.get(obj, prop, receiver);
+        if (value !== null && typeof value === 'object' && !Array.isArray(value)) {
+          return reactive(value);
+        }
+        return value;
+      },
+      set(obj, prop, value, receiver) {
+        const oldValue = Reflect.get(obj, prop, receiver);
+        const result = Reflect.set(obj, prop, value, receiver);
+        if (!Object.is(value, oldValue)) notify(prop);
+        return result;
+      }
+    });
+  }
+
+  // Computed implementation
+  function computed(getter) {
+    let cachedValue;
+    let dirty = true;
+    const subscribers = new Set();
+
+    return {
+      get value() {
+        if (dirty) {
+          cachedValue = getter();
+          dirty = false;
+        }
+        return cachedValue;
+      },
+      subscribe(callback) {
+        subscribers.add(callback);
+        return () => subscribers.delete(callback);
+      }
+    };
+  }
+
+  // Watch implementation
+  function watch(source, callback, options = {}) {
+    const { immediate = false } = options;
+    let oldValue = typeof source === 'function' ? source() : source.value;
+
+    const unsubscribe = (typeof source === 'function' ? { subscribe: () => {} } : source)
+      .subscribe((newValue) => {
+        callback(newValue, oldValue);
+        oldValue = newValue;
+      });
+
+    if (immediate) {
+      callback(oldValue, undefined);
+    }
+
+    return unsubscribe;
+  }
+
+  // Lifecycle hooks
+  const lifecycleHooks = {
+    beforeMount: [],
+    mounted: [],
+    beforeUpdate: [],
+    updated: [],
+    beforeUnmount: [],
+    unmounted: []
+  };
+
+  function onBeforeMount(cb) { lifecycleHooks.beforeMount.push(cb); }
+  function onMounted(cb) { lifecycleHooks.mounted.push(cb); }
+  function onBeforeUpdate(cb) { lifecycleHooks.beforeUpdate.push(cb); }
+  function onUpdated(cb) { lifecycleHooks.updated.push(cb); }
+  function onBeforeUnmount(cb) { lifecycleHooks.beforeUnmount.push(cb); }
+  function onUnmounted(cb) { lifecycleHooks.unmounted.push(cb); }
+
+  // Run lifecycle hooks
+  async function runHooks(hookName) {
+    for (const hook of lifecycleHooks[hookName]) {
+      await hook();
+    }
+  }
+
+  // Initialize on DOM ready
+  document.addEventListener('DOMContentLoaded', async () => {
+    await runHooks('beforeMount');
+    await runHooks('mounted');
+  });
+
+  // Cleanup on page unload
+  window.addEventListener('beforeunload', async () => {
+    await runHooks('beforeUnmount');
+    await runHooks('unmounted');
+  });
+
+  // Internal state (hidden from developers)
+  var __stores = {};
+  var __routeParams = {};
+  var __middlewareState = {};
+
+  // provide() \u2014 share values across components (like Vue's provide/inject)
+  function provide(name, value) {
+    window[name] = value;
+  }
+
+  // Expose globally for <script client> blocks.
+  // MERGE, never replace (#1804): several client bundles write window.stx
+  // and a wholesale assignment erases whichever ran first.
+  window.stx = Object.assign(window.stx || {}, {
+    // Reactivity
+    ref,
+    reactive,
+    computed,
+    watch,
+    onBeforeMount,
+    onMounted,
+    onBeforeUpdate,
+    onUpdated,
+    onBeforeUnmount,
+    onUnmounted,
+    provide,
+
+    // Store access (clean API - no window.* exposure)
+    useStore: function(name) { return __stores[name] || null; },
+    hasStore: function(name) { return name in __stores; },
+    getStoreNames: function() { return Object.keys(__stores); },
+
+    // Route params (clean API)
+    useRouteParams: function() { return __routeParams; },
+    useRouteParam: function(name) { return __routeParams[name]; },
+
+    // Middleware state (clean API)
+    useMiddlewareState: function() { return __middlewareState; },
+
+    // Internal setters (used by framework, not exposed in docs)
+    // eslint-disable-next-line pickier/no-unused-vars
+    setRouteParams: function(params) { __routeParams = params || {}; },
+    // eslint-disable-next-line pickier/no-unused-vars
+    setMiddlewareState: function(state) { __middlewareState = state || {}; },
+    registerStore: function(name, store) { __stores[name] = store; },
+
+    // SSR detection
+    isClient: function() { return true; },
+    isServer: function() { return false; }
+  });
+  window.provide = provide;
+})();
+</script>`;
+}
+
+export {
+  ref as createRef,
+  reactive as createReactive,
+  computed as createComputed
+};

package/dist/release.d.ts

@@ -0,0 +1 @@
+export declare const gitHash: string;

package/dist/release.js

@@ -0,0 +1 @@
+export const gitHash = "f9c3713";

package/dist/render-memo.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Memoisation for the pure, content-keyed stages of a render (stacksjs/stx#1945).
+ *
+ * SSR of an unchanged view re-ran every stage on the same bytes: the component
+ * bundle was read from disk, re-wrapped and re-inlined; the DOM-API validator
+ * re-scanned the same script; the composable scan and the css class
+ * extraction walked the same few hundred KB of page. The JS heap stayed flat —
+ * nothing was retained — but each stage makes native copies of a large string,
+ * and the allocator's high-water mark climbed by megabytes per render. The
+ * output was already byte-identical (cbe08f0b4b); nothing remembered it.
+ *
+ * Every memo here is keyed on the content it is a function of and holds a
+ * small, bounded number of entries. Where the result also depends on files,
+ * the caller records them and re-stats them on every hit, so an edit under a
+ * dev server invalidates exactly as the on-disk bundle cache does.
+ *
+ * @module render-memo
+ */
+import { LRUCache } from './performance-utils';
+/** A file an artifact was built from, and its mtime when it was read. */
+export interface DepSnapshot {
+    path: string;
+    mtimeMs: number;
+}
+/** A bounded memo that `clearRenderMemos` knows about. */
+export declare function renderMemo<V>(maxSize: number): LRUCache<string, V>;
+/** Forget everything. Wired into `clearDevCaches`. */
+export declare function clearRenderMemos(): void;
+/**
+ * A key for some content plus the parameters the result depends on.
+ *
+ * The content itself is not retained — a page is a few hundred KB — so it is
+ * represented by its wyhash and its length together. Two inputs would have to
+ * agree on both to share a key.
+ */
+export declare function contentKey(content: string, ...parts: Array<string | number | boolean | null | undefined>): string;
+/** Record the mtimes of `paths` now. A path that cannot be stat'ed is not recorded. */
+export declare function snapshotDeps(paths: Iterable<string>): DepSnapshot[];
+/** Whether every recorded dep still has the mtime it had. A deleted dep counts as changed. */
+export declare function depsUnchanged(deps: DepSnapshot[]): boolean;

package/dist/render-memo.js

@@ -0,0 +1,33 @@
+import fs from "node:fs";
+import { LRUCache } from "./performance-utils.js";
+const memos = [];
+export function renderMemo(maxSize) {
+  const memo = new LRUCache(maxSize);
+  memos.push(memo);
+  return memo;
+}
+export function clearRenderMemos() {
+  for (const memo of memos)
+    memo.clear();
+}
+export function contentKey(content, ...parts) {
+  return `${parts.map((part) => String(part ?? "")).join("\x00")}\x00${content.length}\x00${Bun.hash(content)}`;
+}
+export function snapshotDeps(paths) {
+  const deps = [];
+  for (const path of new Set(paths))
+    try {
+      deps.push({ path, mtimeMs: fs.statSync(path).mtimeMs });
+    } catch {}
+  return deps;
+}
+export function depsUnchanged(deps) {
+  for (const dep of deps)
+    try {
+      if (fs.statSync(dep.path).mtimeMs !== dep.mtimeMs)
+        return !1;
+    } catch {
+      return !1;
+    }
+  return !0;
+}

package/dist/render.d.ts

@@ -0,0 +1,54 @@
+import type { StxOptions } from './types';
+/**
+ * Render a .stx template file to an HTML string.
+ *
+ * This is the primary rendering API. It:
+ * 1. Reads the template file
+ * 2. Extracts and executes server-side scripts
+ * 3. Processes all stx directives (conditionals, loops, expressions, etc.)
+ * 4. Injects client-side scripts
+ * 5. Returns the final HTML string
+ *
+ * @param filePath - Path to the .stx template file
+ * @param renderOptions - Additional rendering options
+ * @returns The rendered HTML string
+ */
+export declare function renderTemplate(filePath: string, renderOptions?: RenderOptions): Promise<string>;
+/**
+ * Render an inline stx template string to HTML.
+ *
+ * Useful when you have template content in memory rather than a file.
+ *
+ * @param template - The stx template string
+ * @param context - Variables to make available in the template
+ * @returns The rendered HTML string
+ */
+export declare function renderString(template: string, context?: Record<string, unknown>, options?: Omit<RenderOptions, 'context'>): Promise<string>;
+/**
+ * Render template content that is already in memory, resolving includes and
+ * components relative to `filePath`.
+ *
+ * Use this when the template cannot be read from disk at runtime — most often an
+ * app compiled to a single binary, where the `.stx` file is embedded at build
+ * time via `import source from './app.stx' with { type: 'text' }` and
+ * `filePath` only anchors relative lookups.
+ *
+ * @param content - The stx template source
+ * @param filePath - Path the template came from, used to resolve relative includes
+ * @param renderOptions - Additional rendering options
+ */
+export declare function renderTemplateString(content: string, filePath: string, renderOptions?: RenderOptions): Promise<string>;
+// ============================================================================
+// Types
+// ============================================================================
+export declare interface RenderOptions {
+  markdownRenderer?: (source: string) => string | Promise<string>
+  context?: Record<string, unknown>
+  options?: Partial<StxOptions>
+  processClientScripts?: boolean
+  wrapInDocument?: boolean
+  title?: string
+  injectCSS?: boolean
+  layout?: string
+  templateOnly?: boolean
+}