Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/creationix/domchanger
dombuilder that applies diffs only to the real dom
https://github.com/creationix/domchanger
Last synced: 5 days ago
JSON representation
dombuilder that applies diffs only to the real dom
- Host: GitHub
- URL: https://github.com/creationix/domchanger
- Owner: creationix
- Created: 2014-06-06T02:18:50.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2024-08-14T17:11:36.000Z (6 months ago)
- Last Synced: 2025-02-07T03:08:08.076Z (15 days ago)
- Language: JavaScript
- Size: 43 KB
- Stars: 72
- Watchers: 8
- Forks: 17
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
DomChanger
==========
[](https://gitter.im/creationix/domchanger?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
This is a small library that lets your build react.js style websites, but with
minimal dependencies and using JSON-ML style syntax instead of JSX.
## A Simple Component
DomChanger components are simply functions that export a given interface.
The main export is a `render()` function that takes input data and returns what
to display. HTML nodes are described using JSON-ML syntax.
```js
// Defining the component
function HelloMessage() {
return { render: render };
function render(name) {
return ["div", "Hello " + name];
}
}
// Creating a instance attached to document.body
var instance = domChanger(HelloMessage, document.body);
// Send in the initial data to render.
instance.update("Tim");
```
You can also `instance.destroy()` when you're done with the component and wish
to destroy it.
## A Stateful Component
In addition to taking input data (accessed via update arguments), a component
can maintain internal state data (accessed via local variables in the closure).
A component can call `refresh` when it's state has been changed.
```js
function Timer(emit, refresh) {
var secondsElapsed = 0;
var interval = setInterval(tick, 1000);
return {
render: render,
cleanup: cleanup
};
function render() {
return ["div", "Seconds Elapsed: ", secondsElapsed];
}
function tick() {
secondsElapsed++;
refresh();
}
function cleanup() {
clearInterval(interval);
}
}
```
## An Application
Using update data and closure state, we can put together a small Todo
application. This example uses state to track the current list of items as well
as the text that the user has entered.
```js
function TodoApp(emit, refresh) {
var items = [], text = "";
return { render: render };
function render() {
return ["div",
["h3", "TODO"],
[TodoList, items],
["form", { onsubmit: handleSubmit },
["input", {
onchange: onChange,
value: text
}],
["button", "Add #", items.length + 1]
]
];
}
function handleSubmit(evt) {
evt.preventDefault();
items.push(text);
text = "";
refresh();
}
function onChange(evt) {
text = evt.target.value;
}
}
function TodoList() {
return { render: render };
function render(items) {
return ["ul", items.map(function (itemText) {
return ["li", itemText];
})];
}
}
```
## Live Example
You can play around with a larger example in this [fiddle](http://jsfiddle.net/BsUDE/3/).