wrote more documentation
This commit is contained in:
parent
74c5fb48ff
commit
199408f160
1 changed files with 58 additions and 0 deletions
58
docs.rst
Normal file
58
docs.rst
Normal file
|
|
@ -0,0 +1,58 @@
|
||||||
|
|
||||||
|
Virtual DOM
|
||||||
|
===========
|
||||||
|
|
||||||
|
The virtual dom is in the ``vdom`` module.
|
||||||
|
|
||||||
|
The ``VNodeKind`` enum describes every tag that the HTML 5 spec includes
|
||||||
|
and some extensions that allow for an efficient component system.
|
||||||
|
|
||||||
|
These extensions are:
|
||||||
|
|
||||||
|
``VNodeKind.int``
|
||||||
|
The node havs a single integer field.
|
||||||
|
|
||||||
|
``VNodeKind.bool``
|
||||||
|
The node has a single boolean field.
|
||||||
|
|
||||||
|
``VNodeKint.vthunk``
|
||||||
|
The node is a `virtual thunk`:idx:. This means there is a
|
||||||
|
function attached to it that produces the ``VNode`` structure
|
||||||
|
on demand.
|
||||||
|
|
||||||
|
``VNodeKint.dthunk``
|
||||||
|
The node is a `DOM thunk`:idx:. This means there is a
|
||||||
|
function attached to it that produces the ``Node`` DOM structure
|
||||||
|
on demand.
|
||||||
|
|
||||||
|
For convenience of the resulting Nim DSL these tags have enum names
|
||||||
|
that differ from their HTML equivalent:
|
||||||
|
|
||||||
|
================= =======================================================
|
||||||
|
Enum value HTML
|
||||||
|
================= =======================================================
|
||||||
|
``tdiv`` ``div`` (changed because ``div`` is a keyword in Nim)
|
||||||
|
``italic`` ``i``
|
||||||
|
``bold`` ``b``
|
||||||
|
``strikethrough`` ``s``
|
||||||
|
``underlined`` ``u``
|
||||||
|
================= =======================================================
|
||||||
|
|
||||||
|
|
||||||
|
A virtual dom node also has a special field set called ``key``, an integer
|
||||||
|
that can be used as a data model specific key/id. It can be accessed in event
|
||||||
|
handlers to change the data model. See the todoapp for an example of how to
|
||||||
|
use it.
|
||||||
|
|
||||||
|
**Note**: This is not a hint for the DOM diff algorithm, multipe nodes can
|
||||||
|
all have the same key value.
|
||||||
|
|
||||||
|
|
||||||
|
Event system
|
||||||
|
============
|
||||||
|
|
||||||
|
Karax does not abstract over the event system the DOM offers much: The same
|
||||||
|
``Event`` structure is used. Every callback has the
|
||||||
|
signature ``proc (ev: Event; n: VNode)``.
|
||||||
|
|
||||||
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue