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

package/dist/reactive.js

@@ -0,0 +1,593 @@
+import { evaluateExpression } from "./expressions.js";
+let scopeCounter = 0, elementCounter = 0;
+function escapeRegex(str) {
+  return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function extractAttributeValue(attributesStr, attrName) {
+  const doubleMatch = attributesStr.match(new RegExp(`${attrName}\\s*=\\s*"([^"]*)"`, "i"));
+  if (doubleMatch)
+    return doubleMatch[1];
+  const singleMatch = attributesStr.match(new RegExp(`${attrName}\\s*=\\s*'([^']*)'`, "i"));
+  if (singleMatch)
+    return singleMatch[1];
+  return null;
+}
+function findReactiveScopes(template) {
+  const scopes = [], xDataRegex = /<([a-z][a-z0-9-]*)\s+([^>]*x-data\s*=\s*(?:"[^"]*"|'[^']*')[^>]*)>/gi;
+  let match;
+  while ((match = xDataRegex.exec(template)) !== null) {
+    const [fullMatch, tagName, attributesStr] = match, startIndex = match.index, stateExpr = extractAttributeValue(attributesStr, "x-data");
+    if (!stateExpr)
+      continue;
+    const scopeId = `__stx_scope_${scopeCounter++}`, initExpr = extractAttributeValue(attributesStr, "x-init"), closingTag = findClosingTag(template, tagName, startIndex + fullMatch.length), scopeContent = template.slice(startIndex, closingTag.endIndex), refs = findRefsInScope(scopeContent);
+    scopes.push({
+      id: scopeId,
+      selector: `[data-stx-scope="${scopeId}"]`,
+      stateExpr,
+      initExpr,
+      bindings: [],
+      refs
+    });
+  }
+  return scopes;
+}
+function findClosingTag(template, tagName, startFrom) {
+  let depth = 1, pos = startFrom;
+  const openPattern = new RegExp(`<${tagName}(?:\\s|>)`, "gi"), closePattern = new RegExp(`</${tagName}>`, "gi"), selfClosePattern = new RegExp(`<${tagName}[^>]*/\\s*>`, "gi");
+  while (depth > 0 && pos < template.length) {
+    openPattern.lastIndex = pos;
+    closePattern.lastIndex = pos;
+    selfClosePattern.lastIndex = pos;
+    const openMatch = openPattern.exec(template), closeMatch = closePattern.exec(template), selfCloseMatch = selfClosePattern.exec(template);
+    if (selfCloseMatch && selfCloseMatch.index < (openMatch?.index ?? 1 / 0)) {
+      pos = selfCloseMatch.index + selfCloseMatch[0].length;
+      continue;
+    }
+    if (!closeMatch)
+      return { endIndex: template.length };
+    if (openMatch && openMatch.index < closeMatch.index) {
+      depth++;
+      pos = openMatch.index + openMatch[0].length;
+    } else {
+      depth--;
+      if (depth === 0)
+        return { endIndex: closeMatch.index + closeMatch[0].length };
+      pos = closeMatch.index + closeMatch[0].length;
+    }
+  }
+  return { endIndex: template.length };
+}
+function findBindingsInScope(scopeContent, _scopeStart) {
+  const bindings = [];
+  let content = scopeContent.replace(/x-data\s*=\s*"[^"]*"/gi, 'x-data="__stripped__"').replace(/x-data\s*=\s*'[^']*'/gi, "x-data='__stripped__'");
+  function findBindings(attrName, type) {
+    const doubleRegex = new RegExp(`<([a-z][a-z0-9-]*)\\s+([^>]*${attrName}\\s*=\\s*"([^"]*)"[^>]*)>`, "gi");
+    let match;
+    while ((match = doubleRegex.exec(content)) !== null) {
+      const [, tagName, attributesStr, expression] = match, elementId = extractOrGenerateId(attributesStr), inputType = type === "model" ? extractInputType(attributesStr, tagName) : void 0, transition = type === "show" || type === "hide" ? extractTransitionConfig(attributesStr) : void 0;
+      bindings.push({ elementId, type, expression, inputType, transition });
+    }
+    const singleRegex = new RegExp(`<([a-z][a-z0-9-]*)\\s+([^>]*${attrName}\\s*=\\s*'([^']*)'[^>]*)>`, "gi");
+    while ((match = singleRegex.exec(content)) !== null) {
+      const [, tagName, attributesStr, expression] = match, elementId = extractOrGenerateId(attributesStr), inputType = type === "model" ? extractInputType(attributesStr, tagName) : void 0, transition = type === "show" || type === "hide" ? extractTransitionConfig(attributesStr) : void 0;
+      bindings.push({ elementId, type, expression, inputType, transition });
+    }
+  }
+  findBindings("x-model", "model");
+  findBindings("x-show", "show");
+  findBindings("x-hide", "hide");
+  findBindings("x-text", "text");
+  findBindings("x-html", "html");
+  const bindDoubleRegex = /<[a-z][a-z0-9-]*\s+([^>]*(?:x-bind:|:)([a-z][a-z0-9-]*)\s*=\s*"([^"]*)"[^>]*)>/gi;
+  let match;
+  while ((match = bindDoubleRegex.exec(content)) !== null) {
+    const [, attributesStr, attribute, expression] = match, elementId = extractOrGenerateId(attributesStr);
+    bindings.push({
+      elementId,
+      type: attribute === "class" ? "class" : attribute === "style" ? "style" : "bind",
+      expression,
+      attribute
+    });
+  }
+  const bindSingleRegex = /<[a-z][a-z0-9-]*\s+([^>]*(?:x-bind:|:)([a-z][a-z0-9-]*)\s*=\s*'([^']*)'[^>]*)>/gi;
+  while ((match = bindSingleRegex.exec(content)) !== null) {
+    const [, attributesStr, attribute, expression] = match, elementId = extractOrGenerateId(attributesStr);
+    bindings.push({
+      elementId,
+      type: attribute === "class" ? "class" : attribute === "style" ? "style" : "bind",
+      expression,
+      attribute
+    });
+  }
+  const tagRegex = /<([a-z][a-z0-9-]*)((?:\s+(?:[^>"']|"[^"]*"|'[^']*')*)*)>/gis;
+  let tagMatch;
+  while ((tagMatch = tagRegex.exec(content)) !== null) {
+    const attrsStr = tagMatch[2];
+    if (!attrsStr)
+      continue;
+    const eventAttrRegex = /@([a-z]+(?:\.[a-z]+)*)\s*=\s*"([\s\S]*?)"/gi;
+    let evtMatch;
+    while ((evtMatch = eventAttrRegex.exec(attrsStr)) !== null) {
+      const [, eventAttr, expression] = evtMatch, elementId = extractOrGenerateId(attrsStr);
+      bindings.push({
+        elementId,
+        type: "event",
+        expression: expression.replace(/\s+/g, " ").trim(),
+        attribute: eventAttr
+      });
+    }
+    const eventAttrSingleRegex = /@([a-z]+(?:\.[a-z]+)*)\s*=\s*'([\s\S]*?)'/gi;
+    while ((evtMatch = eventAttrSingleRegex.exec(attrsStr)) !== null) {
+      const [, eventAttr, expression] = evtMatch, elementId = extractOrGenerateId(attrsStr);
+      bindings.push({
+        elementId,
+        type: "event",
+        expression: expression.replace(/\s+/g, " ").trim(),
+        attribute: eventAttr
+      });
+    }
+  }
+  return bindings;
+}
+function findRefsInScope(scopeContent) {
+  const refs = new Map, content = scopeContent.replace(/x-data\s*=\s*"[^"]*"/gi, 'x-data="__stripped__"').replace(/x-data\s*=\s*'[^']*'/gi, "x-data='__stripped__'"), refRegex = /<[a-z][a-z0-9-]*\s+([^>]*x-ref\s*=\s*["']([^"']*)["'][^>]*)>/gi;
+  let match;
+  while ((match = refRegex.exec(content)) !== null) {
+    const [, attributesStr, refName] = match, elementId = extractOrGenerateId(attributesStr);
+    refs.set(refName, elementId);
+  }
+  return refs;
+}
+function extractOrGenerateId(attributesStr) {
+  const idMatch = attributesStr.match(/\bid\s*=\s*["']([^"']*)["']/);
+  if (idMatch)
+    return idMatch[1];
+  return `__stx_el_${elementCounter++}`;
+}
+function extractInputType(attributesStr, tagName) {
+  if (tagName.toLowerCase() === "select")
+    return "select";
+  if (tagName.toLowerCase() === "textarea")
+    return "textarea";
+  const typeMatch = attributesStr.match(/\btype\s*=\s*["']([^"']*)["']/);
+  return typeMatch ? typeMatch[1].toLowerCase() : "text";
+}
+function extractTransitionConfig(attributesStr) {
+  if (/\bx-transition(?:\s|>|$|=)/.test(attributesStr)) {
+    const config = { enabled: !0 };
+    if (/\bx-transition(?:\s|>|$)/.test(attributesStr) && !/\bx-transition\s*=/.test(attributesStr))
+      return config;
+    const enterMatch = attributesStr.match(/x-transition:enter\s*=\s*["']([^"']*)["']/);
+    if (enterMatch)
+      config.enter = enterMatch[1];
+    const enterStartMatch = attributesStr.match(/x-transition:enter-start\s*=\s*["']([^"']*)["']/);
+    if (enterStartMatch)
+      config.enterStart = enterStartMatch[1];
+    const enterEndMatch = attributesStr.match(/x-transition:enter-end\s*=\s*["']([^"']*)["']/);
+    if (enterEndMatch)
+      config.enterEnd = enterEndMatch[1];
+    const leaveMatch = attributesStr.match(/x-transition:leave\s*=\s*["']([^"']*)["']/);
+    if (leaveMatch)
+      config.leave = leaveMatch[1];
+    const leaveStartMatch = attributesStr.match(/x-transition:leave-start\s*=\s*["']([^"']*)["']/);
+    if (leaveStartMatch)
+      config.leaveStart = leaveStartMatch[1];
+    const leaveEndMatch = attributesStr.match(/x-transition:leave-end\s*=\s*["']([^"']*)["']/);
+    if (leaveEndMatch)
+      config.leaveEnd = leaveEndMatch[1];
+    const durationMatch = attributesStr.match(/x-transition\.duration\.(\d+)(?:ms)?/);
+    if (durationMatch)
+      config.duration = parseInt(durationMatch[1], 10);
+    return config;
+  }
+  return;
+}
+function generateReactiveRuntime() {
+  return `
+// STX Reactive Runtime - x-cloak and transition CSS
+(function() {
+  var style = document.createElement('style');
+  style.textContent = [
+    '[x-cloak] { display: none !important; }',
+    // Default transition classes
+    '.stx-enter { opacity: 0; transform: scale(0.95); }',
+    '.stx-enter-start { opacity: 0; transform: scale(0.95); }',
+    '.stx-enter-active { transition: opacity 150ms ease-out, transform 150ms ease-out; }',
+    '.stx-enter-to { opacity: 1; transform: scale(1); }',
+    '.stx-leave { opacity: 1; transform: scale(1); }',
+    '.stx-leave-start { opacity: 1; transform: scale(1); }',
+    '.stx-leave-active { transition: opacity 100ms ease-in, transform 100ms ease-in; }',
+    '.stx-leave-to { opacity: 0; transform: scale(0.95); }'
+  ].join('\\n');
+  document.head.appendChild(style);
+})();
+
+// STX Reactive Runtime
+/* eslint-disable pickier/no-unused-vars, no-console, prefer-const */
+window.__stx_reactive = (function() {
+  'use strict';
+
+  // Deep reactive proxy that triggers onChange for any mutation
+  function reactive(obj, onChange) {
+    if (!obj || typeof obj !== 'object') return obj;
+    return new Proxy(obj, {
+      get(target, prop) {
+        const value = target[prop];
+        if (value && typeof value === 'object' && !Array.isArray(value) && !(value instanceof Promise)) {
+          return reactive(value, onChange);
+        }
+        return value;
+      },
+      set(target, prop, value) {
+        target[prop] = value;
+        onChange(prop, value);
+        return true;
+      }
+    });
+  }
+
+  // Initialize an x-data scope: parse state, run init(), register into window.stx._scopes,
+  // then let the signals runtime handle all directive processing (x-for, x-text, :bind, etc.)
+  function initScope(scopeEl, initialState, bindings, refs, initExpr) {
+    // Parse initial state (may contain methods including async init())
+    var state;
+    try {
+      state = new Function('return (' + initialState + ')')();
+    } catch (e) {
+      console.error('[stx-reactive] Invalid x-data:', initialState, e);
+      return;
+    }
+
+    // Build $refs object
+    var $refs = {};
+    for (var name in refs) {
+      if (Object.prototype.hasOwnProperty.call(refs, name)) {
+        (function(refName, refId) {
+          Object.defineProperty($refs, refName, {
+            get: function() { return document.getElementById(refId); }
+          });
+        })(name, refs[name]);
+      }
+    }
+
+    // Extract init method from state if present (Alpine.js convention)
+    var initMethod = state.init;
+    if (typeof initMethod === 'function') {
+      delete state.init;
+    }
+
+    // Make state reactive \u2014 mutations trigger re-render via signals
+    var scopeId = scopeEl.getAttribute('data-stx-scope');
+    var stx = window.stx;
+
+    // Create signals for each state property so the signals runtime can track dependencies
+    var signalState = {};
+    var rawState = {};
+    for (var key in state) {
+      if (Object.prototype.hasOwnProperty.call(state, key)) {
+        if (typeof state[key] === 'function') {
+          // Methods \u2014 bind to a proxy so 'this.prop = val' triggers signal updates
+          signalState[key] = state[key];
+        } else {
+          // Data properties \u2014 wrap in signals for reactivity
+          signalState[key] = stx.state(state[key]);
+          rawState[key] = true;
+        }
+      }
+    }
+
+    // Create a proxy context that auto-unwraps signals and writes back through them.
+    // Methods get 'this' bound to this proxy so this.foo = bar triggers reactivity.
+    var ctx = {};
+    var ctxProxy = new Proxy(ctx, {
+      get: function(target, prop) {
+        if (prop === '$refs') return $refs;
+        if (prop === '$el') return scopeEl;
+        if (prop === '$nextTick') return function(fn) { requestAnimationFrame(fn); };
+        var s = signalState[prop];
+        if (!s) return undefined;
+        if (rawState[prop] && s && typeof s === 'function' && typeof s.value !== 'undefined') {
+          return s.value; // unwrap signal
+        }
+        if (typeof s === 'function' && !rawState[prop]) {
+          return s.bind(ctxProxy); // bind methods to proxy
+        }
+        return s;
+      },
+      set: function(target, prop, value) {
+        var s = signalState[prop];
+        if (rawState[prop] && s && typeof s === 'function') {
+          s.value = value; // write through signal \u2014 triggers effects
+        } else {
+          signalState[prop] = value;
+        }
+        return true;
+      },
+      has: function(target, prop) {
+        return prop in signalState || prop === '$refs' || prop === '$el' || prop === '$nextTick';
+      },
+      ownKeys: function() {
+        return Object.keys(signalState).concat(['$refs', '$el', '$nextTick']);
+      },
+      getOwnPropertyDescriptor: function(target, prop) {
+        if (prop in signalState || prop === '$refs' || prop === '$el' || prop === '$nextTick') {
+          return { configurable: true, enumerable: true, writable: true, value: ctxProxy[prop] };
+        }
+        return undefined;
+      }
+    });
+
+    // Build scope vars for the signals runtime \u2014 it reads these for expression evaluation.
+    // We need to provide getter/setter descriptors so signals track properly.
+    var scopeVars = {};
+    for (var k in signalState) {
+      if (Object.prototype.hasOwnProperty.call(signalState, k)) {
+        if (rawState[k]) {
+          // Data: expose the signal directly so expressions trigger dependency tracking
+          scopeVars[k] = signalState[k];
+        } else {
+          // Method: bind to ctxProxy so 'this' works
+          scopeVars[k] = (typeof signalState[k] === 'function') ? signalState[k].bind(ctxProxy) : signalState[k];
+        }
+      }
+    }
+    scopeVars.$refs = $refs;
+    scopeVars.$el = scopeEl;
+    scopeVars.$nextTick = function(fn) { requestAnimationFrame(fn); };
+
+    // Register scope \u2014 merge with any existing vars from partial signal scripts
+    if (!stx._scopes) stx._scopes = {};
+    stx._scopes[scopeId] = Object.assign(stx._scopes[scopeId] || {}, scopeVars);
+
+    // Store on element for findElementScope
+    scopeEl.__stx_scope = scopeVars;
+
+    // Run init() if present (supports async)
+    function runInit() {
+      var maybePromise;
+      if (initMethod) {
+        maybePromise = initMethod.call(ctxProxy);
+      }
+      if (initExpr) {
+        try {
+          var keys = Object.keys(scopeVars);
+          var vals = keys.map(function(k) { return scopeVars[k]; });
+          var fn = new Function(keys.join(','), initExpr);
+          var result = fn.apply(ctxProxy, vals);
+          if (result && typeof result.then === 'function') maybePromise = result;
+        } catch (e) {
+          console.warn('[stx-reactive] init expression error:', e);
+        }
+      }
+      // If init is async, signal updates will trigger effects automatically
+      // when init() resolves and sets this.prop = value (writes through signal)
+      if (maybePromise && typeof maybePromise.then === 'function') {
+        maybePromise.catch(function(e) {
+          console.error('[stx-reactive] async init() error:', e);
+        });
+      }
+    }
+
+    // Run init before the signals runtime processes this scope
+    runInit();
+
+    // Expose for debugging
+    scopeEl.__stx_state = ctxProxy;
+    scopeEl.__stx_execute = function(stmt, $event, $el) {
+      try {
+        // Run the statement with the reactive proxy as the lexical scope.
+        // Wrapping in a with-block on the proxy makes bare reads/writes go
+        // through it (so foo = bar triggers signal.set()) instead of treating
+        // each state key as a local function parameter \u2014 bare assignments
+        // would otherwise just rebind the local and never reach the signal.
+        var fn = new Function('$event', '$el', 'with(this){' + stmt + ';}');
+        fn.call(ctxProxy, $event, $el);
+      } catch (e) {
+        console.warn('[stx-reactive] execute error:', e);
+      }
+    };
+  }
+
+  return { initScope: initScope, reactive: reactive };
+})();
+`;
+}
+function substituteExpressionsInExpr(expr, context) {
+  const source = expr.replace(/\{!!([\s\S]*?)!!\}/g, (match, inner) => {
+    try {
+      const value = evaluateExpression(inner, context, !0);
+      if (value === void 0)
+        return match;
+      return String(value);
+    } catch {
+      return match;
+    }
+  });
+  let out = "", index = 0, quote = null;
+  while (index < source.length) {
+    const character = source[index];
+    if (quote && character === "\\") {
+      out += character + (source[index + 1] ?? "");
+      index += 2;
+      continue;
+    }
+    if (character === "{" && source[index + 1] === "{") {
+      const end = source.indexOf("}}", index + 2);
+      if (end !== -1) {
+        const match = source.slice(index, end + 2);
+        out += splice(source.slice(index + 2, end), match, quote);
+        index = end + 2;
+        continue;
+      }
+    }
+    if (quote) {
+      if (character === quote)
+        quote = null;
+    } else if (character === "'" || character === '"' || character === "`")
+      quote = character;
+    out += character;
+    index++;
+  }
+  return out;
+  function splice(inner, match, insideQuote) {
+    let value;
+    try {
+      value = evaluateExpression(inner, context, !0);
+    } catch {
+      return match;
+    }
+    if (value === void 0)
+      return match;
+    if (insideQuote) {
+      const text = String(value).replace(/\\/g, "\\\\").replace(new RegExp(insideQuote === "`" ? "`" : insideQuote, "g"), `\\${insideQuote}`).replace(/\r/g, "\\r").replace(/\n/g, "\\n");
+      return insideQuote === "`" ? text.replace(/\$\{/g, "\\${") : text;
+    }
+    if (typeof value === "string") {
+      const trimmed = value.trim();
+      if (trimmed.startsWith("{") && trimmed.endsWith("}") || trimmed.startsWith("[") && trimmed.endsWith("]"))
+        try {
+          JSON.parse(trimmed);
+          return trimmed;
+        } catch {}
+    }
+    return JSON.stringify(value);
+  }
+}
+function generateScopeInitializers(scopes, context) {
+  if (scopes.length === 0)
+    return "";
+  const initializers = scopes.map((scope) => {
+    const refsJson = JSON.stringify(Object.fromEntries(scope.refs)), resolvedStateExpr = substituteExpressionsInExpr(scope.stateExpr, context), resolvedInitExpr = scope.initExpr ? substituteExpressionsInExpr(scope.initExpr, context) : null, stateExprJson = JSON.stringify(resolvedStateExpr), initExprJson = resolvedInitExpr ? JSON.stringify(resolvedInitExpr) : "null";
+    return `
+  (function() {
+    var scopeEl = document.querySelector('${scope.selector}');
+    if (!scopeEl) return;
+    var refs = ${refsJson};
+    __stx_reactive.initScope(scopeEl, ${stateExprJson}, [], refs, ${initExprJson});
+  })();`;
+  }).join(`
+`);
+  return `
+<script data-stx-scoped data-stx-reactive data-stx-run="always">
+${generateReactiveRuntime()}
+${initializers}
+</script>`;
+}
+function addIdsToElements(template, pattern) {
+  const tagRegex = new RegExp(`<([a-z][a-z0-9-]*)\\s+([^>]*${pattern.source}[^>]*)>`, "gi");
+  return template.replace(tagRegex, (match, tagName, attrs) => {
+    if (/\bid\s*=\s*["']/.test(attrs))
+      return match;
+    const newId = `__stx_el_${elementCounter++}`;
+    return `<${tagName} id="${newId}" ${attrs}>`;
+  });
+}
+function removeReactiveAttributes(template) {
+  let output = template;
+  const attrsToRemove = [
+    /\s*x-data\s*=\s*"[^"]*"/g,
+    /\s*x-init\s*=\s*"[^"]*"/g,
+    /\s*x-model\s*=\s*"[^"]*"/g,
+    /\s*x-show\s*=\s*"[^"]*"/g,
+    /\s*x-hide\s*=\s*"[^"]*"/g,
+    /\s*x-text\s*=\s*"[^"]*"/g,
+    /\s*x-html\s*=\s*"[^"]*"/g,
+    /\s*x-ref\s*=\s*"[^"]*"/g,
+    /\s*x-bind:[a-z][a-z0-9-]*\s*=\s*"[^"]*"/g,
+    /\s*:(?!click|dblclick|submit|input|change|keydown|keyup|keypress|focus|blur|mousedown|mouseup|mousemove|mouseenter|mouseleave|scroll|resize|touchstart|touchend|touchmove|contextmenu|wheel|pointerdown|pointerup|pointermove|if|for|show|model|class|text|html|ref|style)[a-z][a-z0-9-]*\s*=\s*"[^"]*"/g,
+    /\s*x-transition:enter\s*=\s*"[^"]*"/g,
+    /\s*x-transition:enter-start\s*=\s*"[^"]*"/g,
+    /\s*x-transition:enter-end\s*=\s*"[^"]*"/g,
+    /\s*x-transition:leave\s*=\s*"[^"]*"/g,
+    /\s*x-transition:leave-start\s*=\s*"[^"]*"/g,
+    /\s*x-transition:leave-end\s*=\s*"[^"]*"/g,
+    /\s*x-transition\s*=\s*"[^"]*"/g,
+    /\s*x-data\s*=\s*'[^']*'/g,
+    /\s*x-init\s*=\s*'[^']*'/g,
+    /\s*x-model\s*=\s*'[^']*'/g,
+    /\s*x-show\s*=\s*'[^']*'/g,
+    /\s*x-hide\s*=\s*'[^']*'/g,
+    /\s*x-text\s*=\s*'[^']*'/g,
+    /\s*x-html\s*=\s*'[^']*'/g,
+    /\s*x-ref\s*=\s*'[^']*'/g,
+    /\s*x-bind:[a-z][a-z0-9-]*\s*=\s*'[^']*'/g,
+    /\s*:(?!click|dblclick|submit|input|change|keydown|keyup|keypress|focus|blur|mousedown|mouseup|mousemove|mouseenter|mouseleave|scroll|resize|touchstart|touchend|touchmove|contextmenu|wheel|pointerdown|pointerup|pointermove|if|for|show|model|class|text|html|ref|style)[a-z][a-z0-9-]*\s*=\s*'[^']*'/g,
+    /\s*x-transition:enter\s*=\s*'[^']*'/g,
+    /\s*x-transition:enter-start\s*=\s*'[^']*'/g,
+    /\s*x-transition:enter-end\s*=\s*'[^']*'/g,
+    /\s*x-transition:leave\s*=\s*'[^']*'/g,
+    /\s*x-transition:leave-start\s*=\s*'[^']*'/g,
+    /\s*x-transition:leave-end\s*=\s*'[^']*'/g,
+    /\s*x-transition\s*=\s*'[^']*'/g,
+    /\s*x-transition\.duration\.\d+(?:ms)?/g,
+    /\s*x-transition(?=[\s>\/])/g,
+    /\s*@(?!for\b|if\b|show\b|model\b|class\b|style\b)[a-z]+(?:\.[a-z]+)*\s*=\s*"[^"]*"/gs,
+    /\s*@(?!for\b|if\b|show\b|model\b|class\b|style\b)[a-z]+(?:\.[a-z]+)*\s*=\s*'[^']*'/gs
+  ];
+  for (const regex of attrsToRemove)
+    output = output.replace(regex, "");
+  return output;
+}
+export function processReactiveDirectives(template, context, _filePath) {
+  if (!hasReactiveDirectives(template))
+    return template;
+  const scopes = findReactiveScopes(template);
+  if (scopes.length === 0)
+    return template;
+  let output = finalizeTemplate(template, scopes);
+  const script = generateScopeInitializers(scopes, context), bodyCloseIdx = output.lastIndexOf("</body>");
+  if (bodyCloseIdx !== -1)
+    output = output.slice(0, bodyCloseIdx) + script + `
+` + output.slice(bodyCloseIdx);
+  else
+    output += script;
+  return output;
+}
+function addAllReactiveIds(template) {
+  let output = template;
+  elementCounter = 0;
+  const xDataPlaceholders = [];
+  output = output.replace(/x-data\s*=\s*"[^"]*"/gi, (match) => {
+    const idx = xDataPlaceholders.length;
+    xDataPlaceholders.push(match);
+    return `__XDATA_PLACEHOLDER_${idx}__`;
+  });
+  output = output.replace(/x-data\s*=\s*'[^']*'/gi, (match) => {
+    const idx = xDataPlaceholders.length;
+    xDataPlaceholders.push(match);
+    return `__XDATA_PLACEHOLDER_${idx}__`;
+  });
+  output = addIdsToElements(output, /x-model\s*=\s*["']/);
+  output = addIdsToElements(output, /x-show\s*=\s*["']/);
+  output = addIdsToElements(output, /x-hide\s*=\s*["']/);
+  output = addIdsToElements(output, /x-text\s*=\s*["']/);
+  output = addIdsToElements(output, /x-html\s*=\s*["']/);
+  output = addIdsToElements(output, /(?:x-bind:|:)[a-z]/);
+  output = addIdsToElements(output, /x-ref\s*=\s*["']/);
+  output = addIdsToElements(output, /@[a-z]+(?:\.[a-z]+)*\s*=\s*["']/);
+  for (let i = 0;i < xDataPlaceholders.length; i++)
+    output = output.replace(`__XDATA_PLACEHOLDER_${i}__`, xDataPlaceholders[i]);
+  return output;
+}
+function finalizeTemplate(template, scopes) {
+  let index = 0, output = template.replace(/<([a-z][a-z0-9-]*)(\s+[^>]*x-data\s*=\s*(?:"[^"]*"|'[^']*')[^>]*)>/gi, (match, tagName, attributes) => {
+    const scope = scopes[index++];
+    if (!scope)
+      return match;
+    const existing = /data-stx-scope="([^"]*)"/.exec(attributes);
+    if (existing) {
+      scope.id = existing[1];
+      scope.selector = `[data-stx-scope="${scope.id}"]`;
+      return match;
+    }
+    return `<${tagName} data-stx-scope="${scope.id}"${attributes}>`;
+  });
+  output = output.replace(/\s*x-data\s*=\s*"([^"]*)"/g, ' data-stx-xdata="$1"');
+  output = output.replace(/\s*x-data\s*=\s*'([^']*)'/g, " data-stx-xdata='$1'");
+  output = output.replace(/\s*x-init\s*=\s*"([^"]*)"/g, ' data-stx-xinit="$1"');
+  output = output.replace(/\s*x-init\s*=\s*'([^']*)'/g, " data-stx-xinit='$1'");
+  return output;
+}
+export function hasReactiveDirectives(template) {
+  return /x-data\s*=\s*["']/.test(template);
+}