implemented refs draft
This commit is contained in:
parent
45931c5e4a
commit
14660f9d68
6 changed files with 66 additions and 3 deletions
13
experiments/refs/demo.html
Normal file
13
experiments/refs/demo.html
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charSet="utf-8"/>
|
||||||
|
<title>Refs</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body id="body">
|
||||||
|
<div id="ROOT"></div>
|
||||||
|
<script type="text/javascript" src="nimcache/demo.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
39
experiments/refs/demo.nim
Normal file
39
experiments/refs/demo.nim
Normal file
|
|
@ -0,0 +1,39 @@
|
||||||
|
include karaxprelude
|
||||||
|
import random
|
||||||
|
|
||||||
|
var
|
||||||
|
modelData = @[5, 2, 4]
|
||||||
|
|
||||||
|
refA = VNodeRef()
|
||||||
|
refB = VNodeRef()
|
||||||
|
refSeq = newSeq[VNodeRef]()
|
||||||
|
|
||||||
|
proc onClick(ev: Event, n: VNode) =
|
||||||
|
kout(refA)
|
||||||
|
kout(refB)
|
||||||
|
kout(refSeq)
|
||||||
|
|
||||||
|
proc secureRefSlot(i: int): VNodeRef =
|
||||||
|
while refSeq.len <= i:
|
||||||
|
refSeq.add(VNodeRef())
|
||||||
|
result = refSeq[i]
|
||||||
|
|
||||||
|
proc view(): VNode =
|
||||||
|
result = buildHtml():
|
||||||
|
tdiv:
|
||||||
|
button(onclick=onClick):
|
||||||
|
text "click me"
|
||||||
|
# storing refs to single elements is straightforward now
|
||||||
|
tdiv(nref=refA):
|
||||||
|
text "A"
|
||||||
|
tdiv(nref=refB):
|
||||||
|
text "B"
|
||||||
|
# It's a bit more tricky when containers are involved:
|
||||||
|
for i, x in modelData.pairs:
|
||||||
|
tdiv(nref=secureRefSlot(i)):
|
||||||
|
text "List item: " & $x
|
||||||
|
|
||||||
|
proc renderer(): VNode =
|
||||||
|
view()
|
||||||
|
|
||||||
|
setRenderer renderer
|
||||||
1
experiments/refs/demo.nims
Normal file
1
experiments/refs/demo.nims
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
--path: "../../src"
|
||||||
|
|
@ -65,8 +65,14 @@ proc wrapEvent(d: Node; n: VNode; k: EventKind; action: EventHandler) =
|
||||||
|
|
||||||
# --------------------- DOM diff -----------------------------------------
|
# --------------------- DOM diff -----------------------------------------
|
||||||
|
|
||||||
template detach(n: VNode) = n.dom = nil
|
template detach(n: VNode) =
|
||||||
template attach(n: Vnode) = n.dom = result
|
if not n.nref.isNil():
|
||||||
|
n.nref.vnode = nil
|
||||||
|
n.dom = nil
|
||||||
|
template attach(n: VNode) =
|
||||||
|
if not n.nref.isNil():
|
||||||
|
n.nref.vnode = n
|
||||||
|
n.dom = result
|
||||||
|
|
||||||
proc vnodeToDom(n: VNode): Node =
|
proc vnodeToDom(n: VNode): Node =
|
||||||
if n.kind == VNodeKind.text:
|
if n.kind == VNodeKind.text:
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@ from strutils import startsWith, toLowerAscii
|
||||||
|
|
||||||
const
|
const
|
||||||
StmtContext = ["kout", "inc", "echo", "dec", "!"]
|
StmtContext = ["kout", "inc", "echo", "dec", "!"]
|
||||||
SpecialAttrs = ["id", "class", "value", "key", "style"]
|
SpecialAttrs = ["id", "class", "value", "key", "style", "nref"]
|
||||||
|
|
||||||
proc getName(n: NimNode): string =
|
proc getName(n: NimNode): string =
|
||||||
case n.kind
|
case n.kind
|
||||||
|
|
|
||||||
|
|
@ -101,6 +101,9 @@ macro buildLookupTables(): untyped =
|
||||||
buildLookupTables()
|
buildLookupTables()
|
||||||
|
|
||||||
type
|
type
|
||||||
|
VNodeRef* = ref object
|
||||||
|
vnode*: VNode
|
||||||
|
|
||||||
EventHandler* = proc (ev: Event; target: VNode) {.closure.}
|
EventHandler* = proc (ev: Event; target: VNode) {.closure.}
|
||||||
VKey* = int
|
VKey* = int
|
||||||
|
|
||||||
|
|
@ -108,6 +111,7 @@ type
|
||||||
kind*: VNodeKind
|
kind*: VNodeKind
|
||||||
key*: VKey
|
key*: VKey
|
||||||
id*, class*, text*: cstring
|
id*, class*, text*: cstring
|
||||||
|
nref*: VNodeRef
|
||||||
kids: seq[VNode]
|
kids: seq[VNode]
|
||||||
# even index: key, odd index: value; done this way for memory efficiency:
|
# even index: key, odd index: value; done this way for memory efficiency:
|
||||||
attrs: seq[cstring]
|
attrs: seq[cstring]
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue