@stacksjs/stx 0.2.95 → 0.2.97

package/dist/jsx-runtime.js

@@ -1,2 +1,289 @@
-// @bun
-import{El as a,Fl as b,Gl as c,Hl as d,Il as e,Jl as f,Kl as g,Ll as h,Ml as i,Nl as j,Ol as k}from"./chunk-vmxjghsm.js";import"./chunk-xv34zbp4.js";export{e as renderToString,f as renderToStream,g as renderToDOM,c as jsxs,d as jsxDEV,b as jsx,k as h,h as Show,j as Portal,a as Fragment,i as For};
+export const Fragment = Symbol.for("stx.Fragment");
+const VOID_ELEMENTS = new Set([
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "link",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr"
+]), BOOLEAN_ATTRS = new Set([
+  "allowfullscreen",
+  "async",
+  "autofocus",
+  "autoplay",
+  "checked",
+  "controls",
+  "default",
+  "defer",
+  "disabled",
+  "formnovalidate",
+  "hidden",
+  "inert",
+  "ismap",
+  "itemscope",
+  "loop",
+  "multiple",
+  "muted",
+  "nomodule",
+  "novalidate",
+  "open",
+  "playsinline",
+  "readonly",
+  "required",
+  "reversed",
+  "selected"
+]), PROP_ALIASES = {
+  className: "class",
+  htmlFor: "for",
+  tabIndex: "tabindex",
+  autoFocus: "autofocus",
+  autoPlay: "autoplay",
+  crossOrigin: "crossorigin",
+  dateTime: "datetime",
+  encType: "enctype",
+  formAction: "formaction",
+  formEncType: "formenctype",
+  formMethod: "formmethod",
+  formNoValidate: "formnovalidate",
+  formTarget: "formtarget",
+  frameBorder: "frameborder",
+  hrefLang: "hreflang",
+  httpEquiv: "http-equiv",
+  inputMode: "inputmode",
+  maxLength: "maxlength",
+  mediaGroup: "mediagroup",
+  minLength: "minlength",
+  noModule: "nomodule",
+  noValidate: "novalidate",
+  playsInline: "playsinline",
+  readOnly: "readonly",
+  rowSpan: "rowspan",
+  colSpan: "colspan",
+  srcDoc: "srcdoc",
+  srcLang: "srclang",
+  srcSet: "srcset",
+  useMap: "usemap"
+};
+function escapeHtml(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function escapeAttr(str) {
+  return str.replace(/&/g, "&amp;").replace(/"/g, "&quot;");
+}
+function normalizeChildren(children) {
+  if (children == null || typeof children === "boolean")
+    return [];
+  if (!Array.isArray(children))
+    return [normalizeChild(children)];
+  return children.flat(1 / 0).map(normalizeChild).filter((c) => c !== "");
+}
+function normalizeChild(child) {
+  if (child == null || typeof child === "boolean")
+    return "";
+  if (typeof child === "string")
+    return child;
+  if (typeof child === "number")
+    return String(child);
+  return child;
+}
+export function jsx(type, props, key) {
+  const { children, ref, key: _key, ...restProps } = props || {};
+  return {
+    type,
+    props: Object.keys(restProps).length > 0 ? restProps : null,
+    children: normalizeChildren(children),
+    key: key ?? _key ?? void 0,
+    ref: ref ?? void 0
+  };
+}
+export const jsxs = jsx, jsxDEV = jsx;
+function renderStyle(style) {
+  return Object.entries(style).filter(([, v]) => v != null && v !== !1).map(([k, v]) => {
+    const prop = k.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`), value = typeof v === "number" && !prop.startsWith("--") && prop !== "opacity" && prop !== "z-index" && prop !== "flex-grow" && prop !== "flex-shrink" && prop !== "order" && prop !== "font-weight" && prop !== "line-height" ? `${v}px` : String(v);
+    return `${prop}: ${value}`;
+  }).join("; ");
+}
+function renderClass(value) {
+  if (typeof value === "string")
+    return value;
+  if (Array.isArray(value))
+    return value.filter(Boolean).map(renderClass).join(" ");
+  if (typeof value === "object" && value !== null)
+    return Object.entries(value).filter(([, v]) => v).map(([k]) => k).join(" ");
+  return "";
+}
+function renderAttributes(props) {
+  if (!props)
+    return "";
+  const parts = [];
+  for (const [key, value] of Object.entries(props)) {
+    if (key === "key" || key === "ref" || key === "children" || key === "innerHTML" || key === "dangerouslySetInnerHTML")
+      continue;
+    if (key.startsWith("on") && typeof value === "function")
+      continue;
+    const attrName = PROP_ALIASES[key] || key;
+    if (attrName === "class" || attrName === "className") {
+      const classStr = renderClass(value);
+      if (classStr)
+        parts.push(` class="${escapeAttr(classStr)}"`);
+      continue;
+    }
+    if (attrName === "style") {
+      const styleStr = typeof value === "string" ? value : renderStyle(value);
+      if (styleStr)
+        parts.push(` style="${escapeAttr(styleStr)}"`);
+      continue;
+    }
+    if (BOOLEAN_ATTRS.has(attrName)) {
+      if (value)
+        parts.push(` ${attrName}`);
+      continue;
+    }
+    if (value != null && value !== !1)
+      parts.push(` ${attrName}="${escapeAttr(String(value))}"`);
+  }
+  return parts.join("");
+}
+export function renderToString(vnode) {
+  if (vnode == null || typeof vnode === "boolean")
+    return "";
+  if (typeof vnode === "string")
+    return escapeHtml(vnode);
+  if (typeof vnode === "number")
+    return String(vnode);
+  if (Array.isArray(vnode))
+    return vnode.map(renderToString).join("");
+  if (vnode.type === Fragment)
+    return vnode.children.map(renderToString).join("");
+  if (typeof vnode.type === "function") {
+    const result = vnode.type({
+      ...vnode.props,
+      children: vnode.children.length === 1 ? vnode.children[0] : vnode.children.length > 0 ? vnode.children : void 0
+    });
+    return renderToString(result);
+  }
+  const tag = vnode.type, attrs = renderAttributes(vnode.props), innerHTML = vnode.props?.innerHTML ?? vnode.props?.dangerouslySetInnerHTML?.__html;
+  if (innerHTML != null)
+    return `<${tag}${attrs}>${innerHTML}</${tag}>`;
+  if (VOID_ELEMENTS.has(tag))
+    return `<${tag}${attrs}>`;
+  const childHtml = vnode.children.map(renderToString).join("");
+  return `<${tag}${attrs}>${childHtml}</${tag}>`;
+}
+export function renderToStream(vnode) {
+  return new ReadableStream({
+    start(controller) {
+      controller.enqueue(renderToString(vnode));
+      controller.close();
+    }
+  });
+}
+function applyProps(el, props) {
+  if (!props)
+    return;
+  for (const [key, value] of Object.entries(props)) {
+    if (key === "key" || key === "ref" || key === "children" || key === "innerHTML" || key === "dangerouslySetInnerHTML")
+      continue;
+    const attrName = PROP_ALIASES[key] || key;
+    if (key.startsWith("on") && typeof value === "function") {
+      const eventName = key.slice(2).toLowerCase();
+      el.addEventListener(eventName, value);
+      continue;
+    }
+    if (attrName === "class" || attrName === "className") {
+      const classStr = renderClass(value);
+      if (classStr)
+        el.setAttribute("class", classStr);
+      continue;
+    }
+    if (attrName === "style") {
+      const styleStr = typeof value === "string" ? value : renderStyle(value);
+      if (styleStr)
+        el.setAttribute("style", styleStr);
+      continue;
+    }
+    if (BOOLEAN_ATTRS.has(attrName)) {
+      if (value)
+        el.setAttribute(attrName, "");
+      continue;
+    }
+    if (value != null && value !== !1)
+      el.setAttribute(attrName, String(value));
+  }
+}
+export function renderToDOM(vnode, container) {
+  if (vnode == null || typeof vnode === "boolean")
+    return;
+  if (typeof vnode === "string") {
+    container.appendChild(document.createTextNode(vnode));
+    return;
+  }
+  if (typeof vnode === "number") {
+    container.appendChild(document.createTextNode(String(vnode)));
+    return;
+  }
+  if (Array.isArray(vnode)) {
+    for (const child of vnode)
+      renderToDOM(child, container);
+    return;
+  }
+  if (vnode.type === Fragment) {
+    for (const child of vnode.children)
+      renderToDOM(child, container);
+    return;
+  }
+  if (typeof vnode.type === "function") {
+    const result = vnode.type({
+      ...vnode.props,
+      children: vnode.children.length === 1 ? vnode.children[0] : vnode.children.length > 0 ? vnode.children : void 0
+    });
+    renderToDOM(result, container);
+    return;
+  }
+  const el = document.createElement(vnode.type);
+  applyProps(el, vnode.props);
+  const innerHTML = vnode.props?.innerHTML ?? vnode.props?.dangerouslySetInnerHTML?.__html;
+  if (innerHTML != null)
+    el.innerHTML = innerHTML;
+  else
+    for (const child of vnode.children)
+      renderToDOM(child, el);
+  if (vnode.ref) {
+    if (typeof vnode.ref === "function")
+      vnode.ref(el);
+  }
+  container.appendChild(el);
+}
+export function Show(props) {
+  if (props.when)
+    return jsx(Fragment, { children: props.children });
+  return props.fallback ?? null;
+}
+export function For(props) {
+  const items = props.each;
+  if (!items || items.length === 0)
+    return props.fallback ?? null;
+  const renderFn = Array.isArray(props.children) ? props.children[0] : props.children, children = items.map((item, index) => renderFn(item, index));
+  return jsx(Fragment, { children });
+}
+export function Portal(props) {
+  return jsx(Fragment, { children: props.children });
+}
+export function h(type, props, ...children) {
+  const { key, ref, ...restProps } = props || {};
+  return {
+    type,
+    props: Object.keys(restProps).length > 0 ? restProps : {},
+    children: normalizeChildren(children.length === 1 ? children[0] : children),
+    key: key ?? void 0,
+    ref: ref ?? void 0
+  };
+}

package/dist/keep-alive.js

@@ -1,2 +1,421 @@
-// @bun
-import{Pl as a,Ql as b,Rl as c,Sl as d,Tl as e,Ul as f,Vl as g}from"./chunk-jt0ezawy.js";import"./chunk-xv34zbp4.js";export{c as shouldCacheComponent,a as processKeepAliveDirectives,g as onDeactivated,f as onActivated,e as generateKeepAliveRuntime,d as generateKeepAliveCSS,b as createKeepAliveCache};
+let keepAliveIdCounter = 0;
+function generateKeepAliveId() {
+  return `keep-alive-${++keepAliveIdCounter}-${Date.now().toString(36)}`;
+}
+export function processKeepAliveDirectives(template, _context = {}, _filePath) {
+  const keepAliveRegex = /@keepAlive(?:\s*\(([^)]*)\))?\s*([\s\S]*?)@endkeepAlive/gi;
+  return template.replace(keepAliveRegex, (_match, optionsStr, content) => {
+    const keepAliveId = generateKeepAliveId(), options = parseKeepAliveOptions(optionsStr || "");
+    return generateKeepAliveHtml(keepAliveId, content.trim(), options);
+  });
+}
+function parseKeepAliveOptions(optionsStr) {
+  const options = {
+    max: 10
+  }, keyValueRegex = /(\w+)\s*:\s*(?:'([^']*)'|"([^"]*)"|(\d+)|(\w+))/g;
+  let match;
+  while ((match = keyValueRegex.exec(optionsStr)) !== null) {
+    const key = match[1], strValue = match[2] || match[3], numValue = match[4];
+    switch (key) {
+      case "max":
+        options.max = numValue ? parseInt(numValue, 10) : 10;
+        break;
+      case "include":
+        options.include = strValue;
+        break;
+      case "exclude":
+        options.exclude = strValue;
+        break;
+      case "id":
+        options.id = strValue;
+        break;
+    }
+  }
+  return options;
+}
+function generateKeepAliveHtml(keepAliveId, content, options) {
+  const { max, include, exclude } = options, customId = options.id || keepAliveId;
+  return `
+<div class="stx-keep-alive" data-keep-alive-id="${keepAliveId}" data-custom-id="${customId}">
+  <div class="stx-keep-alive-content" data-keep-alive-content="${keepAliveId}">
+    ${content}
+  </div>
+  <div class="stx-keep-alive-cache" data-keep-alive-cache="${keepAliveId}" style="display: none;">
+  </div>
+</div>
+<script>
+(function() {
+  const keepAliveId = '${keepAliveId}';
+  const customId = '${customId}';
+  const maxCache = ${max || 10};
+  const includeFilter = ${include ? JSON.stringify(include.split(",").map((s) => s.trim())) : "null"};
+  const excludeFilter = ${exclude ? JSON.stringify(exclude.split(",").map((s) => s.trim())) : "null"};
+
+  const container = document.querySelector('[data-keep-alive-id="' + keepAliveId + '"]');
+  const contentEl = document.querySelector('[data-keep-alive-content="' + keepAliveId + '"]');
+  const cacheEl = document.querySelector('[data-keep-alive-cache="' + keepAliveId + '"]');
+
+  if (!container || !contentEl || !cacheEl) return;
+
+  // LRU Cache
+  const cache = new Map();
+  const cacheOrder = [];
+
+  // Check if component should be cached
+  function shouldCache(componentName) {
+    if (excludeFilter && excludeFilter.includes(componentName)) {
+      return false;
+    }
+    if (includeFilter && !includeFilter.includes(componentName)) {
+      return false;
+    }
+    return true;
+  }
+
+  // Get component key from element
+  function getComponentKey(element) {
+    // Try various ways to identify the component
+    return element.getAttribute('data-component') ||
+           element.getAttribute('data-key') ||
+           element.id ||
+           element.className.split(' ')[0] ||
+           element.tagName.toLowerCase();
+  }
+
+  // Save scroll positions
+  function saveScrollPositions(element) {
+    const positions = new Map();
+    // eslint-disable-next-line pickier/no-unused-vars
+    element.querySelectorAll('[data-keep-scroll]').forEach(function(el) {
+      const key = el.getAttribute('data-keep-scroll') || el.id || 'default';
+      positions.set(key, { top: el.scrollTop, left: el.scrollLeft });
+    });
+    // Also save the element's own scroll if scrollable
+    if (element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth) {
+      positions.set('__self__', { top: element.scrollTop, left: element.scrollLeft });
+    }
+    return positions;
+  }
+
+  // Restore scroll positions
+  function restoreScrollPositions(element, positions) {
+    if (!positions) return;
+
+    positions.forEach(function(pos, key) {
+      if (key === '__self__') {
+        element.scrollTop = pos.top;
+        element.scrollLeft = pos.left;
+      }
+else {
+        const el = element.querySelector('[data-keep-scroll="' + key + '"]') ||
+                   document.getElementById(key);
+        if (el) {
+          el.scrollTop = pos.top;
+          el.scrollLeft = pos.left;
+        }
+      }
+    });
+  }
+
+  // Save component state (form values, etc.)
+  function saveComponentState(element) {
+    const state = {};
+
+    // Save form inputs
+    // eslint-disable-next-line pickier/no-unused-vars
+    element.querySelectorAll('input, textarea, select').forEach(function(input, index) {
+      const key = input.name || input.id || 'input_' + index;
+      if (input.type === 'checkbox' || input.type === 'radio') {
+        state[key] = input.checked;
+      }
+else {
+        state[key] = input.value;
+      }
+    });
+
+    // Save data attributes marked for keeping
+    // eslint-disable-next-line pickier/no-unused-vars
+    element.querySelectorAll('[data-keep-state]').forEach(function(el) {
+      const key = el.getAttribute('data-keep-state');
+      const value = el.getAttribute('data-state-value') || el.textContent;
+      state['__data__' + key] = value;
+    });
+
+    return state;
+  }
+
+  // Restore component state
+  function restoreComponentState(element, state) {
+    if (!state) return;
+
+    // Restore form inputs
+    // eslint-disable-next-line pickier/no-unused-vars
+    element.querySelectorAll('input, textarea, select').forEach(function(input, index) {
+      const key = input.name || input.id || 'input_' + index;
+      if (state[key] !== undefined) {
+        if (input.type === 'checkbox' || input.type === 'radio') {
+          input.checked = state[key];
+        }
+else {
+          input.value = state[key];
+        }
+      }
+    });
+  }
+
+  // Cache a component
+  function cacheComponent(key, element) {
+    if (!shouldCache(key)) return;
+
+    // Remove from cache order if exists (for LRU)
+    const existingIndex = cacheOrder.indexOf(key);
+    if (existingIndex > -1) {
+      cacheOrder.splice(existingIndex, 1);
+    }
+
+    // Evict oldest if at max capacity
+    while (cacheOrder.length >= maxCache) {
+      const oldestKey = cacheOrder.shift();
+      const oldCached = cache.get(oldestKey);
+      if (oldCached && oldCached.element) {
+        oldCached.element.remove();
+      }
+      cache.delete(oldestKey);
+    }
+
+    // Clone and cache
+    const clone = element.cloneNode(true);
+    clone.style.display = 'none';
+    clone.setAttribute('data-cached-key', key);
+
+    const cached = {
+      key: key,
+      element: clone,
+      state: saveComponentState(element),
+      scrollPositions: saveScrollPositions(element),
+      cachedAt: Date.now()
+    };
+
+    cache.set(key, cached);
+    cacheOrder.push(key);
+    cacheEl.appendChild(clone);
+
+    // Dispatch deactivated event
+    element.dispatchEvent(new CustomEvent('stx:deactivated', {
+      detail: { key: key, keepAliveId: keepAliveId },
+      bubbles: true
+    }));
+  }
+
+  // Restore a component from cache
+  function restoreComponent(key) {
+    const cached = cache.get(key);
+    if (!cached) return null;
+
+    // Move to end of cache order (most recently used)
+    const index = cacheOrder.indexOf(key);
+    if (index > -1) {
+      cacheOrder.splice(index, 1);
+      cacheOrder.push(key);
+    }
+
+    // Clone the cached element
+    const restored = cached.element.cloneNode(true);
+    restored.style.display = '';
+    restored.removeAttribute('data-cached-key');
+
+    // Restore state after a tick (to let DOM settle)
+    setTimeout(function() {
+      restoreComponentState(restored, cached.state);
+      restoreScrollPositions(restored, cached.scrollPositions);
+
+      // Dispatch activated event
+      restored.dispatchEvent(new CustomEvent('stx:activated', {
+        detail: { key: key, keepAliveId: keepAliveId, cachedAt: cached.cachedAt },
+        bubbles: true
+      }));
+    }, 0);
+
+    return restored;
+  }
+
+  // Check if component is cached
+  function isCached(key) {
+    return cache.has(key);
+  }
+
+  // Clear cache
+  function clearCache(key) {
+    if (key) {
+      const cached = cache.get(key);
+      if (cached && cached.element) {
+        cached.element.remove();
+      }
+      cache.delete(key);
+      const index = cacheOrder.indexOf(key);
+      if (index > -1) {
+        cacheOrder.splice(index, 1);
+      }
+    }
+else {
+      cache.forEach(function(cached) {
+        if (cached.element) {
+          cached.element.remove();
+        }
+      });
+      cache.clear();
+      cacheOrder.length = 0;
+    }
+  }
+
+  // Expose API
+  window.STX = window.STX || {};
+  window.STX.keepAlive = window.STX.keepAlive || { instances: {} };
+  window.STX.keepAlive.instances[keepAliveId] = {
+    id: keepAliveId,
+    customId: customId,
+    cache: cacheComponent,
+    restore: restoreComponent,
+    isCached: isCached,
+    clear: clearCache,
+    getCacheKeys: function() { return Array.from(cache.keys()); },
+    getCacheSize: function() { return cache.size; }
+  };
+
+  // Observe for component changes
+  const observer = new MutationObserver(function(mutations) {
+    mutations.forEach(function(mutation) {
+      // Handle removed nodes (cache them)
+      mutation.removedNodes.forEach(function(node) {
+        if (node.nodeType === Node.ELEMENT_NODE && node.hasAttribute && !node.hasAttribute('data-cached-key')) {
+          const key = getComponentKey(node);
+          if (key && shouldCache(key)) {
+            // Check if this removal is intentional (not just DOM restructuring)
+            if (!contentEl.contains(node)) {
+              cacheComponent(key, node);
+            }
+          }
+        }
+      });
+
+      // Handle added nodes (check if we should restore from cache)
+      mutation.addedNodes.forEach(function(node) {
+        if (node.nodeType === Node.ELEMENT_NODE && node.hasAttribute) {
+          const key = getComponentKey(node);
+          if (key && isCached(key)) {
+            const restored = restoreComponent(key);
+            if (restored) {
+              node.replaceWith(restored);
+            }
+          }
+        }
+      });
+    });
+  });
+
+  observer.observe(contentEl, { childList: true, subtree: true });
+
+  // Cleanup on removal
+  container.addEventListener('stx:destroy', function() {
+    observer.disconnect();
+    clearCache();
+  });
+})();
+</script>
+`;
+}
+export function createKeepAliveCache(options = {}) {
+  return {
+    id: options.id || generateKeepAliveId(),
+    cache: new Map,
+    max: options.max || 10,
+    include: options.include ? options.include.split(",").map((s) => s.trim()) : null,
+    exclude: options.exclude ? options.exclude.split(",").map((s) => s.trim()) : null
+  };
+}
+export function shouldCacheComponent(componentName, cache) {
+  if (cache.exclude && cache.exclude.includes(componentName))
+    return !1;
+  if (cache.include && !cache.include.includes(componentName))
+    return !1;
+  return !0;
+}
+export function generateKeepAliveCSS() {
+  return `
+/* STX Keep-Alive Styles */
+.stx-keep-alive {
+  position: relative;
+}
+
+.stx-keep-alive-cache {
+  display: none !important;
+  visibility: hidden;
+  position: absolute;
+  pointer-events: none;
+}
+
+/* Activation transition */
+.stx-keep-alive-content > * {
+  transition: opacity 0.15s ease;
+}
+
+.stx-keep-alive-content > [data-activating] {
+  opacity: 0;
+}
+
+.stx-keep-alive-content > [data-activated] {
+  opacity: 1;
+}
+`;
+}
+export function generateKeepAliveRuntime() {
+  return `
+// STX Keep-Alive Runtime
+(function() {
+  if (typeof window === 'undefined') return;
+
+  window.STX = window.STX || {};
+  window.STX.keepAlive = window.STX.keepAlive || { instances: {} };
+
+  // Global keep-alive utilities
+  window.STX.keepAlive.clearAll = function() {
+    Object.values(window.STX.keepAlive.instances).forEach(function(instance) {
+      instance.clear();
+    });
+  };
+
+  window.STX.keepAlive.getTotalCached = function() {
+    return Object.values(window.STX.keepAlive.instances).reduce(function(total, instance) {
+      return total + instance.getCacheSize();
+    }, 0);
+  };
+
+  // Lifecycle hooks for keep-alive
+  window.STX.onActivated = function(callback) {
+    document.addEventListener('stx:activated', function(e) {
+      callback(e.detail);
+    });
+  };
+
+  window.STX.onDeactivated = function(callback) {
+    document.addEventListener('stx:deactivated', function(e) {
+      callback(e.detail);
+    });
+  };
+
+  console.log('[stx] Keep-alive runtime initialized');
+})();
+`;
+}
+export function onActivated(callback) {
+  if (typeof document < "u")
+    document.addEventListener("stx:activated", (e) => {
+      callback(e.detail);
+    });
+}
+export function onDeactivated(callback) {
+  if (typeof document < "u")
+    document.addEventListener("stx:deactivated", (e) => {
+      callback(e.detail);
+    });
+}