Add fragment
This commit is contained in:
@@ -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
|
||||||
|
|||||||
@@ -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)
|
||||||
|
|||||||
Reference in New Issue
Block a user