xote 6.1.1 → 6.2.0

package/src/RuntimeHydrationMarkers.res.mjs

@@ -0,0 +1,68 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+
+let keyedItemPrefixContent = "k:";
+
+function keyedItemStart(key) {
+  return `<!--` + keyedItemPrefixContent + key + `-->`;
+}
+
+let signalTextStart = "<!--$-->";
+
+let signalTextEnd = "<!--/$-->";
+
+let signalTextStartContent = "$";
+
+let signalTextEndContent = "/$";
+
+let signalFragmentStart = "<!--#-->";
+
+let signalFragmentEnd = "<!--/#-->";
+
+let signalFragmentStartContent = "#";
+
+let signalFragmentEndContent = "/#";
+
+let keyedListStart = "<!--kl-->";
+
+let keyedListEnd = "<!--/kl-->";
+
+let keyedListStartContent = "kl";
+
+let keyedListEndContent = "/kl";
+
+let keyedItemEnd = "<!--/k-->";
+
+let keyedItemEndContent = "/k";
+
+let lazyComponentStart = "<!--lc-->";
+
+let lazyComponentEnd = "<!--/lc-->";
+
+let lazyComponentStartContent = "lc";
+
+let lazyComponentEndContent = "/lc";
+
+export {
+  signalTextStart,
+  signalTextEnd,
+  signalTextStartContent,
+  signalTextEndContent,
+  signalFragmentStart,
+  signalFragmentEnd,
+  signalFragmentStartContent,
+  signalFragmentEndContent,
+  keyedListStart,
+  keyedListEnd,
+  keyedListStartContent,
+  keyedListEndContent,
+  keyedItemPrefixContent,
+  keyedItemStart,
+  keyedItemEnd,
+  keyedItemEndContent,
+  lazyComponentStart,
+  lazyComponentEnd,
+  lazyComponentStartContent,
+  lazyComponentEndContent,
+}
+/* No side effect */

package/src/RuntimeJsxProp.res

@@ -0,0 +1,46 @@
+let isReactiveProp = (value: 'a): bool => {
+  ignore(value)
+  %raw(`value && typeof value === 'object' && ('TAG' in value) && (value.TAG === 'Static' || value.TAG === 'Reactive')`)
+}
+
+let toStringAttr = (key: string, value: 'a): (string, View.attrValue) => {
+  if isReactiveProp(value) {
+    let prop: Prop.t<string> = Obj.magic(value)
+    switch prop {
+    | Static(value) => View.attr(key, value)
+    | Reactive(signal) => View.signalAttr(key, signal)
+    }
+  } else if typeof(value) == #function {
+    let compute: unit => string = Obj.magic(value)
+    View.computedAttr(key, compute)
+  } else if typeof(value) == #object {
+    let signal: Signal.t<string> = Obj.magic(value)
+    View.signalAttr(key, signal)
+  } else {
+    let value: string = Obj.magic(value)
+    View.attr(key, value)
+  }
+}
+
+let toBoolAttr = (key: string, value: 'a): (string, View.attrValue) => {
+  if isReactiveProp(value) {
+    let prop: Prop.t<bool> = Obj.magic(value)
+    switch prop {
+    | Static(value) => View.attr(key, RuntimeAttr.boolToString(value))
+    | Reactive(signal) => {
+        let stringSignal = Computed.make(() => RuntimeAttr.boolToString(Signal.get(signal)))
+        View.signalAttr(key, stringSignal)
+      }
+    }
+  } else if typeof(value) == #function {
+    let compute: unit => bool = Obj.magic(value)
+    View.computedAttr(key, () => RuntimeAttr.boolToString(compute()))
+  } else if typeof(value) == #object {
+    let signal: Signal.t<bool> = Obj.magic(value)
+    let stringSignal = Computed.make(() => RuntimeAttr.boolToString(Signal.get(signal)))
+    View.signalAttr(key, stringSignal)
+  } else {
+    let value: bool = Obj.magic(value)
+    View.attr(key, RuntimeAttr.boolToString(value))
+  }
+}

package/src/RuntimeJsxProp.res.mjs

