atomicojs / atomico

Atomico a micro-library for creating webcomponents using only functions, hooks and virtual-dom.
https://atomicojs.dev
MIT License
1.16k stars 43 forks source link

Usage without JSX? #26

Closed kristianmandrup closed 3 years ago

kristianmandrup commented 4 years ago

I would like to create Atomico bindings for the Nim language which does not have JSX support built in. What are the equivalent function calls? Thanks. I believe I can perhaps call h. Could you make a small example (perhaps in the Readme or docs) for how to write the equivalent of:

<host shadowDom style={{background: 'black'}}>{message}</host>

I would think it follows the same API as used by mithril

h('host', {shadowDom: true, style: {background: 'black'}}, message)

Ah, I see there is a section on VDom in the docs, but not entirely clear if I can use the h function as is typical with VDom. Please provide more examples, including host with and without shadowDom attribute enabled.

I see this syntax:

{
    nodeType : "host",
    children : [{
        nodeType : "button",
        onclick : handler
    }]
}

But would assume that h can be used to generate this under the hood? Please advice. Thanks.

Well I guess I can just use the html function with string interpolation:

html("""
<host shadowDom style="background: ${backgroundColor}>
  ${message}
</host>
""'
UpperCod commented 4 years ago

Hi, if like mithril, hyperapp or preact, you can call h to create the virtual-dom. Thank you for your observation I have updated the documentation following your issue.

https://atomico.gitbook.io/doc/guides/virtual-dom

"But would assume that h can be used to generate this under the hood?"

if atomico uses this function to generate the virtual-dom and is also used by the html function

I hope you find it useful, I remain attentive to your experience with atomico + nim-lang 👀