iso
v5.2.0
Published
Isomorphic applications helper
Downloads
1,887
Readme
Iso
A helper class that allows you to hand off data from server to client.
Iso is a class. You instantiate it, add your markup, add some data to go with it, and render it. On the clientside Iso picks up what you sent down and gives it back to you so you can bring your content to life.
API
constructor(name = '', renderer = defaultRenderer)
The constructor takes in a name
which is then used to build up a unique key for every added html,
and a renderer
which is used to determine how the data is prestented to the client. By default
the renderer renders the markup into a div and the data into a script tag.
Iso#add(html: string, data: ?object): this
You provide the markup to add
and some data you wish to pass down, and iso will save it internally.
Iso#render(): string
Once you're ready to collect your html you call render
and a string will be returned to you.
Iso.bootstrap(onNode: function, selector: function)
onNode
is a function that is called with the data, and a reference to the container node on the
DOM. The selector
is a function that you can configure to find the state and nodes on the DOM
and return them.
The returned payload from selector
should be an Object which contains the state and node pair
for each unique key.
{
"foobar": {
state: { name: "foo" },
node: DOMNode,
},
}
Usage
Sample:
// server.js
const iso = new Iso()
request.get('/', function (req, res) {
iso.add('<div>Hello, World!</div>', { someSampleData: 'Hello, World!' })
res.render(iso.render())
})
// client.js
Iso.bootstrap(function (state, node) {
// Now I do something with this data, perhaps run it through some library and then append
// the result to node?
})