Simple JSON in-memory auto-persistent database for server and client
Simple JSON in-memory auto-persistent database for server and client.
Note: Uses ES6 features (Proxy), use only where browser/env supports it
npm i undb
const undb = require('undb')
const [db, onChange] = undb({
path: './store.json', /* in node */
path: 'namespace', /* in browser */
initial: {
something: false
}
})
onChange(() => {
// Fires whenever db changes
})
undb
const undb = require('undb')
const [db, onChange] = undb(options)
db
Deeply observed JS object that triggers auto-save feature when modified
onChange
[fn]
Called whenever db
changes
options
path
[str]
Path to use for persistence. Should be a filename on server, or a "namespace" on client
initial
[obj]
Initial database structure
clear
[bool]
Deletes all localstorage items except current path
debounce
[num]
Debounce onChange
before
[bool]
Make onChange
fire before the value has been updated in db
read
[fn=>obj]
Intercept the read function. Must return a data object. fn
is the default read function
write
[cb=>null]
Intercept the write function. Must call cb
onChange
[obj]
Options passed to on-change
link
const { link } = require('undb/common/utils')
const state1Tuple = undb(options)
const state2Tuple = undb(options)
link(state1Tuple, state2Tuple);
const { link } = require('undb/common/utils')
const [ state1, state2 ] = link({}, {});
const [state1, onChange, link] = undb(options)
const [state2] = link({})
link
[fn]
Link 2 or more states. Changing one will change the other(s).
@param {...[state, onChange]|initial}
Takes either the [state, onChange]
tuple or an initial
object to create a new reactive state object from.
@returns state[]
Returns an array corresponding to the input arguments, each item either being the input [state]
(from the tuple) or a newly created one.
connect
connect
[fn=>fn=>Component]
Connects the onChange
to a <Component>
so that it re-renders whenever onChange
is firedconst connect = require('undb/browser/connect')
const ReactiveComponent = connect(onChange)(<Component>)
useState
useState
[obj=>obj]
React State Hook alternative that updates when state
object is modifiedconst { useState } = require('undb/browser/hooks')
const state = useState({ counter: 0 })
createUseState
createUseState
[fn=>fn]
Create a useState
hook for existing state
const { createUseState } = require('undb/browser/hooks')
const [state, onChange] = undb(options)
const useState = createUseState(onChange)
Note: Re-renders entire React App
store.js
const undb = require('undb')
const [store, onChange] = undb({ path: 'my-app' })
exports.store = store
exports.onChange = onChange
components/App.js
const { store } = require('../store')
module.exports = () => [
<h1>Hello {store.name}!</h1>,
<input onChange={e => store.name = e.target.value}>
]
main.js
const React = require('react')
const { onChange } = require('./store')
const App = require('./components/App')
onChange(() => React.render(<App>))
components/App.js
const undb = require('undb')
const connect = require('undb/browser/connect')
const [state, onChange] = undb()
const App = () => [
<h1>Hello {state.name}!</h1>,
<input onInput={e => state.name = e.target.value}>
]
module.exports = connect(onChange)(App)
main.js
const React = require('react')
const App = require('./components/App')
React.render(<App>)
components/App.js
const { useState } = require('undb/browser/hooks')
const App = () => {
const state = useState({ counter: 0 })
return (
<button onClick={ () => state.counter++ }>
`You have pressed this button ${state.counter} times`
</button>
)
}