undb

Simple JSON in-memory auto-persistent database for server and client.

Features

• Simple JS object, no extraneous API
• Auto-persisted using on-change
• Saves to a json file on server, and uses localStorage in browser
• Works in browser, with React or Preact, or without

Note: Uses ES6 features (Proxy), use only where browser/env supports it

Install

npm i undb

Usage

constundb=require('undb')const[db,onChange]=undb({path: './store.json',/* in node */path: 'namespace',/* in browser */initial: {something: false}})onChange(()=>{// Fires whenever db changes})

API

undb

constundb=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]DebounceonChange

  • 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')conststate1Tuple=undb(options)conststate2Tuple=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.

Browser specific

connect

• connect[fn=>fn=>Component] Connects the onChange to a <Component> so that it re-renders whenever onChange is fired

constconnect=require('undb/browser/connect')constReactiveComponent=connect(onChange)(<Component>)

useState

• useState[obj=>obj]React State Hook alternative that updates when state object is modified

const{ useState }=require('undb/browser/hooks')conststate=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)constuseState=createUseState(onChange)

Examples

Global persistent store

Note: Re-renders entire React App

• store.js

  constundb=require('undb')const[store,onChange]=undb({path: 'my-app'})exports.store=storeexports.onChange=onChange

• components/App.js

  const{ store }=require('../store')module.exports=()=>[<h1>Hello {store.name}!</h1>,<inputonChange={e=>store.name=e.target.value}>
  ]

• main.js

  constReact=require('react')const{ onChange }=require('./store')constApp=require('./components/App')onChange(()=>React.render(<App>))

Local volatile state

• components/App.js

  constundb=require('undb')constconnect=require('undb/browser/connect')const[state,onChange]=undb()constApp=()=>[<h1>Hello {state.name}!</h1>,<inputonInput={e=>state.name=e.target.value}>
  ]
  module.exports = connect(onChange)(App)

• main.js

  constReact=require('react')constApp=require('./components/App')React.render(<App>)

React State Hook Alternative

• components/App.js

  const{ useState }=require('undb/browser/hooks')constApp=()=>{conststate=useState({counter: 0})return(<buttononClick={()=>state.counter++}>
  `You have pressed this button ${state.counter} times`
  </button>)}

Similar libraries

• unurl
• mobx
• react-easy-state