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

package/dist/hydration.js

@@ -0,0 +1,654 @@
+export function serializeState(state) {
+  const fullState = {
+    refs: state.refs || {},
+    reactive: state.reactive || {},
+    props: state.props || {},
+    routeParams: state.routeParams || {},
+    stores: state.stores || {},
+    meta: state.meta || {},
+    timestamp: Date.now()
+  };
+  fullState.checksum = generateChecksum(fullState);
+  return JSON.stringify(fullState).replace(/</g, "\\u003c").replace(/>/g, "\\u003e").replace(/&/g, "\\u0026").replace(/'/g, "\\u0027");
+}
+function generateChecksum(state) {
+  const str = JSON.stringify({
+    refs: Object.keys(state.refs || {}),
+    reactive: Object.keys(state.reactive || {}),
+    props: Object.keys(state.props || {})
+  });
+  let hash = 0;
+  for (let i = 0;i < str.length; i++) {
+    const char = str.charCodeAt(i);
+    hash = (hash << 5) - hash + char;
+    hash = hash & hash;
+  }
+  return Math.abs(hash).toString(36);
+}
+export function generateStateScript(state) {
+  return `<script id="__STX_STATE__" type="application/json">${serializeState(state)}</script>`;
+}
+export function generateEventBindings(events) {
+  if (events.length === 0)
+    return "";
+  return `data-stx-events='${JSON.stringify(events)}'`;
+}
+export function extractState() {
+  if (typeof window > "u")
+    return null;
+  const stateEl = document.getElementById("__STX_STATE__");
+  if (!stateEl)
+    return null;
+  try {
+    const state = JSON.parse(stateEl.textContent || "{}");
+    if (state.checksum) {
+      if (generateChecksum(state) !== state.checksum)
+        console.warn("[Hydration] State checksum mismatch - state may be corrupted");
+    }
+    return state;
+  } catch (error) {
+    console.error("[Hydration] Failed to parse state:", error);
+    return null;
+  }
+}
+
+export class HydrationRuntime {
+  state = null;
+  options;
+  root = null;
+  isHydrated = !1;
+  pendingComponents = new Map;
+  hydratedComponents = new Set;
+  constructor(options = {}) {
+    this.options = {
+      root: options.root || "#app",
+      strict: options.strict ?? !1,
+      onHydrating: options.onHydrating || (() => {}),
+      onHydrated: options.onHydrated || (() => {}),
+      onError: options.onError || console.error,
+      performance: options.performance ?? !1,
+      timeout: options.timeout ?? 1e4
+    };
+  }
+  async hydrate() {
+    if (typeof window > "u")
+      return;
+    if (this.isHydrated)
+      return;
+    const startTime = this.options.performance ? performance.now() : 0;
+    try {
+      this.root = typeof this.options.root === "string" ? document.querySelector(this.options.root) || document.body : this.options.root;
+      this.state = extractState();
+      this.options.onHydrating();
+      this.root.classList.add("stx-hydrating");
+      const timeoutPromise = new Promise((_, reject) => {
+        setTimeout(() => reject(Error("Hydration timeout")), this.options.timeout);
+      });
+      await Promise.race([
+        this.runHydration(),
+        timeoutPromise
+      ]);
+      this.isHydrated = !0;
+      this.root.classList.remove("stx-hydrating");
+      this.root.classList.add("stx-hydrated");
+      if (this.options.performance) {
+        const duration = performance.now() - startTime;
+        console.log(`[Hydration] Completed in ${duration.toFixed(2)}ms`);
+      }
+      this.options.onHydrated();
+      window.dispatchEvent(new CustomEvent("stx:hydrated"));
+    } catch (error) {
+      this.root?.classList.remove("stx-hydrating");
+      this.root?.classList.add("stx-hydration-error");
+      this.options.onError(error);
+      window.dispatchEvent(new CustomEvent("stx:hydration-error", {
+        detail: { error }
+      }));
+    }
+  }
+  async runHydration() {
+    if (!this.root)
+      return;
+    this.restoreGlobalState();
+    await this.hydrateComponents();
+    this.bindEventHandlers();
+    this.initializeReactiveBindings();
+    this.setupRouterIntegration();
+  }
+  restoreGlobalState() {
+    if (!this.state)
+      return;
+    const stx = window.stx;
+    if (!stx)
+      return;
+    if (this.state.routeParams && stx.setRouteParams)
+      stx.setRouteParams(this.state.routeParams);
+    if (this.state.stores && stx.registerStore)
+      Object.entries(this.state.stores).forEach(([name, state]) => {
+        stx.registerStore(name, state);
+      });
+    window.dispatchEvent(new CustomEvent("stx:state-restored", {
+      detail: this.state
+    }));
+  }
+  async hydrateComponents() {
+    if (!this.root)
+      return;
+    const componentEls = this.root.querySelectorAll("[data-stx-component]");
+    for (const el of Array.from(componentEls)) {
+      const id = el.getAttribute("data-stx-component"), name = el.getAttribute("data-stx-name") || id, strategyAttr = el.getAttribute("data-stx-hydrate") || "eager", propsAttr = el.getAttribute("data-stx-props");
+      if (!id)
+        continue;
+      const config = {
+        id,
+        name: name || id,
+        strategy: strategyAttr,
+        props: propsAttr ? JSON.parse(propsAttr) : {},
+        events: []
+      };
+      this.pendingComponents.set(id, config);
+      switch (config.strategy) {
+        case "eager":
+          await this.hydrateComponent(el, config);
+          break;
+        case "lazy":
+        case "visible":
+          this.setupVisibleHydration(el, config);
+          break;
+        case "idle":
+          this.setupIdleHydration(el, config);
+          break;
+        case "interaction":
+          this.setupInteractionHydration(el, config);
+          break;
+      }
+    }
+  }
+  async hydrateComponent(el, config) {
+    if (this.hydratedComponents.has(config.id))
+      return;
+    try {
+      const componentState = this.state?.refs[config.id] || this.state?.reactive[config.id] || {};
+      this.restoreComponentState(el, componentState);
+      this.bindComponentEvents(el);
+      this.initializeComponentReactivity(el, config);
+      this.hydratedComponents.add(config.id);
+      el.classList.add("stx-hydrated");
+      el.setAttribute("data-hydrated", "true");
+      el.dispatchEvent(new CustomEvent("stx:component-hydrated", {
+        detail: { id: config.id, name: config.name },
+        bubbles: !0
+      }));
+    } catch (error) {
+      console.error(`[Hydration] Failed to hydrate component ${config.id}:`, error);
+      el.classList.add("stx-hydration-error");
+      if (this.options.strict)
+        throw error;
+    }
+  }
+  restoreComponentState(el, state) {
+    if (!state || typeof state !== "object")
+      return;
+    el.querySelectorAll("[data-stx-bind]").forEach((boundEl) => {
+      const bindKey = boundEl.getAttribute("data-stx-bind");
+      if (!bindKey || !state[bindKey])
+        return;
+      const value = state[bindKey];
+      if (boundEl instanceof HTMLInputElement)
+        if (boundEl.type === "checkbox" || boundEl.type === "radio")
+          boundEl.checked = Boolean(value);
+        else
+          boundEl.value = String(value);
+      else if (boundEl instanceof HTMLSelectElement)
+        boundEl.value = String(value);
+      else if (boundEl instanceof HTMLTextAreaElement)
+        boundEl.value = String(value);
+      else
+        boundEl.textContent = String(value);
+    });
+  }
+  setupVisibleHydration(el, config) {
+    if (!("IntersectionObserver" in window)) {
+      this.hydrateComponent(el, config);
+      return;
+    }
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          observer.disconnect();
+          this.hydrateComponent(el, config);
+        }
+      });
+    }, {
+      rootMargin: "100px",
+      threshold: 0
+    });
+    observer.observe(el);
+  }
+  setupIdleHydration(el, config) {
+    const hydrate = () => this.hydrateComponent(el, config);
+    if ("requestIdleCallback" in window)
+      window.requestIdleCallback(hydrate, { timeout: 2000 });
+    else
+      setTimeout(hydrate, 200);
+  }
+  setupInteractionHydration(el, config) {
+    const events = ["mouseenter", "touchstart", "focusin"], hydrate = () => {
+      events.forEach((event) => el.removeEventListener(event, hydrate));
+      this.hydrateComponent(el, config);
+    };
+    events.forEach((event) => {
+      el.addEventListener(event, hydrate, { once: !0, passive: !0 });
+    });
+  }
+  bindEventHandlers() {
+    if (!this.root)
+      return;
+    this.root.querySelectorAll("[data-stx-events]").forEach((el) => this.bindElementEvents(el));
+    this.bindDirectiveEvents();
+  }
+  bindElementEvents(el) {
+    const eventsAttr = el.getAttribute("data-stx-events");
+    if (!eventsAttr)
+      return;
+    try {
+      JSON.parse(eventsAttr).forEach((event) => {
+        this.bindSingleEvent(el, event);
+      });
+    } catch (error) {
+      console.error("[Hydration] Failed to parse events:", error);
+    }
+  }
+  bindDirectiveEvents() {
+    if (!this.root)
+      return;
+    [
+      "click",
+      "submit",
+      "input",
+      "change",
+      "focus",
+      "blur",
+      "keydown",
+      "keyup",
+      "keypress",
+      "mouseenter",
+      "mouseleave",
+      "touchstart",
+      "touchend",
+      "scroll",
+      "resize"
+    ].forEach((eventType) => {
+      const attr = `data-stx-on-${eventType}`;
+      this.root.querySelectorAll(`[${attr}]`).forEach((el) => {
+        const handler = el.getAttribute(attr);
+        if (!handler)
+          return;
+        this.bindSingleEvent(el, {
+          type: eventType,
+          handler,
+          modifiers: this.parseModifiers(el, eventType)
+        });
+      });
+    });
+  }
+  parseModifiers(el, eventType) {
+    const modifiers = [], modAttr = el.getAttribute(`data-stx-${eventType}-modifiers`);
+    if (modAttr)
+      modifiers.push(...modAttr.split(",").map((m) => m.trim()));
+    return modifiers;
+  }
+  bindSingleEvent(el, event) {
+    const handler = this.resolveHandler(event.handler);
+    if (!handler) {
+      console.warn(`[Hydration] Handler not found: ${event.handler}`);
+      return;
+    }
+    const wrappedHandler = (e) => {
+      if (event.modifiers?.includes("prevent") || event.preventDefault)
+        e.preventDefault();
+      if (event.modifiers?.includes("stop") || event.stopPropagation)
+        e.stopPropagation();
+      try {
+        handler.call(el, e);
+      } catch (error) {
+        console.error("[Hydration] Event handler error:", error);
+      }
+    }, options = {};
+    if (event.modifiers?.includes("once"))
+      options.once = !0;
+    if (event.modifiers?.includes("passive"))
+      options.passive = !0;
+    if (event.modifiers?.includes("capture"))
+      options.capture = !0;
+    el.addEventListener(event.type, wrappedHandler, options);
+  }
+  resolveHandler(handlerStr) {
+    const stx = window.stx;
+    if (stx && stx[handlerStr])
+      return stx[handlerStr];
+    if (window[handlerStr])
+      return window[handlerStr];
+    try {
+      if (handlerStr.match(/^\w+\+\+$/) || handlerStr.match(/^\w+--$/)) {
+        const varName = handlerStr.replace(/[+-]+$/, "");
+        return () => {
+          if (stx && stx[varName]) {
+            if (typeof stx[varName].value < "u")
+              if (handlerStr.includes("++"))
+                stx[varName].value++;
+              else
+                stx[varName].value--;
+          }
+        };
+      }
+      const assignMatch = handlerStr.match(/^(\w+)\s*=\s*(.+)$/);
+      if (assignMatch) {
+        const [, varName, expr] = assignMatch;
+        return () => {
+          if (stx && stx[varName]) {
+            const value = Function(`return ${expr}`)();
+            if (typeof stx[varName].value < "u")
+              stx[varName].value = value;
+          }
+        };
+      }
+      const callMatch = handlerStr.match(/^(\w+)\((.*)\)$/);
+      if (callMatch) {
+        const [, fnName, args] = callMatch;
+        return (e) => {
+          const fn = stx?.[fnName] || window[fnName];
+          if (fn) {
+            const evalArgs = args ? Function("$event", `return [${args}]`)(e) : [];
+            fn(...evalArgs);
+          }
+        };
+      }
+      return (e) => {
+        Function("$event", "stx", handlerStr)(e, stx);
+      };
+    } catch {
+      return null;
+    }
+  }
+  bindComponentEvents(el) {
+    el.querySelectorAll("[data-stx-events]").forEach((eventEl) => {
+      this.bindElementEvents(eventEl);
+    });
+  }
+  initializeComponentReactivity(el, config) {
+    if (!window.stx)
+      return;
+    el.querySelectorAll("[data-stx-reactive]").forEach((reactiveEl) => {
+      const bindExpr = reactiveEl.getAttribute("data-stx-reactive");
+      if (!bindExpr)
+        return;
+      this.setupReactiveBinding(reactiveEl, bindExpr);
+    });
+  }
+  initializeReactiveBindings() {
+    if (!this.root)
+      return;
+    this.getTextNodesWithExpressions(this.root).forEach(({ node, expressions }) => {
+      expressions.forEach((expr) => {
+        this.setupTextNodeBinding(node, expr);
+      });
+    });
+    this.root.querySelectorAll("[data-stx-bind-attrs]").forEach((el) => {
+      const bindings = el.getAttribute("data-stx-bind-attrs");
+      if (!bindings)
+        return;
+      try {
+        const parsed = JSON.parse(bindings);
+        Object.entries(parsed).forEach(([attr, expr]) => {
+          this.setupAttributeBinding(el, attr, expr);
+        });
+      } catch {}
+    });
+  }
+  getTextNodesWithExpressions(root) {
+    const results = [], walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+    let node;
+    while (node = walker.nextNode()) {
+      const exprMatch = (node.textContent || "").match(/\{\{\s*([^}]+)\s*\}\}/g);
+      if (exprMatch)
+        results.push({
+          node,
+          expressions: exprMatch.map((m) => m.replace(/\{\{\s*|\s*\}\}/g, ""))
+        });
+    }
+    return results;
+  }
+  setupTextNodeBinding(node, expression) {
+    const stx = window.stx;
+    if (!stx)
+      return;
+    const originalText = node.textContent || "", update = () => {
+      try {
+        const value = Function("stx", `with(stx) { return ${expression} }`)(stx);
+        node.textContent = originalText.replace(new RegExp(`\\{\\{\\s*${expression.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}\\s*\\}\\}`), String(value));
+      } catch {}
+    };
+    update();
+    const refMatch = expression.match(/^(\w+)(\.value)?$/);
+    if (refMatch && stx[refMatch[1]]?.subscribe)
+      stx[refMatch[1]].subscribe(update);
+  }
+  setupAttributeBinding(el, attr, expression) {
+    const stx = window.stx;
+    if (!stx)
+      return;
+    const update = () => {
+      try {
+        const value = Function("stx", `with(stx) { return ${expression} }`)(stx);
+        if (typeof value === "boolean")
+          if (value)
+            el.setAttribute(attr, "");
+          else
+            el.removeAttribute(attr);
+        else
+          el.setAttribute(attr, String(value));
+      } catch {}
+    };
+    update();
+    const refMatch = expression.match(/^(\w+)(\.value)?$/);
+    if (refMatch && stx[refMatch[1]]?.subscribe)
+      stx[refMatch[1]].subscribe(update);
+  }
+  setupReactiveBinding(el, expression) {
+    const stx = window.stx;
+    if (!stx)
+      return;
+    const update = () => {
+      try {
+        const value = Function("stx", `with(stx) { return ${expression} }`)(stx);
+        el.textContent = String(value);
+      } catch {}
+    };
+    update();
+    const refMatch = expression.match(/^(\w+)(\.value)?$/);
+    if (refMatch && stx[refMatch[1]]?.subscribe)
+      stx[refMatch[1]].subscribe(update);
+  }
+  setupRouterIntegration() {
+    window.addEventListener("stx:navigate", (e) => {
+      const { url } = e.detail || {};
+      if (url) {
+        if (window.stx?.setRouteParams) {
+          const urlObj = new URL(url, window.location.origin);
+        }
+      }
+    });
+    window.addEventListener("stx:load", () => {
+      this.hydrateComponents();
+      this.bindEventHandlers();
+    });
+  }
+  get hydrated() {
+    return this.isHydrated;
+  }
+  getState() {
+    return this.state;
+  }
+  async hydrateById(componentId) {
+    const config = this.pendingComponents.get(componentId), el = document.querySelector(`[data-stx-component="${componentId}"]`);
+    if (config && el)
+      await this.hydrateComponent(el, config);
+  }
+}
+export function generateHydrationScript(state) {
+  return `
+${state ? generateStateScript(state) : ""}
+<script data-stx-hydration-runtime>
+(function() {
+  'use strict';
+
+  // Wait for DOM and stx runtime
+  function init() {
+    if (!window.stx) {
+      setTimeout(init, 10);
+      return;
+    }
+
+    // Extract state
+    const stateEl = document.getElementById('__STX_STATE__');
+    const state = stateEl ? JSON.parse(stateEl.textContent || '{}') : {};
+
+    // Restore stores
+    if (state.stores) {
+      Object.entries(state.stores).forEach(([name, storeState]) => {
+        window.stx.registerStore(name, storeState);
+      });
+    }
+
+    // Restore route params
+    if (state.routeParams) {
+      window.stx.setRouteParams(state.routeParams);
+    }
+
+    // Hydrate components
+    const components = document.querySelectorAll('[data-stx-component]');
+    components.forEach(el => {
+      const id = el.getAttribute('data-stx-component');
+      const strategy = el.getAttribute('data-stx-hydrate') || 'eager';
+
+      const hydrate = () => {
+        // Bind events
+        el.querySelectorAll('[data-stx-on-click]').forEach(eventEl => {
+          const handler = eventEl.getAttribute('data-stx-on-click');
+          if (handler) {
+            eventEl.addEventListener('click', (e) => {
+              try {
+                new Function('$event', 'stx', handler)(e, window.stx);
+              }
+catch (err) {
+                console.error('[Hydration] Event error:', err);
+              }
+            });
+          }
+        });
+
+        // Mark hydrated
+        el.classList.add('stx-hydrated');
+        el.setAttribute('data-hydrated', 'true');
+        el.dispatchEvent(new CustomEvent('stx:hydrated', { bubbles: true }));
+      };
+
+      // Execute based on strategy
+      if (strategy === 'eager') {
+        hydrate();
+      }
+else if (strategy === 'idle') {
+        if ('requestIdleCallback' in window) {
+          requestIdleCallback(hydrate, { timeout: 2000 });
+        }
+else {
+          setTimeout(hydrate, 100);
+        }
+      }
+else if (strategy === 'visible') {
+        const observer = new IntersectionObserver(entries => {
+          if (entries[0].isIntersecting) {
+            observer.disconnect();
+            hydrate();
+          }
+        });
+        observer.observe(el);
+      }
+else if (strategy === 'interaction') {
+        ['mouseenter', 'focusin', 'touchstart'].forEach(event => {
+          el.addEventListener(event, hydrate, { once: true });
+        });
+      }
+    });
+
+    // Dispatch global hydrated event
+    window.dispatchEvent(new CustomEvent('stx:hydrated'));
+    document.body.classList.add('stx-hydrated');
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  }
+else {
+    init();
+  }
+})();
+</script>
+`;
+}
+let hydrationRuntime = null;
+export function getHydrationRuntime(options) {
+  if (!hydrationRuntime)
+    hydrationRuntime = new HydrationRuntime(options);
+  return hydrationRuntime;
+}
+export async function hydrate(options) {
+  await getHydrationRuntime(options).hydrate();
+}
+export function generateHydrationCSS() {
+  return `
+<style data-stx-hydration-styles>
+  /* Pre-hydration state */
+  [data-stx-component]:not(.stx-hydrated) {
+    /* Prevent layout shift with min dimensions */
+    min-height: 1px;
+  }
+
+  /* Loading state */
+  .stx-hydrating {
+    cursor: wait;
+  }
+
+  /* Hydrated state */
+  .stx-hydrated {
+    /* Ready for interaction */
+  }
+
+  /* Error state */
+  .stx-hydration-error {
+    outline: 2px dashed red;
+    outline-offset: -2px;
+  }
+
+  /* Progressive enhancement */
+  @supports not (IntersectionObserver) {
+    /* Fallback for old browsers */
+    [data-stx-hydrate="visible"],
+    [data-stx-hydrate="lazy"] {
+      /* Hydrate immediately */
+    }
+  }
+</style>
+`;
+}
+export default {
+  HydrationRuntime,
+  serializeState,
+  generateStateScript,
+  generateHydrationScript,
+  generateHydrationCSS,
+  extractState,
+  getHydrationRuntime,
+  hydrate
+};