mozaikjs
    TypeScript icon, indicating that this package has built-in type declarations

    0.2.1 • Public • Published

    mozaikjs

    Core package of MozaikJS state manager.

    MozaikJS is declarative and reactive state manager, designed for both simple and complex applications.

    Install

    npm i mozaikjs

    or

    yarn add mozaikjs

    Usage

    import { types } from 'mozaikjs'
    
    /*
     * types.model ➜ actions() ➜ create()
     */
    
    /**
     * Step 1.
     * Declare node (like reducers or models)
     */
    const router = types
      .model({
        history: types.array(types.string),
        path: types.string
      })
      .actions(({ dispatch, getState }) => ({
        push(path) {
          dispatch({
            path,
            history: [...getState().history, path]
          })
        },
        replace(path) {
          const history = getState().history
          history.splice(history.length - 1, 1, path)
          dispatch({
            path,
            history
          })
        }
      }))
    
    /**
     * Step 2.
     * Create instace & set default values
     */
    const routerInstance = router.create({
      history: ['/'],
      path: '/'
    })
    
    /**
     * Step 3.
     * Call action
     */
    routerInstance.push('/about')
    
    /**
     * Step 5.
     * Get action results
     */
    console.log(routerInstance.$getState())
    // ➜ { history: ['/', '/about'], path: '/about' }
    
    /**
     * Subscribe on notify
     */
    
    routerInstance.$subscribe(console.log)
    routerInstance.replace('/faq')
    // ➜ { history:  ['/', '/faq'], path: '/faq' }
    
    // Also you can use onSnapshot function for detect deep notify
    onSnapshot(routerInstance, console.log)
    routerInstance.replace('/home')
    // ➜ { history:  ['/', '/home'], path: '/home' }

    Compose nodes

    const { types, compose } = Mozaik
    
    const resetModel = types
      .model({
        isLoading: types.boolean
      })
      .actions(({ dispatch, getState }) => ({
        reset() {
          const newState = Object.keys(getState()).reduce((acc, key) => {
            acc[key] = null
            return acc
          }, {})
          dispatch(newState)
          return newState
        }
      }))
    
    const userNode = compose(
      resetModel,
      types.model({
        name: types.maybe(types.string),
        age: types.maybe(types.number)
      })
    ).create({
      name: 'Arthur',
      age: 24
    })
    
    console.log(userNode.$getState()) // ➜ { name: 'Arthur', age: 24 }
    userNode.reset()
    console.log(userNode.$getState()) // ➜ { name: null, age: null }

    Shape models (modules)

    const { types } = Mozaik
    
    const userModel = types.model({ name: types.string })
    const routerModel = types
      .model({ path: types.string })
      .actions(() => ({ push() {} }))
    
    const rootModel = types.model({
      router: routerModel,
      user: userModel
    })

    Install

    npm i mozaikjs

    DownloadsWeekly Downloads

    0

    Version

    0.2.1

    License

    MIT

    Unpacked Size

    71.5 kB

    Total Files

    34

    Last publish

    Collaborators

    • fireworksx