DOMK
Powerful DOM toolkit
Installation
npm install domk --save
Why domk ?
- Domk is made for small and medium projects.
- Domk is the best fit for SSR projects.
- No boilerplate, principle, configuration needed.
- With Domk you can manipulate DOM easier and more flexible.
- Domk is an alternative for jQuery or static template engines.
- Domk is very compact, only 3kb after GZiped
Getting started
Let's create simple clock app
; documentbodyinnerHTML = ``; // create date formatterconst formatter = "en" hour12: true hour: "numeric" minute: "2-digit" second: "2-digit"; const Clock = domk; // call Clock.update every 1 second;
We can make the above example more compact
;
Click counter app
; let count = 0;let Counter; documentbodyinnerHTML = ``; { count++; Counter;} Counter = domk; Counter;
List rendering
In this example, we create a list of youtube links, Domk does not generate HTML tags automatically (like React, Angular do), We must provide some existing tags, those will be used for templating
let cats = id: "J---aiyznGQ" name: "Keyboard Cat" id: "z_AbfPXTKms" name: "Maru" id: "OUtn3pvWmpg" name: "Henri The Existential Cat" ; // UL is list container// The first child of UL will be used for templatingdocumentbodyinnerHTML = `The Famous Cats of YouTube<!-- UL is list container --> `; // define Cat component, no update() call needed// when the Cat component is created, it is just like a template// it will be called later on by another componentconst Cat = domk; domk ;
Benchmark
Advanced Usages
References
domk(options)
Create a new Domk component with specified options.
- options (optional): A plain object has following properties
- model (optional): A function returns current model or a model object
- container (optional): A dom node or query selector string. By default, domk uses document as container
- return: Domk component
const mutableTodos = ;let immutableTodos = ; ;;;;
domk.one(selector, updateFn) & domk.all(selector, updateFn)
Query single (domk.one) or multiple elements (domk.all) and apply updating specs to matched elements.
- selector: A valid query selector string that can be used to querySelector() and querySelectorAll()
- updateFn: A function retrieves 2 arguments model and context and returns updating specs.
Domk component
An object contains all update specs for specified element
.one(selector, updateFn) & Domk.all(selector, updateFn)
Perform the same as domk.all and domk.one
.update()
-
Domk.update(model, container)
-
Domk.update(container)
model()
-
model(props)
-
model(props, reducer)
-
model(reducer)
domk.nested()
- domk.nested(modelFn)
domk.children()
-
domk.children(modelFn)
-
domk.children(modelFn, component)
-
domk.children(modelFn, updateFn)
-
domk.children(modelFn, keyFn, component)
-
domk.children(modelFn, keyFn, updateFn)
Updating specs
A plain object has following properties
id
Update element id attribute
domk;
name
Update element name attribute
class
Update element class. A value can be string or class map object.
let isVisible = false;domk;domk ;
domk does not remove original classes (box1, box2), it just append updated classes (hide, visible, invisible)
style
Update element style. A value can be string or style map object.
domk;domk;
domk does not add browser prefixes automatically
selected
Update selected property of option element
checked
Update checked property of input element
disabled
Update disabled property of input element
value
Update value property of input element
href
Update href attribute of anchor element
text
Update textContent property of html element
domk;
<strong>This is formatted text</strong>
html
Update innerHTML property of html element
domk;
This is formatted text
init
An init value for a current node. Init value can be function, Node object or HTML string.
- A function retrieves current node object as first argument.
- HTML string: Node contents will be replaced with given value.
- Node object: Clone of given node will be appended to current node.
domk ; domk; const Box3 = domk; // init action invoked onceBox3;Box3;Box3;
Click me This is formatted text Click me Box 3 contents
on
Update event listeners
domk ;
prop
Update multiple properties at once
domk;
attr
Update multiple attributes at once
domk;
children
Update the child node of the current node according to the specified model.
domk ; domk ;
Before updating
<!-- LI element is used to templating --> <!-- LI element is used to templating -->
After updating
1 2 3 A B C
Dependencies
Nothing