diff --git a/experiments/config.nims b/experiments/config.nims
new file mode 100644
index 0000000..4071d27
--- /dev/null
+++ b/experiments/config.nims
@@ -0,0 +1 @@
+--path: "../karax"
diff --git a/experiments/echartstest.html b/experiments/echartstest.html
new file mode 100644
index 0000000..fd510bd
--- /dev/null
+++ b/experiments/echartstest.html
@@ -0,0 +1,14 @@
+
+
+
+
+ Karax ECharts Test
+
+
+
+
+
+
+
+
+
diff --git a/experiments/echartstest.nim b/experiments/echartstest.nim
new file mode 100644
index 0000000..45da71a
--- /dev/null
+++ b/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"
diff --git a/karax/karax.nim b/karax/karax.nim
index 9aea015..eaeac4b 100644
--- a/karax/karax.nim
+++ b/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,