1.0.0-alpha.19 • Published 5 years ago
@merri/nomjs v1.0.0-alpha.19
Nom.js is a DOM library that works with JSX syntax (not compatible with React components).
Project targets:
- Small size
- Be performant
- Have compact easy-to-understand syntax
- Embrace native DOM: synchronize updates without Virtual DOM
Methods
Nom exposes three methods: h
, fragment
and mount
.
Short explanations:
h
is likeReact.createElement
, but returns native DOM nodes.fragment
accepts DOM nodes, strings etc. and returns a fragment.mount
takes DOM nodes or a fragment and mounts them for constant updates.
This allows to do small browser-only apps easily:
/** @jsx h */
import { h, mount } from '@merri/nomjs'
const colors = ['blue', 'red', 'gray', 'orange']
// this short example does evil mutation of `color` variable
function Component({ color }) {
return (
<div style={() => ({ backgroundColor: color, padding: '6px' })}>
<p>Hello World!</p>
<button onclick={() => color = colors[(colors.indexOf(color) + 1) % colors.length]}>
Change color
</button>
</div>
)
}
document.body.appendChild(
mount(<Component color="black" />)
)
Get it
npm install --save @merri/nomjs
yarn add @merri/nomjs
Please note this lib is still in alpha so there will probably be large changes to how things work.
1.0.0-alpha.19
5 years ago
1.0.0-alpha.18
5 years ago
1.0.0-alpha.17
5 years ago
1.0.0-alpha.16
5 years ago
1.0.0-alpha.15
5 years ago
1.0.0-alpha.14
5 years ago
1.0.0-alpha.13
5 years ago
1.0.0-alpha.12
5 years ago
1.0.0-alpha.11
5 years ago
1.0.0-alpha.10
5 years ago
1.0.0-alpha.9
5 years ago
1.0.0-alpha.8
5 years ago
1.0.0-alpha.7
5 years ago
1.0.0-alpha.6
5 years ago
1.0.0-alpha.5
5 years ago
1.0.0-alpha.4
5 years ago
1.0.0-alpha.3
5 years ago
1.0.0-alpha.2
5 years ago
1.0.0-alpha.1
5 years ago
1.0.0-alpha.0
5 years ago