voko
v3.2.1
Published
Hyperscript reviver for the DOM using CSS selector syntax
Downloads
26
Readme
voko
Done. This project is maintained but there's no more development needed
Hyperscript reviver that uses CSS selector syntax to shorthand element creation. Supports DOM and SVGs. JSX compatible.
1.72kB minified and exactly 1000B gzipped when exported as window.v
.
Reduce your bundle size by replacing verbose DOM APIs with voko.
Intro
v('.header', { onClick: () => {} }, [
'Hello',
v('input[disabled][placeholder=How are you?]', { style: 'padding: 10px' }),
])
Replaces:
const header = document.createElement('div')
header.className = 'header'
header.addEventListener('click', () => {})
const text = document.createTextNode('Hello')
header.appendChild(text)
const input = document.createElement('input')
input.style = 'padding: 10px'
input.setAttribute('disabled', true)
input.setAttribute('placeholder', 'How are you?')
header.appendChild(input)
Heavily based on Mithril, but also inspired by the hyperscript project, Preact and other React-like libraries, and Val.
Scope
There's no virtual DOM, handling of state or updates, or mutating existing DOM nodes. It only simplifies DOM APIs for creating elements and fragments. Allows for HTML components as functions. JSX compatible so drop it into any React-like projects.
I wrote this for my co-workers who were writing all DOM API calls by hand in a
very messy and unmaintainable way (sorry but you know it's true). This is meant
to be dropped into a <script>
tag to be plug-and-play.
SVGs/Namespaces
There are many nuances to writing namespaced elements like SVGs and MathML. DOM
APIs like svgTextEl.x = 10
won't work as expected. They need methods which are
namespaced like setAttribute()
.
document.createElement()
won't work since it'll be namespaced to XHTML.
Here's some standard JS for creating SVGs:
document.createSVG = tag =>
document.createElementNS('http://www.w3.org/2000/svg', tag)
const size = 30
const svg = document.createSVG('svg')
svg.setAttribute('viewBox', [0, 0, '100 100']);
const box = document.createSVG('rect')
box.setAttribute('width', size)
box.setAttribute('height', size)
box.setAttribute('fill', '#fff')
box.addEventListener('mouseover', event => {
event.target.setAttribute('fill', '#ddd')
})
svg.appendChild(box)
In voko, you'd write them as expected. Use :
to denote the namespace. In this
case, :svg
. Replace the above code with:
const size = 30
v('svg:svg[viewBox="0 0 100 100"]', [
v(`rect:svg[fill=#fff][width=${size}][height=${size}]#nice-icon`, {
onMouseOver: event => { event.target.setAttribute('fill', '#ddd') },
}),
]),
Add arbitrary namespaces such as MathML by adding them to the v.ns
object.
Only SVG is included by default. You can rename namespaces too, if you're into
that: v.ns.s = v.ns.svg
Examples
Example of its flexibility, supporting different writing styles for attributes, CSS-style syntax, and looping:
const header = v('header', { style: 'background:"#fff"' })
const existingNode = document.createElement('p')
const ButtonComponent = ({ size, ...other }, children) =>
v('a.btn', { style: { fontSize: size }, ...other }, children)
const tags = {
Pictures: [
'Some content',
'Another post',
],
Videos: [
'Hello! <code>Escaped HTML</code>',
123,
],
}
// track references to DOM nodes using `ref:`
const live = {}
document.body.appendChild(
v('#main', [
v('nav.large', [
v('a.link[href=/][disabled]', 'Home'),
]),
header,
v('h1', 'Tags'),
v('hr'),
Object.entries(tags).map(([tag, posts]) =>
v('article', [
v('h2', { style: { fontSize: 18 } }, `#${tag}`),
v('small', `Post count: ${posts.length}`),
posts.map(post => v('p', post)),
])),
v(ButtonComponent, { size: 50, class: 'center' }, 'TapTap', 'Tap'),
v('section.primary', [
'Text',
v('p', 'Hello'),
v('small.btn[style=fontStyle:italic]', {
ref: e => live.Button = e,
className: 'blue',
onClick() {},
}, 'Tap me'),
]),
existingNode,
]))
// expect `{ Button: HTMLElement {} }`
console.log(live)
// expect `{ click: [λ: onClick] }`
console.log(v.events.get(live.Button))
// append without extra tags or calls to `appendChild`:
document
.querySelector('content #card')
.appendChild(
v.fragment(v('nav'), v('main'))
Read docs/rationale.md on what makes a reviver (and components more generally) useful, and docs/scope.md for the feature set and design decisions for voko.
Note: This is a purely ESM script, so it won't support require()
. Use the
minified version to bind to window
in the browser, and ESM for your bundler or
on Pika/Snowpack