@daz4126/helium 1.0.0-beta.2 → 1.0.0-beta.4

package/helium-lite.js

@@ -4,19 +4,47 @@
  * No AJAX, no @import, no SSE, no Turbo
  */
 
-const parseEx = v => { try { return Function(`return(${v})`)() } catch { return v } };
-const tryNum = v => { const t = String(v).trim(), n = +t; return t && !isNaN(n) ? n : v };
-const isValidIdentifier = v => /^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(v);
-const RESERVED = new Set(['undefined', 'null', 'true', 'false', 'NaN', 'Infinity', 'this', 'arguments']);
-const KEY_MODS = { shift: "shiftKey", ctrl: "ctrlKey", alt: "altKey", meta: "metaKey" };
-const debounce = (f, d) => { let t; return (...a) => (clearTimeout(t), t = setTimeout(f, d, ...a)) };
+const parseEx = (v) => {
+  try {
+    return Function(`return(${v})`)();
+  } catch {
+    return v;
+  }
+};
+const tryNum = (v) => {
+  const t = String(v).trim(),
+    n = +t;
+  return t && !isNaN(n) ? n : v;
+};
+const isValidIdentifier = (v) => /^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(v);
+const RESERVED = new Set([
+  "undefined",
+  "null",
+  "true",
+  "false",
+  "NaN",
+  "Infinity",
+  "this",
+  "arguments",
+]);
+const KEY_MODS = {
+  shift: "shiftKey",
+  ctrl: "ctrlKey",
+  alt: "altKey",
+  meta: "metaKey",
+};
+const debounce = (f, d) => {
+  let t;
+  return (...a) => (clearTimeout(t), (t = setTimeout(f, d, ...a)));
+};
 
 const ATTR_REGEX = /^(@|:|data-he)/;
 
 const match = (name, ...attrs) => {
   const p = name.split(/[.:]/)[0];
-  if (p === ":" || p === "") return false;
-  return attrs.some(a => p === `@${a}` || p === `data-he-${a}`);
+  return p == ":" || p == ""
+    ? false
+    : attrs.some((a) => p === `@${a}` || p === `data-he-${a}`);
 };
 
 let HELIUM = null;
