choojs / choo-store Goto Github PK

View Code? Open in Web Editor NEW

37.0 37.0 7.0 34 KB

Lightweight state structure for choo apps.

License: ISC License

JavaScript 100.00%

choo-store's People

Contributors

Stargazers

Watchers

Forkers

s3ththompson toddself the-cc-dev isabella232 auggod

choo-store's Issues

Re-order event functions

This is awesome! Only thing which stood out to me is the prop ordering differs from choo. state, emitter (choo) vs emitter, state (choo-store). What are thoughts on restructuring that, and perhaps exposing app as well?

function event (options, store, state, emitter, app) { }

Really awesome work!

idea: export actions

Given

module.exports = createStore({
  storeName: 'clicks',
  initialState: { count: 0 },
  events: {
    increment: ({ store, emitter }) => {
      store.count++
      emitter.emit('render')
    }
  }
})

I could bind actions to the emitter and make those available for use elsewhere as store.actions[eventName]. So once the store is registered with the app, you could do...

var { actions } = require('./stores/clicks')

module.exports = state => html`
  <body>
    <h1>count is ${state.clicks.count}</h1>
    <button onclick=${() => actions.increment(1)}>Increment</button>
    <button onclick=${() => actions.reset({ render: true })}>Reset</button>
  </body>
`

Notice there is no longer any need for emit in a component!

DOMContentLoaded hook?

I frequently find myself wanting to do a little initialization, change some state, or trigger a store event on DOMContentLoaded.

Would you consider providing some sort of hook from within the choo-store API to DOMContentLoaded? Or is this best accomplished by a vanilla store that requires choo-store actions, listens for DOMContentLoaded, and then fires them all off at once?

API design ideas

related: #8

module.exports = createStore({
  name: 'abc.xyz',
  store: { clicks: 0 },
  actions: {
    increment (num, { store, emitter }) {
      store.clicks += num
      emitter.emit('render')
    }
  }
})

produces

state: {
  abc: {
    xyz: {
      clicks: 0
    }
  }
}

and

actions.increment(1) // emitter.emit('abc.xyz.increment', 1)

tests

last but not least!

add support for nested state structures

something like

createStore({ storeName: 'settings.user' })
// => choo.state.settings.user

or maybe a separate prop?

createStore({ storeName: 'user', parent: 'settings' })
// => choo.state.settings.user

choojs / choo-store Goto Github PK

choo-store's People

Contributors

Stargazers

Watchers

Forkers

choo-store's Issues

Re-order event functions

idea: export actions

DOMContentLoaded hook?

API design ideas

tests

add support for nested state structures

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent