storeon - npm Package Compare versions
Comparing version 0.8.0 to 0.8.1
| # Change Log | ||
| This project adheres to [Semantic Versioning](http://semver.org/). | ||
| ## 0.8.1 | ||
| * Fix TypeScript definitions (by Eugeny Schibrikov). | ||
| * Reduce size (by Hyan Mandian). | ||
| * Add project logo (by Anton Lovchikov). | ||
| * Improve examples (by Nikolay Puzyrev and Alan H). | ||
| * Fix docs (by Theodore Diamantidis and Igor Kamyshev). | ||
| ## 0.8 | ||
@@ -5,0 +12,0 @@ * Add `Symbol` support for store keys and event names (by Vlad Rindevich). |
@@ -7,3 +7,3 @@ declare namespace createStore { | ||
| event: PropertyKey, | ||
| handler: (state: Readonly<State>, data: unknown) => Partial<State> | Promise<void> | null | ||
| handler: (state: Readonly<State>, data: any) => Partial<State> | Promise<void> | null | ||
| ) => () => void; | ||
@@ -10,0 +10,0 @@ readonly dispatch: Dispatch; |
@@ -26,7 +26,4 @@ /** | ||
| var on = function (event, cb) { | ||
| if (!events[event]) { | ||
| events[event] = [cb] | ||
| } else { | ||
| events[event].push(cb) | ||
| } | ||
| (events[event] || (events[event] = [])).push(cb) | ||
| return function () { | ||
@@ -33,0 +30,0 @@ events[event] = events[event].filter(function (i) { |
| { | ||
| "name": "storeon", | ||
| "version": "0.8.0", | ||
| "version": "0.8.1", | ||
| "description": "Tiny (173 bytes) event-based Redux-like state manager for React and Preact", | ||
@@ -14,3 +14,3 @@ "keywords": [ | ||
| "license": "MIT", | ||
| "repository": "ai/storeon", | ||
| "repository": "storeon/storeon", | ||
| "browser": { | ||
@@ -17,0 +17,0 @@ "./devtools/logger.js": "./devtools/logger.browser.js" |
| # Storeon | ||
| <img src="https://storeon.github.io/storeon/logo.svg" align="right" | ||
| alt="Storeon logo by Anton Lovchikov" width="160" height="142"> | ||
| A tiny event-based Redux-like state manager for React and Preact. | ||
| * **Small.** 173 bytes (minified and gzipped). No dependencies. | ||
| It uses [Size Limit] to control size. | ||
| It uses [Size Limit] to control size. | ||
| * **Fast.** It tracks what parts of state were changed and re-renders | ||
| only components based on the changes. | ||
| only components based on the changes. | ||
| * **Hooks.** The same Redux reducers. With hooks for **React** and **Preact**. | ||
| * **Modular.** API created to move business logic away from React components. | ||
| Read more about Storeon features in **[our article]**. | ||
| ```js | ||
@@ -47,2 +52,3 @@ import createStore from 'storeon' | ||
| [our article]: https://evilmartians.com/chronicles/storeon-redux-in-173-bytes | ||
| [Size Limit]: https://github.com/ai/size-limit | ||
@@ -56,2 +62,8 @@ | ||
| ## Tools | ||
| * [`@storeon/localstorage`](https://github.com/storeon/localstorage) | ||
| to save/restore state to `localStorage`. | ||
| ## Install | ||
@@ -124,3 +136,3 @@ | ||
| ```js | ||
| store.on('@dispatch', ([event, data]) => { | ||
| store.on('@dispatch', (state, [event, data]) => { | ||
| console.log(`Storeon: ${ event } with `, data) | ||
@@ -145,3 +157,3 @@ }) | ||
| ```js | ||
| // count: 0 will be added to state on initialization | ||
| // users: {} will be added to state on initialization | ||
| store.on('@init', () => ({ users: { } })) | ||
@@ -187,3 +199,3 @@ ``` | ||
| const Users = () => { | ||
| const { dispatch, users } = useStoreon('users') | ||
| const { dispatch, users, projects } = useStoreon('users', 'projects') | ||
| const onAdd = useCallback(user => { | ||
@@ -193,3 +205,3 @@ dispatch('users/add', user) | ||
| return <div> | ||
| {users.map(user => <User key={user.id} user={user} />)} | ||
| {users.map(user => <User key={user.id} user={user} projects={projects} />)} | ||
| <NewUser onAdd={onAdd} /> | ||
@@ -205,3 +217,3 @@ </div> | ||
| class User extends React { | ||
| class Users extends React.Component { | ||
| onAdd = () => { | ||
@@ -218,7 +230,7 @@ this.props.dispatch('users/add', user) | ||
| export default connect('users', Users) | ||
| export default connect('users', 'anotherStateKey', Users) | ||
| ``` | ||
| `connect()` accept the list of state keys to pass into `props`. | ||
| It will re-render only if this keys will be changed. | ||
| `useStoreon` hook and `connect()` accept the list of state keys to pass | ||
| into `props`. It will re-render only if this keys will be changed. | ||
@@ -233,3 +245,3 @@ | ||
| … | ||
| process.env.NODE_ENV !== 'production' && require('storeon/devtools')() | ||
| process.env.NODE_ENV !== 'production' && require('storeon/devtools') | ||
| ]) | ||
@@ -252,1 +264,32 @@ ``` | ||
| [Redux DevTools Extension]: https://github.com/zalmoxisus/redux-devtools-extension | ||
| ## Testing | ||
| Tests for store can be written in this way: | ||
| ```js | ||
| it('creates users', () => { | ||
| let addUserResolve | ||
| jest.spyOn(api, 'addUser').mockImplementation(() => new Promise(resolve => { | ||
| addUserResolve = resolve | ||
| })) | ||
| let store = createStore([usersModule]) | ||
| store.dispatch('users/add', { name: 'User' }) | ||
| expect(api.addUser).toHaveBeenCalledWith({ name: 'User' }) | ||
| expect(store.get().users).toEqual([]) | ||
| addUserResolve() | ||
| expect(store.get().users).toEqual([{ name: 'User' }]) | ||
| }) | ||
| ``` | ||
| We recommend to keep business logic away from the components. In this case, | ||
| UI kit (special page with all your components in all states) | ||
| will be the best way to test components. | ||
| For instance, with [UIBook] you can mock store and show notification | ||
| on any `dispatch` call. | ||
| [UIBook]: https://github.com/vrizo/uibook/ |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No repository
Supply chain riskPackage does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No repository
Supply chain riskPackage does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by21.76%
26018
- Number of package files
- increased by4.17%
25
- Number of lines in readme file
- increased by17.7%
286
Worsened metrics
- Lines of code
- decreased by-0.91%
435