Add fragment

This commit is contained in:
Florian Schroedl
2022-05-04 17:00:00 +02:00
parent 6409a562d6
commit 468586ffaa
2 changed files with 14 additions and 9 deletions

View File

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

View File

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