little-state-machine - npm Package Compare versions

Comparing version 2.4.0 to 2.5.0-beta.1

dist/index.d.ts

@@ -1,24 +0,2 @@
-import * as React from 'react';
-declare let setStorageName: any;
-export declare function setStorageType(type: any): void;
-export declare function createStore(data: any): void;
-export { setStorageName };
-export declare const StateMachineContext: React.Context<{
-    store: {};
-    updateStore: () => void;
-}>;
-export declare function StateMachineProvider(props: any): JSX.Element;
-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;
-};
+import { setStorageType, createStore, StateMachineProvider, useStateMachine, StateMachineContext, setStorageName } from './stateMachine';
+export { setStorageType, createStore, StateMachineProvider, useStateMachine, StateMachineContext, setStorageName, };

dist/index.es.js

 import * as React from 'react';
 import { createContext, useState, useMemo, createElement, useContext } from 'react';
 
-// @flow
-let storageType = typeof window === 'undefined'
-    ? { getItem: () => { }, setItem: () => { }, clear: () => { } }
-    : window.sessionStorage;
-let get;
-let set;
-let getName;
-let setStorageName;
-const STATE_MACHINE_DEBUG_NAME = '__STATE_MACHINE_DEBUG__';
-function setStorageType(type) {
-    storageType = type;
-}
-function storeFactory() {
-    let storeName = '__LITTLE_STATE_MACHINE__';
+const STORE_DEFAULT_NAME = '__STATE_MACHINE__';
+const STATE_MACHINE_DEBUG_NAME = '___STATE_MACHINE_DEBUG__';
+
+function storeFactory(storageType) {
+    let storeName = STORE_DEFAULT_NAME;
     const sessionStorageData = storageType.getItem(storeName);
@@ -37,12 +28,60 @@ let store = sessionStorageData ? JSON.parse(sessionStorageData) : {};
 }
+
+function setUpDevTools(isDevMode, storageType, getName, getStore) {
+    if (typeof window === 'undefined' || !isDevMode)
+        return;
+    window['STATE_MACHINE_DEBUG'] = (value) => {
+        storageType.setItem(STATE_MACHINE_DEBUG_NAME, value);
+    };
+    window['STATE_MACHINE_RESET'] = () => {
+        storageType.clear();
+    };
+    window['STATE_MACHINE_GET_STORE'] = () => {
+        storageType.getItem(getName());
+    };
+    window['STATE_MACHINE_SAVE_TO'] = (name) => {
+        storageType.setItem(name, getStore());
+    };
+    window['STATE_MACHINE_LOAD'] = ({ storeName, data, }) => {
+        storageType.setItem(getName(), data || storageType.getItem(storeName));
+    };
+}
+
+const transform = require('lodash.transform');
+const isEqual = require('lodash.isequal');
+const isObject = require('lodash.isobject');
+function difference(object, base) {
+    function changes(object, base) {
+        return transform(object, function (result, value, key) {
+            if (!isEqual(value, base[key])) {
+                result[key] =
+                    isObject(value) && isObject(base[key])
+                        ? changes(value, base[key])
+                        : value;
+            }
+        });
+    }
+    return changes(object, base);
+}
+
+let storageType = typeof window === 'undefined'
+    ? { getItem: () => { }, setItem: () => { }, clear: () => { } }
+    : window.sessionStorage;
+let getStore;
+let setStore;
+let getName;
+let setStorageName;
+const isDevMode = process.env.NODE_ENV !== 'production';
+const setStorageType = type => (storageType = type);
 function createStore(data) {
-    const factoryResult = storeFactory();
-    setStorageName = factoryResult.setName;
-    getName = factoryResult.getName;
-    get = factoryResult.get;
-    set = factoryResult.set;
-    const result = get();
+    const methods = storeFactory(storageType);
+    setStorageName = methods.setName;
+    getName = methods.getName;
+    getStore = methods.get;
+    setStore = methods.set;
+    const result = getStore();
+    setUpDevTools(isDevMode, storageType, getName, getStore);
     if (result && Object.keys(result).length)
         return;
-    set(data);
+    setStore(data);
 }
@@ -54,53 +93,35 @@ const StateMachineContext = createContext({
 function StateMachineProvider(props) {
-    const [globalState, updateStore] = useState(get());
-    const value = useMemo(() => {
-        return {
-            store: globalState,
-            updateStore,
-        };
-    }, [globalState]);
+    const [globalState, updateStore] = useState(getStore());
+    const value = useMemo(() => ({
+        store: globalState,
+        updateStore,
+    }), [globalState]);
     return createElement(StateMachineContext.Provider, Object.assign({ value: value }, props));
 }
-const actionTemplate = ({ options, callback, key, updateStore }) => (payload) => {
-    let debug;
-    let copy;
-    if (process.env.NODE_ENV !== 'production') {
+const actionTemplate = ({ options, callback, key, updateStore, }) => (payload) => {
+    let isDebugOn;
+    let storeCopy;
+    if (isDevMode) {
         const cloneDeep = require('lodash.clonedeep');
-        copy = cloneDeep(get());
-        debug = storageType.getItem(STATE_MACHINE_DEBUG_NAME) === 'true';
-        if (debug) {
-            console.log('┌───────────────────────────────────────');
+        storeCopy = cloneDeep(getStore());
+        isDebugOn = storageType.getItem(STATE_MACHINE_DEBUG_NAME) === 'true';
+        if (isDebugOn) {
+            console.log('┌───────────────────────────────────────>');
             console.log(`├─%c${key ? options.debugName[key] : options.debugName}`, 'color: #bada55');
-            console.log('├─before:', copy);
+            console.log('├─before:', storeCopy);
         }
     }
-    set(callback && callback(get(), payload));
-    storageType.setItem(getName(), JSON.stringify(get()));
+    setStore(callback && callback(getStore(), payload));
+    storageType.setItem(getName(), JSON.stringify(getStore()));
     if (options.shouldReRenderApp !== false) {
-        updateStore(get());
+        updateStore(getStore());
     }
-    if (process.env.NODE_ENV !== 'production') {
-        if (debug) {
-            const transform = require('lodash.transform');
-            const isEqual = require('lodash.isequal');
-            const isObject = require('lodash.isobject');
+    if (isDevMode) {
+        if (isDebugOn) {
             const isEmpty = require('lodash.isempty');
-            const diff = difference(get(), copy);
+            const diff = difference(getStore(), storeCopy);
             const noChange = isEmpty(diff);
-            console.log(noChange ? '└─after' : '├─after:', get());
-            function difference(object, base) {
-                function changes(object, base) {
-                    return transform(object, function (result, value, key) {
-                        if (!isEqual(value, base[key])) {
-                            result[key] =
-                                isObject(value) && isObject(base[key])
-                                    ? changes(value, base[key])
-                                    : value;
-                        }
-                    });
-                }
-                return changes(object, base);
-            }
+            console.log(noChange ? '└─after' : '├─after:', getStore());
             if (!noChange) {
-                console.log('└─diff:', difference(copy, get()), ' → ', difference(get(), copy));
+                console.log('└─diff:', difference(storeCopy, getStore()), ' → ', difference(getStore(), storeCopy));
             }
@@ -110,3 +131,3 @@ }
 };
-function useStateMachine(callbacks, options = {
+function useStateMachine(updateStoreFunction, options = {
     debugName: '',
@@ -116,20 +137,6 @@ shouldReRenderApp: true,
     const { store: globalState, updateStore } = useContext(StateMachineContext);
-    if (typeof window !== 'undefined') {
-        // @ts-ignore
-        window.LITTLE_STATE_MACHINE_DEBUG = (value) => {
-            storageType.setItem(STATE_MACHINE_DEBUG_NAME, value);
-        };
-        // @ts-ignore
-        window.LITTLE_STATE_MACHINE_RESET = () => {
-            storageType.clear();
-        };
-        // @ts-ignore
-        window.LITTLE_STATE_MACHINE_GET = () => {
-            storageType.getItem(getName());
-        };
-    }
-    if (callbacks && Object.keys(callbacks).length) {
+    if (updateStoreFunction && Object.keys(updateStoreFunction).length) {
         return {
-            actions: callbacks
-                ? Object.entries(callbacks).reduce((previous, [key, callback]) => {
+            actions: updateStoreFunction
+                ? Object.entries(updateStoreFunction).reduce((previous, [key, callback]) => {
                     previous[key] = actionTemplate({
@@ -139,3 +146,2 @@ options,
                         updateStore,
-                        globalState,
                         key,
@@ -152,8 +158,7 @@ });
         actions: {},
-        action: callbacks
+        action: updateStoreFunction
             ? actionTemplate({
                 options,
-                callback: callbacks,
+                callback: updateStoreFunction,
                 updateStore,
-                globalState,
             })
@@ -160,0 +165,0 @@ : () => { },

dist/index.js

@@ -7,16 +7,7 @@ 'use strict';
 
-// @flow
-let storageType = typeof window === 'undefined'
-    ? { getItem: () => { }, setItem: () => { }, clear: () => { } }
-    : window.sessionStorage;
-let get;
-let set;
-let getName;
+const STORE_DEFAULT_NAME = '__STATE_MACHINE__';
+const STATE_MACHINE_DEBUG_NAME = '___STATE_MACHINE_DEBUG__';
 
-const STATE_MACHINE_DEBUG_NAME = '__STATE_MACHINE_DEBUG__';
-function setStorageType(type) {
-    storageType = type;
-}
-function storeFactory() {
-    let storeName = '__LITTLE_STATE_MACHINE__';
+function storeFactory(storageType) {
+    let storeName = STORE_DEFAULT_NAME;
     const sessionStorageData = storageType.getItem(storeName);
@@ -41,12 +32,60 @@ let store = sessionStorageData ? JSON.parse(sessionStorageData) : {};
 }
+
+function setUpDevTools(isDevMode, storageType, getName, getStore) {
+    if (typeof window === 'undefined' || !isDevMode)
+        return;
+    window['STATE_MACHINE_DEBUG'] = (value) => {
+        storageType.setItem(STATE_MACHINE_DEBUG_NAME, value);
+    };
+    window['STATE_MACHINE_RESET'] = () => {
+        storageType.clear();
+    };
+    window['STATE_MACHINE_GET_STORE'] = () => {
+        storageType.getItem(getName());
+    };
+    window['STATE_MACHINE_SAVE_TO'] = (name) => {
+        storageType.setItem(name, getStore());
+    };
+    window['STATE_MACHINE_LOAD'] = ({ storeName, data, }) => {
+        storageType.setItem(getName(), data || storageType.getItem(storeName));
+    };
+}
+
+const transform = require('lodash.transform');
+const isEqual = require('lodash.isequal');
+const isObject = require('lodash.isobject');
+function difference(object, base) {
+    function changes(object, base) {
+        return transform(object, function (result, value, key) {
+            if (!isEqual(value, base[key])) {
+                result[key] =
+                    isObject(value) && isObject(base[key])
+                        ? changes(value, base[key])
+                        : value;
+            }
+        });
+    }
+    return changes(object, base);
+}
+
+let storageType = typeof window === 'undefined'
+    ? { getItem: () => { }, setItem: () => { }, clear: () => { } }
+    : window.sessionStorage;
+let getStore;
+let setStore;
+let getName;
+
+const isDevMode = process.env.NODE_ENV !== 'production';
+const setStorageType = type => (storageType = type);
 function createStore(data) {
-    const factoryResult = storeFactory();
-    exports.setStorageName = factoryResult.setName;
-    getName = factoryResult.getName;
-    get = factoryResult.get;
-    set = factoryResult.set;
-    const result = get();
+    const methods = storeFactory(storageType);
+    exports.setStorageName = methods.setName;
+    getName = methods.getName;
+    getStore = methods.get;
+    setStore = methods.set;
+    const result = getStore();
+    setUpDevTools(isDevMode, storageType, getName, getStore);
     if (result && Object.keys(result).length)
         return;
-    set(data);
+    setStore(data);
 }
@@ -58,53 +97,35 @@ const StateMachineContext = React.createContext({
 function StateMachineProvider(props) {
-    const [globalState, updateStore] = React.useState(get());
-    const value = React.useMemo(() => {
-        return {
-            store: globalState,
-            updateStore,
-        };
-    }, [globalState]);
+    const [globalState, updateStore] = React.useState(getStore());
+    const value = React.useMemo(() => ({
+        store: globalState,
+        updateStore,
+    }), [globalState]);
     return React.createElement(StateMachineContext.Provider, Object.assign({ value: value }, props));
 }
-const actionTemplate = ({ options, callback, key, updateStore }) => (payload) => {
-    let debug;
-    let copy;
-    if (process.env.NODE_ENV !== 'production') {
+const actionTemplate = ({ options, callback, key, updateStore, }) => (payload) => {
+    let isDebugOn;
+    let storeCopy;
+    if (isDevMode) {
         const cloneDeep = require('lodash.clonedeep');
-        copy = cloneDeep(get());
-        debug = storageType.getItem(STATE_MACHINE_DEBUG_NAME) === 'true';
-        if (debug) {
-            console.log('┌───────────────────────────────────────');
+        storeCopy = cloneDeep(getStore());
+        isDebugOn = storageType.getItem(STATE_MACHINE_DEBUG_NAME) === 'true';
+        if (isDebugOn) {
+            console.log('┌───────────────────────────────────────>');
             console.log(`├─%c${key ? options.debugName[key] : options.debugName}`, 'color: #bada55');
-            console.log('├─before:', copy);
+            console.log('├─before:', storeCopy);
         }
     }
-    set(callback && callback(get(), payload));
-    storageType.setItem(getName(), JSON.stringify(get()));
+    setStore(callback && callback(getStore(), payload));
+    storageType.setItem(getName(), JSON.stringify(getStore()));
     if (options.shouldReRenderApp !== false) {
-        updateStore(get());
+        updateStore(getStore());
     }
-    if (process.env.NODE_ENV !== 'production') {
-        if (debug) {
-            const transform = require('lodash.transform');
-            const isEqual = require('lodash.isequal');
-            const isObject = require('lodash.isobject');
+    if (isDevMode) {
+        if (isDebugOn) {
             const isEmpty = require('lodash.isempty');
-            const diff = difference(get(), copy);
+            const diff = difference(getStore(), storeCopy);
             const noChange = isEmpty(diff);
-            console.log(noChange ? '└─after' : '├─after:', get());
-            function difference(object, base) {
-                function changes(object, base) {
-                    return transform(object, function (result, value, key) {
-                        if (!isEqual(value, base[key])) {
-                            result[key] =
-                                isObject(value) && isObject(base[key])
-                                    ? changes(value, base[key])
-                                    : value;
-                        }
-                    });
-                }
-                return changes(object, base);
-            }
+            console.log(noChange ? '└─after' : '├─after:', getStore());
             if (!noChange) {
-                console.log('└─diff:', difference(copy, get()), ' → ', difference(get(), copy));
+                console.log('└─diff:', difference(storeCopy, getStore()), ' → ', difference(getStore(), storeCopy));
             }
@@ -114,3 +135,3 @@ }
 };
-function useStateMachine(callbacks, options = {
+function useStateMachine(updateStoreFunction, options = {
     debugName: '',
@@ -120,20 +141,6 @@ shouldReRenderApp: true,
     const { store: globalState, updateStore } = React.useContext(StateMachineContext);
-    if (typeof window !== 'undefined') {
-        // @ts-ignore
-        window.LITTLE_STATE_MACHINE_DEBUG = (value) => {
-            storageType.setItem(STATE_MACHINE_DEBUG_NAME, value);
-        };
-        // @ts-ignore
-        window.LITTLE_STATE_MACHINE_RESET = () => {
-            storageType.clear();
-        };
-        // @ts-ignore
-        window.LITTLE_STATE_MACHINE_GET = () => {
-            storageType.getItem(getName());
-        };
-    }
-    if (callbacks && Object.keys(callbacks).length) {
+    if (updateStoreFunction && Object.keys(updateStoreFunction).length) {
         return {
-            actions: callbacks
-                ? Object.entries(callbacks).reduce((previous, [key, callback]) => {
+            actions: updateStoreFunction
+                ? Object.entries(updateStoreFunction).reduce((previous, [key, callback]) => {
                     previous[key] = actionTemplate({
@@ -143,3 +150,2 @@ options,
                         updateStore,
-                        globalState,
                         key,
@@ -156,8 +162,7 @@ });
         actions: {},
-        action: callbacks
+        action: updateStoreFunction
             ? actionTemplate({
                 options,
-                callback: callbacks,
+                callback: updateStoreFunction,
                 updateStore,
-                globalState,
             })
@@ -164,0 +169,0 @@ : () => { },

package.json

 {
   "name": "little-state-machine",
-  "version": "2.4.0",
+  "version": "2.5.0-beta.1",
   "main": "dist/index.js",
@@ -5,0 +5,0 @@ "module": "dist/index.es.js",

README.md

@@ -5,3 +5,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" />
 
-> Flux state management should be easy
+> Flux state management made super simple
 
@@ -48,2 +48,4 @@ [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Little-State-Machine&url=https://github.com/bluebill1049/little-state-machine)&nbsp; [![npm downloads](https://img.shields.io/npm/dm/little-state-machine.svg?style=flat-square)](https://www.npmjs.com/package/little-state-machine)
 
+## DevTools
+
 ##### 🔗 `window.STATE_MACHINE_DEBUG`
@@ -56,3 +58,3 @@ This will toggle the console output in dev tool.
 
-<img width="500" src="https://github.com/bluebill1049/little-state-machine/blob/master/docs/devtool.png" />
+<img width="700" src="https://github.com/bluebill1049/little-state-machine/blob/master/docs/devtool.png" />
 
@@ -63,2 +65,20 @@ ##### 🔗 `window.STATE_MACHINE_RESET`
 `window.LITTLE_STATE_MACHINE_RESET()` to reset the localStorage or sessionStorage
+
+##### 🔗 `window.STATE_MACHINE_GET_STORE`
+This will return the entire store.
+
+`window.STATE_MACHINE_GET_STORE()`
+
+##### 🔗 `window.STATE_MACHINE_SAVE_TO`
+Save into another session/local storage
+
+`window.STATE_MACHINE_GET_STORE(name: string)`
+
+##### 🔗 `window.STATE_MACHINE_LOAD`
+Load saved state into your app, you can either supply a session/local storage name, or supply a string of data.
+
+`window.STATE_MACHINE_GET_STORE({ storeName: string, data: Object })`
+
+storeName: external session/local storage name
+data: string of data
  
@@ -69,3 +89,3 @@ ## Example
 ```jsx
-import React, { useState } from 'react'
+import React from 'react'
 import yourDetail from './yourDetail'
@@ -80,3 +100,3 @@ import YourComponent from './yourComponent'
 
-const App = ({children}) => {
+export default () => {
   return (
@@ -102,5 +122,3 @@ <StateMachineProvider>
 
-  return <div onClick={() => action('bill')}>
-    {name}
-  </div>
+  return <div onClick={() => action('bill')}>{name}</div>
 }
@@ -121,5 +139,7 @@ ```
     ...state,
-    yourDetail: payload,
+    yourDetail: {
+      name: payload
+    },
   }
 }
 ```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

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

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

20130

increased by10.61%

Number of package files

13

increased by85.71%

Lines of code

359

increased by4.97%

Number of lines in readme file

138

increased by16.95%

Number of low supply chain risk alerts

3

decreased by-40%

Worsened metrics

Number of low quality alerts

2

increased by100%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes