xote 6.1.2 → 6.2.0

package/src/RuntimeHydrationMarkers.res

@@ -0,0 +1,24 @@
+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 keyedItemPrefixContent = "k:"
+let keyedItemStart = (key: string): string => `<!--${keyedItemPrefixContent}${key}-->`
+let keyedItemEnd = "<!--/k-->"
+let keyedItemEndContent = "/k"
+
+let lazyComponentStart = "<!--lc-->"
+let lazyComponentEnd = "<!--/lc-->"
+let lazyComponentStartContent = "lc"
+let lazyComponentEndContent = "/lc"

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?)