little-state-machine - npm Package Compare versions

Comparing version 2.7.0-beta.11 to 2.7.0-beta.12

dist/components/DevTool.d.ts

@@ -6,4 +6,3 @@ import * as React from 'react';
 }[];
-export declare const DEV_TOOL_CONFIG = "dev_tool_config";
 declare const DevTool: React.FC;
 export default DevTool;

dist/components/DevToolStateTree.d.ts

 /// <reference types="react" />
-declare const _default: ({ isLoadPanelShow, setLoadPanel, state, setExpand, isCollapse, setClose, isClose, stateIndex, }: {
+declare const _default: ({ isLoadPanelShow, setLoadPanel, state, setExpand, isCollapse, closePanel, stateIndex, }: {
     isLoadPanelShow: boolean;
@@ -8,6 +8,6 @@ setLoadPanel: (payload: boolean) => void;
     setClose: (payload: boolean) => void;
+    closePanel: () => void;
+    stateIndex: number;
     isCollapse: boolean;
-    isClose: boolean;
-    stateIndex: number;
 }) => JSX.Element;
 export default _default;

dist/constants.d.ts

 export declare const STORE_DEFAULT_NAME = "__STATE_MACHINE__";
 export declare const STATE_MACHINE_DEBUG_NAME = "___STATE_MACHINE_DEBUG__";
+export declare const STATE_MACHINE_DEV_TOOL_CONFIG = "___STATE_MACHINE_DEV_CONFIG__";

dist/index.es.js

@@ -8,2 +8,3 @@ import * as React from 'react';
 const STATE_MACHINE_DEBUG_NAME = '___STATE_MACHINE_DEBUG__';
+const STATE_MACHINE_DEV_TOOL_CONFIG = '___STATE_MACHINE_DEV_CONFIG__';
 
@@ -199,3 +200,3 @@ function storeFactory(storageType) {
                 margin: 0,
-                padding: '10px',
+                padding: '10px 10px 9px',
                 borderBottom: '1px solid rgb(17, 50, 76)',
@@ -263,4 +264,6 @@ } },
             boxSizing: 'border-box',
-            height: '100vh',
             zIndex: 99999999,
+            overflowY: 'auto',
+            height: 'calc(100vh - 50px)',
+            overflowX: 'hidden',
         } },
@@ -295,3 +298,22 @@ createElement("ul", { style: {
 
-var DevToolStateTree = ({ isLoadPanelShow, setLoadPanel, state, setExpand, isCollapse, setClose, isClose, stateIndex, }) => {
+const buttonStyle = {
+    margin: '0 10px 0 0',
+    padding: '5px 20px',
+    display: 'inline',
+    fontSize: '12px',
+    border: 'none',
+    borderRadius: '2px',
+};
+var DevToolStateTree = ({ isLoadPanelShow, setLoadPanel, state, setExpand, isCollapse, closePanel, stateIndex, }) => {
+    const collapse = () => {
+        const expandValue = !isCollapse;
+        setExpand(expandValue);
+        const config = window.localStorage.getItem(STATE_MACHINE_DEV_TOOL_CONFIG);
+        try {
+            window.localStorage.setItem(STATE_MACHINE_DEV_TOOL_CONFIG, config
+                ? JSON.stringify(Object.assign({}, JSON.parse(config), { isCollapse: expandValue }))
+                : JSON.stringify({ isCollapse: expandValue }));
+        }
+        catch (_a) { }
+    };
     return (createElement("section", null,
@@ -306,3 +328,3 @@ isLoadPanelShow && createElement(DevToolStorage, { setLoadPanel: setLoadPanel }),
                 borderBottom: '1px solid rgb(17, 50, 76)',
-            } }, "Little State Machine"),
+            } }, "\u2646 Little State Machine"),
         createElement("section", { style: {
@@ -316,38 +338,6 @@ marginLeft: 10,
                     }
-                }, style: {
-                    margin: '0 10px 0 0',
-                    padding: '5px 20px',
-                    display: 'inline',
-                    fontSize: '12px',
-                    border: 'none',
-                    borderRadius: '2px',
-                    textTransform: 'uppercase',
-                } }, "Save"),
-            createElement("button", { style: {
-                    margin: '0 10px 0 0',
-                    padding: '5px 20px',
-                    display: 'inline',
-                    fontSize: '12px',
-                    border: 'none',
-                    borderRadius: '2px',
-                    textTransform: 'uppercase',
-                }, onClick: () => setLoadPanel(!isLoadPanelShow) }, "Load"),
-            createElement("button", { style: {
-                    margin: 0,
-                    padding: '5px 20px',
-                    display: 'inline',
-                    fontSize: '12px',
-                    border: 'none',
-                    borderRadius: '2px',
-                    textTransform: 'uppercase',
-                }, onClick: () => {
-                    const expandValue = !isCollapse;
-                    setExpand(expandValue);
-                    const config = window.localStorage.getItem(DEV_TOOL_CONFIG);
-                    try {
-                        window.localStorage.setItem(DEV_TOOL_CONFIG, config
-                            ? JSON.stringify(Object.assign({}, JSON.parse(config), { isCollapse: expandValue }))
-                            : JSON.stringify({ isCollapse: expandValue }));
-                    }
-                    catch (_a) { }
+                }, style: buttonStyle }, "Save"),
+            createElement("button", { style: buttonStyle, onClick: () => setLoadPanel(!isLoadPanelShow) }, "Load"),
+            createElement("button", { style: buttonStyle, onClick: () => {
+                    collapse();
                 } }, isCollapse ? 'Expand' : 'collapse')),
