Skip to content

Instantly share code, notes, and snippets.

@bketelsen
Created November 15, 2018 23:34
Show Gist options
  • Save bketelsen/69a2344fcb9807e22c5dac2e5182bc52 to your computer and use it in GitHub Desktop.
Save bketelsen/69a2344fcb9807e22c5dac2e5182bc52 to your computer and use it in GitHub Desktop.
Karax + Litz = Web Components in Nim
import
dom, jsffi, jsconsole, macros, strutils,
nes
class Ticker:
tickerTempl = html_templ:
d(data={"key1": "value1", "key2": "value2"}):
h1: "Hello, World!"
h2: "It is ${new Date().toLocaleTimeString()}."
var t = newTicker()
proc tick(r: JsObject) =
tagTempl(r, t.tickerTempl)
discard window.setInterval(proc () = tick(bindLit(document.getElementById("ROOT"))), 10000)
class Welcome(HTMLElement):
args: varargs[JsObject]
constructorBody:
this.html = bindLit(this)
welcomeTempl = html_templ:
h1: "Hello, ${this.getAttribute('name')}"
connectedCallback = proc(w: Welcome): Element =
w.render()
render = proc(w: Welcome): Element =
result = tagCustomElement(w.html, w.welcomeTempl, w)
customElements.define("h-welcome", WelcomeConstructor)
tagTempl(bindLit(document.getElementById("ROOT")),
toJs(("""
<h-welcome name="Sara"></h-welcome>
<h-welcome name="Cahal"></h-welcome>
<h-welcome name="Edite"></h-welcome>
""".unindent()).cstring)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment