@stacksjs/stx 0.2.94 → 0.2.96

package/dist/hot-reload.js

@@ -1,2 +1,367 @@
-// @bun
-import{em as a,fm as b,gm as c,hm as d,im as e,jm as f,km as g,lm as h}from"./chunk-qxs6et76.js";import"./chunk-3jm3snz8.js";export{h as stopHmrServer,e as shouldReloadOnChange,f as shouldIgnoreFile,d as isCssOnlyChange,c as injectHotReload,g as getHmrServer,b as generateHotReloadScript,a as HotReloadServer};
+export class HotReloadServer {
+  clients = new Set;
+  server = null;
+  options;
+  constructor(options = {}) {
+    this.options = {
+      wsPort: options.wsPort ?? 3001,
+      showOverlay: options.showOverlay ?? !0,
+      reconnectInterval: options.reconnectInterval ?? 1000,
+      maxReconnectAttempts: options.maxReconnectAttempts ?? 10,
+      verbose: options.verbose ?? !1
+    };
+  }
+  start(port) {
+    let wsPort = port ?? this.options.wsPort;
+    const maxAttempts = 20;
+    for (let attempt = 0;attempt < maxAttempts; attempt++)
+      try {
+        this.server = Bun.serve({
+          port: wsPort,
+          fetch(req, server) {
+            if (server.upgrade(req, { data: {} }))
+              return;
+            return new Response("stx Hot Reload Server", {
+              headers: { "Content-Type": "text/plain" }
+            });
+          },
+          websocket: {
+            open: (ws) => {
+              this.clients.add(ws);
+              if (this.options.verbose)
+                console.log(`[HMR] Client connected (${this.clients.size} total)`);
+              ws.send(JSON.stringify({
+                type: "connected",
+                timestamp: Date.now()
+              }));
+            },
+            close: (ws) => {
+              this.clients.delete(ws);
+              if (this.options.verbose)
+                console.log(`[HMR] Client disconnected (${this.clients.size} total)`);
+            },
+            message: (_ws, message) => {
+              const str = typeof message === "string" ? message : message.toString();
+              if (str === "ping")
+                return;
+              try {
+                const msg = JSON.parse(str);
+                if (msg.type === "console" && Array.isArray(msg.args)) {
+                  const args = msg.args.join(" "), c = { log: "\x1B[36m", warn: "\x1B[33m", error: "\x1B[31m", info: "\x1B[34m" }[msg.level] ?? "\x1B[36m";
+                  console.log(`${c}[browser]${msg.level !== "log" ? ` ${msg.level}` : ""}\x1B[0m ${args}`);
+                }
+              } catch {}
+            }
+          }
+        });
+        if (this.options.verbose)
+          console.log(`[HMR] WebSocket server started on port ${wsPort}`);
+        return wsPort;
+      } catch (error) {
+        if (error?.code === "EADDRINUSE") {
+          wsPort++;
+          continue;
+        }
+        throw error;
+      }
+    throw Error(`Could not find an available port after ${maxAttempts} attempts starting from ${port ?? this.options.wsPort}`);
+  }
+  stop() {
+    for (const client of this.clients)
+      try {
+        client.close();
+      } catch {}
+    this.clients.clear();
+    if (this.server) {
+      this.server.stop();
+      this.server = null;
+    }
+    if (this.options.verbose)
+      console.log("[HMR] Server stopped");
+  }
+  broadcast(message) {
+    const data = JSON.stringify(message);
+    let sent = 0;
+    for (const client of this.clients)
+      try {
+        if (client.readyState === 1) {
+          client.send(data);
+          sent++;
+        }
+      } catch {
+        this.clients.delete(client);
+      }
+    if (this.options.verbose && sent > 0)
+      console.log(`[HMR] Broadcast ${message.type} to ${sent} client(s)`);
+  }
+  reload(filePath) {
+    if (this.options.verbose)
+      console.log(`[HMR] Sending reload to ${this.clients.size} client(s) for: ${filePath || "all"}`);
+    this.broadcast({
+      type: "reload",
+      path: filePath,
+      timestamp: Date.now()
+    });
+  }
+  updateCss(filePath, content) {
+    this.broadcast({
+      type: "css-update",
+      path: filePath,
+      content,
+      timestamp: Date.now()
+    });
+  }
+  error(message) {
+    this.broadcast({
+      type: "error",
+      content: message,
+      timestamp: Date.now()
+    });
+  }
+  get clientCount() {
+    return this.clients.size;
+  }
+  get port() {
+    return this.options.wsPort;
+  }
+}
+export function generateHotReloadScript(wsPort, options = {}) {
+  const {
+    showOverlay = !0,
+    reconnectInterval = 1000,
+    maxReconnectAttempts = 10
+  } = options;
+  return `
+<script>
+(function() {
+  // stx Hot Reload Client
+  var wsUrl = 'ws://' + window.location.hostname + ':${wsPort}';
+  var reconnectAttempts = 0;
+  var maxAttempts = ${maxReconnectAttempts};
+  var reconnectInterval = ${reconnectInterval};
+  var socket = null;
+  var overlay = null;
+  var wasConnected = false; // Track if we ever connected successfully
+
+  ${showOverlay ? `
+  // Create connection status overlay
+  function createOverlay() {
+    overlay = document.createElement('div');
+    overlay.id = 'stx-hmr-overlay';
+    overlay.style.cssText = 'position:fixed;top:0;left:0;right:0;padding:8px 16px;background:#f59e0b;color:#000;font-family:system-ui,sans-serif;font-size:14px;text-align:center;z-index:999999;display:none;';
+    document.body.appendChild(overlay);
+  }
+
+  function showOverlay(message, isError) {
+    // Only show overlay if we were previously connected (don't show during initial connection)
+    if (!wasConnected && !isError) return;
+    if (!overlay) createOverlay();
+    overlay.textContent = message;
+    overlay.style.background = isError ? '#ef4444' : '#f59e0b';
+    overlay.style.color = isError ? '#fff' : '#000';
+    overlay.style.display = 'block';
+  }
+
+  function hideOverlay() {
+    if (overlay) overlay.style.display = 'none';
+  }
+  ` : `
+  function showOverlay() {}
+  function hideOverlay() {}
+  `}
+
+  function connect() {
+    try {
+      socket = new WebSocket(wsUrl);
+    }
+catch (e) {
+      // Silent fail for initial connection attempts
+      if (wasConnected) {
+        scheduleReconnect();
+      }
+      return;
+    }
+
+    socket.onopen = function() {
+      // connected silently
+      wasConnected = true;
+      reconnectAttempts = 0;
+      hideOverlay();
+    };
+
+    socket.onmessage = function(event) {
+      try {
+        var msg = JSON.parse(event.data);
+
+        switch (msg.type) {
+          case 'reload':
+            console.log('[stx] Reloading...', msg.path || '');
+            // Use SPA router for progressive update instead of full page reload.
+            // Falls back to hard reload only when the router isn't available.
+            if (typeof window.navigate === 'function') {
+              window.navigate(window.location.pathname + window.location.search, false, true);
+            } else {
+              window.location.reload();
+            }
+            break;
+
+          case 'css-update':
+            console.log('[stx] CSS update:', msg.path);
+            updateCss(msg.path, msg.content);
+            break;
+
+          case 'error':
+            console.error('[stx] Error:', msg.content);
+            showOverlay('Build Error: ' + msg.content, true);
+            break;
+
+          case 'connected':
+            break;
+        }
+      }
+catch (e) {
+        console.error('[stx] Invalid message:', e);
+      }
+    };
+
+    socket.onclose = function() {
+      socket = null;
+      // Only log and show overlay if we were previously connected
+      if (wasConnected) {
+        console.log('[stx] Connection closed, reconnecting...');
+        scheduleReconnect();
+      }
+else {
+        // Silently retry initial connection
+        setTimeout(connect, reconnectInterval);
+      }
+    };
+
+    socket.onerror = function() {
+      // Errors are handled in onclose
+    };
+  }
+
+  function scheduleReconnect() {
+    if (reconnectAttempts < maxAttempts) {
+      reconnectAttempts++;
+      showOverlay('Reconnecting... (' + reconnectAttempts + '/' + maxAttempts + ')');
+      setTimeout(connect, reconnectInterval);
+    }
+else {
+      showOverlay('Connection lost. Refresh to reconnect.', true);
+    }
+  }
+
+  // CSS hot update without full reload
+  function updateCss(path, content) {
+    // Try to find and update existing stylesheet
+    var links = document.querySelectorAll('link[rel="stylesheet"]');
+    for (var i = 0; i < links.length; i++) {
+      var href = links[i].getAttribute('href');
+      if (href && href.indexOf(path) !== -1) {
+        // Add cache-busting query param
+        var newHref = href.split('?')[0] + '?t=' + Date.now();
+        links[i].setAttribute('href', newHref);
+        return;
+      }
+    }
+
+    // If content provided, inject as style tag
+    if (content) {
+      var style = document.createElement('style');
+      style.setAttribute('data-stx-hmr', path);
+      style.textContent = content;
+
+      // Remove old injected style
+      var old = document.querySelector('style[data-stx-hmr="' + path + '"]');
+      if (old) old.remove();
+
+      document.head.appendChild(style);
+    }
+  }
+
+  // Start connection when DOM is ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', connect);
+  }
+else {
+    connect();
+  }
+
+  // Forward browser console to the dev server terminal
+  var _origLog = console.log;
+  var _origError = console.error;
+  var _origWarn = console.warn;
+  var _origInfo = console.info;
+
+  function _fwd(level, args) {
+    if (socket && socket.readyState === 1) {
+      try {
+        socket.send(JSON.stringify({
+          type: 'console',
+          level: level,
+          args: Array.prototype.slice.call(args).map(function(a) {
+            if (a === null) return 'null';
+            if (a === undefined) return 'undefined';
+            if (typeof a === 'object') { try { return JSON.stringify(a); } catch(e) { return String(a); } }
+            return String(a);
+          })
+        }));
+      } catch(e) {}
+    }
+  }
+
+  console.log = function() { _origLog.apply(console, arguments); _fwd('log', arguments); };
+  console.error = function() { _origError.apply(console, arguments); _fwd('error', arguments); };
+  console.warn = function() { _origWarn.apply(console, arguments); _fwd('warn', arguments); };
+  console.info = function() { _origInfo.apply(console, arguments); _fwd('info', arguments); };
+
+  // Expose for debugging
+  window.__stxHmr = {
+    reconnect: connect,
+    status: function() { return socket ? socket.readyState : -1; }
+  };
+})();
+</script>
+`;
+}
+export function injectHotReload(html, wsPort, options = {}) {
+  const script = generateHotReloadScript(wsPort, options), bodyIdx = html.lastIndexOf("</body>");
+  if (bodyIdx !== -1)
+    return html.slice(0, bodyIdx) + script + html.slice(bodyIdx);
+  if (html.includes("</html>"))
+    return html.replace("</html>", `${script}</html>`);
+  return html + script;
+}
+export function isCssOnlyChange(filename) {
+  const ext = filename.toLowerCase();
+  return ext.endsWith(".css") || ext.endsWith(".scss") || ext.endsWith(".sass") || ext.endsWith(".less");
+}
+export function shouldReloadOnChange(filename) {
+  const ext = filename.toLowerCase();
+  return [".stx", ".html", ".htm", ".md", ".js", ".ts", ".jsx", ".tsx", ".json"].some((e) => ext.endsWith(e));
+}
+export function shouldIgnoreFile(filename) {
+  return [
+    /^\./,
+    /node_modules/,
+    /\.stx\/output/,
+    /\.stx\/cache/,
+    /~$/,
+    /\.swp$/,
+    /\.swo$/
+  ].some((pattern) => pattern.test(filename));
+}
+let globalHmrServer = null;
+export function getHmrServer(options) {
+  if (!globalHmrServer)
+    globalHmrServer = new HotReloadServer(options);
+  return globalHmrServer;
+}
+export function stopHmrServer() {
+  if (globalHmrServer) {
+    globalHmrServer.stop();
+    globalHmrServer = null;
+  }
+}