@@ -362,7 +352,14 @@ createElement("button", { style: {
                 background: 'none',
-                fontSize: 20,
+                fontSize: 26,
                 border: 0,
                 margin: 0,
-            }, onClick: () => setClose(!isClose) }, "\u00D7"),
-        createElement("section", { style: { padding: 10 } },
+            }, onClick: () => {
+                if (isLoadPanelShow) {
+                    setLoadPanel(false);
+                }
+                else {
+                    closePanel();
+                }
+            } }, "\u00D7"),
+        createElement("section", { style: { padding: '10px 0px 10px 10px' } },
             createElement(ReactJson, { src: (stateIndex === -1
@@ -373,3 +370,3 @@ ? actions[actions.length - 1]
                     overflow: 'auto',
-                    height: 'calc(100vh - 94px)',
+                    height: 'calc(100vh - 90px)',
                 } }))));
@@ -380,22 +377,35 @@ };
 const { useState } = React;
-let actions = [];
 let previousStateIndex = -1;
-let previousIsClose = false;
 let previousIsLoadPanelShow = false;
-const DEV_TOOL_CONFIG = 'dev_tool_config';
+let actions = [];
 const config = typeof window !== 'undefined'
     ? // @ts-ignore
-        JSON.parse(window.localStorage.getItem(DEV_TOOL_CONFIG) || '{}')
-    : {};
-let previousIsCollpase = config.isCollapse;
+        JSON.parse(window.localStorage.getItem(STATE_MACHINE_DEV_TOOL_CONFIG) || '{}')
+    : {
+        isCollapse: false,
+        isClose: false,
+    };
+let previousIsCollapse = config.isCollapse;
+let previousIsClose = config.isClose;
 const DevTool = () => {
     const { state } = useStateMachine();
-    const [isClose, setClose] = useState(false);
+    const [isClose, setClose] = useState(config.isClose);
     const [isLoadPanelShow, setLoadPanel] = useState(false);
     const [isCollapse, setExpand] = useState(config.isCollapse);
     const [stateIndex, setStateIndex] = useState(-1);
+    const closePanel = () => {
+        const closeValue = !isClose;
+        setClose(closeValue);
+        const config = window.localStorage.getItem(STATE_MACHINE_DEV_TOOL_CONFIG);
+        try {
+            window.localStorage.setItem(STATE_MACHINE_DEV_TOOL_CONFIG, config
+                ? JSON.stringify(Object.assign({}, JSON.parse(config), { isClose: closeValue }))
+                : JSON.stringify({ isClose: closeValue }));
+        }
+        catch (_a) { }
+    };
     if (previousStateIndex === stateIndex &&
         previousIsClose === isClose &&
         previousIsLoadPanelShow === isLoadPanelShow &&
-        previousIsCollpase === isCollapse) {
+        previousIsCollapse === isCollapse) {
         actions.push({
@@ -409,10 +419,11 @@ name: (middleWare() || {}).debugName,
     previousIsLoadPanelShow = isLoadPanelShow;
-    previousIsCollpase = isCollapse;
+    previousIsCollapse = isCollapse;
     return (createElement("div", { style: {
             fontFamily: `BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif`,
         } },
-        createElement(Animate, { play: !isClose, end: { opacity: 0 }, delay: 0.4, render: ({ style }) => (createElement("button", { style: Object.assign({ position: 'fixed', right: 0, top: '-1px', width: 200, margin: 0, padding: 10, background: '#0a1c2c', color: 'white', zIndex: 100000000, fontSize: 12 }, style), onClick: () => setClose(!isClose) }, "Little State Machine")) }),
+        createElement(Animate, { play: !isClose, end: { transform: 'translateY(-50px)' }, delay: 0.5, render: ({ style }) => (createElement("button", { style: Object.assign({ position: 'fixed', right: 0, top: '-1px', width: 200, margin: 0, padding: 10, background: '#0a1c2c', color: 'white', zIndex: 100000000, fontSize: 12, lineHeight: '25px' }, style), onClick: () => closePanel() }, "\u2646 LITTLE STATE MACHINE")) }),
         createElement(Animate, { play: isClose, end: { transform: 'translateX(800px)' }, easeType: "ease-out", duration: 0.5, render: ({ style }) => (createElement("div", { style: Object.assign({ zIndex: 100000000, position: 'fixed', right: 0, top: 0, width: 600, height: '100vh', background: '#0a1c2c', display: 'grid', gridTemplateColumns: '150px auto', boxShadow: '0 0 8px 2px #080808' }, style) },
                 createElement(DevToolActionPanel, { stateIndex: stateIndex, setStateIndex: setStateIndex }),
                 createElement(DevToolStateTree, Object.assign({}, {
+                    closePanel,
                     isLoadPanelShow,
@@ -419,0 +430,0 @@ setLoadPanel,

dist/index.js

@@ -13,2 +13,3 @@ 'use strict';
 const STATE_MACHINE_DEBUG_NAME = '___STATE_MACHINE_DEBUG__';
+const STATE_MACHINE_DEV_TOOL_CONFIG = '___STATE_MACHINE_DEV_CONFIG__';
 
@@ -204,3 +205,3 @@ function storeFactory(storageType) {
                 margin: 0,
-                padding: '10px',
+                padding: '10px 10px 9px',
                 borderBottom: '1px solid rgb(17, 50, 76)',
@@ -268,4 +269,6 @@ } },
             boxSizing: 'border-box',
-            height: '100vh',
             zIndex: 99999999,
+            overflowY: 'auto',
+            height: 'calc(100vh - 50px)',
+            overflowX: 'hidden',
         } },
@@ -300,3 +303,22 @@ React.createElement("ul", { style: {
 
-var DevToolStateTree = ({ isLoadPanelShow, setLoadPanel, state, setExpand, isCollapse, setClose, isClose, stateIndex, }) => {
+const buttonStyle = {
+    margin: '0 10px 0 0',
+    padding: '5px 20px',
+    display: 'inline',
+    fontSize: '12px',
+    border: 'none',
+    borderRadius: '2px',
+};
+var DevToolStateTree = ({ isLoadPanelShow, setLoadPanel, state, setExpand, isCollapse, closePanel, stateIndex, }) => {
+    const collapse = () => {
+        const expandValue = !isCollapse;
+        setExpand(expandValue);
+        const config = window.localStorage.getItem(STATE_MACHINE_DEV_TOOL_CONFIG);
+        try {
+            window.localStorage.setItem(STATE_MACHINE_DEV_TOOL_CONFIG, config
+                ? JSON.stringify(Object.assign({}, JSON.parse(config), { isCollapse: expandValue }))
+                : JSON.stringify({ isCollapse: expandValue }));
+        }
+        catch (_a) { }
+    };
     return (React.createElement("section", null,
@@ -311,3 +333,3 @@ isLoadPanelShow && React.createElement(DevToolStorage, { setLoadPanel: setLoadPanel }),
                 borderBottom: '1px solid rgb(17, 50, 76)',
-            } }, "Little State Machine"),
+            } }, "\u2646 Little State Machine"),
         React.createElement("section", { style: {
@@ -321,38 +343,6 @@ marginLeft: 10,
                     }
-                }, style: {
-                    margin: '0 10px 0 0',
-                    padding: '5px 20px',
-                    display: 'inline',
-                    fontSize: '12px',
-                    border: 'none',
-                    borderRadius: '2px',
-                    textTransform: 'uppercase',
-                } }, "Save"),
-            React.createElement("button", { style: {
-                    margin: '0 10px 0 0',
-                    padding: '5px 20px',
-                    display: 'inline',
-                    fontSize: '12px',
-                    border: 'none',
-                    borderRadius: '2px',
-                    textTransform: 'uppercase',
-                }, onClick: () => setLoadPanel(!isLoadPanelShow) }, "Load"),
-            React.createElement("button", { style: {
-                    margin: 0,
-                    padding: '5px 20px',
-                    display: 'inline',
-                    fontSize: '12px',
-                    border: 'none',
-                    borderRadius: '2px',
-                    textTransform: 'uppercase',
-                }, onClick: () => {
-                    const expandValue = !isCollapse;
-                    setExpand(expandValue);
-                    const config = window.localStorage.getItem(DEV_TOOL_CONFIG);
-                    try {
-                        window.localStorage.setItem(DEV_TOOL_CONFIG, config
-                            ? JSON.stringify(Object.assign({}, JSON.parse(config), { isCollapse: expandValue }))
-                            : JSON.stringify({ isCollapse: expandValue }));
-                    }
-                    catch (_a) { }
+                }, style: buttonStyle }, "Save"),
+            React.createElement("button", { style: buttonStyle, onClick: () => setLoadPanel(!isLoadPanelShow) }, "Load"),
+            React.createElement("button", { style: buttonStyle, onClick: () => {
+                    collapse();
                 } }, isCollapse ? 'Expand' : 'collapse')),
@@ -367,7 +357,14 @@ React.createElement("button", { style: {
                 background: 'none',
-                fontSize: 20,
+                fontSize: 26,
                 border: 0,
                 margin: 0,
-            }, onClick: () => setClose(!isClose) }, "\u00D7"),
-        React.createElement("section", { style: { padding: 10 } },
+            }, onClick: () => {
+                if (isLoadPanelShow) {
+                    setLoadPanel(false);
+                }
+                else {
+                    closePanel();
+                }
+            } }, "\u00D7"),
+        React.createElement("section", { style: { padding: '10px 0px 10px 10px' } },
             React.createElement(ReactJson, { src: (stateIndex === -1
@@ -378,3 +375,3 @@ ? actions[actions.length - 1]
                     overflow: 'auto',
-                    height: 'calc(100vh - 94px)',
+                    height: 'calc(100vh - 90px)',
                 } }))));
@@ -385,22 +382,35 @@ };
 const { useState } = React;
-let actions = [];
 let previousStateIndex = -1;
-let previousIsClose = false;
 let previousIsLoadPanelShow = false;
-const DEV_TOOL_CONFIG = 'dev_tool_config';
+let actions = [];
 const config = typeof window !== 'undefined'
     ? // @ts-ignore
-        JSON.parse(window.localStorage.getItem(DEV_TOOL_CONFIG) || '{}')
-    : {};
-let previousIsCollpase = config.isCollapse;
+        JSON.parse(window.localStorage.getItem(STATE_MACHINE_DEV_TOOL_CONFIG) || '{}')
+    : {
+        isCollapse: false,
+        isClose: false,
+    };
+let previousIsCollapse = config.isCollapse;
+let previousIsClose = config.isClose;
 const DevTool = () => {
     const { state } = useStateMachine();
-    const [isClose, setClose] = useState(false);
+    const [isClose, setClose] = useState(config.isClose);
     const [isLoadPanelShow, setLoadPanel] = useState(false);
     const [isCollapse, setExpand] = useState(config.isCollapse);
     const [stateIndex, setStateIndex] = useState(-1);
+    const closePanel = () => {
+        const closeValue = !isClose;
+        setClose(closeValue);
+        const config = window.localStorage.getItem(STATE_MACHINE_DEV_TOOL_CONFIG);
+        try {
+            window.localStorage.setItem(STATE_MACHINE_DEV_TOOL_CONFIG, config
+                ? JSON.stringify(Object.assign({}, JSON.parse(config), { isClose: closeValue }))
+                : JSON.stringify({ isClose: closeValue }));
+        }
+        catch (_a) { }
+    };
     if (previousStateIndex === stateIndex &&
         previousIsClose === isClose &&
         previousIsLoadPanelShow === isLoadPanelShow &&
-        previousIsCollpase === isCollapse) {
+        previousIsCollapse === isCollapse) {
         actions.push({
@@ -414,10 +424,11 @@ name: (middleWare() || {}).debugName,
     previousIsLoadPanelShow = isLoadPanelShow;
-    previousIsCollpase = isCollapse;
+    previousIsCollapse = isCollapse;
     return (React.createElement("div", { style: {
             fontFamily: `BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif`,
         } },
-        React.createElement(reactSimpleAnimate.Animate, { play: !isClose, end: { opacity: 0 }, delay: 0.4, render: ({ style }) => (React.createElement("button", { style: Object.assign({ position: 'fixed', right: 0, top: '-1px', width: 200, margin: 0, padding: 10, background: '#0a1c2c', color: 'white', zIndex: 100000000, fontSize: 12 }, style), onClick: () => setClose(!isClose) }, "Little State Machine")) }),
+        React.createElement(reactSimpleAnimate.Animate, { play: !isClose, end: { transform: 'translateY(-50px)' }, delay: 0.5, render: ({ style }) => (React.createElement("button", { style: Object.assign({ position: 'fixed', right: 0, top: '-1px', width: 200, margin: 0, padding: 10, background: '#0a1c2c', color: 'white', zIndex: 100000000, fontSize: 12, lineHeight: '25px' }, style), onClick: () => closePanel() }, "\u2646 LITTLE STATE MACHINE")) }),
         React.createElement(reactSimpleAnimate.Animate, { play: isClose, end: { transform: 'translateX(800px)' }, easeType: "ease-out", duration: 0.5, render: ({ style }) => (React.createElement("div", { style: Object.assign({ zIndex: 100000000, position: 'fixed', right: 0, top: 0, width: 600, height: '100vh', background: '#0a1c2c', display: 'grid', gridTemplateColumns: '150px auto', boxShadow: '0 0 8px 2px #080808' }, style) },
                 React.createElement(DevToolActionPanel, { stateIndex: stateIndex, setStateIndex: setStateIndex }),
                 React.createElement(DevToolStateTree, Object.assign({}, {
+                    closePanel,
                     isLoadPanelShow,
@@ -424,0 +435,0 @@ setLoadPanel,

package.json

 {
   "name": "little-state-machine",
-  "version": "2.7.0-beta.11",
+  "version": "2.7.0-beta.12",
   "main": "dist/index.js",
@@ -5,0 +5,0 @@ "module": "dist/index.es.js",

README.md

@@ -9,6 +9,5 @@ <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" />
 [![npm](https://img.shields.io/npm/dt/little-state-machine.svg?style=flat-square)](https://www.npmjs.com/package/little-state-machine)
-[![npm](https://badgen.net/bundlephobia/minzip/little-state-machine)](https://badgen.net/bundlephobia/minzip/little-state-machine)
 
 - Follow flux application architecture
-- Tiny with 0 dependency and simple
+- Tiny with 0 dependency and simple (less 1kb)
 - Persist your state by default
@@ -48,4 +47,12 @@ - Build with React Hook
 
-## DevTools
+## React DevTool Component
 
+Building in DevTool component.
+```jsx
+<DevTool />
+```
+<img width="700" src="https://github.com/bluebill1049/little-state-machine/blob/master/docs/DevToolScreen.png" />
+
+## Window DevTools Object
+
 ##### 🔗 `window.STATE_MACHINE_DEBUG`
@@ -52,0 +59,0 @@ This will toggle the console output in dev tool.

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

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

44294

increased by1.32%

Number of downloads

288843

increased by1.64%

Lines of code

919

increased by2.45%

Number of lines in readme file

146

increased by5.04%

No dependency changes