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

package/examples/index-lite.html

@@ -378,6 +378,15 @@
       <p>History: <span @text="history.join(', ') || 'None yet'">None yet</span></p>
     </div>
 
+    <!-- Clipboard Copy -->
+    <div class="card" @data="{ copied: false, textToCopy: 'Hello from Helium!' }">
+      <h2>Copy to Clipboard</h2>
+      <input @bind="textToCopy" placeholder="Text to copy">
+      <button @click="navigator.clipboard.writeText(textToCopy).then(() => (copied = true, setTimeout(() => copied = false, 2000)))">
+        <span @text="copied ? 'Copied!' : 'Copy'"></span>
+      </button>
+    </div>
+
   </div>
 </div>
 

package/examples/index.html

@@ -225,6 +225,12 @@
 
   <div class="examples">
 
+  <!-- @data Test -->
+    <div class="card" data-he="{ word: 'Hello',number: 42 }">
+      <h2 data-he-text="word"></h2>
+      <p>Number: <b @text="number"></b></p>
+    </div>
+
     <!-- Counter -->
     <div class="card">
       <h2>Counter</h2>
@@ -430,12 +436,21 @@
       <p>History: <span @text="history.join(', ') || 'None yet'">None yet</span></p>
     </div>
 
+    <!-- Clipboard Copy -->
+    <div class="card" @data="{ copied: false, textToCopy: 'Hello from Helium!' }">
+      <h2>Copy to Clipboard</h2>
+      <input @bind="textToCopy" placeholder="Text to copy">
+      <button @click="navigator.clipboard.writeText(textToCopy).then(() => { copied = true; setTimeout(() => copied = false, 2000) })">
+        <span @text="copied ? 'Copied!' : 'Copy'"></span>
+      </button>
+    </div>
+
   </div>
 
 <!-- AJAX Examples Section -->
 <div class="page" style="margin-top: 2rem;" @data="{
   templates: {
-    post: data => `<section class='post'><h1>${data?.title || 'Loading...'}</h1><p>${data?.body || ''}</p></section>`
+    post: data => `<section class='post'><h1>${data && data.title || 'Loading...'}</h1><p>${data && data.body || ''}</p></section>`
   }
 }">
   <h1>AJAX Examples</h1>

package/helium-csp.js

@@ -178,9 +178,21 @@ const jexprEngine = {
 
   createScope(ctx) {
     const locals = {
-      console,
-      Math,
-      Date,
+      // Browser globals
+      console, Math, Date, JSON,
+      navigator, window, document, location, history,
+      localStorage, sessionStorage,
+      setTimeout, setInterval, clearTimeout, clearInterval,
+      fetch, Promise, URL, URLSearchParams,
+      alert, confirm, prompt,
+      parseInt, parseFloat, isNaN, isFinite,
+      encodeURIComponent, decodeURIComponent, encodeURI, decodeURI,
+      atob, btoa,
+      // Observers (optional - may not exist in all environments)
+      ...(typeof IntersectionObserver !== 'undefined' && { IntersectionObserver }),
+      ...(typeof ResizeObserver !== 'undefined' && { ResizeObserver }),
+      ...(typeof MutationObserver !== 'undefined' && { MutationObserver }),
+      // Helium helpers
       $: ctx.$,
       $el: ctx.el,
       $event: ctx.event,

package/helium-lite.js

@@ -25,6 +25,7 @@ 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');
 
   if (!HELIUM) {
     HELIUM = {
@@ -78,11 +79,13 @@ async function helium(initialState = {}) {
       const parentKey = HELIUM.parentKeys.get(t);
       if (parentKey) HELIUM.bindings.get(parentKey)?.forEach(safeApplyBinding);
       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 {}
   Object.assign(state, initialState);
 
   const getRefsObject = () => {

package/helium.js

@@ -52,6 +52,15 @@ export function createHelium(options = {}) {
   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 => {
+    try {
+      const compiled = engine.compile(v, true);
+      const scope = engine.createScope ? engine.createScope({ state: {}, el: null, event: {}, refs: {}, $: null, html: null, get: null, post: null, put: null, patch: null, del: null }) : {};
+      return compiled.execute(scope);
+    } catch { return v; }
+  };
+
   // Build prefix-aware regex and matcher
   const ATTR_REGEX = new RegExp(`^(@|:|data-${prefix})`);
 
@@ -68,6 +77,7 @@ export function createHelium(options = {}) {
     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`);
 
     // Initialize or reuse HELIUM object
     if (!HELIUM) {
@@ -225,6 +235,7 @@ export function createHelium(options = {}) {
         const parentKey = HELIUM.parentKeys.get(t);
         if (parentKey) HELIUM.bindings.get(parentKey)?.forEach(safeApplyBinding);
         HELIUM.bindings.get(ALL)?.forEach(safeApplyBinding);
+        if (storageKey) localStorage.setItem(storageKey, JSON.stringify(state));
         return res
       }
   };
@@ -232,6 +243,9 @@ export function createHelium(options = {}) {
     // Initialize state if it doesn't exist
     const state = new Proxy({}, handler);
 
+    // Load from localStorage if key exists
+    if (storageKey) try { Object.assign(state, JSON.parse(localStorage.getItem(storageKey))); } catch {}
+
     // Merge initial state
     Object.assign(state, initialState);
 
@@ -443,7 +457,7 @@ export function createHelium(options = {}) {
 
           // Process the attribute
           if (name === "@data" || name === `data-${prefix}`) {
-            Object.assign(state, parseEx(value));
+            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);
@@ -508,7 +522,7 @@ export function createHelium(options = {}) {
                   const target = pairs.map(([target]) => target);
                   const action = pairs.map(([, action]) => action);
                   const options = {
-                    ...(getAttr("options") && parseEx(getAttr("options") || "{}")),
+                    ...(getAttr("options") && evalExpr(getAttr("options") || "{}")),
                     ...(target && { target }),
                     ...(action && { action }),
                     ...(getAttr("template") && { template: execExpr(getAttr("template")),}),

package/package.json

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