@stacksjs/stx 0.2.94 → 0.2.96

package/dist/reactive-bindings.js

@@ -1,2 +1,266 @@
-// @bun
-import{Tt as a,Ut as b,Vt as c}from"./chunk-g2hekckm.js";import"./chunk-3jm3snz8.js";export{c as processTemplateBindings,a as processReactiveBindings,b as generateBindingsRuntime};
+import * as crypto from "node:crypto";
+function extractStoreRefs(expression) {
+  const storePattern = /\$(\w+)\./g, stores = [];
+  let match;
+  while ((match = storePattern.exec(expression)) !== null)
+    if (!stores.includes(match[1]))
+      stores.push(match[1]);
+  return stores;
+}
+function generateElementId() {
+  return `stx-${crypto.randomBytes(4).toString("hex")}`;
+}
+function hasStoreRefs(expression) {
+  return /\$\w+\./.test(expression);
+}
+export function processReactiveBindings(html) {
+  const bindings = [], stores = new Set, tagPattern = /<(\w+)([^>]*?)(\s*\/?>)/g;
+  let result = html;
+  result = result.replace(tagPattern, (match, tagName, attributes, closing) => {
+    if (["script", "style", "template"].includes(tagName.toLowerCase()))
+      return match;
+    const elementBindings = [];
+    let hasBindings = !1, processedAttrs = attributes;
+    const attrPattern = /(\w+(?:-\w+)*)\s*=\s*"([^"]*\{\{[^}]*\$\w+[^}]*\}\}[^"]*)"/g, attrMatches = [...attributes.matchAll(attrPattern)];
+    for (const attrMatch of attrMatches) {
+      const fullAttrMatch = attrMatch[0], attrName = attrMatch[1], attrValue = attrMatch[2];
+      if (hasStoreRefs(attrValue)) {
+        hasBindings = !0;
+        const exprMatch = attrValue.match(/\{\{\s*([\s\S]+?)\s*\}\}/);
+        if (exprMatch) {
+          const expression = exprMatch[1];
+          elementBindings.push({
+            attr: attrName,
+            expr: expression,
+            fullMatch: fullAttrMatch,
+            originalAttr: attrName
+          });
+          extractStoreRefs(expression).forEach((s) => stores.add(s));
+          if (attrName === "text")
+            processedAttrs = processedAttrs.replace(fullAttrMatch, "");
+          else if (attrName === "class")
+            processedAttrs = processedAttrs.replace(fullAttrMatch, 'class=""');
+          else if (attrName === "disabled" || attrName === "hidden")
+            processedAttrs = processedAttrs.replace(fullAttrMatch, "");
+          else
+            processedAttrs = processedAttrs.replace(fullAttrMatch, `${attrName}=""`);
+        }
+      }
+    }
+    if (!hasBindings)
+      return match;
+    const idMatch = processedAttrs.match(/\bid\s*=\s*"([^"]+)"/);
+    let elementId;
+    if (idMatch)
+      elementId = idMatch[1];
+    else {
+      elementId = generateElementId();
+      processedAttrs = ` id="${elementId}"${processedAttrs}`;
+    }
+    for (const binding of elementBindings)
+      bindings.push({
+        elementId,
+        attribute: binding.attr,
+        expression: binding.expr,
+        stores: extractStoreRefs(binding.expr)
+      });
+    return `<${tagName}${processedAttrs}${closing}`;
+  });
+  return { html: result, bindings, stores };
+}
+export function generateBindingsRuntime(bindings, stores) {
+  if (bindings.length === 0)
+    return "";
+  const storeNames = Array.from(stores);
+  let code = `
+<script>
+(function() {
+  'use strict';
+
+  // Wait for stores to be available
+  function initBindings() {
+    var stores = window.VoideStores;
+    if (!stores) {
+      setTimeout(initBindings, 10);
+      return;
+    }
+
+    // Store references for expressions
+    // eslint-disable-next-line pickier/no-unused-vars
+    var $state = {};
+`;
+  for (const storeName of storeNames)
+    code += `    $state.${storeName} = stores.${storeName} ? stores.${storeName}.get() : {};
+`;
+  code += `
+    // Binding update functions
+    function updateBindings() {
+`;
+  for (const binding of bindings) {
+    const { elementId, attribute, expression } = binding, evalExpr = expression.replace(/\$(\w+)\./g, "$state.$1.");
+    if (attribute === "text")
+      code += `      (function() {
+        var el = document.getElementById('${elementId}');
+        if (el) {
+          try {
+            el.textContent = ${evalExpr};
+          }
+catch (e) { console.error('Binding error:', e); }
+        }
+      })();
+`;
+    else if (attribute === "html")
+      code += `      (function() {
+        var el = document.getElementById('${elementId}');
+        if (el) {
+          try {
+            el.innerHTML = ${evalExpr};
+          }
+catch (e) { console.error('Binding error:', e); }
+        }
+      })();
+`;
+    else if (attribute === "class")
+      code += `      (function() {
+        var el = document.getElementById('${elementId}');
+        if (el) {
+          try {
+            var value = ${evalExpr};
+            if (typeof value === 'string') {
+              // Dynamic class string - merge with existing static classes
+              // eslint-disable-next-line pickier/no-unused-vars
+              var staticClasses = el.getAttribute('data-static-class') || el.className;
+              if (!el.hasAttribute('data-static-class')) {
+                el.setAttribute('data-static-class', el.className);
+              }
+              el.className = (el.getAttribute('data-static-class') + ' ' + value).trim();
+            }
+else if (typeof value === 'object') {
+              // Object syntax: { 'class-name': condition }
+              for (var cls in value) {
+                if (value[cls]) {
+                  el.classList.add(cls);
+                }
+else {
+                  el.classList.remove(cls);
+                }
+              }
+            }
+          }
+catch (e) { console.error('Binding error:', e); }
+        }
+      })();
+`;
+    else if (attribute === "show")
+      code += `      (function() {
+        var el = document.getElementById('${elementId}');
+        if (el) {
+          try {
+            el.style.display = (${evalExpr}) ? '' : 'none';
+          }
+catch (e) { console.error('Binding error:', e); }
+        }
+      })();
+`;
+    else if (attribute === "if")
+      code += `      (function() {
+        var el = document.getElementById('${elementId}');
+        if (el) {
+          try {
+            el.style.visibility = (${evalExpr}) ? 'visible' : 'hidden';
+          }
+catch (e) { console.error('Binding error:', e); }
+        }
+      })();
+`;
+    else
+      code += `      (function() {
+        var el = document.getElementById('${elementId}');
+        if (el) {
+          try {
+            var value = ${evalExpr};
+            if (value === false || value === null || value === undefined) {
+              el.removeAttribute('${attribute}');
+            }
+else if (value === true) {
+              el.setAttribute('${attribute}', '');
+            }
+else {
+              el.setAttribute('${attribute}', value);
+            }
+          }
+catch (e) { console.error('Binding error:', e); }
+        }
+      })();
+`;
+  }
+  code += `    }
+
+    // Subscribe to stores and update on changes. Capture the disposers so
+    // SPA fragment swaps can tear down old bindings before the next page's
+    // runtime takes over \u2014 without this, every navigation between pages
+    // using reactive-bindings stacked another subscription on every store,
+    // walking detached DOM forever. See stacksjs/stx#1709.
+    var _disposers = [];
+`;
+  for (const storeName of storeNames)
+    code += `    if (stores.${storeName}) {
+      var _unsub_${storeName} = stores.${storeName}.subscribe(function(state) {
+        $state.${storeName} = state;
+        updateBindings();
+      });
+      // store.subscribe() may return the disposer (preferred) or void; both
+      // are tolerated here.
+      if (typeof _unsub_${storeName} === 'function') _disposers.push(_unsub_${storeName});
+    }
+`;
+  code += `
+    // Initial update
+    updateBindings();
+
+    // Register this runtime's cleanup so SPA navigation can run it before
+    // swapping pages. The router (and any code) can call
+    // window.__stxCleanupBindings() to dispose subscriptions; we also wire
+    // 'popstate' and 'beforeunload' as a safety net for browser-driven nav.
+    function _cleanup() {
+      for (var i = 0; i < _disposers.length; i++) {
+        try { _disposers[i](); } catch (e) { /* swallow */ }
+      }
+      _disposers.length = 0;
+    }
+    if (!window.__stxBindingsCleanups) window.__stxBindingsCleanups = [];
+    window.__stxBindingsCleanups.push(_cleanup);
+    if (!window.__stxCleanupBindings) {
+      window.__stxCleanupBindings = function() {
+        var fns = window.__stxBindingsCleanups || [];
+        for (var i = 0; i < fns.length; i++) {
+          try { fns[i](); } catch (e) { /* swallow */ }
+        }
+        window.__stxBindingsCleanups = [];
+      };
+      window.addEventListener('popstate', window.__stxCleanupBindings);
+      window.addEventListener('beforeunload', window.__stxCleanupBindings);
+    }
+  }
+
+  // Start when DOM is ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initBindings);
+  }
+else {
+    initBindings();
+  }
+})();
+</script>
+`;
+  return code;
+}
+export function processTemplateBindings(html) {
+  const { html: processedHtml, bindings, stores } = processReactiveBindings(html);
+  if (bindings.length === 0)
+    return html;
+  const runtime = generateBindingsRuntime(bindings, stores), bodyIdx = processedHtml.lastIndexOf("</body>");
+  if (bodyIdx !== -1)
+    return processedHtml.slice(0, bodyIdx) + runtime + processedHtml.slice(bodyIdx);
+  return processedHtml + runtime;
+}