little-state-machine - npm Package Compare versions

Comparing version 2.1.1-beta.1 to 2.2.1

dist/index.d.ts

 import * as React from 'react';
-import useStateMachine from './useStateMachine';
-export declare let storeName: string;
-export declare function setStoreName(name: any): void;
-export declare let store: any;
-export declare function updateGlobalStore(value: any): void;
+export declare function setStorageType(type: any): void;
+declare const setStorageName: (name: any) => void;
+export { setStorageName };
 export declare function createStore(data: any): void;
 export declare const StateMachineContext: React.Context<{
-    store: any;
+    store: {};
     updateStore: () => void;
 }>;
 export declare function StateMachineProvider(props: any): JSX.Element;
-export { useStateMachine };
+export declare function useStateMachine(callbacks?: {
+    [key: string]: (Object: any, any: any) => Object;
+} | ((Object: any, any: any) => Object), options?: {
+    debugName: string | {
+        [key: string]: string;
+    };
+    shouldReRenderApp?: boolean;
+}): {
+    action: Function;
+    actions: {
+        [key: string]: Function;
+    };
+    state: Object;
+};

dist/index.es.js

 import * as React from 'react';
-import { useContext, createContext, useState, useMemo, createElement } from 'react';
+import { createContext, useState, useMemo, createElement, useContext } from 'react';
 
