tina4js 1.0.8 → 1.0.10

package/dist/core.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("./signal.cjs.js"),N=require("./component.cjs.js"),_=new WeakMap,m="t4:";function b(t,...e){let n=_.get(t);if(!n){n=document.createElement("template");let f="";for(let i=0;i<t.length;i++)f+=t[i],i<e.length&&(E(f)?f+=`__t4_${i}__`:f+=`<!--${m}${i}-->`);n.innerHTML=f,_.set(t,n)}const o=n.content.cloneNode(!0),c=C(o);for(const{marker:f,index:i}of c)S(f,e[i]);const r=y(o);for(const f of r)T(f,e);return o}function C(t){const e=[];return p(t,n=>{if(n.nodeType===8){const o=n.data;if(o&&o.startsWith(m)){const c=parseInt(o.slice(m.length),10);e.push({marker:n,index:c})}}}),e}function y(t){const e=[];return p(t,n=>{n.nodeType===1&&e.push(n)}),e}function p(t,e){const n=t.childNodes;for(let o=0;o<n.length;o++){const c=n[o];e(c),p(c,e)}}function S(t,e){const n=t.parentNode;if(n)if(s.isSignal(e)){const o=document.createTextNode("");n.replaceChild(o,t),s.effect(()=>{o.data=String(e.value??"")})}else if(typeof e=="function"){const o=document.createComment("");n.replaceChild(o,t);let c=[],r=[];s.effect(()=>{var g;for(const d of r)d();r=[];const f=[],i=s._getEffectCollector();s._setEffectCollector(f);const l=e();s._setEffectCollector(i),r=f;for(const d of c)(g=d.parentNode)==null||g.removeChild(d);c=[];const a=h(l),u=o.parentNode;if(u)for(const d of a)u.insertBefore(d,o),c.push(d)})}else if(A(e))n.replaceChild(e,t);else if(e instanceof Node)n.replaceChild(e,t);else if(Array.isArray(e)){const o=document.createDocumentFragment();for(const c of e){const r=h(c);for(const f of r)o.appendChild(f)}n.replaceChild(o,t)}else{const o=document.createTextNode(String(e??""));n.replaceChild(o,t)}}function T(t,e){const n=[];for(const o of Array.from(t.attributes)){const c=o.name,r=o.value;if(c.startsWith("@")){const i=c.slice(1),l=r.match(/__t4_(\d+)__/);if(l){const a=e[parseInt(l[1],10)];typeof a=="function"&&t.addEventListener(i,a)}n.push(c);continue}if(c.startsWith("?")){const i=c.slice(1),l=r.match(/__t4_(\d+)__/);if(l){const a=e[parseInt(l[1],10)];if(s.isSignal(a)){const u=a;s.effect(()=>{u.value?t.setAttribute(i,""):t.removeAttribute(i)})}else a&&t.setAttribute(i,"")}n.push(c);continue}if(c.startsWith(".")){const i=c.slice(1),l=r.match(/__t4_(\d+)__/);if(l){const a=e[parseInt(l[1],10)];s.isSignal(a)?s.effect(()=>{t[i]=a.value}):t[i]=a}n.push(c);continue}const f=r.match(/__t4_(\d+)__/);if(f){const i=e[parseInt(f[1],10)];if(s.isSignal(i)){const l=i;s.effect(()=>{t.setAttribute(c,String(l.value??""))})}else typeof i=="function"?s.effect(()=>{t.setAttribute(c,String(i()??""))}):t.setAttribute(c,String(i??""))}}for(const o of n)t.removeAttribute(o)}function h(t){if(t==null||t===!1)return[];if(A(t))return Array.from(t.childNodes);if(t instanceof Node)return[t];if(Array.isArray(t)){const e=[];for(const n of t)e.push(...h(n));return e}return[document.createTextNode(String(t))]}function A(t){return t!=null&&typeof t=="object"&&t.nodeType===11}function E(t){let e=!1,n=!1,o=!1;for(let c=0;c<t.length;c++){const r=t[c];r==="<"&&!e&&!n&&(o=!0),r===">"&&!e&&!n&&(o=!1),o&&(r==='"'&&!e&&(n=!n),r==="'"&&!n&&(e=!e))}return o}exports.batch=s.batch;exports.computed=s.computed;exports.effect=s.effect;exports.isSignal=s.isSignal;exports.signal=s.signal;exports.Tina4Element=N.Tina4Element;exports.html=b;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("./signal.cjs.js"),b=require("./component.cjs.js"),_=new WeakMap,m="t4:";function N(t,...e){let n=_.get(t);if(!n){n=document.createElement("template");let f="";for(let i=0;i<t.length;i++)f+=t[i],i<e.length&&(E(f)?f+=`__t4_${i}__`:f+=`<!--${m}${i}-->`);n.innerHTML=f,_.set(t,n)}const o=n.content.cloneNode(!0),c=C(o);for(const{marker:f,index:i}of c)S(f,e[i]);const r=y(o);for(const f of r)T(f,e);return o}function C(t){const e=[];return p(t,n=>{if(n.nodeType===8){const o=n.data;if(o&&o.startsWith(m)){const c=parseInt(o.slice(m.length),10);e.push({marker:n,index:c})}}}),e}function y(t){const e=[];return p(t,n=>{n.nodeType===1&&e.push(n)}),e}function p(t,e){const n=t.childNodes;for(let o=0;o<n.length;o++){const c=n[o];e(c),p(c,e)}}function S(t,e){const n=t.parentNode;if(n)if(s.isSignal(e)){const o=document.createTextNode("");n.replaceChild(o,t),s.effect(()=>{o.data=String(e.value??"")})}else if(typeof e=="function"){const o=document.createComment("");n.replaceChild(o,t);let c=[],r=[];s.effect(()=>{var g;for(const d of r)d();r=[];const f=[],i=s._getEffectCollector();s._setEffectCollector(f);const l=e();s._setEffectCollector(i),r=f;for(const d of c)(g=d.parentNode)==null||g.removeChild(d);c=[];const a=h(l),u=o.parentNode;if(u)for(const d of a)u.insertBefore(d,o),c.push(d)})}else if(A(e))n.replaceChild(e,t);else if(e instanceof Node)n.replaceChild(e,t);else if(Array.isArray(e)){const o=document.createDocumentFragment();for(const c of e){const r=h(c);for(const f of r)o.appendChild(f)}n.replaceChild(o,t)}else{const o=document.createTextNode(String(e??""));n.replaceChild(o,t)}}function T(t,e){const n=[];for(const o of Array.from(t.attributes)){const c=o.name,r=o.value;if(c.startsWith("@")){const i=c.slice(1),l=r.match(/__t4_(\d+)__/);if(l){const a=e[parseInt(l[1],10)];typeof a=="function"&&t.addEventListener(i,u=>s.batch(()=>a(u)))}n.push(c);continue}if(c.startsWith("?")){const i=c.slice(1),l=r.match(/__t4_(\d+)__/);if(l){const a=e[parseInt(l[1],10)];if(s.isSignal(a)){const u=a;s.effect(()=>{u.value?t.setAttribute(i,""):t.removeAttribute(i)})}else a&&t.setAttribute(i,"")}n.push(c);continue}if(c.startsWith(".")){const i=c.slice(1),l=r.match(/__t4_(\d+)__/);if(l){const a=e[parseInt(l[1],10)];s.isSignal(a)?s.effect(()=>{t[i]=a.value}):t[i]=a}n.push(c);continue}const f=r.match(/__t4_(\d+)__/);if(f){const i=e[parseInt(f[1],10)];if(s.isSignal(i)){const l=i;s.effect(()=>{t.setAttribute(c,String(l.value??""))})}else typeof i=="function"?s.effect(()=>{t.setAttribute(c,String(i()??""))}):t.setAttribute(c,String(i??""))}}for(const o of n)t.removeAttribute(o)}function h(t){if(t==null||t===!1)return[];if(A(t))return Array.from(t.childNodes);if(t instanceof Node)return[t];if(Array.isArray(t)){const e=[];for(const n of t)e.push(...h(n));return e}return[document.createTextNode(String(t))]}function A(t){return t!=null&&typeof t=="object"&&t.nodeType===11}function E(t){let e=!1,n=!1,o=!1;for(let c=0;c<t.length;c++){const r=t[c];r==="<"&&!e&&!n&&(o=!0),r===">"&&!e&&!n&&(o=!1),o&&(r==='"'&&!e&&(n=!n),r==="'"&&!n&&(e=!e))}return o}exports.batch=s.batch;exports.computed=s.computed;exports.effect=s.effect;exports.isSignal=s.isSignal;exports.signal=s.signal;exports.Tina4Element=b.Tina4Element;exports.html=N;