@@ -24,8 +52,13 @@ let HELIUM = null;
 async function helium(initialState = {}) {
   const inits = [];
   const ALL = Symbol("all");
-  const root = document.querySelector('[\\@helium]') || document.querySelector('[data-helium]') || document.body;
-  const storageKey = root.getAttribute('@local-storage') || root.getAttribute('data-he-local-storage');
+  const root =
+    document.querySelector("[\\@helium]") ||
+    document.querySelector("[data-helium]") ||
+    document.body;
+  const storageKey =
+    root.getAttribute("@local-storage") ||
+    root.getAttribute("data-he-local-storage");
 
   if (!HELIUM) {
     HELIUM = {
@@ -36,12 +69,14 @@ async function helium(initialState = {}) {
       processed: new WeakSet(),
       parentKeys: new WeakMap(),
       fnCache: new Map(),
-      proxyCache: new WeakMap()
+      proxyCache: new WeakMap(),
     };
   }
 
-  const $ = s => document.querySelector(s);
-  const html = s => Object.assign(document.createElement("template"), { innerHTML: s.trim() }).content.firstChild;
+  const $ = (s) => document.querySelector(s);
+  const html = (s) =>
+    Object.assign(document.createElement("template"), { innerHTML: s.trim() })
+      .content.firstChild;
 
   const applyingBindings = new Set();
 
@@ -57,9 +92,9 @@ async function helium(initialState = {}) {
 
   const handler = {
     has(t, p) {
-      if (typeof p === 'string' && p.startsWith('$')) return false;
+      if (typeof p === "string" && p.startsWith("$")) return false;
       if (Reflect.has(t, p)) return true;
-      if (typeof globalThis[p] !== 'undefined') return false;
+      if (typeof globalThis[p] !== "undefined") return false;
       return true;
     },
     get(t, p, r) {
@@ -81,21 +116,16 @@ async function helium(initialState = {}) {
       HELIUM.bindings.get(ALL)?.forEach(safeApplyBinding);
       if (storageKey) localStorage.setItem(storageKey, JSON.stringify(state));
       return res;
-    }
+    },
   };
 
   const state = new Proxy({}, handler);
-  if (storageKey) try { Object.assign(state, JSON.parse(localStorage.getItem(storageKey))); } catch {}
+  if (storageKey)
+    try {
+      Object.assign(state, JSON.parse(localStorage.getItem(storageKey)));
+    } catch {}
   Object.assign(state, initialState);
 
-  const getRefsObject = () => {
-    const refs = {};
-    for (const [name, element] of HELIUM.refs) {
-      refs[name] = element;
-    }
-    return refs;
-  };
-
   const createScope = (el, event = {}) => {
     return {
       $,
@@ -103,7 +133,7 @@ async function helium(initialState = {}) {
       $event: event,
       $el: el,
       $html: html,
-      ...getRefsObject()
+      ...Object.fromEntries(HELIUM.refs),
     };
   };
 
@@ -115,7 +145,7 @@ async function helium(initialState = {}) {
         "$scope",
         withReturn
           ? `with($scope){with($scope.$data){return(${expr.trim()})}}`
-          : `with($scope){with($scope.$data){${expr.trim()}}}`
+          : `with($scope){with($scope.$data){${expr.trim()}}}`,
       );
       const compiled = { execute: (scope) => fn(scope), getIds: null };
       HELIUM.fnCache.set(key, compiled);
@@ -136,18 +166,22 @@ async function helium(initialState = {}) {
     if (prop === "innerHTML") {
       const content = Array.isArray(r) ? r.join`` : r;
       return typeof Idiomorph === "object"
-        ? Idiomorph.morph(el, content, { morphStyle: 'innerHTML' })
-        : el.innerHTML = content;
+        ? Idiomorph.morph(el, content, { morphStyle: "innerHTML" })
+        : (el.innerHTML = content);
     }
     if (prop === "class" && r && typeof r === "object")
       return Object.entries(r).forEach(([k, v]) =>
-        k.split(/\s+/).forEach(c => el.classList.toggle(c, v)));
+        k.split(/\s+/).forEach((c) => el.classList.toggle(c, v)),
+      );
 
     if (prop === "style" && r && typeof r === "object")
-      return el.style.cssText = Object.entries(r)
+      return (el.style.cssText = Object.entries(r)
         .filter(([_, v]) => v != null && v !== false)
-        .map(([k, v]) => `${k.replace(/[A-Z]/g, m => '-' + m.toLowerCase())}:${v}`)
-        .join("; ");
+        .map(
+          ([k, v]) =>
+            `${k.replace(/[A-Z]/g, (m) => "-" + m.toLowerCase())}:${v}`,
+        )
+        .join("; "));
 
     if (prop === "hidden") {
       el.hidden = isHiddenAttr ? !!r : !r;
@@ -156,8 +190,9 @@ async function helium(initialState = {}) {
 
     if (prop in el) {
       if (isRadio && prop !== "checked") el.checked = el.value === r;
-      else if (el.type === "radio" && prop !== "checked") el.checked = el.value === r;
-      else el[prop] = prop === "textContent" ? (r ?? '') : parseEx(r);
+      else if (el.type === "radio" && prop !== "checked")
+        el.checked = el.value === r;
+      else el[prop] = prop === "textContent" ? (r ?? "") : parseEx(r);
       return;
     }
 
@@ -171,12 +206,16 @@ async function helium(initialState = {}) {
         return true;
       },
       get(target, prop) {
-        if (typeof prop == 'string') {
-          excludeChanged ? !accessed.has(prop) && accessed.set(prop, target[prop]) : accessed.add(prop);
+        if (typeof prop == "string") {
+          excludeChanged
+            ? !accessed.has(prop) && accessed.set(prop, target[prop])
+            : accessed.add(prop);
         }
         const val = target[prop];
-        return typeof val == "object" && val != null ? new Proxy(val, this) : val;
-      }
+        return typeof val == "object" && val != null
+          ? new Proxy(val, this)
+          : val;
+      },
     });
 
     try {
@@ -186,21 +225,29 @@ async function helium(initialState = {}) {
         $event: {},
         $el: el,
         $html: html,
-        ...getRefsObject()
+        ...Object.fromEntries(HELIUM.refs),
       };
       compiled.execute(scope);
     } catch {}
 
-    return excludeChanged ? [...accessed.keys()].filter(prop => state[prop] === accessed.get(prop)) : [...accessed];
+    return excludeChanged
+      ? [...accessed.keys()].filter(
+          (prop) => state[prop] === accessed.get(prop),
+        )
+      : [...accessed];
   };
 
   const getDependencies = (compiled, el, excludeChanged = false) => {
     return trackDependenciesProxy(compiled, el, excludeChanged);
   };
 
-  const cleanup = el => {
-    [el, ...el.querySelectorAll('*')].forEach(e => {
-      HELIUM.listeners.get(e)?.forEach(({ receiver, event, handler }) => receiver.removeEventListener(event, handler));
+  const cleanup = (el) => {
+    [el, ...el.querySelectorAll("*")].forEach((e) => {
+      HELIUM.listeners
+        .get(e)
+        ?.forEach(({ receiver, event, handler }) =>
+          receiver.removeEventListener(event, handler),
+        );
       HELIUM.listeners.delete(e);
     });
   };
@@ -209,91 +256,154 @@ async function helium(initialState = {}) {
     const newBindings = [];
     const deferredBindings = [];
 
-    const heElements = [element, ...element.querySelectorAll("*")].filter(e => {
-      if (HELIUM.processed.has(e)) return false;
-      for (let i = 0; i < e.attributes.length; i++) {
-        if (ATTR_REGEX.test(e.attributes[i].name)) return true;
-      }
-      return false;
-    });
+    const heElements = [element, ...element.querySelectorAll("*")].filter(
+      (e) => {
+        if (HELIUM.processed.has(e)) return false;
+        for (let i = 0; i < e.attributes.length; i++) {
+          if (ATTR_REGEX.test(e.attributes[i].name)) return true;
+        }
+        return false;
+      },
+    );
 
     const addBinding = (val, b) => {
-      HELIUM.bindings.set(val, b.calc ? [b, ...(HELIUM.bindings.get(val) || [])] : [...(HELIUM.bindings.get(val) || []), b]);
+      HELIUM.bindings.set(
+        val,
+        b.calc
+          ? [b, ...(HELIUM.bindings.get(val) || [])]
+          : [...(HELIUM.bindings.get(val) || []), b],
+      );
       b.calc ? newBindings.unshift(b) : newBindings.push(b);
     };
 
-    heElements.forEach(el => {
+    heElements.forEach((el) => {
       HELIUM.processed.add(el);
 
       const attrs = el.attributes;
       const inputType = el.type?.toLowerCase();
-      const isCheckbox = inputType == "checkbox", isRadio = inputType == "radio", isSelect = el.tagName == "SELECT";
+      const isCheckbox = inputType == "checkbox",
+        isRadio = inputType == "radio",
+        isSelect = el.tagName == "SELECT";
 
       for (let i = 0; i < attrs.length; i++) {
         const { name, value } = attrs[i];
 
-        if (!name.startsWith('@') && !name.startsWith(':') && !name.startsWith('data-he')) continue;
+        if (
+          !name.startsWith("@") &&
+          !name.startsWith(":") &&
+          !name.startsWith("data-he")
+        )
+          continue;
 
         // Initialize state first if needed (skip reserved words, only if not already set)
-        if (match(name, "text", "html", "bind") && isValidIdentifier(value) && !RESERVED.has(value) && state[value] == null) {
-          state[value] = match(name, "bind") ? (el.type == "checkbox" ? el.checked : tryNum(el.value)) : tryNum(el.textContent);
+        if (
+          match(name, "text", "html", "bind") &&
+          isValidIdentifier(value) &&
+          !RESERVED.has(value) &&
+          state[value] == null
+        ) {
+          state[value] = match(name, "bind")
+            ? el.type == "checkbox"
+              ? el.checked
+              : tryNum(el.value)
+            : tryNum(el.textContent);
         }
 
         // Process the attribute
         if (name === "@data" || name === "data-he") {
           Object.assign(state, parseEx(value));
-        }
-        else if (name.startsWith(":") || name.startsWith("data-he-attr:")) {
-          const propName = name.startsWith(":") ? name.slice(1) : name.slice(13);
-          deferredBindings.push({ el, prop: propName, compiled: compile(value, true) });
-        }
-        else if (match(name, "ref")) {
+        } else if (name.startsWith(":") || name.startsWith("data-he-attr:")) {
+          const propName = name.startsWith(":")
+            ? name.slice(1)
+            : name.slice(13);
+          deferredBindings.push({
+            el,
+            prop: propName,
+            compiled: compile(value, true),
+          });
+        } else if (match(name, "ref")) {
           HELIUM.refs.set("$" + value, el);
-        }
-        else if (match(name, "text", "html")) {
-          deferredBindings.push({ el, prop: match(name, "text") ? "textContent" : "innerHTML", compiled: compile(value, true) });
-        }
-        else if (match(name, "bind")) {
-          const event = (isCheckbox || isRadio || isSelect) ? "change" : "input";
+        } else if (match(name, "text", "html")) {
+          deferredBindings.push({
+            el,
+            prop: match(name, "text") ? "textContent" : "innerHTML",
+            compiled: compile(value, true),
+          });
+        } else if (match(name, "bind")) {
+          const event = isCheckbox || isRadio || isSelect ? "change" : "input";
           const prop = isCheckbox ? "checked" : "value";
-          const inputHandler = e => state[value] = isCheckbox ? e.target.checked : e.target.value;
+          const inputHandler = (e) =>
+            (state[value] = isCheckbox ? e.target.checked : e.target.value);
           el.addEventListener(event, inputHandler);
           if (!HELIUM.listeners.has(el)) HELIUM.listeners.set(el, []);
-          HELIUM.listeners.get(el).push({ receiver: el, event, handler: inputHandler });
-          deferredBindings.push({ el, prop, compiled: compile(value, true), isRadio });
+          HELIUM.listeners
+            .get(el)
+            .push({ receiver: el, event, handler: inputHandler });
+          deferredBindings.push({
+            el,
+            prop,
+            compiled: compile(value, true),
+            isRadio,
+          });
           if (isCheckbox) el.checked = !!state[value];
           else if (isRadio) el.checked = el.value == state[value];
           else el.value = state[value] ?? "";
-        }
-        else if (match(name, "hidden", "visible")) {
+        } else if (match(name, "hidden", "visible")) {
           const isHidden = match(name, "hidden");
-          deferredBindings.push({ el, prop: "hidden", compiled: compile(value, true), isHiddenAttr: isHidden });
-        }
-        else if (match(name, "calculate")) {
+          deferredBindings.push({
+            el,
+            prop: "hidden",
+            compiled: compile(value, true),
+            isHiddenAttr: isHidden,
+          });
+        } else if (match(name, "calculate")) {
           const calcName = name.split(":")[1];
           if (!(calcName in state)) state[calcName] = undefined;
-          deferredBindings.push({ el, calc: calcName, prop: null, compiled: compile(value, true) });
-        }
-        else if (match(name, "effect")) {
-          deferredBindings.push({ el, prop: null, compiled: compile(value, true), keys: name.split(":").slice(1) });
-        }
-        else if (match(name, "init")) {
+          deferredBindings.push({
+            el,
+            calc: calcName,
+            prop: null,
+            compiled: compile(value, true),
+          });
+        } else if (match(name, "effect")) {
+          deferredBindings.push({
+            el,
+            prop: null,
+            compiled: compile(value, true),
+            keys: name.split(":").slice(1),
+          });
+        } else if (match(name, "init")) {
           inits.push({ compiled: compile(value, true), el });
-        }
-        else if (name.startsWith("@") || name.startsWith("data-he")) {
+        } else if (name.startsWith("@") || name.startsWith("data-he")) {
           const fullName = name.startsWith("@") ? name.slice(1) : name.slice(8);
           const [event, ...mods] = fullName.split(".");
-          const receiver = mods.includes("outside") || mods.includes("document") ? document : el;
-          const debounceMod = mods.find(m => m.startsWith("debounce"));
-          const debounceDelay = debounceMod ? (t => t && !isNaN(t) ? Number(t) : 300)(debounceMod.split(":")[1]) : 0;
-          const _handler = e => {
+          const receiver =
+            mods.includes("outside") || mods.includes("document")
+              ? document
+              : el;
+          const debounceMod = mods.find((m) => m.startsWith("debounce"));
+          const debounceDelay = debounceMod
+            ? ((t) => (t && !isNaN(t) ? Number(t) : 300))(
+                debounceMod.split(":")[1],
+              )
+            : 0;
+          const _handler = (e) => {
             if (mods.includes("prevent")) e.preventDefault();
             if (mods.includes("stop")) e.stopPropagation();
-            for (const [mod, prop] of Object.entries(KEY_MODS)) if (mods.includes(mod) && !e[prop]) return;
+            for (const [mod, prop] of Object.entries(KEY_MODS))
+              if (mods.includes(mod) && !e[prop]) return;
             if (["keydown", "keyup", "keypress"].includes(event)) {
               const last = mods[mods.length - 1];
-              if (last && !["prevent", "once", "outside", "document", "stop"].includes(last) && !last.startsWith("debounce") && !Object.keys(KEY_MODS).includes(last)) {
-                const keyName = e.key == " " ? "Space" : e.key == "Escape" ? "Esc" : e.key;
+              if (
+                last &&
+                !["prevent", "once", "outside", "document", "stop"].includes(
+                  last,
+                ) &&
+                !last.startsWith("debounce") &&
+                !Object.keys(KEY_MODS).includes(last)
+              ) {
+                const keyName =
+                  e.key == " " ? "Space" : e.key == "Escape" ? "Esc" : e.key;
                 if (keyName.toLowerCase() !== last.toLowerCase()) return;
               }
             }
@@ -302,10 +412,14 @@ async function helium(initialState = {}) {
               const compiled = compile(value, true);
               compiled.execute(scope);
             }
-            if (mods.includes("once")) receiver.removeEventListener(event, handler);
+            if (mods.includes("once"))
+              receiver.removeEventListener(event, handler);
           };
-          const handler = debounceDelay > 0 ? debounce(_handler, debounceDelay) : _handler;
-          const eventOptions = mods.includes("once") ? { once: true } : undefined;
+          const handler =
+            debounceDelay > 0 ? debounce(_handler, debounceDelay) : _handler;
+          const eventOptions = mods.includes("once")
+            ? { once: true }
+            : undefined;
           receiver.addEventListener(event, handler, eventOptions);
           if (!HELIUM.listeners.has(el)) HELIUM.listeners.set(el, []);
           HELIUM.listeners.get(el).push({ receiver, event, handler });
@@ -313,9 +427,11 @@ async function helium(initialState = {}) {
       }
     });
 
-    deferredBindings.forEach(b => {
-      const tracked = b.keys?.includes("*") ? [ALL] : getDependencies(b.compiled, b.el, true).concat(b.keys || []);
-      tracked.forEach(key => addBinding(key, b));
+    deferredBindings.forEach((b) => {
+      const tracked = b.keys?.includes("*")
+        ? [ALL]
+        : getDependencies(b.compiled, b.el, true).concat(b.keys || []);
+      tracked.forEach((key) => addBinding(key, b));
       if (tracked.length === 0) {
         newBindings.push(b);
       }
@@ -355,13 +471,13 @@ function heliumTeardown() {
 }
 
 // Browser globals
-if (typeof window !== 'undefined') {
+if (typeof window !== "undefined") {
   window.helium = helium;
   window.heliumTeardown = heliumTeardown;
 }
 
 // Auto-initialize
-if (typeof document !== 'undefined') {
+if (typeof document !== "undefined") {
   document.addEventListener("DOMContentLoaded", () => helium());
 }
 

package/helium.js

@@ -46,11 +46,9 @@ const defaultEngine = {
   }
 };
 
-// Factory function to create helium with custom engine and prefixes
+// Factory function to create helium with custom engine
 export function createHelium(options = {}) {
   const engine = options.engine ?? defaultEngine;
-  const prefix = options.prefix ?? 'he';           // 'he' or 'xe'
-  const rootAttr = options.rootAttr ?? 'helium';   // 'helium' or 'xenon'
 
   // Engine-aware expression parser (CSP-safe when using jexpr engine)
   const evalExpr = v => {
@@ -61,13 +59,10 @@ export function createHelium(options = {}) {
     } catch { return v; }
   };
 
-  // Build prefix-aware regex and matcher
-  const ATTR_REGEX = new RegExp(`^(@|:|data-${prefix})`);
-
   const match = (name, ...attrs) => {
     const p = name.split(/[.:]/)[0];
     if (p === ":" || p === "") return false;
-    return attrs.some(a => p === `@${a}` || p === `data-${prefix}-${a}`);
+    return attrs.some(a => p === `@${a}` || p === 'data-he-' + a);
   };
 
   // Single global object to hold all settings (scoped to this instance)
@@ -76,8 +71,8 @@ export function createHelium(options = {}) {
   async function helium(initialState = {}) {
     const inits = [];
     const ALL = Symbol("all");
-    const root = document.querySelector(`[\\@${rootAttr}]`) || document.querySelector(`[data-${rootAttr}]`) || document.body;
-    const storageKey = root.getAttribute('@local-storage') || root.getAttribute(`data-${prefix}-local-storage`);
+    const root = document.querySelector('[\\@helium]') || document.querySelector('[data-helium]') || document.body;
+    const storageKey = root.getAttribute('@local-storage') || root.getAttribute('data-he-local-storage');
 
     // Initialize or reuse HELIUM object
     if (!HELIUM) {
@@ -249,15 +244,6 @@ export function createHelium(options = {}) {
     // Merge initial state
     Object.assign(state, initialState);
 
-    // Build refs object for scope
-    const getRefsObject = () => {
-      const refs = {};
-      for (const [name, element] of HELIUM.refs) {
-        refs[name] = element;
-      }
-      return refs;
-    };
-
     // Create scope for expression execution
     const createScope = (el, event = {}) => {
       return engine.createScope({
@@ -271,7 +257,7 @@ export function createHelium(options = {}) {
         put,
         patch,
         del,
-        refs: getRefsObject()
+        refs: Object.fromEntries(HELIUM.refs)
       });
     };
 
@@ -354,7 +340,7 @@ export function createHelium(options = {}) {
         put,
         patch,
         del,
-        refs: getRefsObject()
+        refs: Object.fromEntries(HELIUM.refs)
       });
       compiled.execute(scope);
     } catch {}
@@ -387,7 +373,8 @@ export function createHelium(options = {}) {
      const heElements = [element, ...element.querySelectorAll("*")].filter(e => {
         if (HELIUM.processed.has(e)) return false;
         for (let i = 0; i < e.attributes.length; i++) {
-          if (ATTR_REGEX.test(e.attributes[i].name)) return true;
+          const n = e.attributes[i].name;
+          if (n[0] === '@' || n[0] === ':' || n.startsWith('data-he')) return true;
         }
         return false;
       });
@@ -400,7 +387,7 @@ export function createHelium(options = {}) {
       const importPromises = [];
 
       heElements.forEach((el) => {
-        const importAttr = el.getAttribute("@import") || el.getAttribute(`data-${prefix}-import`);
+        const importAttr = el.getAttribute("@import") || el.getAttribute('data-he-import');
         if (importAttr) {
           importAttr.split(",").map((m) => m.trim()).forEach((moduleName) => {
               // Build path: use as-is for URLs, otherwise resolve relative to document location
@@ -408,9 +395,7 @@ export function createHelium(options = {}) {
               const hasExtension = moduleName.endsWith(".js");
               const hasPathPrefix = moduleName.startsWith("/") || moduleName.startsWith("./") || moduleName.startsWith("../");
               const relativePath = (isUrl || hasPathPrefix ? "" : "./") + moduleName + (isUrl || hasExtension ? "" : ".js");
-              // Ensure base URL ends with / so relative paths resolve correctly
-              const baseUrl = location.href.endsWith('/') || location.href.includes('.html') ? location.href : location.href + '/';
-              const path = isUrl ? relativePath : new URL(relativePath, baseUrl).href;
+              const path = isUrl ? moduleName : new URL(relativePath, location.href).href;
               importPromises.push(
                 import(path)
                   .then((module) => {
@@ -448,7 +433,7 @@ export function createHelium(options = {}) {
           const {name, value} = attrs[i];
 
           // Skip non-helium attributes early
-          if (!name.startsWith('@') && !name.startsWith(':') && !name.startsWith(`data-${prefix}`)) continue;
+          if (name[0] !== '@' && name[0] !== ':' && !name.startsWith('data-he')) continue;
 
           // Initialize state first if needed (skip reserved words, only if not already set)
           if (match(name, "text", "html", "bind") && isValidIdentifier(value) && !RESERVED.has(value) && state[value] == null) {
@@ -456,11 +441,11 @@ export function createHelium(options = {}) {
           }
 
           // Process the attribute
-          if (name === "@data" || name === `data-${prefix}`) {
+          if (name === "@data" || name === 'data-he') {
             Object.assign(state, evalExpr(value));
           }
-          else if (name.startsWith(":") || name.startsWith(`data-${prefix}-attr:`)) {
-            const propName = name.startsWith(":") ? name.slice(1) : name.slice(prefix.length + 11);
+          else if (name.startsWith(":") || name.startsWith('data-he-attr:')) {
+            const propName = name.startsWith(":") ? name.slice(1) : name.slice(13);
             deferredBindings.push({el, prop: propName, compiled: compile(value, true)});
           }
           else if (match(name, "ref")) {
@@ -496,8 +481,8 @@ export function createHelium(options = {}) {
           else if (match(name, "init")) {
             inits.push({ compiled: compile(value, true), el });
           }
-          else if (name.startsWith("@") || name.startsWith(`data-${prefix}`)) {
-            const fullName = name.startsWith("@") ? name.slice(1) : name.slice(prefix.length + 6);
+          else if (name.startsWith("@") || name.startsWith('data-he')) {
+            const fullName = name.startsWith("@") ? name.slice(1) : name.slice(8);
             const [eventName, ...mods] = fullName.split(".");
             const isHttpMethod = ["get", "post", "put", "patch", "delete"].includes(eventName);
             const event = isHttpMethod ? getEvent(el) : eventName;
@@ -517,7 +502,7 @@ export function createHelium(options = {}) {
               }
               if (!mods.includes("outside") || !el.contains(e.target)) {
                 if (isHttpMethod) {
-                  const getAttr = name => el.getAttribute(`data-${prefix}-${name}`) || el.getAttribute(`@${name}`);
+                  const getAttr = a => el.getAttribute('data-he-' + a) || el.getAttribute('@' + a);
                   const pairs = (getAttr('target') || "").split(",").map(p => p.split(":").map(s => s.trim()));
                   const target = pairs.map(([target]) => target);
                   const action = pairs.map(([, action]) => action);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@daz4126/helium",
-  "version": "1.0.0-beta.2",
+  "version": "1.0.0-beta.4",
   "main": "helium.js",
   "type": "module",
   "exports": {