Update sigpro2.js

packages/sigpro/sigpro2.js

@@ -1,8 +1,8 @@
+(() => {
   let activeEffect = null;
 
-export const $ = (initial) => {
+  window.$ = (initial) => {
     const subs = new Set();
-  
     if (typeof initial === 'function') {
       let cached;
       const runner = () => {
@@ -17,7 +17,6 @@ export const $ = (initial) => {
         return cached;
       };
     }
-
     return (...args) => {
       if (args.length) {
         const next = typeof args[0] === 'function' ? args[0](initial) : args[0];
@@ -31,7 +30,7 @@ export const $ = (initial) => {
     };
   };
 
-export const $e = (fn) => {
+  window.$e = (fn) => {
     const effect = () => {
       const prev = activeEffect;
       activeEffect = effect;
@@ -41,23 +40,13 @@ export const $e = (fn) => {
     return effect;
   };
 
-export const _storage = (key, initial, storage = localStorage) => {
-  const saved = storage.getItem(key);
-  const signal = $((saved !== null) ? JSON.parse(saved) : initial);
-  $e(() => storage.setItem(key, JSON.stringify(signal())));
-  return signal;
-};
-
   const h = (tag, props = {}, children = []) => {
     const el = document.createElement(tag);
-  
     for (let [key, val] of Object.entries(props)) {
       if (key.startsWith('on')) {
         el.addEventListener(key.toLowerCase().slice(2), val);
-    } 
-    else if (key.startsWith('$')) {
+      } else if (key.startsWith('$')) {
         const attr = key.slice(1);
-      // Two-way binding
         if ((attr === 'value' || attr === 'checked') && typeof val === 'function') {
           const ev = attr === 'checked' ? 'change' : 'input';
           el.addEventListener(ev, e => val(attr === 'checked' ? e.target.checked : e.target.value));
@@ -68,12 +57,10 @@ const h = (tag, props = {}, children = []) => {
           else if (typeof v === 'boolean') el.toggleAttribute(attr, v);
           else el.setAttribute(attr, v);
         });
-    } 
-    else {
+      } else {
         el.setAttribute(key, val);
       }
     }
-
     const append = (c) => {
       if (Array.isArray(c)) return c.forEach(append);
       if (typeof c === 'function') {
@@ -94,10 +81,26 @@ const h = (tag, props = {}, children = []) => {
     return el;
   };
 
-export const _router = (routes) => {
+  const tags = ['div', 'span', 'p', 'button', 'input', 'h1', 'h2', 'label', 'section', 'ul', 'li', 'a', 'header', 'footer', 'nav', 'main'];
+  tags.forEach(tag => {
+    window[`_${tag}`] = (props, children) => {
+      if (typeof props !== 'object' || props instanceof Node || Array.isArray(props)) {
+        return h(tag, {}, props);
+      }
+      return h(tag, props, children);
+    };
+  });
+
+  window._storage = (key, initial, storage = localStorage) => {
+    const saved = storage.getItem(key);
+    const signal = $((saved !== null) ? JSON.parse(saved) : initial);
+    $e(() => storage.setItem(key, JSON.stringify(signal())));
+    return signal;
+  };
+
+  window._router = (routes) => {
     const path = $(window.location.hash.replace(/^#/, "") || "/");
     window.addEventListener("hashchange", () => path(window.location.hash.replace(/^#/, "") || "/"));
-
     return _div({ class: "router-container" }, [
       () => {
         const current = path();
@@ -107,23 +110,13 @@ export const _router = (routes) => {
     ]);
   };
 
-export const _render = (node, target = document.body) => {
+  window._render = (node, target = document.body) => {
     target.innerHTML = ''; 
     const element = typeof node === 'function' ? node() : node;
     target.appendChild(element);
     return element;
   };
 
-const tags = ['div', 'span', 'p', 'button', 'input', 'h1', 'h2', 'label', 'section', 'ul', 'li', 'a', 'header', 'footer'];
-tags.forEach(tag => {
-  window[`_${tag}`] = (props, children) => {
-    if (typeof props !== 'object' || props instanceof Node || Array.isArray(props)) {
-      return h(tag, {}, props);
-    }
-    return h(tag, props, children);
-  };
-});
-
   window.Row = (props, children) => _div({
     ...((typeof props === 'object' && !Array.isArray(props)) ? props : {}),
     style: `display:flex; flex-direction:row; gap:10px; ${props?.style || ''}`
@@ -133,7 +126,4 @@ window.Col = (props, children) => _div({
     ...((typeof props === 'object' && !Array.isArray(props)) ? props : {}),
     style: `display:flex; flex-direction:column; gap:10px; ${props?.style || ''}`
   }, (Array.isArray(props) ? props : children));
-
-window._storage = _storage;
-window._router = _router;
-window._render = _render;
+})();