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

package/dist/chunk-9y0g8kzt.js

@@ -0,0 +1,358 @@
+// @bun
+var U=0;function N(){return`async-${++U}-${Date.now().toString(36)}`}function X(j,q={},K){let z=/@async\s*\(([^)]*)\)\s*([\s\S]*?)@error\s*([\s\S]*?)@endasync/gi,F=/@async\s*\(([^)]*)\)\s*([\s\S]*?)@endasync/gi,w=j;return w=w.replace(z,(B,D,J,L)=>{let M=N(),T=P(D);return Q(M,T,J.trim(),L.trim())}),w=w.replace(F,(B,D,J)=>{let L=N(),M=P(D);return Q(L,M,J.trim(),'<div class="stx-async-error">Failed to load component</div>')}),w}function P(j){let q={component:"",timeout:30000,delay:200,suspensible:!0,retries:0},K=/(\w+)\s*:\s*(?:'([^']*)'|"([^"]*)"|(\d+)|(\w+))/g,z;while((z=K.exec(j))!==null){let F=z[1],w=z[2]||z[3],B=z[4],D=z[5];switch(F){case"component":q.component=w||D||"";break;case"timeout":q.timeout=B?parseInt(B,10):30000;break;case"delay":q.delay=B?parseInt(B,10):200;break;case"suspensible":q.suspensible=D==="true";break;case"retries":q.retries=B?parseInt(B,10):0;break;case"loadingComponent":q.loadingComponent=w||D;break;case"errorComponent":q.errorComponent=w||D;break}}return q}function Q(j,q,K,z){let{component:F,timeout:w,delay:B,suspensible:D,retries:J}=q;return`
+<div class="stx-async-component" data-async-id="${j}" data-component="${F}" data-status="pending">
+  <div class="stx-async-loading" data-async-loading="${j}">
+    ${K}
+  </div>
+  <div class="stx-async-content" data-async-content="${j}" style="display: none;">
+  </div>
+  <div class="stx-async-error" data-async-error="${j}" style="display: none;">
+    ${z}
+  </div>
+</div>
+<script>
+(function() {
+  const asyncId = '${j}';
+  const componentPath = '${F}';
+  const timeout = ${w};
+  const delay = ${B};
+  const suspensible = ${D};
+  const maxRetries = ${J};
+
+  const container = document.querySelector('[data-async-id="' + asyncId + '"]');
+  const loadingEl = document.querySelector('[data-async-loading="' + asyncId + '"]');
+  const contentEl = document.querySelector('[data-async-content="' + asyncId + '"]');
+  const errorEl = document.querySelector('[data-async-error="' + asyncId + '"]');
+
+  if (!container || !loadingEl || !contentEl || !errorEl) return;
+
+  let attempts = 0;
+  let delayTimer = null;
+  let timeoutTimer = null;
+  let resolved = false;
+  let aborted = false;
+
+  // AbortController + container detachment guards (stacksjs/stx#1720). Without
+  // these, an in-flight fetch from a previous page would write innerHTML on
+  // a detached container after the user SPA-navigated away, or \u2014 for
+  // components removed via :if/parent toggle \u2014 would log a "rejected" state
+  // on a node that no longer exists. The router dispatches stx:navigate
+  // when a navigation starts; we treat that as a teardown signal. The
+  // isConnected check covers non-router unmounts (:if false, parent remove).
+  const controller = new AbortController();
+  function teardown() {
+    if (aborted) return;
+    aborted = true;
+    controller.abort();
+    clearTimeout(delayTimer);
+    clearTimeout(timeoutTimer);
+    window.removeEventListener('stx:navigate', teardown);
+  }
+  window.addEventListener('stx:navigate', teardown);
+
+  // Update state
+  function setState(status) {
+    container.setAttribute('data-status', status);
+    loadingEl.style.display = status === 'loading' ? '' : 'none';
+    contentEl.style.display = status === 'resolved' ? '' : 'none';
+    errorEl.style.display = status === 'rejected' ? '' : 'none';
+  }
+
+  // Show loading after delay
+  function showLoading() {
+    if (!resolved) {
+      setState('loading');
+    }
+  }
+
+  // Load component
+  async function loadComponent() {
+    attempts++;
+
+    // Start delay timer for loading state
+    delayTimer = setTimeout(showLoading, delay);
+
+    // Start timeout timer
+    timeoutTimer = setTimeout(function() {
+      if (!resolved) {
+        handleError(new Error('Component load timeout after ' + timeout + 'ms'));
+      }
+    }, timeout);
+
+    try {
+      // Notify Suspense boundary if suspensible
+      if (suspensible && window.STX && window.STX.suspense) {
+        window.STX.suspense.register(asyncId);
+      }
+
+      // Fetch the component with the AbortController signal so a teardown
+      // (SPA navigation, component unmount) cancels the in-flight request.
+      const response = await fetch('/_stx/component/' + encodeURIComponent(componentPath), {
+        signal: controller.signal
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to load component: ' + response.statusText);
+      }
+
+      const html = await response.text();
+
+      // Clear timers
+      clearTimeout(delayTimer);
+      clearTimeout(timeoutTimer);
+
+      // Belt-and-suspenders: if the container was removed between the fetch
+      // starting and now (e.g. :if flipped to false, or a non-router parent
+      // mutation), bail before writing innerHTML on a detached node.
+      if (aborted || !container.isConnected) return;
+
+      resolved = true;
+      contentEl.innerHTML = html;
+      setState('resolved');
+
+      // Execute any scripts in the loaded component
+      contentEl.querySelectorAll('script').forEach(function(script) {
+        const newScript = document.createElement('script');
+        if (script.src) {
+          newScript.src = script.src;
+        }
+else {
+          newScript.textContent = script.textContent;
+        }
+        script.parentNode.replaceChild(newScript, script);
+      });
+
+      // Process signals/bindings on the loaded content ({{ }}, :attr, @event, etc.)
+      if (window.stx && window.stx._latestSetup) {
+        window.dispatchEvent(new Event('stx:load'));
+      }
+
+      // Notify Suspense boundary
+      if (suspensible && window.STX && window.STX.suspense) {
+        window.STX.suspense.resolve(asyncId);
+      }
+
+      // Dispatch loaded event
+      container.dispatchEvent(new CustomEvent('stx:async:loaded', {
+        detail: { asyncId: asyncId, component: componentPath },
+        bubbles: true
+      }));
+
+      // Load succeeded \u2014 drop the navigate-teardown listener so it doesn't
+      // accumulate per async component across an app's lifetime.
+      window.removeEventListener('stx:navigate', teardown);
+    }
+catch (error) {
+      // AbortError fires when teardown() runs during an in-flight fetch.
+      // That's not a load failure \u2014 the component is being unmounted, so
+      // don't render the rejected state, don't retry, don't dispatch error.
+      if (aborted || (error && error.name === 'AbortError')) return;
+      handleError(error);
+    }
+  }
+
+  // Handle errors
+  function handleError(error) {
+    clearTimeout(delayTimer);
+    clearTimeout(timeoutTimer);
+
+    // The container may have been removed (e.g., a non-router :if toggle)
+    // between the failure and now. No DOM left to write the error state to.
+    if (aborted || !container.isConnected) return;
+
+    if (attempts < maxRetries) {
+      // Retry
+      console.warn('[stx:async:' + asyncId + '] Retrying... (' + attempts + '/' + maxRetries + ')');
+      setTimeout(loadComponent, 1000 * attempts); // Exponential backoff
+      return;
+    }
+
+    resolved = true;
+    setState('rejected');
+
+    // Update error content with error message
+    const errorMsgEl = errorEl.querySelector('[data-error-message]');
+    if (errorMsgEl) {
+      errorMsgEl.textContent = error.message;
+    }
+
+    // Notify Suspense boundary
+    if (suspensible && window.STX && window.STX.suspense) {
+      window.STX.suspense.reject(asyncId, error);
+    }
+
+    // Dispatch error event
+    container.dispatchEvent(new CustomEvent('stx:async:error', {
+      detail: { asyncId: asyncId, component: componentPath, error: error },
+      bubbles: true
+    }));
+
+    console.error('[stx:async:' + asyncId + ']', error);
+
+    // Final error state \u2014 no more retries. Drop the navigate listener so it
+    // doesn't outlive the (failed) component.
+    window.removeEventListener('stx:navigate', teardown);
+  }
+
+  // Retry function
+  function retry() {
+    resolved = false;
+    attempts = 0;
+    setState('pending');
+    loadComponent();
+  }
+
+  // Expose retry function
+  window['$stxAsyncRetry_' + asyncId.replace(/-/g, '_')] = retry;
+
+  // Make $retry available within the error content
+  errorEl.querySelectorAll('[onclick*="$retry"]').forEach(function(el) {
+    const onclick = el.getAttribute('onclick');
+    if (onclick) {
+      el.setAttribute('onclick', onclick.replace(/\\$retry\\(\\)/g, "window['$stxAsyncRetry_" + asyncId.replace(/-/g, '_') + "']()"));
+    }
+  });
+
+  // Expose API
+  window.STX = window.STX || {};
+  window.STX.asyncComponents = window.STX.asyncComponents || {};
+  window.STX.asyncComponents[asyncId] = {
+    getStatus: function() { return container.getAttribute('data-status'); },
+    retry: retry,
+    getAttempts: function() { return attempts; }
+  };
+
+  // Start loading
+  loadComponent();
+})();
+</script>
+`}function Y(j){return{__asyncComponent:!0,...typeof j==="function"?{loader:j}:j}}function Z(j){return typeof j==="object"&&j!==null&&"__asyncComponent"in j&&j.__asyncComponent===!0}function _(){return`
+/* STX Async Component Styles */
+.stx-async-component {
+  position: relative;
+}
+
+.stx-async-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100px;
+}
+
+.stx-async-error {
+  padding: 1rem;
+  border: 1px solid #ef4444;
+  border-radius: 0.5rem;
+  background-color: #fef2f2;
+  color: #991b1b;
+}
+
+.stx-async-error button {
+  margin-top: 0.5rem;
+  padding: 0.5rem 1rem;
+  border: 1px solid #ef4444;
+  border-radius: 0.25rem;
+  background-color: #ef4444;
+  color: white;
+  cursor: pointer;
+}
+
+.stx-async-error button:hover {
+  background-color: #dc2626;
+}
+
+/* Loading spinner animation */
+@keyframes stx-async-spin {
+  to { transform: rotate(360deg); }
+}
+
+.stx-async-spinner {
+  width: 24px;
+  height: 24px;
+  border: 2px solid #e5e7eb;
+  border-top-color: #3b82f6;
+  border-radius: 50%;
+  animation: stx-async-spin 0.8s linear infinite;
+}
+
+/* Skeleton loading */
+.stx-async-skeleton {
+  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+  background-size: 200% 100%;
+  animation: stx-async-shimmer 1.5s infinite;
+  border-radius: 0.25rem;
+}
+
+@keyframes stx-async-shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+  .stx-async-error {
+    background-color: #450a0a;
+    color: #fecaca;
+  }
+
+  .stx-async-skeleton {
+    background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
+    background-size: 200% 100%;
+  }
+}
+`}function $(){return`
+// STX Async Component Runtime
+(function() {
+  if (typeof window === 'undefined') return;
+
+  window.STX = window.STX || {};
+  window.STX.asyncComponents = window.STX.asyncComponents || {};
+
+  // Load a component dynamically
+  window.STX.loadComponent = async function(componentPath, targetSelector, options) {
+    options = options || {};
+    const target = document.querySelector(targetSelector);
+    if (!target) {
+      throw new Error('Target element not found: ' + targetSelector);
+    }
+
+    const loadingHtml = options.loading || '<div class="stx-async-spinner"></div>';
+    target.innerHTML = loadingHtml;
+
+    try {
+      const response = await fetch('/_stx/component/' + encodeURIComponent(componentPath));
+      if (!response.ok) {
+        throw new Error('Failed to load: ' + response.statusText);
+      }
+
+      const html = await response.text();
+      target.innerHTML = html;
+
+      // Execute scripts
+      target.querySelectorAll('script').forEach(function(script) {
+        const newScript = document.createElement('script');
+        if (script.src) {
+          newScript.src = script.src;
+        }
+else {
+          newScript.textContent = script.textContent;
+        }
+        script.parentNode.replaceChild(newScript, script);
+      });
+
+      if (options.onLoad) options.onLoad();
+      return true;
+    }
+catch (error) {
+      if (options.error) {
+        target.innerHTML = options.error;
+      }
+      if (options.onError) options.onError(error);
+      throw error;
+    }
+  };
+
+  console.log('[stx] Async component runtime initialized');
+})();
+`}
+export{X as ni,Y as oi,Z as pi,_ as qi,$ as ri};

package/dist/chunk-a0nfbmeh.js

@@ -0,0 +1,3 @@
+import"./bun-shim.js";// @bun
+import{Vp as D,Zp as T}from"./chunk-y11cxbxd.js";import{bt as N}from"./chunk-wrzwgkbx.js";import{gv as L}from"./chunk-qc1f74ek.js";import Q from"fs";import Y from"path";var b=new Map,V=new Map;async function v(j){let z;for(let K=0;K<3;K++)try{let W=(await Q.promises.stat(j)).mtime.getTime(),J=V.get(j);if(J&&J.mtime===W)return J.content;let X=await Bun.file(j).text(),U=(await Q.promises.stat(j)).mtime.getTime();if(U!==W)continue;return V.set(j,{content:X,mtime:U}),X}catch(I){z=I;break}throw V.delete(j),Error(`File not found: ${j}${z?` (${z.message})`:""}`)}function E(j){V.delete(j)}function F(j){for(let B of V.keys())if(B.startsWith(j))V.delete(B)}var $=null,G=null,k=null;function R(j){k=j}async function S(j=!1){let B=k??await import("./chunk-zg75gjns.js");if(j)return B.generateSignalsRuntimeDev();if($===null)$=B.generateSignalsRuntime();return $}var q=null;async function _(){if(q===null){let{getRouterScript:j}=await import("./chunk-dgrt76d2.js");q=j()}return q}function g(){V.clear(),T(),N(),$=null,G=null,q=null}function y(j){let B={debug:j.debug===!0,middleware:(j.middleware??[]).map((z)=>({name:z.name,timing:z.timing,handler:String(z.handler)})),customDirectives:(j.customDirectives??[]).map((z)=>({name:z.name,hasEndTag:z.hasEndTag===!0,handler:String(z.handler)}))};return new Bun.CryptoHasher("sha1").update(JSON.stringify(B)).digest("hex")}async function C(j,B){try{if(!B.cachePath)return null;let z=Y.resolve(B.cachePath),K=Y.join(z,`${M(j)}.html`),I=Y.join(z,`${M(j)}.meta.json`);if(!await D(K)||!await D(I))return null;let W=await Bun.file(I).text(),J=JSON.parse(W);if(J.cacheVersion!==B.cacheVersion)return null;if(J.optionsSignature!==y(B))return null;if((await Q.promises.stat(j)).mtime.getTime()>J.mtime)return null;for(let Z of J.dependencies)if(await D(Z)){if((await Q.promises.stat(Z)).mtime.getTime()>J.mtime)return null}else return null;return await Bun.file(K).text()}catch(z){return console.warn(`Cache error for ${j}:`,z),null}}async function u(j,B,z,K){try{if(!K.cachePath)return;let I=Y.resolve(K.cachePath);await Q.promises.mkdir(I,{recursive:!0});let W=Y.join(I,`${M(j)}.html`),J=Y.join(I,`${M(j)}.meta.json`),X=await Q.promises.stat(j);await Bun.write(W,B);let Z={sourcePath:j,mtime:X.mtime.getTime(),dependencies:Array.from(z),cacheVersion:K.cacheVersion,optionsSignature:y(K),generatedAt:Date.now()};await Bun.write(J,JSON.stringify(Z,null,2)),b.set(j,{output:B,mtime:X.mtime.getTime(),dependencies:z})}catch(I){console.warn(`Failed to cache template ${j}:`,I)}}var O=16;function M(j){return new Bun.CryptoHasher("sha1").update(j).digest("hex").substring(0,O)}
+export{b as Oj,v as Pj,E as Qj,F as Rj,R as Sj,S as Tj,_ as Uj,g as Vj,C as Wj,u as Xj,M as Yj};