@@ -0,0 +1,52 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as View$Xote from "./View.res.mjs";
+import * as Signal$Xote from "./Signal.res.mjs";
+import * as Computed$Xote from "./Computed.res.mjs";
+import * as RuntimeAttr$Xote from "./RuntimeAttr.res.mjs";
+
+function isReactiveProp(value) {
+  return (value && typeof value === 'object' && ('TAG' in value) && (value.TAG === 'Static' || value.TAG === 'Reactive'));
+}
+
+function toStringAttr(key, value) {
+  if (isReactiveProp(value)) {
+    if (value.TAG === "Reactive") {
+      return View$Xote.signalAttr(key, value._0);
+    } else {
+      return View$Xote.attr(key, value._0);
+    }
+  } else if (typeof value === "function") {
+    return View$Xote.computedAttr(key, value);
+  } else if (typeof value === "object") {
+    return View$Xote.signalAttr(key, value);
+  } else {
+    return View$Xote.attr(key, value);
+  }
+}
+
+function toBoolAttr(key, value) {
+  if (isReactiveProp(value)) {
+    if (value.TAG !== "Reactive") {
+      return View$Xote.attr(key, RuntimeAttr$Xote.boolToString(value._0));
+    }
+    let signal = value._0;
+    let stringSignal = Computed$Xote.make(() => RuntimeAttr$Xote.boolToString(Signal$Xote.get(signal)), undefined, undefined);
+    return View$Xote.signalAttr(key, stringSignal);
+  }
+  if (typeof value === "function") {
+    return View$Xote.computedAttr(key, () => RuntimeAttr$Xote.boolToString(value()));
+  }
+  if (typeof value !== "object") {
+    return View$Xote.attr(key, RuntimeAttr$Xote.boolToString(value));
+  }
+  let stringSignal$1 = Computed$Xote.make(() => RuntimeAttr$Xote.boolToString(Signal$Xote.get(value)), undefined, undefined);
+  return View$Xote.signalAttr(key, stringSignal$1);
+}
+
+export {
+  isReactiveProp,
+  toStringAttr,
+  toBoolAttr,
+}
+/* View-Xote Not a pure module */

package/src/RuntimeOwner.res

