idom v0.3.2
idom
idom
is a library for writing stateless functional view components, rendered by Incremental DOM.
It is based on the same paradigm as React, with:
- In-place diffing instead of virtual DOM
- Only functions for components (no class or state)
- Small size (6kB minified)
Example
The following assumes the use of Babel and JSX, but they're not required.
Component
const Button = ({ action, color }) => {
let style = { backgroundColor: color }
return (
<button onclick={action} style={style}>
{ color }
</button>
)
}
Render
import { render } from 'idom'
import Button from './Button'
const el = document.getElementById('root')
const action = () => {
const state = '#'+Math.floor(Math.random()*16777215).toString(16)
render(<Button action={action} color={state} />, el)
}
action()
Methods
element(tag, props, ...children)
Create a virtual element to be rendered. JSX is compiled to call this method, so there's no need to use it directly. It is similar to React.createElement
or h
in hyperscript.
render(Component, HTMLElement)
Render a functional component to the given DOM element. It is called again with new state to re-render; only the difference will be applied to the DOM.
Property names
Standard DOM element property names are used, such as class
and onclick
.
Install
npm install idom --save
Setup
npm install babel babel-plugin-transform-react-jsx --save-dev
In .babelrc
, add:
"plugins": [
[
"transform-react-jsx",
{ "pragma": "idom" }
]
]
JSX
JSX used in components are compiled to call idom
. Use one of the methods below to provide the function.
Import
The basic way is to import idom
at the top of every component.
import idom from 'idom'
Global
You can import idom
as a global variable, once at the beginning of the application. Then it is available for all components implicitly.
import 'idom/global'
Webpack
plugins: [
new webpack.ProvidePlugin({
idom: 'idom'
})
]
The implementation/syntax of idom
is inspired by an article by Brent Jackson: Universal UI Components.