xote 7.0.0 → 7.1.0-beta.1

package/src/View.res

@@ -552,6 +552,12 @@ let fragment = (children: array<node>): node => Fragment(children)
 
 let signalFragment = (signal: Signal.t<array<node>>): node => SignalFragment(signal)
 
+/* Auto-tracked reactive block: every signal read while `body` runs subscribes
+   the block, which re-evaluates `body` and replaces its children wholesale
+   (no diffing) whenever a dependency changes. Prefer `eachWithKey`/`For` for
+   lists and keep tracked blocks small. */
+let tracked = (body: unit => node): node => SignalFragment(Computed.make(() => [body()]))
+
 let childrenToArray = (child: option<node>): array<node> => {
   switch child {
   | Some(Fragment(children)) => children
@@ -746,6 +752,69 @@ let renderValuePrimitiveProps = (props: 'props, stringify: 'scalar => string): n
   }
 }
 
+/* Is this runtime value already a `node`? Nodes are ReScript variants compiled
+   to objects carrying a string `TAG` in the set below; Signals, Props, scalars
+   and functions are not, so a value already built into a node passes straight
+   through `child`. */
+let isNode: 'a => bool = %raw(`function (v) {
+  if (v === null || typeof v !== "object" || typeof v.TAG !== "string") { return false }
+  switch (v.TAG) {
+    case "Element":
+    case "Text":
+    case "SignalText":
+    case "Fragment":
+    case "SignalFragment":
+    case "Keyed":
+    case "LazyComponent":
+    case "KeyedList":
+      return true
+    default:
+      return false
+  }
+}`)
+
+/* Stringify any scalar child (int/float/string/bool) without knowing its type
+   at compile time; null/undefined render as empty. */
+let stringifyChild: 'a => string = %raw(`function (v) { return v == null ? "" : String(v) }`)
+
+/* Coerce an arbitrary JSX child into a node. This is what `@xote.component`
+   emits for a *bare* child in element position — `<div>{Signal.get(count)}</div>`
+   — so a value primitive (`<View.Int>`) is no longer required:
+
+     - an already-built node passes through untouched;
+     - a reactive thunk (what the ppx emits for an eager signal read) re-runs on
+       change — a scalar result becomes reactive text, a node result a tracked
+       fragment;
+     - a bare `Signal.t` becomes reactive text; a plain scalar, static text;
+     - null/undefined render nothing.
+
+   The explicit `View.Text`/`Int`/`Float`/`Bool` value primitives still work for
+   non-ppx code and for stronger typing; this is the ergonomic default under the
+   annotation. */
+let child = (value: 'a): node => {
+  if isNode(value) {
+    (Obj.magic(value): node)
+  } else {
+    switch value->Core.Type.Classify.classify {
+    | Function(_) => {
+        let compute: unit => 'b = Obj.magic(value)
+        let signal = Computed.make(compute)
+        if isNode(Signal.peek(signal)) {
+          SignalFragment(Computed.make(() => [(Obj.magic(Signal.get(signal)): node)]))
+        } else {
+          SignalText(Computed.make(() => stringifyChild(Signal.get(signal))))
+        }
+      }
+    | Object(_) => {
+        let signal: Signal.t<'b> = Obj.magic(value)
+        SignalText(Computed.make(() => stringifyChild(Signal.get(signal))))
+      }
+    | Null | Undefined => null()
+    | _ => text(stringifyChild(value))
+    }
+  }
+}
+
 module Text = {
   type props<'value, 'children> = {
     value?: 'value,

package/src/View.res.mjs

@@ -534,6 +534,13 @@ function signalFragment(signal) {
   };
 }
 
+function tracked(body) {
+  return {
+    TAG: "SignalFragment",
+    _0: Computed$Xote.make(() => [body()], undefined, undefined)
+  };
+}
+
 function childrenToArray(child) {
   if (child !== undefined) {
     if (child.TAG === "Fragment") {
@@ -791,6 +798,63 @@ function renderValuePrimitiveProps(props, stringify) {
   }
 }
 
+let isNode = (function (v) {
+  if (v === null || typeof v !== "object" || typeof v.TAG !== "string") { return false }
+  switch (v.TAG) {
+    case "Element":
+    case "Text":
+    case "SignalText":
+    case "Fragment":
+    case "SignalFragment":
+    case "Keyed":
+    case "LazyComponent":
+    case "KeyedList":
+      return true
+    default:
+      return false
+  }
+});
+
+let stringifyChild = (function (v) { return v == null ? "" : String(v) });
+
+function child(value) {
+  if (isNode(value)) {
+    return value;
+  }
+  let match = Core__Type.Classify.classify(value);
+  if (typeof match !== "object") {
+    return {
+      TAG: "Text",
+      _0: ""
+    };
+  }
+  switch (match.TAG) {
+    case "Object" :
+      return {
+        TAG: "SignalText",
+        _0: Computed$Xote.make(() => stringifyChild(Signal$Xote.get(value)), undefined, undefined)
+      };
+    case "Function" :
+      let signal = Computed$Xote.make(value, undefined, undefined);
+      if (isNode(Signal$Xote.peek(signal))) {
+        return {
+          TAG: "SignalFragment",
+          _0: Computed$Xote.make(() => [Signal$Xote.get(signal)], undefined, undefined)
+        };
+      } else {
+        return {
+          TAG: "SignalText",
+          _0: Computed$Xote.make(() => stringifyChild(Signal$Xote.get(signal)), undefined, undefined)
+        };
+      }
+    default:
+      return {
+        TAG: "Text",
+        _0: stringifyChild(value)
+      };
+  }
+}
+
 function make$5(props) {
   return renderValuePrimitiveProps(props, value => value);
 }
@@ -867,6 +931,7 @@ export {
   bool,
   fragment,
   signalFragment,
+  tracked,
   childrenToArray,
   each,
   eachWithKey,
@@ -883,6 +948,9 @@ export {
   isReactiveProp,
   valuePrimitive,
   renderValuePrimitiveProps,
+  isNode,
+  stringifyChild,
+  child,
   Text,
   Int,
   Float,

package/dist/View.res-C36--SJD.js

@@ -1 +0,0 @@
-const e=require("./RuntimeAttr.res-Cr5Qmz0i.js");function t(e){switch(Object.prototype.toString.call(e)){case`[object BigInt]`:return{TAG:`BigInt`,_0:e};case`[object Boolean]`:return{TAG:`Bool`,_0:e};case`[object AsyncFunction]`:case`[object Function]`:case`[object GeneratorFunction]`:return{TAG:`Function`,_0:e};case`[object Null]`:return`Null`;case`[object Number]`:return{TAG:`Number`,_0:e};case`[object String]`:return{TAG:`String`,_0:e};case`[object Symbol]`:return{TAG:`Symbol`,_0:e};case`[object Undefined]`:return`Undefined`;default:return{TAG:`Object`,_0:e}}}var n={classify:t};function r(t,n){let r=t.length,i=Array(r),a=0;for(let o=0;o<r;++o){let r=t[o],s=n(r);s!==void 0&&(i[a]=e.E(s),a=a+1|0)}return i.length=a,i}function i(t,n){let r=e.C(),i={contents:void 0},a=e.S(r,`Effect`,()=>{let e=i.contents;e!==void 0&&e(),i.contents=t()},n,void 0),o=e.h.contents;e.h.contents=a;try{a.run(),e._(a),e.h.contents=o}catch(t){throw e.h.contents=o,t}a.level=e.p(a);let s={contents:!1};return{dispose:()=>{if(s.contents)return;s.contents=!0;let t=i.contents;t!==void 0&&t(),e.g(a)}}}function a(e,t){i(e,t)}var o=e.D({run:()=>c,runWithDisposer:()=>s}),s=i,c=a;function l(t,n){let r=e.C(),i=(e,t)=>!1,a={contents:void 0},o=e.x(()=>{let e=a.contents;e.value=t(),e.subs.version=e.subs.version+1|0},!1),s=e.m.contents;e.m.contents=o;let c=t();e.m.contents=s;let l={id:r,value:c,equals:i,name:n,subs:o};return a.contents=l,o.lastGlobalVersion=e.b.contents,e.y(o),l}function u(t,n,r){let i=e.C(),a={contents:void 0},o=e.x(()=>{let e=a.contents,n=e.value,r=t(),i;try{i=!e.equals(n,r)}catch{i=!0}if(i){e.value=r,e.subs.version=e.subs.version+1|0;return}},!0),s=e.m.contents;e.m.contents=o;let c=t();e.m.contents=s;let l={id:i,value:c,equals:n,name:r,subs:o};return a.contents=l,o.lastGlobalVersion=e.b.contents,e.y(o),l}function d(e,t,n){return n===void 0?l(e,t):u(e,n,t)}function f(t){e.v(t.subs)}var p=e.D({dispose:()=>_,make:()=>g,makeWithEquals:()=>h,makeWithoutEquals:()=>m}),m=l,h=u,g=d,_=f,v=`http://www.w3.org/2000/svg`,y=`svg.path.circle.ellipse.line.polygon.polyline.rect.g.defs.clipPath.mask.pattern.marker.symbol.use.text.tspan.image.foreignObject.linearGradient.radialGradient.stop.filter.feBlend.feColorMatrix.feComposite.feFlood.feGaussianBlur.feMerge.feMergeNode.feOffset.animate.animateTransform.desc.title.metadata`.split(`.`),b={};y.forEach(e=>{b[e]=!0});function x(e){return Array.from(e.childNodes)}function ee(t){return e.a(b[t])?document.createElementNS(v,t):document.createElement(t)}function S(t,n,r){switch(n){case`checked`:t.checked=r===`true`;return;case`disabled`:t.disabled=r===`true`;return;case`value`:t.value=r;return;default:e.n(n)?e.r(r)?t.setAttribute(n,``):t.removeAttribute(n):t.setAttribute(n,r);return}}var C={contents:void 0};function w(){return{disposers:[],computeds:[]}}function T(e,t){let n=C.contents;C.contents=e;let r=t();return C.contents=n,r}function E(e,t){e.disposers.push(t)}function D(e){e.disposers.forEach(e=>e.dispose()),e.computeds.forEach(_)}function O(e,t){e.__xote_owner__=t}function k(t){return e.w(t.__xote_owner__)}function A(t,n){let r=t.TAG;return r===void 0?!1:e.E(r)===n}function j(e){let t=n.classify(e);if(typeof t!=`object`||t.TAG!==`Object`)return!1;let r=t._0;return Object.prototype.hasOwnProperty.call(r,`TAG`)?A(r,`Static`)?!0:A(r,`Reactive`):!1}function M(e){let t=n.classify(e);return typeof t==`object`?t.TAG===`Function`:!1}function te(e){let t=n.classify(e);return typeof t==`object`?t.TAG===`Object`:!1}function N(e,t){return e[t]}var ne=e.D({$$null:()=>Se,Attr:()=>ie,Attributes:()=>re,Bool:()=>Me,Core:()=>Fe,DOM:()=>Ne,Float:()=>Ae,For:()=>fe,Int:()=>Oe,KeyedFor:()=>me,Maybe:()=>ve,Reactivity:()=>Pe,Render:()=>U,Show:()=>ge,Text:()=>Ee,Value:()=>be,attr:()=>Ie,bool:()=>le,childrenToArray:()=>J,computedAttr:()=>Re,each:()=>Y,eachWithKey:()=>ue,element:()=>xe,empty:()=>ze,float:()=>ce,fragment:()=>K,int:()=>se,isReactiveProp:()=>Be,mount:()=>Ce,mountById:()=>we,renderValuePrimitiveProps:()=>Q,signalAttr:()=>Le,signalFloat:()=>oe,signalFragment:()=>q,signalInt:()=>ae,signalText:()=>G,text:()=>W,valuePrimitive:()=>Z});function P(e,t){return[e,{TAG:`Static`,_0:t}]}function F(e,t){return[e,{TAG:`SignalValue`,_0:t}]}function I(e,t){return[e,{TAG:`Compute`,_0:t}]}var re={$$static:P,signal:F,computed:I},ie={string:P,signal:F,compute:I};function L(e){let t=k(e);t!==void 0&&D(t),x(e).forEach(L)}function R(t,r){if(t===r)return!0;let i=n.classify(t),a=n.classify(r);if(typeof i!=`object`||i.TAG!==`Object`||typeof a!=`object`||a.TAG!==`Object`)return!1;let o=a._0,s=i._0,c=Object.keys(s),l=Object.keys(o);return c.length===l.length?c.every(t=>{let n=s[t],r=o[t];return n!==void 0&&r!==void 0?e.E(n)===e.E(r):!1}):!1}function z(t){Object.keys(t).forEach(n=>{e.s(t,n)})}function B(e){if(e.length===0)return;let t=r(e,e=>{if(e.TAG===`Keyed`)return{key:e.key,identity:e.identity,child:e.child}});if(t.length===e.length)return t}function V(t,n,r){let i={};t.forEach(e=>{i[e.key]=e});let a=[];Object.keys(n).forEach(e=>{i[e]===void 0&&a.push(e)}),a.forEach(t=>{let r=n[t];if(r!==void 0){L(r.element),r.element.remove(),e.s(n,t);return}});let o=[],s={};t.forEach(e=>{let t=n[e.key];if(t!==void 0){if(R(t.item,e.identity)){o.push(t);return}let r=H(e.child),i={key:e.key,item:e.identity,element:r};s[e.key]=t.element,o.push(i),n[e.key]=i;return}let r=H(e.child),i={key:e.key,item:e.identity,element:r};o.push(i),n[e.key]=i});let c=r.firstChild,l={contents:c==null?void 0:e.T(c)};o.forEach(t=>{let n=l.contents;if(n!==void 0){let i=e.E(n);if(i===t.element){l.contents=e.w(i.nextSibling);return}let a=s[t.key];if(a!==void 0){let n=e.E(a);if(i===n){L(n),r.replaceChild(t.element,n),l.contents=e.w(t.element.nextSibling);return}}r.insertBefore(t.element,i),l.contents=e.w(t.element.nextSibling);return}let i=s[t.key];if(i!==void 0){let n=e.E(i);L(n),n.remove(),r.appendChild(t.element);return}r.appendChild(t.element)})}function H(t){for(;;){let n=t;switch(n.TAG){case`Element`:let r=n.children,i=n.events,a=n.attrs,o=n.tag,c=ee(o),l=w();return O(c,l),T(l,()=>{let t=e=>o===`select`?e[0]===`value`:!1,n=t=>{let n=t[1],r=t[0];switch(n.TAG){case`Static`:return S(c,r,n._0);case`SignalValue`:let t=n._0;return S(c,r,e.d(t)),E(l,s(()=>{S(c,r,e.l(t))},void 0));case`Compute`:let i=n._0;return E(l,s(()=>{S(c,r,i())},void 0))}};a.forEach(e=>{if(!t(e))return n(e)}),i.forEach(e=>{c.addEventListener(e[0],e[1])}),r.forEach(e=>{let t=H(e);c.appendChild(t)}),a.forEach(e=>{if(t(e))return n(e)})}),c;case`Text`:return document.createTextNode(n._0);case`SignalText`:let u=n._0,d=document.createTextNode(e.d(u)),f=w();return O(d,f),T(f,()=>{E(f,s(()=>{d.textContent=e.l(u)},void 0))}),d;case`Fragment`:let p=document.createDocumentFragment();return n._0.forEach(e=>{let t=H(e);p.appendChild(t)}),p;case`SignalFragment`:let m=n._0,h=w(),g=document.createElement(`div`);g.setAttribute(`style`,`display: contents`),O(g,h);let _={};return T(h,()=>{E(h,s(()=>{let t=e.l(m),n=B(t);n===void 0?(z(_),x(g).forEach(L),g.innerHTML=``,t.forEach(e=>{let t=H(e);g.appendChild(t)})):V(n,_,g)},void 0))}),g;case`Keyed`:t=n.child;continue;case`LazyComponent`:let v=w(),y=H(T(v,n._0));return O(y,v),y;case`KeyedList`:let b=n.renderItem,C=n.keyFn,D=n.signal,k=w(),A=document.createComment(` keyed-list-start `),j=document.createComment(` keyed-list-end `);O(A,k);let M={},te=()=>{let t=j.parentNode;if(t==null)return;let n=e.l(D),r={};n.forEach(e=>{r[C(e)]=e});let i=[];Object.keys(M).forEach(e=>{r[e]===void 0&&i.push(e)}),i.forEach(t=>{let n=M[t];if(n!==void 0){L(n.element),n.element.remove(),e.s(M,t);return}});let a=[],o={};n.forEach(e=>{let t=C(e),n=M[t];if(n!==void 0){if(n.item!==e){o[t]=!0;let n={key:t,item:e,element:H(b(e))};a.push(n),M[t]=n;return}a.push(n);return}let r={key:t,item:e,element:H(b(e))};a.push(r),M[t]=r});let s={contents:A.nextSibling};a.forEach(n=>{let r=s.contents;if(r==null){t.insertBefore(n.element,j);return}if(r===j){t.insertBefore(n.element,j);return}if(r===n.element){s.contents=r.nextSibling;return}e.i(o[n.key],!1)?(L(r),t.replaceChild(n.element,r),s.contents=n.element.nextSibling):(t.insertBefore(n.element,r),s.contents=n.element.nextSibling)})},N=document.createDocumentFragment();return N.appendChild(A),e.d(D).forEach(e=>{let t=C(e),n=H(b(e));M[t]={key:t,item:e,element:n},N.appendChild(n)}),N.appendChild(j),T(k,()=>{E(k,s(()=>{te()},void 0))}),N}}}var U={disposeElement:L,shallowEqualIdentity:R,clearKeyedItems:z,getKeyedChildren:B,reconcileKeyedChildren:V,render:H};function W(e){return{TAG:`Text`,_0:e}}function G(e){return{TAG:`SignalText`,_0:g(e,void 0,void 0)}}function ae(e){return{TAG:`SignalText`,_0:g(()=>e().toString(),void 0,void 0)}}function oe(e){return{TAG:`SignalText`,_0:g(()=>e().toString(),void 0,void 0)}}function se(e){return{TAG:`Text`,_0:e.toString()}}function ce(e){return{TAG:`Text`,_0:e.toString()}}function le(e){return{TAG:`Text`,_0:e?`true`:`false`}}function K(e){return{TAG:`Fragment`,_0:e}}function q(e){return{TAG:`SignalFragment`,_0:e}}function J(e){return e===void 0?[]:e.TAG===`Fragment`?e._0:[e]}function Y(t,n){return{TAG:`SignalFragment`,_0:g(()=>e.l(t).map(n),void 0,void 0)}}function ue(e,t,n){return{TAG:`KeyedList`,signal:e,keyFn:t,renderItem:n}}function de(e){let t=e.each,n=e.by;if(t.TAG===`Reactive`){let r=t._0;return n===void 0?Y(r,e.render):{TAG:`KeyedList`,signal:r,keyFn:n,renderItem:e.render}}let r=t._0;return n===void 0?{TAG:`Fragment`,_0:r.map(e.render)}:{TAG:`Fragment`,_0:r.map(t=>({TAG:`Keyed`,key:n(t),identity:t,child:e.render(t)}))}}var fe={make:de};function pe(e){let t=e.each;return t.TAG===`Reactive`?{TAG:`KeyedList`,signal:t._0,keyFn:e.by,renderItem:e.render}:{TAG:`Fragment`,_0:t._0.map(t=>({TAG:`Keyed`,key:e.by(t),identity:t,child:e.render(t)}))}}var me={make:pe};function he(t){let n=t.when_;if(n.TAG!==`Reactive`)return n._0?{TAG:`Fragment`,_0:J(t.children)}:{TAG:`Fragment`,_0:J(t.fallback)};let r=n._0;return{TAG:`SignalFragment`,_0:g(()=>e.l(r)?J(t.children):J(t.fallback),void 0,void 0)}}var ge={make:he};function X(t,n){return n===void 0?J(t.fallback):[t.render(e.E(n))]}function _e(t){let n=t.value;if(n.TAG!==`Reactive`)return{TAG:`Fragment`,_0:X(t,n._0)};let r=n._0;return{TAG:`SignalFragment`,_0:g(()=>X(t,e.l(r)),void 0,void 0)}}var ve={renderValue:X,make:_e};function ye(t){let n=t.value;if(n.TAG!==`Reactive`)return t.render(n._0);let r=n._0;return{TAG:`SignalFragment`,_0:g(()=>[t.render(e.l(r))],void 0,void 0)}}var be={make:ye};function xe(e,t,n,r,i){return{TAG:`Element`,tag:e,attrs:t===void 0?[]:t,events:n===void 0?[]:n,children:r===void 0?[]:r}}function Se(){return{TAG:`Text`,_0:``}}function Ce(e,t){let n=H(e);t.appendChild(n)}function we(e,t){let n=document.getElementById(t);if(n==null){console.error(`Container element not found: `+t);return}else return Ce(e,n)}function Z(t,r){if(j(t)){if(t.TAG!==`Reactive`)return{TAG:`Text`,_0:r(t._0)};let n=t._0;return{TAG:`SignalText`,_0:g(()=>r(e.l(n)),void 0,void 0)}}let i=n.classify(t);if(typeof i!=`object`)return{TAG:`Text`,_0:``};switch(i.TAG){case`Object`:return{TAG:`SignalText`,_0:g(()=>r(e.l(t)),void 0,void 0)};case`Function`:return G(()=>r(t()));default:return{TAG:`Text`,_0:r(t)}}}function Q(t,n){let r=N(t,`children`),i=N(t,`value`);return r===void 0?i===void 0?{TAG:`Text`,_0:``}:Z(e.E(i),n):Z(e.E(r),n)}function Te(e){return Q(e,e=>e)}var Ee={make:Te};function De(e){return Q(e,e=>e.toString())}var Oe={make:De};function ke(e){return Q(e,e=>e.toString())}var Ae={make:ke};function $(e){return e?`true`:`false`}function je(e){return Q(e,$)}var Me={toString:$,make:je},Ne,Pe,Fe,Ie=P,Le=F,Re=I,ze=Se,Be=j;Object.defineProperty(exports,"C",{enumerable:!0,get:function(){return s}}),Object.defineProperty(exports,"S",{enumerable:!0,get:function(){return o}}),Object.defineProperty(exports,"_",{enumerable:!0,get:function(){return T}}),Object.defineProperty(exports,"a",{enumerable:!0,get:function(){return xe}}),Object.defineProperty(exports,"b",{enumerable:!0,get:function(){return p}}),Object.defineProperty(exports,"c",{enumerable:!0,get:function(){return q}}),Object.defineProperty(exports,"d",{enumerable:!0,get:function(){return te}}),Object.defineProperty(exports,"f",{enumerable:!0,get:function(){return j}}),Object.defineProperty(exports,"g",{enumerable:!0,get:function(){return k}}),Object.defineProperty(exports,"h",{enumerable:!0,get:function(){return D}}),Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return Re}}),Object.defineProperty(exports,"l",{enumerable:!0,get:function(){return W}}),Object.defineProperty(exports,"m",{enumerable:!0,get:function(){return w}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return ne}}),Object.defineProperty(exports,"o",{enumerable:!0,get:function(){return K}}),Object.defineProperty(exports,"p",{enumerable:!0,get:function(){return E}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return Ie}}),Object.defineProperty(exports,"s",{enumerable:!0,get:function(){return Le}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return U}}),Object.defineProperty(exports,"u",{enumerable:!0,get:function(){return M}}),Object.defineProperty(exports,"v",{enumerable:!0,get:function(){return O}}),Object.defineProperty(exports,"x",{enumerable:!0,get:function(){return g}}),Object.defineProperty(exports,"y",{enumerable:!0,get:function(){return S}});