-var actionTemplate = ({ options, callback, key, updateStore, globalState }) => (payload) => {
-    // @ts-ignore
-    const debug = sessionStorage.getItem('stateMachineDebug') === 'true';
+// @flow
+let storageType = window.sessionStorage;
+function setStorageType(type) {
+    storageType = type;
+}
+function storeFactory() {
+    let storeName = 'SESSION_LITTLE_STATE_MACHINE';
+    const sessionStorageData = storageType.getItem(storeName);
+    let store = sessionStorageData ? JSON.parse(sessionStorageData) : {};
+    const getName = () => storeName;
+    const setName = name => {
+        const data = storageType.getItem(name);
+        storeName = name;
+        store = data ? JSON.parse(data) : {};
+    };
+    const set = value => {
+        store = value;
+    };
+    const get = () => store;
+    return {
+        set,
+        get,
+        getName,
+        setName,
+    };
+}
+const { setName: setStorageName, getName, get, set } = storeFactory();
+function createStore(data) {
+    if (Object.keys(get()).length)
+        return;
+    set(data);
+}
+const StateMachineContext = createContext({
+    store: {},
+    updateStore: () => { },
+});
+function StateMachineProvider(props) {
+    const [globalState, updateStore] = useState(get());
+    const value = useMemo(() => {
+        return {
+            store: globalState,
+            updateStore,
+        };
+    }, [globalState]);
+    return createElement(StateMachineContext.Provider, Object.assign({ value: value }, props));
+}
+const actionTemplate = ({ options, callback, key, updateStore }) => (payload) => {
+    const debug = storageType.getItem('__STATE_MACHINE_DEBUG') === 'true';
     if (debug) {
         console.log(`%c${key ? options.debugName[key] : options.debugName}`, 'color: #bada55');
-        console.log('├─before:', store);
+        console.log('├─before:', get());
     }
-    updateGlobalStore(callback && callback(store, payload));
-    sessionStorage.setItem('sessionStateMachine', JSON.stringify(store));
+    set(callback && callback(get(), payload));
+    storageType.setItem(getName(), JSON.stringify(get()));
     if (options.shouldReRenderApp !== false) {
-        updateStore(store);
+        updateStore(get());
     }
     if (debug) {
-        console.log('└─after:', store);
+        console.log('└─after:', get());
     }
 };
-
 function useStateMachine(callbacks, options = {
@@ -26,7 +70,6 @@ debugName: '',
     const { store: globalState, updateStore } = useContext(StateMachineContext);
-    // @ts-ignore
     if (typeof window !== 'undefined') {
         // @ts-ignore
-        window.STATE_MACHINE_DEBUG = (value) => {
-            sessionStorage.setItem(storeName, value);
+        window.LITTLE_STATE_MACHINE_DEBUG = (value) => {
+            storageType.setItem(getName(), value);
         };
@@ -53,32 +96,2 @@ }
 
-// @flow
-let storeName = 'sessionStateMachine';
-function setStoreName(name) {
-    storeName = name;
-}
-const sessionStorageData = sessionStorage.getItem(storeName);
-let store = sessionStorageData ? JSON.parse(sessionStorageData) : {};
-function updateGlobalStore(value) {
-    store = value;
-}
-function createStore(data) {
-    if (!sessionStorageData) {
-        store = data;
-    }
-}
-const StateMachineContext = createContext({
-    store,
-    updateStore: () => { },
-});
-function StateMachineProvider(props) {
-    const [globalState, updateStore] = useState(store);
-    const value = useMemo(() => {
-        return {
-            store: globalState,
-            updateStore,
-        };
-    }, [globalState]);
-    return createElement(StateMachineContext.Provider, Object.assign({ value: value }, props));
-}
-
-export { StateMachineContext, StateMachineProvider, createStore, setStoreName, store, storeName, updateGlobalStore, useStateMachine };
+export { StateMachineContext, StateMachineProvider, createStore, setStorageName, setStorageType, useStateMachine };

dist/index.js

@@ -7,19 +7,63 @@ 'use strict';
 
-var actionTemplate = ({ options, callback, key, updateStore, globalState }) => (payload) => {
-    // @ts-ignore
-    const debug = sessionStorage.getItem('stateMachineDebug') === 'true';
+// @flow
+let storageType = window.sessionStorage;
+function setStorageType(type) {
+    storageType = type;
+}
+function storeFactory() {
+    let storeName = 'SESSION_LITTLE_STATE_MACHINE';
+    const sessionStorageData = storageType.getItem(storeName);
+    let store = sessionStorageData ? JSON.parse(sessionStorageData) : {};
+    const getName = () => storeName;
+    const setName = name => {
+        const data = storageType.getItem(name);
+        storeName = name;
+        store = data ? JSON.parse(data) : {};
+    };
+    const set = value => {
+        store = value;
+    };
+    const get = () => store;
+    return {
+        set,
+        get,
+        getName,
+        setName,
+    };
+}
+const { setName: setStorageName, getName, get, set } = storeFactory();
+function createStore(data) {
+    if (Object.keys(get()).length)
+        return;
+    set(data);
+}
+const StateMachineContext = React.createContext({
+    store: {},
+    updateStore: () => { },
+});
+function StateMachineProvider(props) {
+    const [globalState, updateStore] = React.useState(get());
+    const value = React.useMemo(() => {
+        return {
+            store: globalState,
+            updateStore,
+        };
+    }, [globalState]);
+    return React.createElement(StateMachineContext.Provider, Object.assign({ value: value }, props));
+}
+const actionTemplate = ({ options, callback, key, updateStore }) => (payload) => {
+    const debug = storageType.getItem('__STATE_MACHINE_DEBUG') === 'true';
     if (debug) {
         console.log(`%c${key ? options.debugName[key] : options.debugName}`, 'color: #bada55');
-        console.log('├─before:', exports.store);
+        console.log('├─before:', get());
     }
-    updateGlobalStore(callback && callback(exports.store, payload));
-    sessionStorage.setItem('sessionStateMachine', JSON.stringify(exports.store));
+    set(callback && callback(get(), payload));
+    storageType.setItem(getName(), JSON.stringify(get()));
     if (options.shouldReRenderApp !== false) {
-        updateStore(exports.store);
+        updateStore(get());
     }
     if (debug) {
-        console.log('└─after:', exports.store);
+        console.log('└─after:', get());
     }
 };
-
 function useStateMachine(callbacks, options = {
@@ -30,7 +74,6 @@ debugName: '',
     const { store: globalState, updateStore } = React.useContext(StateMachineContext);
-    // @ts-ignore
     if (typeof window !== 'undefined') {
         // @ts-ignore
-        window.STATE_MACHINE_DEBUG = (value) => {
-            sessionStorage.setItem(exports.storeName, value);
+        window.LITTLE_STATE_MACHINE_DEBUG = (value) => {
+            storageType.setItem(getName(), value);
         };
@@ -57,37 +100,7 @@ }
 
-// @flow
-exports.storeName = 'sessionStateMachine';
-function setStoreName(name) {
-    exports.storeName = name;
-}
-const sessionStorageData = sessionStorage.getItem(exports.storeName);
-exports.store = sessionStorageData ? JSON.parse(sessionStorageData) : {};
-function updateGlobalStore(value) {
-    exports.store = value;
-}
-function createStore(data) {
-    if (!sessionStorageData) {
-        exports.store = data;
-    }
-}
-const StateMachineContext = React.createContext({
-    store: exports.store,
-    updateStore: () => { },
-});
-function StateMachineProvider(props) {
-    const [globalState, updateStore] = React.useState(exports.store);
-    const value = React.useMemo(() => {
-        return {
-            store: globalState,
-            updateStore,
-        };
-    }, [globalState]);
-    return React.createElement(StateMachineContext.Provider, Object.assign({ value: value }, props));
-}
-
 exports.StateMachineContext = StateMachineContext;
 exports.StateMachineProvider = StateMachineProvider;
 exports.createStore = createStore;
-exports.setStoreName = setStoreName;
-exports.updateGlobalStore = updateGlobalStore;
+exports.setStorageName = setStorageName;
+exports.setStorageType = setStorageType;
 exports.useStateMachine = useStateMachine;

package.json

 {
   "name": "little-state-machine",
-  "version": "2.1.1-beta.1",
+  "version": "2.2.1",
   "main": "dist/index.js",
@@ -15,3 +15,3 @@ "module": "dist/index.es.js",
     "testw": "yarn test -- --watchAll",
-    "prepublish": "yarn test && yarn run clean && yarn build"
+    "prepublish": "yarn run clean && yarn build"
   },
@@ -18,0 +18,0 @@ "keywords": [

README.md

@@ -12,3 +12,3 @@ <div align="center"><img src="https://github.com/bluebill1049/little-state-machine/blob/master/docs/logo.png" alt="React forme Logo - React hook form valiation" width="180px" />
 - Follow flux application architecture
-- Tiny, 0 dependency and simple
+- Tiny with 0 dependency and simple
 - Persist your state by default
@@ -43,7 +43,7 @@ - Build with React Hook
 ##### 🔗 `window.STATE_MACHINE_DEBUG`
-This will turn on the dev tool at console.
+This will toggle the console output in dev tool.
 
-`window.STATE_MACHINE_DEBUG(true)` to turn debug on in console
+`window.LITTLE_STATE_MACHINE_DEBUG(true)` to turn debug on in console
 
-`window.STATE_MACHINE_DEBUG(false)` to turn off debug on in console
+`window.LITTLE_STATE_MACHINE_DEBUG(false)` to turn off debug on in console
 
@@ -53,9 +53,6 @@ <img width="500" src="https://github.com/bluebill1049/little-state-machine/blob/master/docs/devtool.png" />
 ##### 🔗 `StateMachineProvider`
-This is a Component to wrapper around your entire app in order to create context.
+This is a Provider Component to wrapper around your entire app in order to create context.
 
 ##### 🔗 `createStore`
 Function to initial the global store, call at app root where `StateMachineProvider` is.
-
-##### 🔗 `store`
-The global store. 
  
@@ -67,9 +64,9 @@ ## Example
 import React, { useState } from 'react'
-import state from './state'
+import yourDetail from './yourDetail'
 import YourComponent from './yourComponent'
-import { StateMachineProvider, store, createStore } from 'little-state-machine'
+import { StateMachineProvider, createStore } from 'little-state-machine'
 
 // create your store
 createStore({
-  state,
+  yourDetail,
 });
@@ -104,3 +101,3 @@
 
-state.js
+yourDetail.js
 ```js
@@ -107,0 +104,0 @@ export default {

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

178868

4.74%

Number of package files

99

20.73%

Lines of code

257

10.3%

Number of low quality alerts

1

-50%

Worsened metrics

Number of lines in readme file

113

-2.59%

No dependency changes