package/dist/core.es.js

@@ -1,25 +1,25 @@
-import { i as p, e as d, a as b, d as A } from "./signal.es.js";
-import { b as w, c as M, s as R } from "./signal.es.js";
+import { i as p, e as m, a as b, d as A, b as y } from "./signal.es.js";
+import { c as M, s as R } from "./signal.es.js";
 import { T as F } from "./component.es.js";
 const N = /* @__PURE__ */ new WeakMap(), u = "t4:";
-function W(t, ...e) {
+function D(t, ...e) {
   let n = N.get(t);
   if (!n) {
     n = document.createElement("template");
     let i = "";
     for (let r = 0; r < t.length; r++)
-      i += t[r], r < e.length && (S(i) ? i += `__t4_${r}__` : i += `<!--${u}${r}-->`);
+      i += t[r], r < e.length && (I(i) ? i += `__t4_${r}__` : i += `<!--${u}${r}-->`);
     n.innerHTML = i, N.set(t, n);
   }
-  const o = n.content.cloneNode(!0), s = y(o);
+  const o = n.content.cloneNode(!0), s = T(o);
   for (const { marker: i, index: r } of s)
-    x(i, e[r]);
-  const c = T(o);
+    E(i, e[r]);
+  const c = x(o);
   for (const i of c)
-    E(i, e);
+    S(i, e);
   return o;
 }
-function y(t) {
+function T(t) {
   const e = [];
   return _(t, (n) => {
     if (n.nodeType === 8) {
@@ -31,7 +31,7 @@ function y(t) {
     }
   }), e;
 }
-function T(t) {
+function x(t) {
   const e = [];
   return _(t, (n) => {
     n.nodeType === 1 && e.push(n);
@@ -44,19 +44,19 @@ function _(t, e) {
     e(s), _(s, e);
   }
 }
-function x(t, e) {
+function E(t, e) {
   const n = t.parentNode;
   if (n)
     if (p(e)) {
       const o = document.createTextNode("");
-      n.replaceChild(o, t), d(() => {
+      n.replaceChild(o, t), m(() => {
         o.data = String(e.value ?? "");
       });
     } else if (typeof e == "function") {
       const o = document.createComment("");
       n.replaceChild(o, t);
       let s = [], c = [];
-      d(() => {
+      m(() => {
         var g;
         for (const l of c) l();
         c = [];
@@ -66,10 +66,10 @@ function x(t, e) {
         A(r), c = i;
         for (const l of s) (g = l.parentNode) == null || g.removeChild(l);
         s = [];
-        const a = h(f), m = o.parentNode;
-        if (m)
+        const a = h(f), d = o.parentNode;
+        if (d)
           for (const l of a)
-            m.insertBefore(l, o), s.push(l);
+            d.insertBefore(l, o), s.push(l);
       });
     } else if (C(e))
       n.replaceChild(e, t);
@@ -87,7 +87,7 @@ function x(t, e) {
       n.replaceChild(o, t);
     }
 }
-function E(t, e) {
+function S(t, e) {
   const n = [];
   for (const o of Array.from(t.attributes)) {
     const s = o.name, c = o.value;
@@ -95,7 +95,7 @@ function E(t, e) {
       const r = s.slice(1), f = c.match(/__t4_(\d+)__/);
       if (f) {
         const a = e[parseInt(f[1], 10)];
-        typeof a == "function" && t.addEventListener(r, a);
+        typeof a == "function" && t.addEventListener(r, (d) => y(() => a(d)));
       }
       n.push(s);
       continue;
@@ -105,9 +105,9 @@ function E(t, e) {
       if (f) {
         const a = e[parseInt(f[1], 10)];
         if (p(a)) {
-          const m = a;
-          d(() => {
-            m.value ? t.setAttribute(r, "") : t.removeAttribute(r);
+          const d = a;
+          m(() => {
+            d.value ? t.setAttribute(r, "") : t.removeAttribute(r);
           });
         } else
           a && t.setAttribute(r, "");
@@ -119,7 +119,7 @@ function E(t, e) {
       const r = s.slice(1), f = c.match(/__t4_(\d+)__/);
       if (f) {
         const a = e[parseInt(f[1], 10)];
-        p(a) ? d(() => {
+        p(a) ? m(() => {
           t[r] = a.value;
         }) : t[r] = a;
       }
@@ -131,10 +131,10 @@ function E(t, e) {
       const r = e[parseInt(i[1], 10)];
       if (p(r)) {
         const f = r;
-        d(() => {
+        m(() => {
           t.setAttribute(s, String(f.value ?? ""));
         });
-      } else typeof r == "function" ? d(() => {
+      } else typeof r == "function" ? m(() => {
         t.setAttribute(s, String(r() ?? ""));
       }) : t.setAttribute(s, String(r ?? ""));
     }
@@ -155,7 +155,7 @@ function h(t) {
 function C(t) {
   return t != null && typeof t == "object" && t.nodeType === 11;
 }
-function S(t) {
+function I(t) {
   let e = !1, n = !1, o = !1;
   for (let s = 0; s < t.length; s++) {
     const c = t[s];
@@ -165,10 +165,10 @@ function S(t) {
 }
 export {
   F as Tina4Element,
-  w as batch,
+  y as batch,
   M as computed,
-  d as effect,
-  W as html,
+  m as effect,
+  D as html,
   p as isSignal,
   R as signal
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tina4js",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "description": "Sub-3KB reactive framework — signals, web components, routing, PWA",
   "type": "module",
   "main": "dist/tina4.cjs.js",

package/readme.md

@@ -1,9 +1,11 @@
 # Tina4-JS
 
-Sub-3KB reactive framework — signals, web components, routing, and PWA.
+Sub-3KB reactive framework — signals, web components, routing, PWA, WebSocket, and API client.
 
 Works standalone or embedded inside [tina4-php](https://github.com/tina4stack/tina4-php) / [tina4-python](https://github.com/tina4stack/tina4-python).
 
+**[Live Gallery — 9 real-world examples](https://tina4stack.github.io/tina4-js/examples/gallery/)** · dashboards, CRUD, chat, auth, cart, forms, PWA, data tables, and live search — all self-contained, no build step.
+
 ## Why?
 
 | Feature               | React  | Preact | Vue    | **tina4-js** |
@@ -193,6 +195,29 @@ pwa.register({
 });
 ```
 
+### WebSocket — Signal-driven real-time
+
+```ts
+import { ws } from 'tina4js/ws';
+
+const socket = ws.connect('wss://api.example.com/ws');
+
+// Reactive signals — use in html templates
+socket.status.value;     // 'connecting' | 'connected' | 'disconnected' | 'error'
+socket.connected.value;  // boolean
+socket.lastMessage.value;
+
+// Pipe messages into a signal
+const messages = signal([]);
+socket.pipe(messages, (msg, current) => [...current, msg]);
+
+// Send
+socket.send({ type: 'ping' }); // objects auto-JSON serialised
+
+// Auto-reconnects with exponential backoff by default
+socket.close(); // intentional close — no reconnect
+```
+
 ### Debug Overlay
 
 A built-in debug overlay that shows live signal values, component tree, route history, and API calls.
@@ -240,6 +265,21 @@ npm run dev       # dev server
 
 ## Changelog
 
+### 1.0.9
+- **Fix:** All `@event` handlers are now automatically wrapped in `batch()` — multiple signal writes inside a single handler produce exactly one re-render after the event finishes, preventing mid-event DOM rebuilds and duplicate handler calls on re-rendered elements
+
+### 1.0.8
+- Added `--css` flag to `tina4 create` — scaffolds with [tina4-css](https://www.npmjs.com/package/tina4-css) included
+- Added gallery of 9 real-world examples: [live demo](https://tina4stack.github.io/tina4-js/examples/gallery/)
+
+### 1.0.7
+- Added WebSocket module (`tina4js/ws`) with signal-driven status, auto-reconnect with exponential backoff, `pipe()` for streaming messages into signals, and JSON auto-parse/serialise
+- Fixed effect error isolation — a throwing effect no longer blocks sibling effects
+- Fixed API request/response correlation for concurrent requests
+- Fixed API tracker always showing empty URL in debug overlay
+- Added per-request `headers` and `params` to all API methods
+- 231 tests across 10 test files
+
 ### 1.0.5
 - **Fix:** Effects now properly unsubscribe from signals on dispose — prevents stale subscriptions accumulating in signal subscriber sets across navigations
 - **Fix:** Function bindings in `html` templates now dispose inner effects when re-evaluated — fixes duplicate DOM nodes from nested reactive lists and conditionals