xote 7.0.0-beta.1 → 7.1.0-beta.1

package/README.md

@@ -1,7 +1,18 @@
-# [xote](https://xote.dev/)
-![NPM Version](https://img.shields.io/npm/v/xote)
-![npm bundle size](https://badgen.net/bundlephobia/min/xote)
-![npm bundle size](https://badgen.net/bundlephobia/minzip/xote)
+<p>
+  <a href="https://xote.dev/">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="docs/banner.svg">
+      <source media="(prefers-color-scheme: light)" srcset="docs/banner-light.svg">
+      <img src="docs/banner.svg" alt="xote - Fine-grained reactivity for ReScript" width="400" />
+    </picture>
+  </a>
+</p>
+
+<p>
+  <a href="https://www.npmjs.com/package/xote"><img src="https://img.shields.io/npm/v/xote" alt="NPM Version" /></a>
+  <a href="https://bundlephobia.com/package/xote"><img src="https://badgen.net/bundlephobia/min/xote" alt="Bundle size" /></a>
+  <a href="https://bundlephobia.com/package/xote"><img src="https://badgen.net/bundlephobia/minzip/xote" alt="Bundle size (gzip)" /></a>
+</p>
 
 xote is a lightweight [ReScript](https://rescript-lang.org/) library that combines fine-grained reactivity and a declarative component system for building user interfaces for the web.
 
@@ -34,43 +45,6 @@ This README uses the application-facing names for public code:
 - `Prop` is the static-or-reactive prop module.
 - `View.Text`, `View.Int`, `View.For`, `View.Show`, `View.Attr.*`, `Router.location`, and `SSRState.signal` are the building blocks used throughout these examples.
 
-### JavaScript
-
-Xote is built for ReScript first, but the compiled package can also be used from JavaScript. Import the focused client entry and build nodes with `View` or `Html` helpers:
-
-```js
-import { Signal, Computed, Effect, View } from "xote/client";
-
-const count = Signal.make(0);
-const doubled = Computed.make(() => Signal.get(count) * 2);
-
-Effect.run(() => {
-  console.log("Count:", Signal.get(count));
-});
-
-const app = View.element("div", [], [], [
-  View.element("h1", [], [], [View.text("Counter")]),
-  View.element("p", [], [], [
-    View.text("Count: "),
-    View.signalText(() => String(Signal.get(count))),
-  ]),
-  View.element("p", [], [], [
-    View.text("Doubled: "),
-    View.signalText(() => String(Signal.get(doubled))),
-  ]),
-  View.element(
-    "button",
-    [],
-    [["click", () => Signal.update(count, n => n + 1)]],
-    [View.text("Increment")],
-  ),
-]);
-
-View.mountById(app, "app");
-```
-
-Use `xote/client` for browser UI, `xote/router` for routing, `xote/ssr` for server rendering, `xote/hydration` for hydrating server-rendered pages, and `xote/mdx` for MDX integration.
-
 ### Quick Example
 
 ```rescript
@@ -230,6 +204,25 @@ let todos = Signal.make([
 </p>
 ```
 
+### Auto-tracked Blocks
+
+When a block of UI depends on several signals at once, `View.tracked` lets you read them inline — every signal read while the body runs subscribes the block automatically, and the block re-renders when any of them changes:
+
+```rescript
+let loggedIn = Signal.make(false)
+let name = Signal.make("Ada")
+
+{View.tracked(() =>
+  if Signal.get(loggedIn) {
+    <p> <View.Text> {`Hello, ${Signal.get(name)}`} </View.Text> </p>
+  } else {
+    <p> <View.Text> "Please log in" </View.Text> </p>
+  }
+)}
+```
+
+Dependencies are re-discovered on every run, so conditional reads work: above, `name` is only tracked while `loggedIn` is true. The tradeoff is granularity — a tracked block replaces its children wholesale (no diffing) when a dependency changes, so keep tracked blocks small and prefer `View.For` with `by` for lists.
+
 ### Static or Reactive Props
 
 Use `Prop` when a component prop can accept either a static value or a signal:
@@ -286,6 +279,43 @@ For server/client state transfer, prefer `SSRState.signal` when creating a synce
 let count = SSRState.signal("count", 0, SSRState.Codec.int)
 ```
 
+### JavaScript Interop
+
+Xote is built for ReScript first, but the compiled package can also be used from JavaScript. Import the focused client entry and build nodes with `View` or `Html` helpers:
+
+```js
+import { Signal, Computed, Effect, View } from "xote/client";
+
+const count = Signal.make(0);
+const doubled = Computed.make(() => Signal.get(count) * 2);
+
+Effect.run(() => {
+  console.log("Count:", Signal.get(count));
+});
+
+const app = View.element("div", [], [], [
+  View.element("h1", [], [], [View.text("Counter")]),
+  View.element("p", [], [], [
+    View.text("Count: "),
+    View.signalText(() => String(Signal.get(count))),
+  ]),
+  View.element("p", [], [], [
+    View.text("Doubled: "),
+    View.signalText(() => String(Signal.get(doubled))),
+  ]),
+  View.element(
+    "button",
+    [],
+    [["click", () => Signal.update(count, n => n + 1)]],
+    [View.text("Increment")],
+  ),
+]);
+
+View.mountById(app, "app");
+```
+
+Use `xote/client` for browser UI, `xote/router` for routing, `xote/ssr` for server rendering, `xote/hydration` for hydrating server-rendered pages, and `xote/mdx` for MDX integration.
+
 Check the [website](https://brnrdog.github.io/xote/) for more comprehensive documentations about Xote and Signals.
 
 ## Releasing

package/dist/{RuntimeJsxProp.res-A6N-qWoK.js → RuntimeJsxProp.res-gr8AK5hj.js}

@@ -1 +1 @@
-const e=require("./RuntimeAttr.res-Cr5Qmz0i.js"),t=require("./View.res-C36--SJD.js");var n=e.D({a:()=>p,button:()=>a,div:()=>r,h1:()=>s,h2:()=>c,h3:()=>l,input:()=>o,li:()=>f,p:()=>u,span:()=>i,ul:()=>d});function r(e,n,r,i){return t.a(`div`,e,n,r,void 0)}function i(e,n,r,i){return t.a(`span`,e,n,r,void 0)}function a(e,n,r,i){return t.a(`button`,e,n,r,void 0)}function o(e,n,r){return t.a(`input`,e,n,void 0,void 0)}function s(e,n,r,i){return t.a(`h1`,e,n,r,void 0)}function c(e,n,r,i){return t.a(`h2`,e,n,r,void 0)}function l(e,n,r,i){return t.a(`h3`,e,n,r,void 0)}function u(e,n,r,i){return t.a(`p`,e,n,r,void 0)}function d(e,n,r,i){return t.a(`ul`,e,n,r,void 0)}function f(e,n,r,i){return t.a(`li`,e,n,r,void 0)}function p(e,n,r,i){return t.a(`a`,e,n,r,void 0)}function m(e,n){return t.f(n)?n.TAG===`Reactive`?t.s(e,n._0):t.r(e,n._0):t.u(n)?t.i(e,n):t.d(n)?t.s(e,n):t.r(e,n)}function h(n,r){if(t.f(r)){if(r.TAG!==`Reactive`)return t.r(n,e.t(r._0));let i=r._0,a=t.x(()=>e.t(e.l(i)),void 0,void 0);return t.s(n,a)}if(t.u(r))return t.i(n,()=>e.t(r()));if(!t.d(r))return t.r(n,e.t(r));let i=t.x(()=>e.t(e.l(r)),void 0,void 0);return t.s(n,i)}Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return p}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return m}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return n}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return h}});
+const e=require("./RuntimeAttr.res-Cr5Qmz0i.js"),t=require("./View.res-DhZkE_sC.js");var n=e.D({a:()=>p,button:()=>a,div:()=>r,h1:()=>s,h2:()=>c,h3:()=>l,input:()=>o,li:()=>f,p:()=>u,span:()=>i,ul:()=>d});function r(e,n,r,i){return t.a(`div`,e,n,r,void 0)}function i(e,n,r,i){return t.a(`span`,e,n,r,void 0)}function a(e,n,r,i){return t.a(`button`,e,n,r,void 0)}function o(e,n,r){return t.a(`input`,e,n,void 0,void 0)}function s(e,n,r,i){return t.a(`h1`,e,n,r,void 0)}function c(e,n,r,i){return t.a(`h2`,e,n,r,void 0)}function l(e,n,r,i){return t.a(`h3`,e,n,r,void 0)}function u(e,n,r,i){return t.a(`p`,e,n,r,void 0)}function d(e,n,r,i){return t.a(`ul`,e,n,r,void 0)}function f(e,n,r,i){return t.a(`li`,e,n,r,void 0)}function p(e,n,r,i){return t.a(`a`,e,n,r,void 0)}function m(e,n){return t.f(n)?n.TAG===`Reactive`?t.s(e,n._0):t.r(e,n._0):t.u(n)?t.i(e,n):t.d(n)?t.s(e,n):t.r(e,n)}function h(n,r){if(t.f(r)){if(r.TAG!==`Reactive`)return t.r(n,e.t(r._0));let i=r._0,a=t.x(()=>e.t(e.l(i)),void 0,void 0);return t.s(n,a)}if(t.u(r))return t.i(n,()=>e.t(r()));if(!t.d(r))return t.r(n,e.t(r));let i=t.x(()=>e.t(e.l(r)),void 0,void 0);return t.s(n,i)}Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return p}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return m}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return n}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return h}});

package/dist/{RuntimeJsxProp.res-D3W5GXqT.mjs → RuntimeJsxProp.res-k7-PNxKK.mjs}

@@ -1,5 +1,5 @@
 import { D as e, l as t, t as n } from "./RuntimeAttr.res-DAZkL5CF.mjs";
-import { a as r, d as i, f as a, i as o, r as s, s as c, u as l, x as u } from "./View.res-SuqJrQPC.mjs";
+import { a as r, d as i, f as a, i as o, r as s, s as c, u as l, x as u } from "./View.res-3LSynUOy.mjs";
 //#region src/Html.res.mjs
 var d = /* @__PURE__ */ e({
 	a: () => S,