@daz4126/helium 0.30.0 → 0.31.0

package/examples/sse-server.js

@@ -0,0 +1,138 @@
+import http from 'http';
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const PORT = process.env.PORT || 3456;
+
+// Helper to send SSE events
+const sendSSE = (res, event, data, id = null) => {
+  if (id) res.write(`id: ${id}\n`);
+  if (event) res.write(`event: ${event}\n`);
+  res.write(`data: ${data}\n\n`);
+};
+
+// Delay helper
+const delay = ms => new Promise(r => setTimeout(r, ms));
+
+const server = http.createServer(async (req, res) => {
+  const url = new URL(req.url, `http://localhost:${PORT}`);
+
+  // Serve static files
+  if (url.pathname === '/' || url.pathname === '/index.html') {
+    res.writeHead(200, { 'Content-Type': 'text/html' });
+    res.end(fs.readFileSync(path.join(__dirname, 'sse-simple.html')));
+    return;
+  }
+
+  if (url.pathname === '/demo') {
+    res.writeHead(200, { 'Content-Type': 'text/html' });
+    res.end(fs.readFileSync(path.join(__dirname, 'sse-demo.html')));
+    return;
+  }
+
+  if (url.pathname === '/helium.js' || url.pathname === '/../helium.js') {
+    res.writeHead(200, { 'Content-Type': 'application/javascript' });
+    res.end(fs.readFileSync(path.join(__dirname, '..', 'helium.js')));
+    return;
+  }
+
+  // SSE Endpoints
+  if (url.pathname === '/api/hello-world') {
+    res.writeHead(200, {
+      'Content-Type': 'text/event-stream',
+      'Cache-Control': 'no-cache',
+      'Connection': 'keep-alive'
+    });
+
+    // Stream letters one at a time with 500ms delay
+    // Just send data - target comes from @target attribute on the button
+    const message = 'Hello from Helium SSE!';
+    let output = '';
+    for (const char of message) {
+      output += char;
+      sendSSE(res, null, `<span>${output}<span style="opacity:0.5">|</span></span>`);
+      await delay(500);
+    }
+    // Final message without cursor
+    sendSSE(res, null, `<span style="color: green; font-weight: bold;">${message}</span>`);
+    res.end();
+    return;
+  }
+
+  if (url.pathname === '/api/count') {
+    res.writeHead(200, {
+      'Content-Type': 'text/event-stream',
+      'Cache-Control': 'no-cache',
+      'Connection': 'keep-alive'
+    });
+
+    for (let i = 1; i <= 10; i++) {
+      sendSSE(res, '#counter', `<span>${i}</span>`, `count-${i}`);
+      await delay(300);
+    }
+    sendSSE(res, '#counter', `<span style="color: green;">Done!</span>`);
+    res.end();
+    return;
+  }
+
+  if (url.pathname === '/api/dashboard') {
+    res.writeHead(200, {
+      'Content-Type': 'text/event-stream',
+      'Cache-Control': 'no-cache',
+      'Connection': 'keep-alive'
+    });
+
+    // Send to different targets using event: field
+    await delay(200);
+    sendSSE(res, '#header', '<h3>Dashboard Loaded</h3>');
+    await delay(300);
+    sendSSE(res, '#stats', `<div>Users: 1,234</div><div>Revenue: $5,678</div>`);
+    await delay(200);
+    sendSSE(res, '#header', '<h3>Dashboard Loaded <span style="color:green;">&#10003;</span></h3>');
+    res.end();
+    return;
+  }
+
+  if (url.pathname === '/api/time') {
+    res.writeHead(200, {
+      'Content-Type': 'text/event-stream',
+      'Cache-Control': 'no-cache',
+      'Connection': 'keep-alive'
+    });
+
+    // This updates state.currentTime (not a DOM element)
+    sendSSE(res, 'currentTime', new Date().toLocaleTimeString());
+    res.end();
+    return;
+  }
+
+  if (url.pathname === '/api/events') {
+    res.writeHead(200, {
+      'Content-Type': 'text/event-stream',
+      'Cache-Control': 'no-cache',
+      'Connection': 'keep-alive'
+    });
+
+    const events = ['User logged in', 'File uploaded', 'Comment added', 'Order placed', 'Payment received'];
+
+    for (let i = 0; i < events.length; i++) {
+      const time = new Date().toLocaleTimeString();
+      sendSSE(res, '#events', `<div class="event-item">[${time}] ${events[i]}</div>`, `event-${i}`);
+      await delay(800);
+    }
+    sendSSE(res, '#events', `<div class="event-item" style="color: gray;">[Stream ended]</div>`);
+    res.end();
+    return;
+  }
+
+  // 404
+  res.writeHead(404);
+  res.end('Not found');
+});
+
+server.listen(PORT, () => {
+  console.log(`SSE Demo server running at http://localhost:${PORT}`);
+  console.log('Press Ctrl+C to stop');
+});

