Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/eliot-akira/idom
Write functional view components with incremental DOM render
https://github.com/eliot-akira/idom
Last synced: 23 days ago
JSON representation
Write functional view components with incremental DOM render
- Host: GitHub
- URL: https://github.com/eliot-akira/idom
- Owner: eliot-akira
- Created: 2016-02-14T19:49:23.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2016-08-03T23:25:38.000Z (over 8 years ago)
- Last Synced: 2024-10-13T13:40:50.730Z (about 1 month ago)
- Language: JavaScript
- Homepage:
- Size: 29.3 KB
- Stars: 10
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# [idom](https://github.com/eliot-akira/idom)
`idom` is a library for writing **stateless functional view components**, rendered by [Incremental DOM](https://github.com/google/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**
```js
const Button = ({ action, color }) => {
let style = { backgroundColor: color }
return (
{ color }
)
}
```
**Render**
```js
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(, 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
```bash
npm install idom --save
```
## Setup
```bash
npm install babel babel-plugin-transform-react-jsx --save-dev
```
In `.babelrc`, add:
```json
"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.
```js
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.
```js
import 'idom/global'
```
**Webpack**
```js
plugins: [
new webpack.ProvidePlugin({
idom: 'idom'
})
]
```
---
The implementation/syntax of `idom` is inspired by an article by Brent Jackson: [Universal UI Components](http://jxnblk.com/writing/posts/universal-ui-components/).