NOTE: This is a WIP and not production ready yet
Tiny wrapper around Baobab for an OOTB universal state tree.
Create your universal tree
const tree = require('universal-tree')
const state = module.exports = tree({
colors: ['yellow', 'purple'],
name: 'Glorious colors'
})
Import and just use it on the client
const state = require('./state')
state.on('update', () => render())
And import and just use it on the server
const state = require('./state')
app.locals.state = state
app.get('/article', (req, res) => {
Article.find((err, article) => {
// IMPORTANT: Make sure to only update your state all at once, right before rendering
state.set({ title: article.title })
res.render('article')
})
})
Here in lies the big exprimental gamble. We're clearing the state tree out on every event loop tick when used on the server. Since Node's HTTP servers don't handle requests synchronously, we're hoping that's enough to ensure nothing weird happens. We're also turning off Baobab's persistence, immutability, and all that other client-side-useful stuff in hopes it's enough to make performance not dramatically suffer with this approach.
- Must use only use JSON primative data in tree for clone perf
- Only update your state all at once, right before rendering
Please fork the project and submit a pull request with tests. Install node modules npm install
and run tests with npm test
.
MIT