xote 6.3.0 → 7.0.0-beta.1

package/src/View.res

@@ -1,5 +1,6 @@
 module DOM = RuntimeDom
 module Reactivity = RuntimeOwner
+module Core = RescriptCore
 
 /* ============================================================================
  * Type Definitions
@@ -85,30 +86,32 @@ module Render = {
     }
 
     /* Recursively dispose children */
-    let childNodes: array<Dom.element> = %raw(`Array.from(el.childNodes || [])`)
-    childNodes->Array.forEach(disposeElement)
+    el->DOM.childNodesToArray->Array.forEach(disposeElement)
   }
 
   let shallowEqualIdentity = (a: Obj.t, b: Obj.t): bool =>
     if a === b {
       true
-    } else if typeof(a) != #object || typeof(b) != #object {
-      false
     } else {
-      let dictA: Dict.t<Obj.t> = Obj.magic(a)
-      let dictB: Dict.t<Obj.t> = Obj.magic(b)
-      let keysA = dictA->Dict.keysToArray
-      let keysB = dictB->Dict.keysToArray
-
-      if keysA->Array.length !== keysB->Array.length {
-        false
-      } else {
-        keysA->Array.every(key =>
-          switch (dictA->Dict.get(key), dictB->Dict.get(key)) {
-          | (Some(valueA), Some(valueB)) => valueA === valueB
-          | _ => false
+      switch (a->Core.Type.Classify.classify, b->Core.Type.Classify.classify) {
+      | (Object(objA), Object(objB)) => {
+          let dictA: Dict.t<Obj.t> = Obj.magic(objA)
+          let dictB: Dict.t<Obj.t> = Obj.magic(objB)
+          let keysA = dictA->Dict.keysToArray
+          let keysB = dictB->Dict.keysToArray
+
+          if keysA->Array.length !== keysB->Array.length {
+            false
+          } else {
+            keysA->Array.every(key =>
+              switch (dictA->Dict.get(key), dictB->Dict.get(key)) {
+              | (Some(valueA), Some(valueB)) => valueA === valueB
+              | _ => false
+              }
+            )
           }
-        )
+        }
+      | _ => false
       }
     }
 
@@ -117,21 +120,21 @@ module Render = {
   }
 
   let getKeyedChildren = (children: array<node>): option<array<keyedChild>> => {
-    let keyedChildren = []
-    let allKeyed = ref(true)
-
-    children->Array.forEach(child => {
-      switch child {
-      | Keyed({key, identity, child}) =>
-        keyedChildren->Array.push({key, identity, child})->ignore
-      | _ => allKeyed := false
-      }
-    })
-
-    if allKeyed.contents {
-      Some(keyedChildren)
-    } else {
+    if children->Core.Array.length == 0 {
       None
+    } else {
+      let keyedChildren = children->Core.Array.filterMap(child => {
+        switch child {
+        | Keyed({key, identity, child}) => Some({key, identity, child})
+        | _ => None
+        }
+      })
+
+      if keyedChildren->Core.Array.length == children->Core.Array.length {
+        Some(keyedChildren)
+      } else {
+        None
+      }
     }
   }
 
@@ -284,8 +287,7 @@ module Render = {
                 clearKeyedItems(keyedItems)
 
                 /* Dispose existing children */
-                let childNodes: array<Dom.element> = %raw(`Array.from(container.childNodes || [])`)
-                childNodes->Array.forEach(disposeElement)
+                container->DOM.childNodesToArray->Array.forEach(disposeElement)
 
                 /* Clear existing children */
                 DOM.setInnerHTML(container, "")
@@ -543,11 +545,21 @@ let int = (value: int): node => Text(Int.toString(value))
 
 let float = (value: float): node => Text(Float.toString(value))
 
+let bool = (value: bool): node => Text(value ? "true" : "false")
+
 /* Fragments */
 let fragment = (children: array<node>): node => Fragment(children)
 
 let signalFragment = (signal: Signal.t<array<node>>): node => SignalFragment(signal)
 
+let childrenToArray = (child: option<node>): array<node> => {
+  switch child {
+  | Some(Fragment(children)) => children
+  | Some(child) => [child]
+  | None => []
+  }
+}
+
 /* Lists */
 let each = (signal: Signal.t<array<'a>>, renderItem: 'a => node): node => {
   let nodesSignal = Computed.make(() => {
@@ -556,8 +568,6 @@ let each = (signal: Signal.t<array<'a>>, renderItem: 'a => node): node => {
   SignalFragment(nodesSignal)
 }
 
-let list = each
-
 let eachWithKey = (
   signal: Signal.t<array<'a>>,
   keyFn: 'a => string,
@@ -570,14 +580,116 @@ let eachWithKey = (
   })
 }
 
-let keyedList = eachWithKey
+/* JSX rendering primitives */
+module For = {
+  type props<'item> = {
+    each: Prop.t<array<'item>>,
+    by?: 'item => string,
+    render: 'item => node,
+  }
+
+  let make = (props: props<'item>): node => {
+    switch (props.each, props.by) {
+    | (Static(items), Some(keyFn)) =>
+      fragment(
+        items->Array.map(item =>
+          Keyed({key: keyFn(item), identity: Obj.magic(item), child: props.render(item)})
+        ),
+      )
+    | (Static(items), None) => fragment(items->Array.map(props.render))
+    | (Reactive(signal), Some(keyFn)) => eachWithKey(signal, keyFn, props.render)
+    | (Reactive(signal), None) => each(signal, props.render)
+    }
+  }
+}
+
+module KeyedFor = {
+  type props<'item> = {
+    each: Prop.t<array<'item>>,
+    by: 'item => string,
+    render: 'item => node,
+  }
+
+  let make = (props: props<'item>): node => {
+    switch props.each {
+    | Static(items) =>
+      fragment(
+        items->Array.map(item =>
+          Keyed({key: props.by(item), identity: Obj.magic(item), child: props.render(item)})
+        ),
+      )
+    | Reactive(signal) => eachWithKey(signal, props.by, props.render)
+    }
+  }
+}
+
+module Show = {
+  type props = {
+    when_: Prop.t<bool>,
+    children?: node,
+    fallback?: node,
+  }
+
+  let make = (props: props): node => {
+    switch props.when_ {
+    | Static(true) => fragment(childrenToArray(props.children))
+    | Static(false) => fragment(childrenToArray(props.fallback))
+    | Reactive(signal) =>
+      signalFragment(
+        Computed.make(() =>
+          if Signal.get(signal) {
+            childrenToArray(props.children)
+          } else {
+            childrenToArray(props.fallback)
+          }
+        ),
+      )
+    }
+  }
+}
+
+module Maybe = {
+  type props<'value> = {
+    value: Prop.t<option<'value>>,
+    render: 'value => node,
+    fallback?: node,
+  }
+
+  let renderValue = (props: props<'value>, value: option<'value>): array<node> => {
+    switch value {
+    | Some(value) => [props.render(value)]
+    | None => childrenToArray(props.fallback)
+    }
+  }
+
+  let make = (props: props<'value>): node => {
+    switch props.value {
+    | Static(value) => fragment(renderValue(props, value))
+    | Reactive(signal) => signalFragment(Computed.make(() => renderValue(props, Signal.get(signal))))
+    }
+  }
+}
+
+module Value = {
+  type props<'value> = {
+    value: Prop.t<'value>,
+    render: 'value => node,
+  }
+
+  let make = (props: props<'value>): node => {
+    switch props.value {
+    | Static(value) => props.render(value)
+    | Reactive(signal) => signalFragment(Computed.make(() => [props.render(Signal.get(signal))]))
+    }
+  }
+}
 
 /* Element constructor */
 let element = (
   tag: string,
-  ~attrs: array<(string, attrValue)>=[]->Array.map(x => x),
-  ~events: array<(string, Dom.event => unit)>=[]->Array.map(x => x),
-  ~children: array<node>=[]->Array.map(x => x),
+  ~attrs: array<(string, attrValue)>=[],
+  ~events: array<(string, Dom.event => unit)>=[],
+  ~children: array<node>=[],
   (),
 ): node => Element({tag, attrs, events, children})
 
@@ -597,3 +709,85 @@ let mountById = (node: node, containerId: string): unit => {
   | None => Console.error("Container element not found: " ++ containerId)
   }
 }
+
+let isReactiveProp = RuntimeValue.isReactiveProp
+
+let valuePrimitive = (value: 'input, stringify: 'value => string): node => {
+  if isReactiveProp(value) {
+    let prop: Prop.t<'value> = Obj.magic(value)
+    switch prop {
+    | Static(value) => text(stringify(value))
+    | Reactive(signal) => SignalText(Computed.make(() => stringify(Signal.get(signal))))
+    }
+  } else {
+    switch value->Core.Type.Classify.classify {
+    | Function(_) => {
+        let compute: unit => 'value = Obj.magic(value)
+        signalText(() => stringify(compute()))
+      }
+    | Object(_) => {
+        let signal: Signal.t<'value> = Obj.magic(value)
+        SignalText(Computed.make(() => stringify(Signal.get(signal))))
+      }
+    | Null | Undefined => null()
+    | _ => {
+        let value: 'value = Obj.magic(value)
+        text(stringify(value))
+      }
+    }
+  }
+}
+
+let renderValuePrimitiveProps = (props: 'props, stringify: 'scalar => string): node => {
+  switch (props->RuntimeValue.getField("children"), props->RuntimeValue.getField("value")) {
+  | (Some(children), _) => valuePrimitive(children, stringify)
+  | (None, Some(value)) => valuePrimitive(value, stringify)
+  | (None, None) => null()
+  }
+}
+
+module Text = {
+  type props<'value, 'children> = {
+    value?: 'value,
+    children?: 'children,
+  }
+
+  let make = (props: props<'value, 'children>): node => {
+    renderValuePrimitiveProps(props, value => value)
+  }
+}
+
+module Int = {
+  type props<'value, 'children> = {
+    value?: 'value,
+    children?: 'children,
+  }
+
+  let make = (props: props<'value, 'children>): node => {
+    renderValuePrimitiveProps(props, value => value->Int.toString)
+  }
+}
+
+module Float = {
+  type props<'value, 'children> = {
+    value?: 'value,
+    children?: 'children,
+  }
+
+  let make = (props: props<'value, 'children>): node => {
+    renderValuePrimitiveProps(props, value => value->Float.toString)
+  }
+}
+
+module Bool = {
+  type props<'value, 'children> = {
+    value?: 'value,
+    children?: 'children,
+  }
+
+  let toString = value => value ? "true" : "false"
+
+  let make = (props: props<'value, 'children>): node => {
+    renderValuePrimitiveProps(props, toString)
+  }
+}