0.13.1 • Published 3 years ago
attodom v0.13.1
attodom
yet another small DOM component library, < 1kb
Why
- experimenting on different APIs to find the minimal helpers required for dynamic nodes, elements and lists with one way data flow from root component to child nodes
Features
- no virtual DOM, all operations are done on actual nodes
- multiple dynamic lists within the same parent
- svg support
- synthetic events available
- < 1kb gzip, no dependencies
- Designed for phones and/or older browsers:
- very low memory requirement
- no transpilation required, all ES5
Limitations
- strictly DOM element creation and manipulations (no router, no store)
API
Elements and Nodes (hyperscript)
el(tagName|Element [, attributes [,children ]] ): HTMLElement
svg(tagName|Element [, attributes [,children ]] ): SVGElement
where
attributes: {name: value, update: updateFunction}
children: {number|string|Node|Array<children>}
updateFunction: (this:Node, value:* [, key:* [, object:*]]): void
Synthetic Events
Synthetic events are used when the first letter of the event name is capitalised
- regular event:
el('h1', {onclick: handler}, 'click me')
- synthetic event:
el('h1', {onClick: handler}, 'click me')
Lists
list(parent:Node, factory, options): List
where
factory: function(value:* [, key:* [, object:*]]): Node
options.before: Node
options.after: Node
options.key: string | function([*], [number], [Array]): string
List: {parent, before, after, factory, key, map:{key:Node}, update}
list.update: function([*], [number], [Array]): List
list
creates a List
object with an update method that can update the parent children to match a data Array
import {el, svg, list} from 'attodom'
var ol = el('ol'),
bullets = list(ol, (v, i) => el('li', i + ':' + v))
bullets.update(['a', 'b'])
// <ol><li>1:a</li><li>2:b</li></ol>
License
0.13.1
3 years ago
0.13.0
4 years ago
0.12.0
5 years ago
0.11.5
5 years ago
0.11.4
5 years ago
0.11.3
6 years ago
0.11.2
6 years ago
0.11.1
6 years ago
0.11.0
6 years ago
0.10.0
6 years ago
0.9.0
6 years ago
0.8.3
6 years ago
0.8.2
6 years ago
0.8.1
6 years ago
0.8.0
6 years ago
0.7.0
6 years ago
0.6.3
6 years ago
0.6.2
6 years ago
0.6.1
6 years ago
0.6.0
6 years ago
0.5.2
6 years ago
0.5.1
6 years ago
0.5.0
6 years ago
0.4.0
6 years ago
0.3.1
7 years ago
0.3.0
7 years ago
0.2.0
7 years ago
0.1.0
7 years ago
0.0.1
7 years ago