corvid-storeon - npm Package Compare versions

Comparing version 2.1.1 to 2.2.0

dist/index.esm.js

@@ -1,2 +0,2 @@
-var storeon = modules => {
+let createStoreon = modules => {
   let events = { };
@@ -45,3 +45,3 @@ let state = { };
 const createStore = (modules) => {
-  const store = storeon(modules);
+  const { dispatch, get, on } = createStoreon(modules);
   const page = [];
@@ -51,7 +51,7 @@ let subs = [];
   $w.onReady(() => {
-    store.dispatch('@ready');
+    dispatch('@ready');
 
-    store.on('@changed', (state, data) => {
+    on('@changed', (state, changes) => {
       subs.forEach((s) => {
-        const changesInKeys = s.keys.some((key) => key in data);
+        const changesInKeys = s.keys.some((key) => key in changes);
 
@@ -65,3 +65,3 @@ if (changesInKeys) {
     page.concat(subs).forEach((s) => {
-      s.cb(store.get());
+      s.cb(get());
     });
@@ -71,11 +71,10 @@ });
   return {
-    getState: store.get,
-    dispatch: store.dispatch,
+    getState: get,
+    dispatch,
 
-    connect() {
-      const l = arguments.length - 1;
-      const cb = arguments[l];
+    connect(...args) {
+      const [cb] = args.slice(-1);
 
       subs.push({
-        keys: [].slice.call(arguments, 0, l),
+        keys: args.slice(0, -1),
         cb
@@ -95,2 +94,2 @@ });
 
-export { createStore };
+export { createStore, createStoreon };

dist/index.js

@@ -5,3 +5,3 @@ 'use strict';
 
-var storeon = modules => {
+let createStoreon = modules => {
   let events = { };
@@ -50,3 +50,3 @@ let state = { };
 const createStore = (modules) => {
-  const store = storeon(modules);
+  const { dispatch, get, on } = createStoreon(modules);
   const page = [];
@@ -56,7 +56,7 @@ let subs = [];
   $w.onReady(() => {
-    store.dispatch('@ready');
+    dispatch('@ready');
 
-    store.on('@changed', (state, data) => {
+    on('@changed', (state, changes) => {
       subs.forEach((s) => {
-        const changesInKeys = s.keys.some((key) => key in data);
+        const changesInKeys = s.keys.some((key) => key in changes);
 
@@ -70,3 +70,3 @@ if (changesInKeys) {
     page.concat(subs).forEach((s) => {
-      s.cb(store.get());
+      s.cb(get());
     });
@@ -76,11 +76,10 @@ });
   return {
-    getState: store.get,
-    dispatch: store.dispatch,
+    getState: get,
+    dispatch,
 
-    connect() {
-      const l = arguments.length - 1;
-      const cb = arguments[l];
+    connect(...args) {
+      const [cb] = args.slice(-1);
 
       subs.push({
-        keys: [].slice.call(arguments, 0, l),
+        keys: args.slice(0, -1),
         cb
@@ -101,1 +100,2 @@ });
 exports.createStore = createStore;
+exports.createStoreon = createStoreon;

package.json

 {
   "name": "corvid-storeon",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "description": "A tiny event-based state manager Storeon for Corvid by Wix",
@@ -19,6 +19,6 @@ "main": "dist/index.js",
     "markdownlint-cli": "^0.22.0",
-    "rollup": "^1.32.0",
+    "rollup": "^2.0.2",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",
-    "storeon": "^1.0.0"
+    "storeon": "^2.0.1"
   },
@@ -25,0 +25,0 @@ "husky": {

README.md

 # corvid-storeon
 
 [![corvid-storeon test status](https://github.com/shoonia/corvid-storeon/workflows/test/badge.svg)](https://github.com/shoonia/corvid-storeon/actions)
-[![npm version](https://img.shields.io/npm/v/corvid-storeon.svg)](https://www.npmjs.com/package/corvid-storeon)
+[![npm version](https://badgen.net/npm/v/corvid-storeon)](https://www.npmjs.com/package/corvid-storeon)
+[![minzip](https://badgen.net/bundlephobia/minzip/corvid-storeon)](https://bundlephobia.com/result?p=corvid-storeon)
 
@@ -57,2 +58,4 @@ <a href="https://www.wix.com/alexanderz5/corvid-storeon">
 
+[Demo](https://www.wix.com/alexanderz5/corvid-storeon)
+
 ## Install
@@ -80,4 +83,15 @@
 
-- `createStore(Array<Module>): Store`
+Syntax
 
+```ts
+function createStore(Array<Module>): Store
+
+type Store = {
+  getState: function
+  dispatch: function
+  connect: function
+  connectPage: function
+}
+```
+
 ### getState
@@ -91,4 +105,8 @@
 
-- `getState(): object`
+Syntax
 
+```ts
+function getState(): object
+```
+
 ### dispatch
@@ -102,4 +120,8 @@
 
-- `dispatch(event: string, [data: any]): void`
+Syntax
 
+```ts
+function dispatch(event: string, [data: any]): void
+```
+
 ### connect
@@ -122,6 +144,12 @@
 
-- `connect(key: string, [key: string, ...], handler: ConnectEventHandler): Disconnect`
-- `callback ConnectEventHandler(state: object): void`
-- `function Disconnect(): void`
+Syntax
 
+```ts
+function connect(key: string, [key: string, ...], handler: ConnectHandler): Disconnect
+
+callback ConnectHandler(state: object): void
+
+function Disconnect(): void
+```
+
 ### connectPage
@@ -136,5 +164,10 @@
 
-- `connectPage(initFunction: ReadyHandler): void`
-- `callback ReadyHandler(state: object): void`
+Syntax
 
+```ts
+function connectPage(initFunction: ReadyHandler): void
+
+callback ReadyHandler(state: object): void
+```
+
 ## Store
@@ -161,3 +194,3 @@
     return {
-      items: items.concat(item),
+      items: [...items, item],
     };
@@ -187,13 +220,73 @@ });
 
-The store has 3 methods:
+Syntax
 
-- `store.get()` will return current state. The state is always an object.
-- `store.on(event, callback)` will add an event listener.
-- `store.dispatch(event, data)` will emit an event with optional data.
+```ts
+function createStore(Array<Module>): Store
 
-## Events
+function Module(store: StoreonStore): void
 
+type StoreonStore = {
+  get: function
+  on: function
+  dispatch: function
+}
+```
+
+### Storeon store methods
+
+#### store.get
+
+Returns an object that holds the complete state of your app.
+The app state is always an object.
+
+```js
+const state = store.get();
+```
+
+Syntax
+
+```ts
+function get(): object
+```
+
+#### store.on
+
+Adds an event listener. `store.on()` returns cleanup function.
+This function will remove the event listener.
+
+```js
+const unbind = store.on("event/type", (state, data) => { });
+
+unbind();
+```
+
+Syntax
+
+```ts
+function on(event: string, listener: EventListener): Unbind
+
+callback EventListener(state: object, [data: any]): any
+
+function Unbind(): void
+```
+
+#### store.dispatch
+
+Emits an event with optional data.
+
+```js
+store.dispatch("event/type", { value: "abc" });
+```
+
+Syntax
+
+```ts
+function dispatch(event: string, [data: any]): void
+```
+
+### Events
+
 There are 4 built-in events:
 
-**`@init`**
+#### `@init`
 
@@ -206,3 +299,3 @@ It will be fired in `createStore()`. The best moment to set an initial state.
 
-**`@ready`**
+#### `@ready`
 
@@ -217,6 +310,6 @@ > Added in: v2.0.0
 
-**`@dispatch`**
+#### `@dispatch`
 
-It will be fired on every new action (on `store.dispatch()` calls and `@changed`
-event). It receives an array with the event name and the event’s data.
+It will be fired on every new action (on `dispatch()` calls and `@changed` event).
+It receives an array with the event name and the event’s data.
 Can be useful for debugging.
@@ -228,3 +321,3 @@
 
-**`@changed`**
+#### `@changed`
 
@@ -291,14 +384,4 @@ It will be fired when any event changes the state.
 
-### Unbind listener
-
-`store.on()` returns cleanup function. This function will remove the event listener.
-
-```js
-const unbind = store.on("@changed", () => { });
-
-unbind();
-```
-
 ## License
 
 [MIT](./LICENSE)

No alert changes

Improved metrics

Total package byte prevSize

13763

6.79%

Number of lines in readme file

376

28.33%

Worsened metrics

Lines of code

147

-0.68%

No dependency changes