added karax.setForeignNodeId to make interfacing with ECharts easier

experiments/config.nims

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

experiments/echartstest.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+  <title>Karax ECharts Test</title>
+</head>
+
+<body id="body">
+
+<div id="ROOT" />
+
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.0.2/echarts-en.js"></script>
+<script type="text/javascript" src="nimcache/echartstest.js"></script>
+</html>

experiments/echartstest.nim

@@ -0,0 +1,61 @@
+
+
+import karax / [kbase, vdom, kdom, vstyles, karax, karaxdsl, jdict, jstrutils, jjson]
+
+type
+  Views = enum
+    Customers, Products
+
+var
+  currentView = Customers
+
+setOnHashChange(proc(hash: cstring) =
+  if hash == cstring"#/Products": currentView = Products
+  else: currentView = Customers
+)
+
+type
+  EChart* = ref object
+
+proc echartsInit(n: Element): EChart {.importc: "echarts.init".}
+proc setOption(x: EChart; option: JsonNode) {.importcpp.}
+
+proc postRender() =
+  if currentView == Products:
+    let myChart = echartsInit(kdom.getElementById("echartSection"))
+    # specify chart configuration item and data
+    let option = %*{
+      "title": {
+        "text": "ECharts entry example"
+      },
+      "tooltip": {},
+      "legend": {
+        "data": ["Sales"]
+      },
+      "xAxis": {
+        "data": ["shirt","cardign","chiffon shirt","pants","heels","socks"]
+      },
+      "yAxis": {},
+      "series": [{
+        "name": "Sales",
+        "type": "bar",
+        "data": [5, 20, 36, 10, 10, 20]
+      }]
+    }
+    myChart.setOption(option)
+
+proc createDom(): VNode =
+  result = buildHtml(tdiv):
+    ul(class = "tabs"):
+      for v in low(Views)..high(Views):
+        li:
+          a(href = "#/" & $v):
+            text cstring($v)
+
+    if currentView == Products:
+      tdiv(id = "echartSection", style = style((width, kstring"600px"), (height, kstring"400px")))
+    tdiv:
+      text "other section"
+
+setRenderer createDom, "ROOT", postRender
+setForeignNodeId "echartSection"

karax/karax.nim

@@ -42,6 +42,7 @@ type
     byId: JDict[cstring, VNode]
     when defined(stats):
       recursion: int
+    orphans: JDict[cstring, bool]
 
 
 var
@@ -176,6 +177,7 @@ proc vnodeToDom*(n: VNode; kxi: KaraxInstance): Node =
   if not n.style.isNil: applyStyle(result, n.style)
 
 proc same(n: VNode, e: Node; nesting = 0): bool =
+  if kxi.orphans.contains(n.id): return true
   if n.kind == VNodeKind.component:
     result = same(VComponent(n).expanded, e, nesting+1)
   elif n.kind == VNodeKind.vthunk or n.kind == VNodeKind.dthunk:
@@ -623,7 +625,8 @@ proc setRenderer*(renderer: proc (): VNode, root: cstring = "ROOT",
                          patchesV: newSeq[PatchV](30),
                          components: @[],
                          surpressRedraws: false,
-                         byId: newJDict[cstring, VNode]())
+                         byId: newJDict[cstring, VNode](),
+                         orphans: newJDict[cstring, bool]())
   kxi = result
   window.onload = init
 
@@ -636,7 +639,8 @@ proc setInitializer*(renderer: proc (): VNode, root: cstring = "ROOT",
                         patchesV: newSeq[PatchV](30),
                         components: @[],
                         surpressRedraws: true,
-                        byId: newJDict[cstring, VNode]())
+                        byId: newJDict[cstring, VNode](),
+                        orphans: newJDict[cstring, bool]())
   kxi = result
   window.onload = init
 
@@ -672,8 +676,13 @@ proc setOnHashChange*(action: proc (hashPart: cstring)) =
     redraw()
   onhashchange = wrapper
 
-{.push stackTrace:off.}
+proc setForeignNodeId*(id: cstring; kxi: KaraxInstance = kxi) =
+  ## Declares a node ID as "foreign". Foreign nodes are not
+  ## under Karax's control in the sense that Karax does not attempt
+  ## to perform structural checks on them.
+  kxi.orphans[id] = true
 
+{.push stackTrace:off.}
 proc setupErrorHandler*() =
   ## Installs an error handler that transforms native JS unhandled
   ## exceptions into Nim based stack traces. If `useAlert` is false,