package/dist/html-masking.js

@@ -1,2 +1,73 @@
-// @bun
-import{lv as a,mv as b,nv as c,ov as d,pv as e,qv as f}from"./chunk-rb1e4cnb.js";import"./chunk-3jm3snz8.js";export{e as stashScriptElements,f as restoreStashedScripts,b as matchStyleElement,a as matchScriptElement,c as matchHtmlComment,d as maskAtElementPosition};
+const SCRIPT_OPEN = /<script\b[^>]*>/iy, SCRIPT_CLOSE = /<\/script\s*>/ig, STYLE_OPEN = /<style\b[^>]*>/iy, STYLE_CLOSE = /<\/style\s*>/ig;
+function matchElement(html, i, open, close) {
+  open.lastIndex = i;
+  const om = open.exec(html);
+  if (!om || om.index !== i)
+    return -1;
+  close.lastIndex = open.lastIndex;
+  const cm = close.exec(html);
+  if (!cm)
+    return -1;
+  return cm.index + cm[0].length;
+}
+export function matchScriptElement(html, i) {
+  return matchElement(html, i, SCRIPT_OPEN, SCRIPT_CLOSE);
+}
+export function matchStyleElement(html, i) {
+  return matchElement(html, i, STYLE_OPEN, STYLE_CLOSE);
+}
+export function matchHtmlComment(html, i) {
+  if (!html.startsWith("<!--", i))
+    return -1;
+  const closeRel = html.indexOf("-->", i + 4);
+  if (closeRel === -1)
+    return -1;
+  return closeRel + 3;
+}
+export function maskAtElementPosition(html, match, placeholder) {
+  const tokens = [];
+  let output = "", i = 0;
+  const n = html.length;
+  let inTag = !1, quote = null;
+  while (i < n) {
+    const ch = html[i];
+    if (inTag) {
+      output += ch;
+      if (quote) {
+        if (ch === quote)
+          quote = null;
+      } else if (ch === '"' || ch === "'")
+        quote = ch;
+      else if (ch === ">")
+        inTag = !1;
+      i++;
+      continue;
+    }
+    if (ch === "<") {
+      const end = match(html, i);
+      if (end > i) {
+        output += placeholder(html.slice(i, end), tokens.length);
+        tokens.push(html.slice(i, end));
+        i = end;
+        continue;
+      }
+      if (/^<\/?[a-zA-Z]/.test(html.slice(i, i + 2)))
+        inTag = !0;
+      output += ch;
+      i++;
+      continue;
+    }
+    output += ch;
+    i++;
+  }
+  return { output, tokens };
+}
+export function stashScriptElements(html) {
+  const { output, tokens } = maskAtElementPosition(html, matchScriptElement, (_token, index) => `\x00STX_SCRIPT_${index}\x00`);
+  return { output, scripts: tokens };
+}
+export function restoreStashedScripts(html, scripts) {
+  if (scripts.length === 0)
+    return html;
+  return html.replace(/\x00STX_SCRIPT_(\d+)\x00/g, (_, idx) => scripts[+idx] ?? "");
+}

package/dist/hydration-runtime.js

@@ -1,2 +1,195 @@
-// @bun
-import{mm as a,nm as b,om as c,pm as d}from"./chunk-6y4gqs1q.js";import"./chunk-3jm3snz8.js";export{a as generateHydrationBootstrap,b as generateComponentManifest,c as extractComponentName,d as extractBoundProps};
+export function generateHydrationBootstrap() {
+  return `<script data-stx-hydration-runtime>
+(function() {
+  'use strict';
+
+  var stxIslands = window.__stxIslands = window.__stxIslands || {
+    _registry: {},
+    _hydrated: new Set(),
+
+    register: function(name, loader) {
+      this._registry[name] = loader;
+    },
+
+    hydrateIsland: function(el) {
+      var id = el.getAttribute('data-island');
+      if (!id || this._hydrated.has(id)) return Promise.resolve();
+      this._hydrated.add(id);
+
+      var componentName = el.getAttribute('data-component');
+      var propsScript = el.querySelector('script[data-island-props="' + id + '"]');
+      var props = {};
+      if (propsScript) {
+        try { props = JSON.parse(propsScript.textContent || '{}'); }
+catch (e) {}
+      }
+
+      var loader = componentName ? this._registry[componentName] : null;
+
+      if (loader) {
+        return Promise.resolve(typeof loader === 'function' ? loader() : loader)
+          .then(function(mod) {
+            var comp = mod && mod.default ? mod.default : mod;
+            if (comp && comp.hydrate) {
+              return comp.hydrate(el, props);
+            }
+else if (comp && comp.mount) {
+              return comp.mount(el, props);
+            }
+          })
+          .then(function() {
+            el.classList.add('hydrated');
+            el.dispatchEvent(new CustomEvent('stx:hydrated', { bubbles: true }));
+          })
+          .catch(function(err) {
+            console.error('[stx] Hydration failed for island:', id, err);
+            el.classList.add('hydrated');
+            el.dispatchEvent(new CustomEvent('stx:hydrated', { bubbles: true }));
+          });
+      }
+
+      // No loader registered \u2014 just mark as hydrated (CSS-only island)
+      el.classList.add('hydrated');
+      el.dispatchEvent(new CustomEvent('stx:hydrated', { bubbles: true }));
+      return Promise.resolve();
+    },
+
+    _setupStrategy: function(el) {
+      var self = this;
+      var strategy = el.getAttribute('data-strategy') || 'load';
+
+      switch (strategy) {
+        case 'load':
+          self.hydrateIsland(el);
+          break;
+
+        case 'idle':
+          if ('requestIdleCallback' in window) {
+            requestIdleCallback(function() { self.hydrateIsland(el); }, { timeout: 2000 });
+          }
+else {
+            setTimeout(function() { self.hydrateIsland(el); }, 200);
+          }
+          break;
+
+        case 'visible':
+          if ('IntersectionObserver' in window) {
+            var rootMargin = el.getAttribute('data-root-margin') || '0px';
+            var threshold = parseFloat(el.getAttribute('data-threshold') || '0') || 0;
+            var obs = new IntersectionObserver(function(entries) {
+              entries.forEach(function(entry) {
+                if (entry.isIntersecting) {
+                  obs.disconnect();
+                  self.hydrateIsland(el);
+                }
+              });
+            }, { rootMargin: rootMargin, threshold: threshold });
+            obs.observe(el);
+          }
+else {
+            self.hydrateIsland(el);
+          }
+          break;
+
+        case 'media':
+          var mediaQuery = el.getAttribute('data-media') || '(min-width: 768px)';
+          var mq = window.matchMedia(mediaQuery);
+          if (mq.matches) {
+            self.hydrateIsland(el);
+          }
+else {
+            var handler = function(e) {
+              if (e.matches) {
+                mq.removeEventListener('change', handler);
+                self.hydrateIsland(el);
+              }
+            };
+            mq.addEventListener('change', handler);
+          }
+          break;
+
+        case 'hover':
+          var events = ['mouseenter', 'focusin', 'touchstart'];
+          var hoverHandler = function() {
+            events.forEach(function(e) { el.removeEventListener(e, hoverHandler); });
+            self.hydrateIsland(el);
+          };
+          events.forEach(function(e) {
+            el.addEventListener(e, hoverHandler, { once: true, passive: true });
+          });
+          break;
+
+        case 'event':
+          var eventName = el.getAttribute('data-event') || 'stx:activate';
+          window.addEventListener(eventName, function evtHandler(e) {
+            if (!e.detail || e.detail.id === el.getAttribute('data-island') || e.detail.id === '*') {
+              window.removeEventListener(eventName, evtHandler);
+              self.hydrateIsland(el);
+            }
+          });
+          break;
+
+        case 'only':
+          var tmpl = el.querySelector('template[data-client-content]');
+          if (tmpl) {
+            el.innerHTML = tmpl.innerHTML;
+          }
+          el.classList.add('hydrated');
+          break;
+
+        default:
+          self.hydrateIsland(el);
+      }
+    },
+
+    initIslands: function() {
+      var self = this;
+      var islands = document.querySelectorAll('.stx-island:not(.hydrated)');
+      islands.forEach(function(el) {
+        self._setupStrategy(el);
+      });
+    }
+  };
+
+  // Auto-init on DOMContentLoaded
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', function() { stxIslands.initIslands(); });
+  }
+else {
+    stxIslands.initIslands();
+  }
+})();
+</script>`;
+}
+export function generateComponentManifest(islands) {
+  if (islands.size === 0)
+    return "";
+  return `<script data-stx-island-manifest>
+(function() {
+  if (!window.__stxIslands) return;
+${Array.from(islands.entries()).map(([name, importPath]) => `  window.__stxIslands.register('${name}', function() { return import('${importPath}'); });`).join(`
+`)}
+})();
+</script>`;
+}
+export function extractComponentName(content) {
+  const pascalMatch = content.match(/<([A-Z][a-zA-Z0-9]+)[\s/>]/);
+  if (pascalMatch)
+    return pascalMatch[1];
+  const kebabMatch = content.match(/<([a-z][a-z0-9]*-[a-z0-9-]+)[\s/>]/);
+  if (kebabMatch)
+    return kebabMatch[1];
+  return null;
+}
+export function extractBoundProps(content, context) {
+  const props = {}, bindingRegex = /:([a-zA-Z_][\w-]*)\s*=\s*"([^"]+)"/g;
+  let match;
+  while ((match = bindingRegex.exec(content)) !== null) {
+    const propName = match[1], expr = match[2];
+    if (expr in context)
+      props[propName] = context[expr];
+    else
+      props[propName] = expr;
+  }
+  return props;
+}