fixed components; added playerapp example

examples/mediaplayer/mediaplayer.nim

@@ -0,0 +1,42 @@
+
+import karax, karaxdsl, vdom, components
+
+const
+  Play = 0
+  Big = 1
+  Small = 2
+  Normal = 3
+
+proc paused(n: Node): bool {.importcpp: "#.paused".}
+proc play(n: Node) {.importcpp.}
+proc pause(n: Node) {.importcpp.}
+proc `width=`(n: Node, w: int) {.importcpp: "#.width = #".}
+
+proc mplayer*(id, resource: cstring): VNode {.component.} =
+  proc handler(ev: Event; n: VNode) =
+    let myVideo = document.getElementById(id)
+    case n.key
+    of Play:
+      if myVideo.paused:
+        myVideo.play()
+      else:
+        myVideo.pause()
+    of Big: myVideo.width = 560
+    of Small: myVideo.width = 320
+    of Normal: myVideo.width = 420
+    else: discard
+
+  result = buildHtml(tdiv):
+    button(onclick=handler, key=Play):
+      text "Play/Pause"
+    button(onclick=handler, key=Big):
+      text "Big"
+    button(onclick=handler, key=Small):
+      text "Small"
+    button(onclick=handler, key=Normal):
+      text "Normal"
+    br()
+    br()
+    video(id=id, width="420"):
+      source(src=resource, `type`="video/mp4"):
+        text "Your browser does not support HTML5 video."

examples/mediaplayer/playerapp.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+  <title>Player app</title>
+</head>
+
+<body id="body">
+
+<div id="ROOT" />
+
+<script type="text/javascript" src="nimcache/playerapp.js"></script>
+<script type="text/javascript">
+  onload()
+</script>
+
+</body>
+</html>

examples/mediaplayer/playerapp.nim

@@ -0,0 +1,24 @@
+## Example app that shows how to write and embed a custom component.
+
+include karaxprelude
+import mediaplayer
+
+const url = "https://www.w3schools.com/html/mov_bbb.mp4"
+
+proc createDom(): VNode =
+  result = buildHtml(table):
+    tr:
+      td:
+        mplayer("vid1", url)
+      td:
+        mplayer("vid2", url)
+    tr:
+      td:
+        mplayer("vid3", url)
+      td:
+        mplayer("vid4", url)
+
+setRenderer createDom
+
+proc onload() {.exportc.} =
+  init()

examples/mediaplayer/playerapp.nims

@@ -0,0 +1 @@
+--path: "../../src"

src/components.nim

@@ -91,21 +91,29 @@ macro component*(prc: untyped): untyped =
       unpackCall.add unpack(typ, counter)
       inc counter
 
-  template vwrapper(pname, cname, nameStrLit, unpackCall) {.dirty.} =
+  template vwrapper(pname, unpackCall) {.dirty.} =
     proc pname(args: seq[VNode]): VNode =
       unpackCall
-    vcomponents[cstring(nameStrLit)] = cname
 
-  template dwrapper(pname, cname, nameStrLit, unpackCall) {.dirty.} =
+  template dwrapper(pname, unpackCall) {.dirty.} =
     proc pname(args: seq[VNode]): Node =
       unpackCall
-    dcomponents[cstring(nameStrLit)] = cname
+
+  template vregister(key, val) =
+    bind jdict.`[]=`
+    `[]=`(vcomponents, cstring(key), val)
+
+  template dregister(key, val) =
+    bind jdict.`[]=`
+    `[]=`(dcomponents, cstring(key), val)
 
   result = newTree(nnkStmtList, n)
   if isvirtual == ComponentKind.VNode:
-    result.add getAst(vwrapper(newname name, realName, newLit(nn), unpackCall))
+    result.add getAst(vwrapper(newname name, unpackCall))
+    result.add getAst(vregister(newLit(nn), realName))
   else:
-    result.add getAst(dwrapper(newname name, realName, newLit(nn), unpackCall))
+    result.add getAst(dwrapper(newname name, unpackCall))
+    result.add getAst(dregister(newLit(nn), realName))
   allcomponents[nn] = isvirtual
   when defined(debugKaraxDsl):
     echo repr result