xote 6.4.0 → 7.0.0-beta.1

package/README.md

@@ -1,4 +1,4 @@
-# [xote](https://brnrdog.github.io/xote/)
+# [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)
@@ -28,13 +28,48 @@ Then, add it to your ReScript project's `rescript.json`. You'll need to declare
 
 The compiler flag `-open Xote` is optional, it makes the Xote modules available unqualified inside your source files.
 
-This README uses the application-facing names introduced for public code:
+This README uses the application-facing names for public code:
+
+- `View` is the module for building and mounting DOM nodes.
+- `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");
+```
 
-- `View` is the official module for building and mounting DOM nodes.
-- `Node` is a deprecated compatibility alias for `View` and will be removed in a future release.
-- `Prop` is the official static-or-reactive prop module.
-- `ReactiveProp` is a deprecated compatibility alias for `Prop`.
-- `View.signalText`, `View.each`, `View.eachWithKey`, `View.Attr.*`, `Router.location`, and `SSRState.signal` are preferred in examples, while the deprecated `Node.signalText`, `Node.list`, `Node.keyedList`, `Node.attr`, `ReactiveProp.*`, and `SSRState.make` names remain supported.
+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
 
@@ -57,15 +92,17 @@ module App = {
 
     // Build the UI with JSX
     <div>
-      <h1> {View.text("Counter")} </h1>
+      <h1> <View.Text> "Counter" </View.Text> </h1>
       <p>
-        {View.signalText(() => "Count: " ++ Signal.get(count)->Int.toString)}
+        <View.Text> "Count: " </View.Text>
+        <View.Int> {count} </View.Int>
       </p>
       <p>
-        {View.signalText(() => "Doubled: " ++ Signal.get(doubled)->Int.toString)}
+        <View.Text> "Doubled: " </View.Text>
+        <View.Int> {doubled} </View.Int>
       </p>
       <button onClick={(_evt: Dom.event) => Signal.update(count, n => n + 1)}>
-        {View.text("Increment")}
+        <View.Text> "Increment" </View.Text>
       </button>
     </div>
   }
@@ -86,7 +123,7 @@ Here's an example of a reusable component with properties:
 @jsx.component
 let make = (~name: string, ~greeting: string="Hello") => {
   <p>
-    {View.text(greeting ++ ", " ++ name ++ "!")}
+    <View.Text> {`${greeting}, ${name}!`} </View.Text>
   </p>
 }
 
@@ -126,17 +163,13 @@ On top of the reactive primitives with signals, Xote provides a declarative view
 ```rescript
 let className = Signal.make("card")
 
-Html.div(
-  ~attrs=[View.Attr.signal("class", className)],
-  ~children=[
-    View.text("Status: "),
-    View.signalText(() => Signal.get(className)),
-  ],
-  (),
-)
+<div class={Prop.signal(className)}>
+  <View.Text> "Status: " </View.Text>
+  <View.Text> {className} </View.Text>
+</div>
 ```
 
-For rendering collections, prefer `View.each` for simple lists and `View.eachWithKey` when items have stable identity:
+For rendering collections in JSX, prefer `View.For`. Add `by` when items have stable identity and should reconcile by key:
 
 ```rescript
 type todo = {id: string, title: string}
@@ -146,11 +179,55 @@ let todos = Signal.make([
   {id: "2", title: "Ship release"},
 ])
 
-View.eachWithKey(
-  todos,
-  todo => todo.id,
-  todo => <li> {View.text(todo.title)} </li>,
-)
+<View.For
+  each={Prop.signal(todos)}
+  by={todo => todo.id}
+  render={todo => <li> <View.Text> {todo.title} </View.Text> </li>}
+/>
+```
+
+`View` also provides component primitives for static or reactive values. Their children can be raw values, signals, `Prop.t` values, or functions.
+
+```rescript
+<View.For
+  each={Prop.static(["Draft", "Review", "Ship"])}
+  render={label => <span> <View.Text> {label} </View.Text> </span>}
+/>
+
+<ul>
+  <View.For
+    each={Prop.signal(todos)}
+    by={todo => todo.id}
+    render={todo => <li> <View.Text> {todo.title} </View.Text> </li>}
+  />
+</ul>
+
+<View.Show when_={Prop.signal(isReady)} fallback={<p> <View.Text> "Loading" </View.Text> </p>}>
+  <p> <View.Text> "Ready" </View.Text> </p>
+</View.Show>
+
+<View.Maybe
+  value={Prop.signal(selectedTodo)}
+  fallback={<p> <View.Text> "No selection" </View.Text> </p>}
+  render={todo => <p> <View.Text> {todo.title} </View.Text> </p>}
+/>
+
+<View.Value
+  value={Prop.signal(count)}
+  render={count =>
+    <p>
+      <View.Text> "Count: " </View.Text>
+      <View.Int> {count} </View.Int>
+    </p>
+  }
+/>
+
+<p>
+  <View.Text> "Count: " </View.Text>
+  <View.Int> {count} </View.Int>
+  <View.Text> ", ready: " </View.Text>
+  <View.Bool> {isReady} </View.Bool>
+</p>
 ```
 
 ### Static or Reactive Props
@@ -166,23 +243,41 @@ let make = (~className: Prop.t<string>=Prop.static("badge"), ~children) => {
 let tone = Signal.make("badge badge-info")
 
 <Badge className={Prop.signal(tone)}>
-  {View.text("Live")}
+  <View.Text> "Live" </View.Text>
 </Badge>
 ```
 
-`Prop` is the source module for static-or-reactive props. `ReactiveProp` remains available as a deprecated compatibility alias.
+`Prop` is the module for static-or-reactive props.
 
 ### Router and SSR State
 
-Router state is signal-based. Read the shared location signal directly with `Router.location()`:
+Initialize the router once at your app entry, then describe your screens with
+the `Router.routes` component. Each route matches a pattern and receives the
+parsed params:
 
 ```rescript
 Router.init(())
 
-let pathname = View.signalText(() => {
-  let location = Signal.get(Router.location())
-  "Current path: " ++ location.pathname
-})
+let app = () =>
+  Router.routes([
+    {pattern: "/", render: _ => <Home />},
+    {pattern: "/about", render: _ => <About />},
+    {
+      pattern: "/users/:id",
+      render: params =>
+        <UserPage id={params->Dict.get("id")->Option.getOr("")} />,
+    },
+  ])
+```
+
+Use the `Router.Link` component for client-side navigation without a full page
+reload:
+
+```rescript
+<nav>
+  <Router.Link to="/"> <View.Text> "Home" </View.Text> </Router.Link>
+  <Router.Link to="/about" class="nav-link"> <View.Text> "About" </View.Text> </Router.Link>
+</nav>
 ```
 
 For server/client state transfer, prefer `SSRState.signal` when creating a synced signal:
@@ -193,6 +288,10 @@ let count = SSRState.signal("count", 0, SSRState.Codec.int)
 
 Check the [website](https://brnrdog.github.io/xote/) for more comprehensive documentations about Xote and Signals.
 
+## Releasing
+
+Releases are automated with semantic-release and published to npm. See [docs/RELEASING.md](docs/RELEASING.md) for the stable and beta channels and the release flow.
+
 ## License
 
 LGPL v3 

package/dist/RuntimeAttr.res-Cr5Qmz0i.js

@@ -0,0 +1 @@
+var e=Object.defineProperty,t=(t,n)=>{let r={};for(var i in t)e(r,i,{get:t[i],enumerable:!0});return n||e(r,Symbol.toStringTag,{value:`Module`}),r};function n(e){return e===void 0?{BS_PRIVATE_NESTED_SOME_NONE:0}:e!==null&&e.BS_PRIVATE_NESTED_SOME_NONE!==void 0?{BS_PRIVATE_NESTED_SOME_NONE:e.BS_PRIVATE_NESTED_SOME_NONE+1|0}:e}function r(e){if(e!=null)return n(e)}function i(e){if(e===null||e.BS_PRIVATE_NESTED_SOME_NONE===void 0)return e;let t=e.BS_PRIVATE_NESTED_SOME_NONE;if(t!==0)return{BS_PRIVATE_NESTED_SOME_NONE:t-1|0}}var a={contents:0};function o(){return a.contents=a.contents+1|0,a.contents}var s={contents:0},c={contents:0};function l(){return{first:void 0,last:void 0,computedSubscriberCount:0,version:0,compute:void 0,firstDep:void 0,lastDep:void 0,flags:0,level:0,deferEffectsUntilRecompute:!1,lastGlobalVersion:0}}function ee(e,t){return{first:void 0,last:void 0,computedSubscriberCount:0,version:0,compute:e,firstDep:void 0,lastDep:void 0,flags:1,level:0,deferEffectsUntilRecompute:t===void 0?!1:t,lastGlobalVersion:0}}function te(e,t,n,r,i){return{id:e,kind:t,run:n,firstDep:void 0,lastDep:void 0,flags:1,level:0,name:r,backingSubs:i}}function u(e){e.flags&=-2}function ne(e){return(e.flags&2)!=0}function re(e){e.flags|=2}function ie(e){e.flags&=-3}function d(e){return(e.flags&1)!=0}function f(e){e.flags|=1}function p(e){e.flags&=-2}function ae(e){return(e.flags&2)!=0}function m(e){e.flags|=2}function oe(e){e.flags&=-3}function h(e){return e.compute!==void 0}function g(e,t){return{subs:e,observer:t,nextDep:void 0,prevDep:void 0,nextSub:void 0,prevSub:void 0,lastTrackedVersion:0}}function _(e,t){t.prevSub=e.last,t.nextSub=void 0;let n=e.last;if(n===void 0?e.first=t:n.nextSub=t,e.last=t,t.observer.compute!==void 0){e.computedSubscriberCount=e.computedSubscriberCount+1|0;return}}function v(e,t){t.prevDep=e.lastDep,t.nextDep=void 0;let n=e.lastDep;n===void 0?e.firstDep=t:n.nextDep=t,e.lastDep=t}function y(e){let t=e.subs,n=e.prevSub;n===void 0?t.first=e.nextSub:n.nextSub=e.nextSub;let r=e.nextSub;if(r===void 0?t.last=e.prevSub:r.prevSub=e.prevSub,e.prevSub=void 0,e.nextSub=void 0,e.observer.compute!==void 0&&t.computedSubscriberCount>0){t.computedSubscriberCount=t.computedSubscriberCount-1|0;return}}function se(e,t){let n=t.prevDep;n===void 0?e.firstDep=t.nextDep:n.nextDep=t.nextDep;let r=t.nextDep;r===void 0?e.lastDep=t.prevDep:r.prevDep=t.prevDep,t.prevDep=void 0,t.nextDep=void 0}function ce(e,t){let n=t.prevDep;n===void 0?e.firstDep=t.nextDep:n.nextDep=t.nextDep;let r=t.nextDep;r===void 0?e.lastDep=t.prevDep:r.prevDep=t.prevDep,t.prevDep=void 0,t.nextDep=void 0}function le(e){let t=e.firstDep;for(;t!==void 0;){let e=t;if(e!==void 0){let n=e.nextDep;y(e),t=n}}e.firstDep=void 0,e.lastDep=void 0}function ue(e){let t=e.firstDep;for(;t!==void 0;){let e=t;if(e!==void 0){let n=e.nextDep;y(e),t=n}}e.firstDep=void 0,e.lastDep=void 0}function b(e,t){t.prevDep=e.lastDep,t.nextDep=void 0;let n=e.lastDep;n===void 0?e.firstDep=t:n.nextDep=t,e.lastDep=t}var x={contents:void 0},S={contents:void 0},C={contents:0},w={contents:void 0},T={contents:void 0},E=[],D=[],O={contents:!1},k={contents:!1},A={contents:!1},j={contents:0},M={contents:0},N=[],de=(function(e){e.length=0}),P=(function(e,t){if(!(t<=0)){if(t>=e.length){e.length=0;return}e.copyWithin(0,t),e.length-=t}});function F(e){ne(e)||(re(e),E.length===0?k.contents=!1:e.level<j.contents&&(k.contents=!0),E.push(e),j.contents=e.level)}function fe(e){ae(e)||(m(e),D.length===0?A.contents=!1:e.level<M.contents&&(A.contents=!0),D.push(e),M.contents=e.level)}function I(e,t){if(e.firstDep===void 0){let n=g(t,e);n.lastTrackedVersion=C.contents,b(e,n),_(t,n),w.contents=n;return}let n=C.contents,r=!1,i=w.contents;if(i!==void 0)if(i.subs===t&&i.observer===e)i.lastTrackedVersion=n,r=!0;else{let a=i.nextDep;a!==void 0&&a.subs===t&&a.observer===e&&(a.lastTrackedVersion=n,w.contents=a,r=!0)}if(!r){let i=t.last;i!==void 0&&i.lastTrackedVersion===n&&i.observer===e&&(i.lastTrackedVersion=n,w.contents=i,r=!0)}if(r)return;let a=!1,o,s=e.firstDep;for(;s!==void 0&&!a;){let e=s;e!==void 0&&(e.subs===t?(e.lastTrackedVersion=n,o=e,a=!0):s=e.nextDep)}if(a){w.contents=o;return}let c=g(t,e);c.lastTrackedVersion=n,b(e,c),_(t,c),w.contents=c}function L(e,t){if(e.firstDep===void 0){let n=g(t,e);n.lastTrackedVersion=C.contents,v(e,n),_(t,n),T.contents=n;return}let n=C.contents,r=!1,i=T.contents;if(i!==void 0)if(i.subs===t&&i.observer===e)i.lastTrackedVersion=n,r=!0;else{let a=i.nextDep;a!==void 0&&a.subs===t&&a.observer===e&&(a.lastTrackedVersion=n,T.contents=a,r=!0)}if(!r){let i=t.last;i!==void 0&&i.lastTrackedVersion===n&&i.observer===e&&(i.lastTrackedVersion=n,T.contents=i,r=!0)}if(r)return;let a=!1,o,s=e.firstDep;for(;s!==void 0&&!a;){let e=s;e!==void 0&&(e.subs===t?(e.lastTrackedVersion=n,o=e,a=!0):s=e.nextDep)}if(a){T.contents=o;return}let c=g(t,e);c.lastTrackedVersion=n,v(e,c),_(t,c),T.contents=c}function R(e){let t=x.contents;if(t!==void 0)return I(t,e);let n=S.contents;if(n!==void 0)return L(n,e)}function z(e,t){return e.level-t.level|0}function B(e,t){return e.level-t.level|0}function V(e){let t=0,n=e.firstDep;for(;n!==void 0;){let e=n;e!==void 0&&(h(e.subs)&&e.subs.level>t&&(t=e.subs.level),n=e.nextDep)}return t+1|0}function H(e){let t=0,n=e.firstDep;for(;n!==void 0;){let e=n;e!==void 0&&(h(e.subs)&&e.subs.level>t&&(t=e.subs.level),n=e.nextDep)}return t+1|0}function U(e,t){let n=C.contents,r=e.version;s.contents=s.contents+1|0,C.contents=s.contents,t&&oe(e);let i=x.contents,a=w.contents;x.contents=e,w.contents=e.firstDep;try{let t=e.compute;t!==void 0&&t();let o=e.firstDep;for(;o!==void 0;){let t=o;if(t!==void 0){let n=t.nextDep;t.lastTrackedVersion!==C.contents&&(y(t),ce(e,t)),o=n}}if(p(e),e.lastGlobalVersion=c.contents,e.first!==void 0&&e.version!==r){let t=e.first;for(;t!==void 0;){let e=t;if(e!==void 0){let n=e.observer;if(h(n))f(n);else{let t=S.contents;t!==void 0&&t===e.observer||F(e.observer)}t=e.nextSub}}}x.contents=i,w.contents=a,C.contents=n;return}catch(e){throw x.contents=i,w.contents=a,C.contents=n,e}}function pe(e){let t=e.level;if(U(e,!0),t===0){e.level=V(e);return}}function me(e){let t=e.level,n=C.contents;s.contents=s.contents+1|0,C.contents=s.contents,ie(e);let r=S.contents,i=T.contents;S.contents=e,T.contents=e.firstDep;try{e.run();let t=e.firstDep;for(;t!==void 0;){let n=t;if(n!==void 0){let r=n.nextDep;n.lastTrackedVersion!==C.contents&&(y(n),se(e,n)),t=r}}u(e),S.contents=r,T.contents=i,C.contents=n}catch(e){throw S.contents=r,T.contents=i,C.contents=n,e}if(t===0){e.level=H(e);return}}function W(){O.contents=!0;try{for(;E.length!==0||D.length!==0;){if(D.length!==0){let e=D.length;e>1&&A.contents&&(D.sort(B),A.contents=!1);let t=0;for(;t<e;){let e=D[t];e!==void 0&&pe(e),t=t+1|0}P(D,e),D.length===0&&(A.contents=!1)}if(E.length!==0){let e=E.length;e>1&&k.contents&&(E.sort(z),k.contents=!1);let t=0;for(;t<e;){let e=E[t];e!==void 0&&me(e),t=t+1|0}P(E,e),E.length===0&&(k.contents=!1)}}O.contents=!1;return}catch(e){throw O.contents=!1,e}}function he(e){if(e.first!==void 0)if(!h(e)&&e.computedSubscriberCount===0){let t=e.first;for(;t!==void 0;){let e=t;e!==void 0&&(F(e.observer),t=e.nextSub)}}else{N.push(e);let t=0;for(;t<N.length;){let e=N[t];if(t=t+1|0,e!==void 0){let t=e.first;for(;t!==void 0;){let n=t;if(n!==void 0){let r=n.observer;h(r)?d(r)||(f(r),N.push(r)):h(e)&&e.deferEffectsUntilRecompute?fe(e):F(n.observer),t=n.nextSub}}}}de(N)}if((E.length!==0||D.length!==0)&&!O.contents)return W()}function G(e){if(!h(e)||!d(e))return;if(e.lastGlobalVersion===c.contents)return p(e);let t=e.level;if(U(e,!1),t===0){e.level=V(e);return}}function ge(e){let t=O.contents;O.contents=!0;try{let n=e();return t||(O.contents=!1,(E.length!==0||D.length!==0)&&W()),n}catch(e){throw t||(O.contents=!1),e}}function _e(e){let t=x.contents,n=S.contents,r=w.contents,i=T.contents;x.contents=void 0,S.contents=void 0,w.contents=void 0,T.contents=void 0;try{let a=e();return x.contents=t,S.contents=n,w.contents=r,T.contents=i,a}catch(e){throw x.contents=t,S.contents=n,w.contents=r,T.contents=i,e}}function K(e,t){return e===t}function q(e,t){return!1}function ve(e,t,n){return{id:o(),value:e,equals:n===void 0?K:n,name:t,subs:l()}}function ye(e,t){return{id:o(),value:e,equals:q,name:t,subs:l()}}function be(e){return G(e.subs),R(e.subs),e.value}function xe(e){return G(e.subs),e.value}function J(e,t){let n;try{n=!e.equals(e.value,t)}catch{n=!0}if(n)return e.value=t,e.subs.version=e.subs.version+1|0,c.contents=c.contents+1|0,he(e.subs)}function Se(e,t){J(e,t(e.value))}var Ce=ge,we=_e,Te=t({batch:()=>Ae,defaultEquals:()=>Ee,get:()=>X,make:()=>Y,makeForComputed:()=>Oe,neverEquals:()=>De,peek:()=>Z,set:()=>Q,untrack:()=>je,update:()=>ke}),Ee=K,De=q,Y=ve,Oe=ye,X=be,Z=xe,Q=J,ke=Se,Ae=Ce,je=we;function Me(e,t){delete e[t]}function Ne(e,t){if(e!==void 0)return n(t(i(e)))}function $(e,t){return e===void 0?t:i(e)}function Pe(e){return e!==void 0}var Fe=[`checked`,`disabled`,`required`,`readonly`,`multiple`,`aria-hidden`,`aria-expanded`,`aria-selected`,`draggable`,`hidden`,`contenteditable`,`spellcheck`,`autofocus`];function Ie(e){return Fe.includes(e)}function Le(e){return e?`true`:`false`}function Re(e){return e===`true`}Object.defineProperty(exports,"C",{enumerable:!0,get:function(){return o}}),Object.defineProperty(exports,"D",{enumerable:!0,get:function(){return t}}),Object.defineProperty(exports,"E",{enumerable:!0,get:function(){return i}}),Object.defineProperty(exports,"S",{enumerable:!0,get:function(){return te}}),Object.defineProperty(exports,"T",{enumerable:!0,get:function(){return n}}),Object.defineProperty(exports,"_",{enumerable:!0,get:function(){return u}}),Object.defineProperty(exports,"a",{enumerable:!0,get:function(){return Pe}}),Object.defineProperty(exports,"b",{enumerable:!0,get:function(){return c}}),Object.defineProperty(exports,"c",{enumerable:!0,get:function(){return Te}}),Object.defineProperty(exports,"d",{enumerable:!0,get:function(){return Z}}),Object.defineProperty(exports,"f",{enumerable:!0,get:function(){return Q}}),Object.defineProperty(exports,"g",{enumerable:!0,get:function(){return le}}),Object.defineProperty(exports,"h",{enumerable:!0,get:function(){return S}}),Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return $}}),Object.defineProperty(exports,"l",{enumerable:!0,get:function(){return X}}),Object.defineProperty(exports,"m",{enumerable:!0,get:function(){return x}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return Ie}}),Object.defineProperty(exports,"o",{enumerable:!0,get:function(){return Ne}}),Object.defineProperty(exports,"p",{enumerable:!0,get:function(){return H}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return Re}}),Object.defineProperty(exports,"s",{enumerable:!0,get:function(){return Me}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return Le}}),Object.defineProperty(exports,"u",{enumerable:!0,get:function(){return Y}}),Object.defineProperty(exports,"v",{enumerable:!0,get:function(){return ue}}),Object.defineProperty(exports,"w",{enumerable:!0,get:function(){return r}}),Object.defineProperty(exports,"x",{enumerable:!0,get:function(){return ee}}),Object.defineProperty(exports,"y",{enumerable:!0,get:function(){return p}});