tina4js 1.0.9 → 1.0.11

package/dist/core.cjs.js

@@ -1 +1 @@
-"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;
+"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 c=0;c<t.length;c++)f+=t[c],c<e.length&&(E(f)?f+=`__t4_${c}__`:f+=`<!--${m}${c}-->`);n.innerHTML=f,_.set(t,n)}const o=n.content.cloneNode(!0),i=y(o);for(const{marker:f,index:c}of i)S(f,e[c]);const r=C(o);for(const f of r)T(f,e);return o}function y(t){const e=[];return p(t,n=>{if(n.nodeType===8){const o=n.data;if(o&&o.startsWith(m)){const i=parseInt(o.slice(m.length),10);e.push({marker:n,index:i})}}}),e}function C(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 i=n[o];e(i),p(i,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 i=[],r=[];s.effect(()=>{var g;for(const d of r)d();r=[];const f=[],c=s._getEffectCollector();s._setEffectCollector(f);const a=e();s._setEffectCollector(c),r=f;for(const d of i)(g=d.parentNode)==null||g.removeChild(d);i=[];const l=h(a),u=o.parentNode;if(u)for(const d of l)u.insertBefore(d,o),i.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 i of e){const r=h(i);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 i=o.name,r=o.value;if(i.startsWith("@")){const c=i.slice(1),a=r.match(/__t4_(\d+)__/);if(a){const l=e[parseInt(a[1],10)];typeof l=="function"&&t.addEventListener(c,u=>s.batch(()=>l(u)))}n.push(i);continue}if(i.startsWith("?")){const c=i.slice(1),a=r.match(/__t4_(\d+)__/);if(a){const l=e[parseInt(a[1],10)];if(s.isSignal(l)){const u=l;s.effect(()=>{u.value?t.setAttribute(c,""):t.removeAttribute(c)})}else typeof l=="function"?s.effect(()=>{l()?t.setAttribute(c,""):t.removeAttribute(c)}):l&&t.setAttribute(c,"")}n.push(i);continue}if(i.startsWith(".")){const c=i.slice(1),a=r.match(/__t4_(\d+)__/);if(a){const l=e[parseInt(a[1],10)];s.isSignal(l)?s.effect(()=>{t[c]=l.value}):t[c]=l}n.push(i);continue}const f=r.match(/__t4_(\d+)__/);if(f){const c=e[parseInt(f[1],10)];if(s.isSignal(c)){const a=c;s.effect(()=>{t.setAttribute(i,String(a.value??""))})}else typeof c=="function"?s.effect(()=>{t.setAttribute(i,String(c()??""))}):t.setAttribute(i,String(c??""))}}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 i=0;i<t.length;i++){const r=t[i];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,22 +1,22 @@
-import { i as p, e as m, a as b, d as A, b as y } from "./signal.es.js";
+import { i as u, e as d, a as C, 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:";
+const N = /* @__PURE__ */ new WeakMap(), p = "t4:";
 function D(t, ...e) {
   let n = N.get(t);
   if (!n) {
     n = document.createElement("template");
-    let i = "";
+    let c = "";
     for (let r = 0; r < t.length; r++)
-      i += t[r], r < e.length && (I(i) ? i += `__t4_${r}__` : i += `<!--${u}${r}-->`);
-    n.innerHTML = i, N.set(t, n);
+      c += t[r], r < e.length && (I(c) ? c += `__t4_${r}__` : c += `<!--${p}${r}-->`);
+    n.innerHTML = c, N.set(t, n);
   }
   const o = n.content.cloneNode(!0), s = T(o);
-  for (const { marker: i, index: r } of s)
-    E(i, e[r]);
-  const c = x(o);
-  for (const i of c)
-    S(i, e);
+  for (const { marker: c, index: r } of s)
+    E(c, e[r]);
+  const i = x(o);
+  for (const c of i)
+    S(c, e);
   return o;
 }
 function T(t) {
@@ -24,8 +24,8 @@ function T(t) {
   return _(t, (n) => {
     if (n.nodeType === 8) {
       const o = n.data;
-      if (o && o.startsWith(u)) {
-        const s = parseInt(o.slice(u.length), 10);
+      if (o && o.startsWith(p)) {
+        const s = parseInt(o.slice(p.length), 10);
         e.push({ marker: n, index: s });
       }
     }
@@ -47,39 +47,39 @@ function _(t, e) {
 function E(t, e) {
   const n = t.parentNode;
   if (n)
-    if (p(e)) {
+    if (u(e)) {
       const o = document.createTextNode("");
-      n.replaceChild(o, t), m(() => {
+      n.replaceChild(o, t), d(() => {
         o.data = String(e.value ?? "");
       });
     } else if (typeof e == "function") {
       const o = document.createComment("");
       n.replaceChild(o, t);
-      let s = [], c = [];
-      m(() => {
+      let s = [], i = [];
+      d(() => {
         var g;
-        for (const l of c) l();
-        c = [];
-        const i = [], r = b();
-        A(i);
-        const f = e();
-        A(r), c = i;
+        for (const l of i) l();
+        i = [];
+        const c = [], r = C();
+        A(c);
+        const a = e();
+        A(r), i = c;
         for (const l of s) (g = l.parentNode) == null || g.removeChild(l);
         s = [];
-        const a = h(f), d = o.parentNode;
-        if (d)
-          for (const l of a)
-            d.insertBefore(l, o), s.push(l);
+        const f = h(a), m = o.parentNode;
+        if (m)
+          for (const l of f)
+            m.insertBefore(l, o), s.push(l);
       });
-    } else if (C(e))
+    } else if (b(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 s of e) {
-        const c = h(s);
-        for (const i of c) o.appendChild(i);
+        const i = h(s);
+        for (const c of i) o.appendChild(c);
       }
       n.replaceChild(o, t);
     } else {
@@ -90,51 +90,52 @@ 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;
+    const s = o.name, i = o.value;
     if (s.startsWith("@")) {
-      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, (d) => y(() => a(d)));
+      const r = s.slice(1), a = i.match(/__t4_(\d+)__/);
+      if (a) {
+        const f = e[parseInt(a[1], 10)];
+        typeof f == "function" && t.addEventListener(r, (m) => y(() => f(m)));
       }
       n.push(s);
       continue;
     }
     if (s.startsWith("?")) {
-      const r = s.slice(1), f = c.match(/__t4_(\d+)__/);
-      if (f) {
-        const a = e[parseInt(f[1], 10)];
-        if (p(a)) {
-          const d = a;
-          m(() => {
-            d.value ? t.setAttribute(r, "") : t.removeAttribute(r);
+      const r = s.slice(1), a = i.match(/__t4_(\d+)__/);
+      if (a) {
+        const f = e[parseInt(a[1], 10)];
+        if (u(f)) {
+          const m = f;
+          d(() => {
+            m.value ? t.setAttribute(r, "") : t.removeAttribute(r);
           });
-        } else
-          a && t.setAttribute(r, "");
+        } else typeof f == "function" ? d(() => {
+          f() ? t.setAttribute(r, "") : t.removeAttribute(r);
+        }) : f && t.setAttribute(r, "");
       }
       n.push(s);
       continue;
     }
     if (s.startsWith(".")) {
-      const r = s.slice(1), f = c.match(/__t4_(\d+)__/);
-      if (f) {
-        const a = e[parseInt(f[1], 10)];
-        p(a) ? m(() => {
-          t[r] = a.value;
-        }) : t[r] = a;
+      const r = s.slice(1), a = i.match(/__t4_(\d+)__/);
+      if (a) {
+        const f = e[parseInt(a[1], 10)];
+        u(f) ? d(() => {
+          t[r] = f.value;
+        }) : t[r] = f;
       }
       n.push(s);
       continue;
     }
-    const i = c.match(/__t4_(\d+)__/);
-    if (i) {
-      const r = e[parseInt(i[1], 10)];
-      if (p(r)) {
-        const f = r;
-        m(() => {
-          t.setAttribute(s, String(f.value ?? ""));
+    const c = i.match(/__t4_(\d+)__/);
+    if (c) {
+      const r = e[parseInt(c[1], 10)];
+      if (u(r)) {
+        const a = r;
+        d(() => {
+          t.setAttribute(s, String(a.value ?? ""));
         });
-      } else typeof r == "function" ? m(() => {
+      } else typeof r == "function" ? d(() => {
         t.setAttribute(s, String(r() ?? ""));
       }) : t.setAttribute(s, String(r ?? ""));
     }
@@ -143,7 +144,7 @@ function S(t, e) {
 }
 function h(t) {
   if (t == null || t === !1) return [];
-  if (C(t)) return Array.from(t.childNodes);
+  if (b(t)) return Array.from(t.childNodes);
   if (t instanceof Node) return [t];
   if (Array.isArray(t)) {
     const e = [];
@@ -152,14 +153,14 @@ function h(t) {
   }
   return [document.createTextNode(String(t))];
 }
-function C(t) {
+function b(t) {
   return t != null && typeof t == "object" && t.nodeType === 11;
 }
 function I(t) {
   let e = !1, n = !1, o = !1;
   for (let s = 0; s < t.length; s++) {
-    const c = t[s];
-    c === "<" && !e && !n && (o = !0), c === ">" && !e && !n && (o = !1), o && (c === '"' && !e && (n = !n), c === "'" && !n && (e = !e));
+    const i = t[s];
+    i === "<" && !e && !n && (o = !0), i === ">" && !e && !n && (o = !1), o && (i === '"' && !e && (n = !n), i === "'" && !n && (e = !e));
   }
   return o;
 }
@@ -167,8 +168,8 @@ export {
   F as Tina4Element,
   y as batch,
   M as computed,
-  m as effect,
+  d as effect,
   D as html,
-  p as isSignal,
+  u as isSignal,
   R as signal
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tina4js",
-  "version": "1.0.9",
+  "version": "1.0.11",
   "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' | 'open' | 'closed' | 'reconnecting'
+socket.connected.value;  // boolean — true when status is 'open'
+socket.lastMessage.value; // last received message (JSON auto-parsed)
+
+// 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