Add fragment

src/js/bindings/react/react_dom.nim

@@ -15,12 +15,15 @@ template tocstring(x: typed): auto =
   when x is string: cstring(x)
   else: x
 
+
 {.push importcpp.}
 proc createElement*(react: ReactGlobal, tag: cstring, props: Attrs): ReactNode
 proc createElement*(react: ReactGlobal, tag: cstring, props: Attrs,
     n1: auto): ReactNode
 {.pop.}
 
+proc `<>`*(x: string): ReactNode {.importjs: "React.createElement(React.Fragment, null, #)".}
+
 template makeDomElement(x: untyped, name: string = "") =
   const tag {.gensym.} = if name == "": cstring(idString(x)) else: name
   const NIL: Attrs = nil

src/js/example/sandbox.nim

@@ -1,9 +1,11 @@
 import jsconsole, jsffi, strutils, sequtils, sugar
 import sugar
-import ../bindings/react/react_dom,
-       ../bindings/react/react_types,
-       ../bindings/react/react_styles,
-       ../bindings/react/react_hooks
+import
+  ../bindings/react/react_globals,
+  ../bindings/react/react_dom,
+  ../bindings/react/react_types,
+  ../bindings/react/react_styles,
+  ../bindings/react/react_hooks
 import sequtils
 import options
 import strformat
@@ -27,12 +29,11 @@ proc renderItems(
 proc toMarkUp(x: OrgInlineBlock): ReactNode =
   console.log(x)
   case x.kind:
-    of orgRawText:            p(Attrs{}, x.content)
-    else: p(Attrs{}, "Unmatched")
+    of orgRawText:            `<>`("Foo")
     # of orgText:               "Text"
 
     # # Formating
-    # of orgBoldText:           "Text (Bold)"
+    of orgBoldText:           b(Attrs{}, x.content)
     # of orgItalicText:         "Text (Italic)"
     # of orgUnderlineText:      "Text (Underline)"
     # of orgVerbatimText:       "Text (Verbatim)"
@@ -41,19 +42,20 @@ proc toMarkUp(x: OrgInlineBlock): ReactNode =
 
     # # Links
     # of orgLink: "Link"
+    else: p(Attrs{}, "Unmatched")
 
 proc makeItems(x: string): seq[ReactNode] =
   makeOrg(x)
   .fold(
     (err) => @[`div`(Attrs{}, &"Errors: {err}")],
-    (xs: OrgBuilder) => xs.tree.map((x: OrgBlock) => `div`(Attrs{}, x.headlineContent.map(toMarkUp))),
+    (xs: OrgBuilder) => xs.tree.map((x: OrgBlock) => `p`(Attrs{}, x.headlineContent.map(x => toMarkUp(x)))),
   )
 
 proc makeTopLevel(): ReactNode {.exportc.} =
   let text = myUseState[cstring]("""* TODO Level 1
 Some stuff inbetween
 
-** DONE Level 2""")
+** DONE Level 2 **bold** stuff""")
 
   let val = text.getter
   let orgItems = makeItems($val)