@@ -121,11 +136,13 @@ Built-in DevTool component to track your state change and action.
π Example
π `app.js` + ```jsx -import React from 'react' -import yourDetail from './yourDetail' -import YourComponent from './yourComponent' -import { StateMachineProvider, createStore, DevTool } from 'little-state-machine' +import React from 'react'; +import yourDetail from './yourDetail'; +import YourComponent from './yourComponent'; +import { StateMachineProvider, createStore } from 'little-state-machine'; +import { DevTool } from 'little-state-machine-devtools'; // The following code is for React Native usage // import { AsyncStorage } from "react-native"; @@ -142,34 +159,39 @@ export default () => { {process.env.NODE_ENV !== 'production' && action({ name: 'bill' })}>{name}
+ return action({ name: 'bill' })}>{name}
;
}
```
π `yourDetail.js`
+
```js
export default {
name: 'test',
-}
+};
```
π `action.js`
+
```js
export function updateName(state, payload) {
return {
@@ -178,49 +200,6 @@ export function updateName(state, payload) {
...state.yourDetail,
...payload,
},
- }
+ };
}
```
-
-π Window Object
- -##### π `window.STATE_MACHINE_DEBUG` -This will toggle the console output in dev tool. - -`window.STATE_MACHINE_DEBUG(true)` to turn debug on in console - -`window.STATE_MACHINE_DEBUG(false)` to turn off debug on in console - -
-
-##### π `window.STATE_MACHINE_RESET`
-This will reset the entire store.
-
-`window.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_SAVE_TO(name: string)`
-
-##### π `window.STATE_MACHINE_LOAD`
-Load saved state into your app, you can either supply a name of your session/local storage, or supply a string of data.
-
-`window.STATE_MACHINE_LOAD({ storeName?: string, data?: Object })`
-
-`storeName`: external session/local storage name
-
-`data`: string of data
-
-## Contributors
-Thanks goes to these wonderful people:
-
-
- 
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser. - -The page will reload if you make edits.
-You will also see any lint errors in the console. - -### `npm test` - -Launches the test runner in the interactive watch mode.
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. - -### `npm run build` - -Builds the app for production to the `build` folder.
-It correctly bundles React in production mode and optimizes the build for the best performance. - -The build is minified and the filenames include the hashes.
-Your app is ready to be deployed! - -See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. - -### `npm run eject` - -**Note: this is a one-way operation. Once you `eject`, you canβt go back!** - -If you arenβt satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. - -Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point youβre on your own. - -You donβt have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldnβt feel obligated to use this feature. However we understand that this tool wouldnβt be useful if you couldnβt customize it when you are ready for it. - -## Learn More - -You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). - -To learn React, check out the [React documentation](https://reactjs.org/). diff --git a/example/package.json b/example/package.json deleted file mode 100644 index 485850d..0000000 --- a/example/package.json +++ /dev/null @@ -1,40 +0,0 @@ -{ - "name": "example", - "version": "0.1.0", - "private": true, - "dependencies": { - "@types/jest": "24.0.17", - "@types/node": "12.7.0", - "@types/react": "16.8.24", - "@types/react-dom": "16.8.5", - "deepmerge": "^4.2.2", - "lodash.clonedeep": "^4.5.0", - "react": "^16.8.6", - "react-dom": "^16.8.6", - "react-hook-form": "^3.21.7", - "react-scripts": "3.0.1", - "react-simple-animate": "^3.3.0", - "typescript": "3.5.3" - }, - "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test", - "eject": "react-scripts eject" - }, - "eslintConfig": { - "extends": "react-app" - }, - "browserslist": { - "production": [ - ">0.2%", - "not dead", - "not op_mini all" - ], - "development": [ - "last 1 chrome version", - "last 1 firefox version", - "last 1 safari version" - ] - } -} diff --git a/example/public/favicon.ico b/example/public/favicon.ico deleted file mode 100644 index a11777c..0000000 Binary files a/example/public/favicon.ico and /dev/null differ diff --git a/example/public/index.html b/example/public/index.html deleted file mode 100644 index dd1ccfd..0000000 --- a/example/public/index.html +++ /dev/null @@ -1,38 +0,0 @@ - - - - - - - - - - -
-
- Little State Machine
- -
- (
-
- )}
- />
- (
-
- );
-};
-
-export default DevTool;
diff --git a/example/src/src/components/DevToolActionPanel.tsx b/example/src/src/components/DevToolActionPanel.tsx
deleted file mode 100644
index e65a16e..0000000
--- a/example/src/src/components/DevToolActionPanel.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-import * as React from 'react';
-import { useState } from 'react';
-import { COLORS } from '../constants';
-import saveSetting from '../logic/saveSetting';
-
-const DevToolActionPanel = ({
- setStateIndex,
- stateIndex,
- actions,
- config,
-}: {
- setStateIndex: (index: number) => void;
- stateIndex: number;
- actions: {
- name: string;
- state: Object;
- }[];
- config: {
- isCollapse: boolean;
- isClose: boolean;
- searchTerm: string;
- filterAction: string;
- };
-}) => {
- const [filterName, setFilterName] = useState(config.filterAction);
- return (
-
-
-
- )}
- />
-
-
- );
-};
-
-export default DevToolActionPanel;
diff --git a/example/src/src/components/DevToolStateTree.tsx b/example/src/src/components/DevToolStateTree.tsx
deleted file mode 100644
index d39441d..0000000
--- a/example/src/src/components/DevToolStateTree.tsx
+++ /dev/null
@@ -1,223 +0,0 @@
-import DevToolStorage from './DevToolStorage';
-import * as React from 'react';
-import { COLORS } from '../constants';
-import saveSetting from '../logic/saveSetting';
-import { useState } from 'react';
-import search from '../logic/filterObject';
-const clone = require('lodash.clonedeep');
-let ReactJson = (props: any) => ;
-if (typeof window !== 'undefined') {
- ReactJson = require('react-json-view').default;
-}
-
-const buttonStyle = {
- margin: '0 10px 0 0',
- padding: '5px 10px',
- display: 'inline',
- fontSize: '12px',
- border: 'none',
- borderRadius: '2px',
-};
-
-const toggleStyle = {
- borderRadius: 0,
- display: 'inline',
- padding: 0,
- margin: 0,
- width: 20,
- height: 20,
- top: 0,
- marginRight: 10,
- border: 0,
-};
-
-export default ({
- setPanel,
- isLoadPanelShow,
- setLoadPanel,
- state,
- setExpand,
- isCollapse,
- closePanel,
- stateIndex,
- actions,
- config,
- panelPosition,
-}: {
- isLoadPanelShow: boolean;
- setLoadPanel: (payload: boolean) => void;
- state: Object;
- setExpand: (payload: boolean) => void;
- setClose: (payload: boolean) => void;
- closePanel: () => void;
- stateIndex: number;
- isCollapse: boolean;
- config: {
- isCollapse: boolean;
- isClose: boolean;
- searchTerm: string;
- filterTerm: string;
- };
- setPanel: (arg: string) => void;
- actions: {
- name: string;
- state: Object;
- }[];
- panelPosition: string;
-}) => {
- const collapse = () => {
- const expandValue = !isCollapse;
- setExpand(expandValue);
- saveSetting({ isCollapse: expandValue });
- };
- const [filterValue, setFilterValue] = useState(config.searchTerm);
-
- let data = (
- (stateIndex === -1 ? actions[actions.length - 1] : actions[stateIndex]) ||
- {}
- ).state;
-
- if (filterValue) data = search(clone(data), filterValue);
-
- return (
- - βΌ Actions -
- { - setFilterName(event.target.value.toLowerCase()); - saveSetting({ filterAction: event.target.value }); - }} - placeholder="Filter..." - /> --
- {actions
- .filter(
- data =>
- (data.name &&
- data.name.toLowerCase &&
- data.name.toLowerCase().includes(filterName)) ||
- (!data.name && !filterName) ||
- filterName === '',
- )
- .map(({ name }, index) => (
-
- - - - ))} -
- β Little State Machine - - -
-
-
- );
-}
diff --git a/example/src/src/constants.ts b/example/src/src/constants.ts
deleted file mode 100644
index d091c84..0000000
--- a/example/src/src/constants.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-export const STORE_DEFAULT_NAME = '__STATE_MACHINE__';
-export const STATE_MACHINE_DEBUG_NAME = '___STATE_MACHINE_DEBUG__';
-export const STATE_MACHINE_DEV_TOOL_CONFIG = '___STATE_MACHINE_DEV_CONFIG__';
-
-export const COLORS = {
- primary: '#0a1c2c',
- secondary: 'rgb(17, 50, 76)',
-};
-
-export const Z_INDEX = {
- top: 100000000,
- second: 99999999,
-};
diff --git a/example/src/src/index.ts b/example/src/src/index.ts
deleted file mode 100644
index c443c12..0000000
--- a/example/src/src/index.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import {
- setStorageType,
- createStore,
- StateMachineProvider,
- useStateMachine,
-} from './stateMachine';
-import DevTool from './components/DevTool';
-import StateMachineContext from './StateMachineContext';
-
-export {
- setStorageType,
- createStore,
- StateMachineProvider,
- useStateMachine,
- StateMachineContext,
- DevTool,
-};
-
diff --git a/example/src/src/logic/devTool.ts b/example/src/src/logic/devTool.ts
deleted file mode 100644
index b5bd643..0000000
--- a/example/src/src/logic/devTool.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { STATE_MACHINE_DEBUG_NAME } from '../constants';
-import { GetStore } from '../types';
-
-export function setUpDevTools(
- isDevMode: boolean,
- storageType: Storage,
- getName: Function,
- getStore: GetStore,
-) {
- if (typeof window === 'undefined' || !isDevMode) return;
-
- // @ts-ignore
- window['STATE_MACHINE_DEBUG'] = (value: string) =>
- storageType.setItem(STATE_MACHINE_DEBUG_NAME, value);
-
- // @ts-ignore
- window['STATE_MACHINE_RESET'] = () => storageType.clear();
-
- // @ts-ignore
- window['STATE_MACHINE_GET_STORE'] = () => storageType.getItem(getName());
-
- // @ts-ignore
- window['STATE_MACHINE_SAVE_TO'] = name =>
- window.localStorage.setItem(name, JSON.stringify(getStore()));
-
- // @ts-ignore
- window['STATE_MACHINE_LOAD'] = ({
- storeName,
- data,
- }: {
- storeName: string;
- data?: string;
- }) =>
- storageType.setItem(
- getName() || STATE_MACHINE_DEBUG_NAME,
- data || window.localStorage.getItem(storeName) || '',
- );
-}
diff --git a/example/src/src/logic/devToolLogger.ts b/example/src/src/logic/devToolLogger.ts
deleted file mode 100644
index ab9f1b0..0000000
--- a/example/src/src/logic/devToolLogger.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import difference from './difference';
-import { GetStore, Store } from '../types';
-const cloneDeep = require('lodash.clonedeep');
-
-export function logStartAction({
- debugName,
- getStore,
-}: {
- debugName: string;
- getStore: GetStore;
-}) {
- const storeCopy = cloneDeep(getStore());
- console.log('ββββββββββββββββββββββββββββββββββββββββ>');
- console.log(`ββ%c${debugName}`, 'color: #bada55');
- console.log('ββbefore:', storeCopy);
- return storeCopy;
-}
-
-export function logEndAction({
- getStore,
- storeCopy,
-}: {
- getStore: GetStore;
- storeCopy: Store;
-}) {
- const isEmpty = require('lodash.isempty');
- const diff = difference(getStore(), storeCopy);
- const noChange = isEmpty(diff);
-
- console.log(noChange ? 'ββafter' : 'ββafter:', getStore());
-
- if (!noChange) {
- console.log(
- 'ββdiff:',
- difference(storeCopy, getStore()),
- ' β ',
- difference(getStore(), storeCopy),
- );
- }
-}
diff --git a/example/src/src/logic/difference.ts b/example/src/src/logic/difference.ts
deleted file mode 100644
index 9e297cb..0000000
--- a/example/src/src/logic/difference.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Store } from '../types';
-const transform = require('lodash.transform');
-const isEqual = require('lodash.isequal');
-const isObject = require('lodash.isobject');
-
-export default function difference(object: Store, base: Store) {
- function changes(object: Store, base: Store) {
- return transform(object, (result: Store, value: any, key: string) => {
- if (!isEqual(value, base[key])) {
- result[key] =
- isObject(value) && isObject(base[key])
- ? changes(value, base[key])
- : value;
- }
- });
- }
- return changes(object, base);
-}
diff --git a/example/src/src/logic/filterObject.ts b/example/src/src/logic/filterObject.ts
deleted file mode 100644
index daa8394..0000000
--- a/example/src/src/logic/filterObject.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-function drillData(originalData: Record-
- {Object.entries(window.localStorage).map(([key, value], index) => (
-
- - - - ))} -
-
- (
-
- );
-};
-
-export default DevTool;
diff --git a/src/components/DevToolActionPanel.tsx b/src/components/DevToolActionPanel.tsx
deleted file mode 100644
index fab3204..0000000
--- a/src/components/DevToolActionPanel.tsx
+++ /dev/null
@@ -1,122 +0,0 @@
-import * as React from 'react';
-import { useState } from 'react';
-import { COLORS } from '../constants';
-import saveSetting from '../logic/saveSetting';
-
-const DevToolActionPanel = ({
- setStateIndex,
- stateIndex,
- actions,
- config,
-}: {
- setStateIndex: (index: number) => void;
- stateIndex: number;
- actions: {
- name: string;
- state: Object;
- }[];
- config: {
- isCollapse: boolean;
- isClose: boolean;
- searchTerm: string;
- filterAction: string;
- };
-}) => {
- const [filterName, setFilterName] = useState(config.filterAction);
- return (
-
-
-
- )}
- />
-
-
- );
-};
-
-export default DevToolActionPanel;
diff --git a/src/components/DevToolStateTree.tsx b/src/components/DevToolStateTree.tsx
deleted file mode 100644
index c420e63..0000000
--- a/src/components/DevToolStateTree.tsx
+++ /dev/null
@@ -1,233 +0,0 @@
-import DevToolStorage from './DevToolStorage';
-import * as React from 'react';
-import { COLORS } from '../constants';
-import saveSetting from '../logic/saveSetting';
-import { useState } from 'react';
-import search from '../logic/filterObject';
-const clone = require('lodash.clonedeep');
-let ReactJson = (props: any) => ;
-if (typeof window !== 'undefined' && typeof document !== 'undefined') {
- ReactJson = require('react-json-view').default;
-}
-
-const buttonStyle = {
- margin: '0 10px 0 0',
- padding: '5px 10px',
- display: 'inline',
- fontSize: '12px',
- border: 'none',
- borderRadius: '2px',
-};
-
-const toggleStyle = {
- borderRadius: 0,
- display: 'inline',
- padding: 0,
- margin: 0,
- width: 20,
- height: 20,
- top: 0,
- marginRight: 10,
- border: 0,
-};
-
-export default ({
- setPanel,
- isLoadPanelShow,
- setLoadPanel,
- state,
- setExpand,
- isCollapse,
- closePanel,
- stateIndex,
- actions,
- config,
- panelPosition,
- isBrowser,
-}: {
- isLoadPanelShow: boolean;
- isBrowser: boolean;
- setLoadPanel: (payload: boolean) => void;
- state: Object;
- setExpand: (payload: boolean) => void;
- setClose: (payload: boolean) => void;
- closePanel: () => void;
- stateIndex: number;
- isCollapse: boolean;
- config: {
- isCollapse: boolean;
- isClose: boolean;
- searchTerm: string;
- filterTerm: string;
- };
- setPanel: (arg: string) => void;
- actions: {
- name: string;
- state: Object;
- }[];
- panelPosition: string;
-}) => {
- const collapse = () => {
- const expandValue = !isCollapse;
- setExpand(expandValue);
- saveSetting({ isCollapse: expandValue });
- };
- const [filterValue, setFilterValue] = useState(config.searchTerm);
-
- let data = (
- (stateIndex === -1 ? actions[actions.length - 1] : actions[stateIndex]) ||
- {}
- ).state;
-
- if (filterValue) data = search(clone(data), filterValue);
-
- return (
- - βΌ Actions -
- { - setFilterName(event.target.value.toLowerCase()); - saveSetting({ filterAction: event.target.value }); - }} - placeholder="Filter..." - /> --
- {actions
- .filter(
- data =>
- ((data.name &&
- data.name.toLowerCase &&
- data.name.toLowerCase().includes(filterName)) ||
- (!data.name && !filterName) ||
- filterName === '') &&
- data.name,
- )
- .map(({ name }, index) => (
-
- - - - ))} -
- β Little State Machine - - -
-
-
- );
-}
diff --git a/src/constants.ts b/src/constants.ts
index 2356973..04ba563 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -1,4 +1,5 @@
export const STORE_DEFAULT_NAME = '__STATE_MACHINE__';
+export const STORE_ACTION_NAME = '__STATE_MACHINE_ACTION_NAME__';
export const STATE_MACHINE_DEBUG_NAME = '___STATE_MACHINE_DEBUG__';
export const STATE_MACHINE_DEV_TOOL_CONFIG = '___STATE_MACHINE_DEV_CONFIG__';
diff --git a/src/index.ts b/src/index.ts
index c443c12..7bc11de 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -4,7 +4,6 @@ import {
StateMachineProvider,
useStateMachine,
} from './stateMachine';
-import DevTool from './components/DevTool';
import StateMachineContext from './StateMachineContext';
export {
@@ -13,6 +12,4 @@ export {
StateMachineProvider,
useStateMachine,
StateMachineContext,
- DevTool,
};
-
diff --git a/src/logic/devToolLogger.ts b/src/logic/devToolLogger.ts
deleted file mode 100644
index b444234..0000000
--- a/src/logic/devToolLogger.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import difference from './difference';
-import { GetStore, Store } from '../types';
-const cloneDeep = require('lodash.clonedeep');
-
-export function logStartAction({
- debugName,
- getStore,
-}: {
- debugName: string;
- getStore: GetStore;
-}) {
- const storeCopy = cloneDeep(getStore());
- console.group();
- console.log(`ββ%c${debugName}`, 'color: #bada55');
- console.log('ββbefore:', storeCopy);
- return storeCopy;
-}
-
-export function logEndAction({
- getStore,
- storeCopy,
-}: {
- getStore: GetStore;
- storeCopy: Store;
-}) {
- const isEmpty = require('lodash.isempty');
- const diff = difference(getStore(), storeCopy);
- const noChange = isEmpty(diff);
-
- console.log(noChange ? 'ββafter' : 'ββafter:', getStore());
-
- if (!noChange) {
- console.log(
- 'ββdiff:',
- difference(storeCopy, getStore()),
- ' β ',
- difference(getStore(), storeCopy),
- );
- }
- console.groupEnd();
-}
diff --git a/src/logic/difference.ts b/src/logic/difference.ts
deleted file mode 100644
index 9e297cb..0000000
--- a/src/logic/difference.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Store } from '../types';
-const transform = require('lodash.transform');
-const isEqual = require('lodash.isequal');
-const isObject = require('lodash.isobject');
-
-export default function difference(object: Store, base: Store) {
- function changes(object: Store, base: Store) {
- return transform(object, (result: Store, value: any, key: string) => {
- if (!isEqual(value, base[key])) {
- result[key] =
- isObject(value) && isObject(base[key])
- ? changes(value, base[key])
- : value;
- }
- });
- }
- return changes(object, base);
-}
diff --git a/src/logic/filterObject.ts b/src/logic/filterObject.ts
deleted file mode 100644
index daa8394..0000000
--- a/src/logic/filterObject.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-function drillData(originalData: Record-
- {isBrowser && Object.entries(window.localStorage).map(([key, value], index) => (
-
- - - - ))} -