package/examples/sse-simple.html

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Helium SSE - Simple Demo</title>
+  <style>
+    body {
+      font-family: system-ui, sans-serif;
+      max-width: 600px;
+      margin: 4rem auto;
+      padding: 0 1rem;
+      text-align: center;
+    }
+    button {
+      padding: 1rem 2rem;
+      font-size: 1.2rem;
+      cursor: pointer;
+      background: #4a90d9;
+      color: white;
+      border: none;
+      border-radius: 8px;
+      margin-bottom: 2rem;
+    }
+    button:hover { background: #357abd; }
+    button:active { background: #2a5f8f; }
+    #message {
+      padding: 2rem;
+      background: #f5f5f5;
+      border-radius: 8px;
+      min-height: 3rem;
+      font-size: 1.5rem;
+      border: 2px solid #ddd;
+    }
+  </style>
+</head>
+<body data-helium>
+  <h1>Helium SSE Demo</h1>
+
+  <button @get="/api/hello-world" @target="#message">Start</button>
+
+  <div id="message">&nbsp;</div>
+
+  <script type="module">
+    import helium from '../helium.js';
+    helium();
+  </script>
+</body>
+</html>

package/examples/test-password.html

@@ -0,0 +1,251 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Test Password Strength</title>
+  <style>
+    body { font-family: sans-serif; padding: 2rem; }
+    .progress-bar { width: 100%; height: 20px; background: #eee; border-radius: 10px; overflow: hidden; }
+    .progress-fill { height: 100%; transition: width 0.3s; }
+  </style>
+</head>
+<body>
+
+<div data-helium @data="{ password: '' }">
+  <h2>Password Strength Test</h2>
+
+  <input type="text" @bind="password" placeholder="Enter password">
+
+  <p>Password value: "<span @text="password"></span>"</p>
+  <p>Password length: <span @text="password.length"></span></p>
+
+  <span @calculate:strength="password ? (password.length < 4 ? 'Weak' : password.length < 8 ? 'Medium' : 'Strong') : 'Enter a password'"></span>
+
+  <p>Strength: <b @text="strength">???</b></p>
+</div>
+
+<script>
+// Unminified helium for debugging
+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 INPUT_EVENTS={form:"submit",input:"input",textarea:"input",select:"change"};
+const debounce=(f,d)=>{let t;return(...a)=>(clearTimeout(t),t=setTimeout(f,d,...a))};
+
+const defaultEngine={
+  compile(expr,withReturn=true){
+    try{
+      const fn=new Function("$scope",withReturn?`with($scope){with($scope.$data){return(${expr.trim()})}}`:`with($scope){with($scope.$data){${expr.trim()}}}`);
+      return{execute:scope=>fn(scope),getIds:null};
+    }catch(e){
+      console.error('Compile error:', expr, e);
+      return{execute:()=>expr,getIds:null};
+    }
+  },
+  createScope(ctx){
+    return{$:ctx.$,$data:ctx.state,$event:ctx.event,$el:ctx.el,...ctx.refs};
+  }
+};
+
+function createHelium(options={}){
+  const engine=options.engine||defaultEngine;
+  const prefix=options.prefix||'he';
+  const rootAttr=options.rootAttr||'helium';
+  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}`);
+  };
+  let HELIUM=null;
+
+  async function helium(initialState={}){
+    console.log('[HELIUM] Starting...');
+    const ALL=Symbol("all");
+    const root=document.querySelector(`[\\@${rootAttr}]`)||document.querySelector(`[data-${rootAttr}]`)||document.body;
+    console.log('[HELIUM] Root:', root);
+
+    if(!HELIUM){
+      HELIUM={bindings:new Map(),refs:new Map(),listeners:new WeakMap(),processed:new WeakSet(),fnCache:new Map(),proxyCache:new WeakMap()};
+    }
+
+    const $=s=>document.querySelector(s);
+    const applyingBindings=new Set();
+    const safeApplyBinding=(b)=>{
+      if(applyingBindings.has(b))return;
+      applyingBindings.add(b);
+      try{applyBinding(b);}finally{applyingBindings.delete(b);}
+    };
+
+    const handler={
+      get(t,p,r){
+        const v=Reflect.get(t,p,r);
+        if(v&&typeof v==="object"){
+          if(HELIUM.proxyCache.has(v))return HELIUM.proxyCache.get(v);
+          const proxy=new Proxy(v,handler);
+          HELIUM.proxyCache.set(v,proxy);
+          return proxy;
+        }
+        return v;
+      },
+      set:(t,p,v)=>{
+        console.log('[PROXY SET]', p, '=', v);
+        const res=Reflect.set(t,p,v);
+        const bindings = HELIUM.bindings.get(p);
+        console.log('[PROXY SET] Bindings for', p, ':', bindings?.length || 0);
+        bindings?.forEach(safeApplyBinding);
+        HELIUM.bindings.get(ALL)?.forEach(safeApplyBinding);
+        return res;
+      }
+    };
+
+    const state=new Proxy({},handler);
+    Object.assign(state,initialState);
+
+    const getRefsObject=()=>{const refs={};for(const[name,element]of HELIUM.refs){refs[name]=element;}return refs;};
+    const createScope=(el,event={})=>engine.createScope({$,state,event,el,refs:getRefsObject()});
+
+    const compile=(expr,withReturn=true)=>{
+      const key=`${withReturn}:${expr}`;
+      if(HELIUM.fnCache.has(key))return HELIUM.fnCache.get(key);
+      const compiled=engine.compile(expr,withReturn);
+      HELIUM.fnCache.set(key,compiled);
+      return compiled;
+    };
+
+    function applyBinding(b){
+      const{el,prop,compiled,calc}=b;
+      const scope=createScope(el);
+      const r=compiled.execute(scope);
+      console.log('[APPLY]', 'calc=', calc, 'prop=', prop, 'result=', r);
+      if(calc){
+        console.log('[APPLY] Setting state.' + calc + ' =', r);
+        state[calc]=r;
+      }
+      if(prop==="textContent")el.textContent=r??'';
+      else if(prop==="style"&&r&&typeof r==="object"){
+        el.style.cssText=Object.entries(r).filter(([_,v])=>v!=null&&v!==false).map(([k,v])=>`${k}:${v}`).join("; ");
+      }
+      else if(prop&&prop in el)el[prop]=r;
+    }
+
+    const trackDependenciesProxy=(compiled,el,excludeChanged=false)=>{
+      const accessed=excludeChanged?new Map():new Set();
+      const trackProxy=new Proxy(state,{
+        has(target,prop){return true;},
+        get(target,prop){
+          if(typeof prop=='string'){
+            if(excludeChanged){
+              if(!accessed.has(prop))accessed.set(prop,target[prop]);
+            }else{
+              accessed.add(prop);
+            }
+          }
+          const val=target[prop];
+          return typeof val=="object"&&val!=null?new Proxy(val,this):val;
+        }
+      });
+      try{
+        const scope=engine.createScope({$,state:trackProxy,event:{},el,refs:getRefsObject()});
+        compiled.execute(scope);
+      }catch(e){console.error('[TRACK ERROR]', e);}
+      const result = excludeChanged?[...accessed.keys()].filter(prop=>state[prop]===accessed.get(prop)):[...accessed];
+      console.log('[TRACK]', 'excludeChanged=', excludeChanged, 'result=', result);
+      return result;
+    };
+
+    const getDependencies=(compiled,el,excludeChanged=false)=>{
+      return trackDependenciesProxy(compiled,el,excludeChanged);
+    };
+
+    const newBindings=[];
+    const deferredBindings=[];
+
+    const heElements=[root,...root.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;
+    });
+
+    console.log('[HELIUM] Found', heElements.length, 'elements to process');
+
+    const addBinding=(val,b)=>{
+      console.log('[ADD BINDING]', 'key=', String(val), 'calc=', b.calc, 'prop=', b.prop);
+      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=>{
+      HELIUM.processed.add(el);
+      const attrs=el.attributes;
+      const inputType=el.type?.toLowerCase();
+      const isCheckbox=inputType=="checkbox";
+
+      for(let i=0;i<attrs.length;i++){
+        const{name,value}=attrs[i];
+        if(!name.startsWith('@')&&!name.startsWith(':')&&!name.startsWith(`data-${prefix}`))continue;
+
+        console.log('[PROCESS]', el.tagName, name, '=', value);
+
+        if(match(name,"text","bind")&&isValidIdentifier(value)&&!RESERVED.has(value)&&!(value in state)){
+          state[value]=match(name,"bind")?tryNum(el.value):tryNum(el.textContent);
+        }
+
+        if(name==="@data"||name===`data-${prefix}`){
+          Object.assign(state,parseEx(value));
+          console.log('[DATA] State is now:', {...state});
+        }
+        else if(name.startsWith(":")){
+          const propName=name.slice(1);
+          deferredBindings.push({el,prop:propName,compiled:compile(value,true)});
+        }
+        else if(match(name,"text")){
+          deferredBindings.push({el,prop:"textContent",compiled:compile(value,true)});
+        }
+        else if(match(name,"bind")){
+          const event="input";
+          const inputHandler=e=>{
+            console.log('[INPUT]', value, '=', e.target.value);
+            state[value]=e.target.value;
+          };
+          el.addEventListener(event,inputHandler);
+          deferredBindings.push({el,prop:"value",compiled:compile(value,true)});
+          el.value=state[value]??"";
+        }
+        else if(match(name,"calculate")){
+          const calcName = name.split(":")[1];
+          console.log('[CALCULATE] Found @calculate:' + calcName);
+          deferredBindings.push({el,calc:calcName,prop:null,compiled:compile(value,true)});
+        }
+      }
+    });
+
+    console.log('[HELIUM] Processing', deferredBindings.length, 'deferred bindings');
+
+    deferredBindings.forEach(b=>{
+      const tracked=getDependencies(b.compiled,b.el,true);
+      console.log('[DEFERRED]', 'calc=', b.calc, 'prop=', b.prop, 'tracked=', tracked);
+      tracked.forEach(key=>addBinding(key,b));
+      if(tracked.length===0){
+        newBindings.push(b);
+      }
+    });
+
+    console.log('[HELIUM] Applying', newBindings.length, 'initial bindings');
+    newBindings.forEach(applyBinding);
+
+    console.log('[HELIUM] Done. State:', {...state});
+    return state;
+  }
+
+  return{helium};
+}
+
+const{helium}=createHelium();
+document.addEventListener("DOMContentLoaded",()=>helium());
+</script>
+
+</body>
+</html>