@@ -0,0 +1,43 @@
+type owner = {
+  disposers: array<Effect.disposer>,
+  mutable computeds: array<Obj.t>,
+}
+
+let currentOwner: ref<option<owner>> = ref(None)
+
+let createOwner = (): owner => {
+  disposers: [],
+  computeds: [],
+}
+
+let runWithOwner = (owner: owner, fn: unit => 'a): 'a => {
+  let previousOwner = currentOwner.contents
+  currentOwner := Some(owner)
+  let result = fn()
+  currentOwner := previousOwner
+  result
+}
+
+let addDisposer = (owner: owner, disposer: Effect.disposer): unit => {
+  owner.disposers->Array.push(disposer)->ignore
+}
+
+let disposeOwner = (owner: owner): unit => {
+  owner.disposers->Array.forEach(disposer => disposer.dispose())
+
+  owner.computeds->Array.forEach(computed => {
+    let c: Signal.t<Obj.t> = Obj.magic(computed)
+    Computed.dispose(c)
+  })
+}
+
+@warning("-27")
+let setOwner = (element: Dom.element, owner: owner): unit => {
+  %raw(`element["__xote_owner__"] = owner`)
+}
+
+@warning("-27")
+let getOwner = (element: Dom.element): option<owner> => {
+  let owner: Nullable.t<owner> = %raw(`element["__xote_owner__"]`)
+  owner->Nullable.toOption
+}

package/src/RuntimeOwner.res.mjs

@@ -0,0 +1,51 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as Computed$Xote from "./Computed.res.mjs";
+import * as Primitive_option from "@rescript/runtime/lib/es6/Primitive_option.js";
+
+let currentOwner = {
+  contents: undefined
+};
+
+function createOwner() {
+  return {
+    disposers: [],
+    computeds: []
+  };
+}
+
+function runWithOwner(owner, fn) {
+  let previousOwner = currentOwner.contents;
+  currentOwner.contents = owner;
+  let result = fn();
+  currentOwner.contents = previousOwner;
+  return result;
+}
+
+function addDisposer(owner, disposer) {
+  owner.disposers.push(disposer);
+}
+
+function disposeOwner(owner) {
+  owner.disposers.forEach(disposer => disposer.dispose());
+  owner.computeds.forEach(Computed$Xote.dispose);
+}
+
+function setOwner(element, owner) {
+  ((element["__xote_owner__"] = owner));
+}
+
+function getOwner(element) {
+  return Primitive_option.fromNullable((element["__xote_owner__"]));
+}
+
+export {
+  currentOwner,
+  createOwner,
+  runWithOwner,
+  addDisposer,
+  disposeOwner,
+  setOwner,
+  getOwner,
+}
+/* No side effect */

package/src/SSR.res

@@ -1,62 +1,5 @@
-/* ============================================================================
- * HTML Utilities
- * ============================================================================ */
-
-module Html = {
-  /* Escape HTML special characters to prevent XSS */
-  let escape = (str: string): string => {
-    str
-    ->String.replaceAll("&", "&")
-    ->String.replaceAll("<", "&lt;")
-    ->String.replaceAll(">", "&gt;")
-    ->String.replaceAll("\"", "&quot;")
-    ->String.replaceAll("'", "&#x27;")
-  }
-
-  /* Void elements that don't have closing tags */
-  let voidElements = [
-    "area",
-    "base",
-    "br",
-    "col",
-    "embed",
-    "hr",
-    "img",
-    "input",
-    "link",
-    "meta",
-    "param",
-    "source",
-    "track",
-    "wbr",
-  ]
-
-  let isVoidElement = (tag: string): bool => {
-    voidElements->Array.includes(tag)
-  }
-}
-
-/* ============================================================================
- * Hydration Markers
- * ============================================================================ */
-
-module Markers = {
-  /* Markers for different reactive node types */
-  let signalTextStart = "<!--$-->"
-  let signalTextEnd = "<!--/$-->"
-
-  let signalFragmentStart = "<!--#-->"
-  let signalFragmentEnd = "<!--/#-->"
-
-  let keyedListStart = "<!--kl-->"
-  let keyedListEnd = "<!--/kl-->"
-
-  let keyedItemStart = (key: string): string => `<!--k:${key}-->`
-  let keyedItemEnd = "<!--/k-->"
-
-  let lazyComponentStart = "<!--lc-->"
-  let lazyComponentEnd = "<!--/lc-->"
-}
+module Html = RuntimeHtml
+module Markers = RuntimeHydrationMarkers
 
 /* ============================================================================
  * Render Options
@@ -73,39 +16,26 @@ type renderOptions = {
 
 module Attributes = {
   /* Render a single attribute to string */
-  let renderAttr = ((key, value): (string, Node.attrValue)): string => {
+  let renderAttr = ((key, value): (string, View.attrValue)): string => {
     let attrValue = switch value {
-    | Node.Static(v) => v
-    | Node.SignalValue(signal) => Signal.peek(signal)
-    | Node.Compute(fn) => fn()
+    | View.Static(v) => v
+    | View.SignalValue(signal) => Signal.peek(signal)
+    | View.Compute(fn) => fn()
     }
 
-    /* Handle boolean attributes */
-    switch key {
-    | "checked"
-    | "disabled"
-    | "required"
-    | "readonly"
-    | "multiple"
-    | "aria-hidden"
-    | "aria-expanded"
-    | "aria-selected"
-    | "draggable"
-    | "hidden"
-    | "contenteditable"
-    | "spellcheck"
-    | "autofocus" =>
-      if attrValue == "true" {
+    if RuntimeAttr.isBoolean(key) {
+      if RuntimeAttr.shouldRenderBoolean(attrValue) {
         key
       } else {
         ""
       }
-    | _ => `${key}="${Html.escape(attrValue)}"`
+    } else {
+      `${key}="${Html.escape(attrValue)}"`
     }
   }
 
   /* Render all attributes to string */
-  let renderAttrs = (attrs: array<(string, Node.attrValue)>): string => {
+  let renderAttrs = (attrs: array<(string, View.attrValue)>): string => {
     let rendered =
       attrs
       ->Array.map(renderAttr)
@@ -120,30 +50,32 @@ module Attributes = {
 }
 
 /* ============================================================================
- * Node Rendering
+ * View Rendering
  * ============================================================================ */
 
 /* Render a virtual node to an HTML string */
-let rec renderNodeToString = (node: Node.node): string => {
+let rec renderNodeToString = (node: View.node): string => {
   switch node {
-  | Node.Text(content) => Html.escape(content)
+  | View.Text(content) => Html.escape(content)
 
-  | Node.SignalText(signal) => {
+  | View.SignalText(signal) => {
       /* Read current signal value and wrap with hydration markers */
       let value = Signal.peek(signal)
       Markers.signalTextStart ++ Html.escape(value) ++ Markers.signalTextEnd
     }
 
-  | Node.Fragment(children) => children->Array.map(renderNodeToString)->Array.join("")
+  | View.Fragment(children) => children->Array.map(renderNodeToString)->Array.join("")
 
-  | Node.SignalFragment(signal) => {
+  | View.SignalFragment(signal) => {
       /* Read current signal value and wrap with hydration markers */
       let children = Signal.peek(signal)
       let content = children->Array.map(renderNodeToString)->Array.join("")
       Markers.signalFragmentStart ++ content ++ Markers.signalFragmentEnd
     }
 
-  | Node.Element({tag, attrs, children, events: _}) => {
+  | View.Keyed({child, key: _, identity: _}) => renderNodeToString(child)
+
+  | View.Element({tag, attrs, children, events: _}) => {
       let attrsStr = Attributes.renderAttrs(attrs)
 
       if Html.isVoidElement(tag) {
@@ -154,13 +86,13 @@ let rec renderNodeToString = (node: Node.node): string => {
       }
     }
 
-  | Node.LazyComponent(fn) => {
+  | View.LazyComponent(fn) => {
       /* Execute the lazy component and render its result */
       let childNode = fn()
       Markers.lazyComponentStart ++ renderNodeToString(childNode) ++ Markers.lazyComponentEnd
     }
 
-  | Node.KeyedList({signal, keyFn, renderItem}) => {
+  | View.KeyedList({signal, keyFn, renderItem}) => {
       let items = Signal.peek(signal)
       let content =
         items
@@ -181,7 +113,7 @@ let rec renderNodeToString = (node: Node.node): string => {
  * ============================================================================ */
 
 /* Render a component to an HTML string synchronously */
-let renderToString = (component: unit => Node.node, ~options: renderOptions={}): string => {
+let renderToString = (component: unit => View.node, ~options: renderOptions={}): string => {
   let _ = options /* Will be used for nonce/renderId in future phases */
   let node = component()
   renderNodeToString(node)
@@ -189,7 +121,7 @@ let renderToString = (component: unit => Node.node, ~options: renderOptions={}):
 
 /* Render a component and wrap with a hydration root marker */
 let renderToStringWithRoot = (
-  component: unit => Node.node,
+  component: unit => View.node,
   ~rootId: string="root",
   ~options: renderOptions={},
 ): string => {
@@ -219,7 +151,7 @@ let renderDocument = (
   ~styles: array<string>=[],
   ~stateScript: string="",
   ~nonce: option<string>=?,
-  component: unit => Node.node,
+  component: unit => View.node,
 ): string => {
   let content = renderToString(component)
   let hydrationScript = generateHydrationScript(~nonce?)

package/src/SSR.res.mjs

@@ -1,72 +1,9 @@
 // Generated by ReScript, PLEASE EDIT WITH CARE
 
 import * as Signal$Xote from "./Signal.res.mjs";
-
-function escape(str) {
-  return str.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll("\"", "&quot;").replaceAll("'", "&#x27;");
-}
-
-let voidElements = [
-  "area",
-  "base",
-  "br",
-  "col",
-  "embed",
-  "hr",
-  "img",
-  "input",
-  "link",
-  "meta",
-  "param",
-  "source",
-  "track",
-  "wbr"
-];
-
-function isVoidElement(tag) {
-  return voidElements.includes(tag);
-}
-
-let Html = {
-  escape: escape,
-  voidElements: voidElements,
-  isVoidElement: isVoidElement
-};
-
-let signalTextStart = "<!--$-->";
-
-let signalTextEnd = "<!--/$-->";
-
-let signalFragmentStart = "<!--#-->";
-
-let signalFragmentEnd = "<!--/#-->";
-
-let keyedListStart = "<!--kl-->";
-
-let keyedListEnd = "<!--/kl-->";
-
-function keyedItemStart(key) {
-  return `<!--k:` + key + `-->`;
-}
-
-let keyedItemEnd = "<!--/k-->";
-
-let lazyComponentStart = "<!--lc-->";
-
-let lazyComponentEnd = "<!--/lc-->";
-
-let Markers = {
-  signalTextStart: signalTextStart,
-  signalTextEnd: signalTextEnd,
-  signalFragmentStart: signalFragmentStart,
-  signalFragmentEnd: signalFragmentEnd,
-  keyedListStart: keyedListStart,
-  keyedListEnd: keyedListEnd,
-  keyedItemStart: keyedItemStart,
-  keyedItemEnd: keyedItemEnd,
-  lazyComponentStart: lazyComponentStart,
-  lazyComponentEnd: lazyComponentEnd
-};
+import * as RuntimeAttr$Xote from "./RuntimeAttr.res.mjs";
+import * as RuntimeHtml$Xote from "./RuntimeHtml.res.mjs";
+import * as RuntimeHydrationMarkers$Xote from "./RuntimeHydrationMarkers.res.mjs";
 
 function renderAttr(param) {
   let value = param[1];
@@ -83,28 +20,14 @@ function renderAttr(param) {
       attrValue = value._0();
       break;
   }
-  switch (key) {
-    case "aria-expanded" :
-    case "aria-hidden" :
-    case "aria-selected" :
-    case "autofocus" :
-    case "checked" :
-    case "contenteditable" :
-    case "disabled" :
-    case "draggable" :
-    case "hidden" :
-    case "multiple" :
-    case "readonly" :
-    case "required" :
-    case "spellcheck" :
-      break;
-    default:
-      return key + `="` + escape(attrValue) + `"`;
-  }
-  if (attrValue === "true") {
-    return key;
+  if (RuntimeAttr$Xote.isBoolean(key)) {
+    if (RuntimeAttr$Xote.shouldRenderBoolean(attrValue)) {
+      return key;
+    } else {
+      return "";
+    }
   } else {
-    return "";
+    return key + `="` + RuntimeHtml$Xote.escape(attrValue) + `"`;
   }
 }
 
@@ -122,41 +45,47 @@ let Attributes = {
   renderAttrs: renderAttrs
 };
 
-function renderNodeToString(node) {
-  switch (node.TAG) {
-    case "Element" :
-      let tag = node.tag;
-      let attrsStr = renderAttrs(node.attrs);
-      if (voidElements.includes(tag)) {
-        return `<` + tag + attrsStr + ` />`;
-      }
-      let childrenStr = node.children.map(renderNodeToString).join("");
-      return `<` + tag + attrsStr + `>` + childrenStr + `</` + tag + `>`;
-    case "Text" :
-      return escape(node._0);
-    case "SignalText" :
-      let value = Signal$Xote.peek(node._0);
-      return signalTextStart + escape(value) + signalTextEnd;
-    case "Fragment" :
-      return node._0.map(renderNodeToString).join("");
-    case "SignalFragment" :
-      let children = Signal$Xote.peek(node._0);
-      let content = children.map(renderNodeToString).join("");
-      return signalFragmentStart + content + signalFragmentEnd;
-    case "LazyComponent" :
-      let childNode = node._0();
-      return lazyComponentStart + renderNodeToString(childNode) + lazyComponentEnd;
-    case "KeyedList" :
-      let renderItem = node.renderItem;
-      let keyFn = node.keyFn;
-      let items = Signal$Xote.peek(node.signal);
-      let content$1 = items.map(item => {
-        let key = keyFn(item);
-        let itemHtml = renderNodeToString(renderItem(item));
-        return keyedItemStart(key) + itemHtml + keyedItemEnd;
-      }).join("");
-      return keyedListStart + content$1 + keyedListEnd;
-  }
+function renderNodeToString(_node) {
+  while (true) {
+    let node = _node;
+    switch (node.TAG) {
+      case "Element" :
+        let tag = node.tag;
+        let attrsStr = renderAttrs(node.attrs);
+        if (RuntimeHtml$Xote.isVoidElement(tag)) {
+          return `<` + tag + attrsStr + ` />`;
+        }
+        let childrenStr = node.children.map(renderNodeToString).join("");
+        return `<` + tag + attrsStr + `>` + childrenStr + `</` + tag + `>`;
+      case "Text" :
+        return RuntimeHtml$Xote.escape(node._0);
+      case "SignalText" :
+        let value = Signal$Xote.peek(node._0);
+        return RuntimeHydrationMarkers$Xote.signalTextStart + RuntimeHtml$Xote.escape(value) + RuntimeHydrationMarkers$Xote.signalTextEnd;
+      case "Fragment" :
+        return node._0.map(renderNodeToString).join("");
+      case "SignalFragment" :
+        let children = Signal$Xote.peek(node._0);
+        let content = children.map(renderNodeToString).join("");
+        return RuntimeHydrationMarkers$Xote.signalFragmentStart + content + RuntimeHydrationMarkers$Xote.signalFragmentEnd;
+      case "Keyed" :
+        _node = node.child;
+        continue;
+      case "LazyComponent" :
+        let childNode = node._0();
+        return RuntimeHydrationMarkers$Xote.lazyComponentStart + renderNodeToString(childNode) + RuntimeHydrationMarkers$Xote.lazyComponentEnd;
+      case "KeyedList" :
+        let renderItem = node.renderItem;
+        let keyFn = node.keyFn;
+        let items = Signal$Xote.peek(node.signal);
+        let content$1 = items.map(item => {
+          let key = keyFn(item);
+          let itemHtml = renderNodeToString(renderItem(item));
+          return RuntimeHydrationMarkers$Xote.keyedItemStart(key) + itemHtml + RuntimeHydrationMarkers$Xote.keyedItemEnd;
+        }).join("");
+        return RuntimeHydrationMarkers$Xote.keyedListStart + content$1 + RuntimeHydrationMarkers$Xote.keyedListEnd;
+    }
+  };
 }
 
 function renderToString(component, optionsOpt) {
@@ -171,7 +100,7 @@ function renderToStringWithRoot(component, rootIdOpt, optionsOpt) {
 }
 
 function generateHydrationScript(nonce) {
-  let nonceAttr = nonce !== undefined ? ` nonce="` + escape(nonce) + `"` : "";
+  let nonceAttr = nonce !== undefined ? ` nonce="` + RuntimeHtml$Xote.escape(nonce) + `"` : "";
   return `<script` + nonceAttr + `>window.__XOTE_HYDRATED__=false;</script>`;
 }
 
@@ -183,10 +112,10 @@ function renderDocument(headOpt, bodyAttrsOpt, scriptsOpt, stylesOpt, stateScrip
   let stateScript = stateScriptOpt !== undefined ? stateScriptOpt : "";
   let content = renderToString(component, undefined);
   let hydrationScript = generateHydrationScript(nonce);
-  let styleLinks = styles.map(href => `<link rel="stylesheet" href="` + escape(href) + `" />`).join("\n    ");
+  let styleLinks = styles.map(href => `<link rel="stylesheet" href="` + RuntimeHtml$Xote.escape(href) + `" />`).join("\n    ");
   let scriptTags = scripts.map(src => {
-    let nonceAttr = nonce !== undefined ? ` nonce="` + escape(nonce) + `"` : "";
-    return `<script type="module" src="` + escape(src) + `"` + nonceAttr + `></script>`;
+    let nonceAttr = nonce !== undefined ? ` nonce="` + RuntimeHtml$Xote.escape(nonce) + `"` : "";
+    return `<script type="module" src="` + RuntimeHtml$Xote.escape(src) + `"` + nonceAttr + `></script>`;
   }).join("\n    ");
   return `<!DOCTYPE html>
 <html>
@@ -207,6 +136,10 @@ function renderDocument(headOpt, bodyAttrsOpt, scriptsOpt, stylesOpt, stateScrip
 </html>`;
 }
 
+let Html;
+
+let Markers;
+
 export {
   Html,
   Markers,