little-state-machine
Advanced tools
little-state-machine - npm Package Compare versions
Comparing version 4.0.0-rc.0 to 4.0.0-rc.1
@@ -8,10 +8,16 @@ { | ||
| ], | ||
| "version": "4.0.0-rc.0", | ||
| "main": "dist/little-state-machine.js", | ||
| "module": "dist/little-state-machine.es.js", | ||
| "version": "4.0.0-rc.1", | ||
| "source": "src/index.ts", | ||
| "main": "dist/index.js", | ||
| "module": "dist/index.es.js", | ||
| "jsnext:main": "dist/index.esm.js", | ||
| "unpkg": "dist/index.umd.js", | ||
| "umd:main": "dist/index.umd.js", | ||
| "jsdelivr": "dist/index.umd.js", | ||
| "esmodule": "dist/index.modern.js", | ||
| "types": "dist/index.d.ts", | ||
| "scripts": { | ||
| "clean": "rimraf dist/*", | ||
| "clean": "rm -rf dist/*", | ||
| "prebuild": "yarn clean", | ||
| "build": "yarn build:modern && yarn build:umd && yarn build:ie11 && yarn build:min", | ||
| "build": "microbundle build --jsx React.createElement", | ||
| "build:modern": "rollup -c ./rollup/rollup.config.js", | ||
@@ -38,13 +44,8 @@ "build:umd": "rollup -c ./rollup/rollup.umd.config.js", | ||
| "@babel/runtime-corejs3": "^7.9.6", | ||
| "@rollup/plugin-babel": "^5.0.2", | ||
| "@rollup/plugin-commonjs": "^12.0.0", | ||
| "@rollup/plugin-node-resolve": "^8.0.0", | ||
| "@rollup/plugin-replace": "^2.3.2", | ||
| "@types/react": "^16.8.8", | ||
| "jest": "24.7.1", | ||
| "microbundle": "^0.12.4", | ||
| "prettier": "^2.1.2", | ||
| "react": "^16.8.4", | ||
| "react-dom": "^16.8.4", | ||
| "rollup": "^2.10.9", | ||
| "rollup-plugin-terser": "^6.1.0", | ||
| "rollup-plugin-typescript2": "^0.19.2", | ||
| "ts-jest": "^24.0.0", | ||
@@ -51,0 +52,0 @@ "typescript": "^4.0.0" |
185
README.md
@@ -17,3 +17,3 @@ <div align="center"><a href="https://lrz5wloklm.csb.app/"><img src="https://github.com/bluebill1049/little-state-machine/blob/master/docs/logo.png?raw=true" alt="Little State Machine - React Hooks for state management" width="140px" /></a> | ||
| - Tiny with 0 dependency and simple (less than 1kb) | ||
| - Tiny with 0 dependency and simple (699B) | ||
| - Persist state by default (`sessionStorage` or `localStorage`) | ||
@@ -28,20 +28,17 @@ - Build with React Hooks | ||
| ##### 🔗 `StateMachineProvider` | ||
| #### 🔗 `StateMachineProvider` | ||
| This is a Provider Component to wrapper around your entire app in order to create context. | ||
| ##### 🔗 `createStore` | ||
| ```tsx | ||
| createStore(store, options?: { | ||
| name: string; // rename the store | ||
| middleWares?: Function[]; // function to invoke each action | ||
| }}) | ||
| <StateMachineProvider> | ||
| <App /> | ||
| </StateMachineProvider> | ||
| ``` | ||
| #### 🔗 `createStore` | ||
| Function to initialize the global store, invoked at your app root (where `<StateMachineProvider />` lives). | ||
| ```tsx | ||
| import yourDetail from './state/yourDetail'; | ||
| function log(store) { | ||
@@ -54,6 +51,8 @@ console.log(store); | ||
| { | ||
| yourDetail, // it's an object of your state { firstName: '', lastName: '' } | ||
| yourDetail: { firstName: '', lastName: '' } // it's an object of your state | ||
| }, | ||
| { | ||
| middleWares: [log], // an array of middleWares, which gets run each actions | ||
| name?: string; // rename the store | ||
| middleWares?: [ log ]; // function to invoke each action | ||
| storageType?: Storage; // session/local storage (default to session) | ||
| }, | ||
@@ -63,3 +62,3 @@ ); | ||
| ##### 🔗 `useStateMachine` | ||
| #### 🔗 `useStateMachine` | ||
@@ -70,19 +69,23 @@ This hook function will return action/actions and state of the app. | ||
| const { actions, state } = useStateMachine<T>({ | ||
| removeNameAction, | ||
| updateUserNameAction, | ||
| updateYourDetail, | ||
| }); | ||
| ``` | ||
| <h2>💁♂️ Tutorial</h2> | ||
| Quick video tutorial on little state machine. | ||
| <a href="https://scrimba.com/scrim/ceqRebca"> | ||
| <img src="https://raw.githubusercontent.com/bluebill1049/little-state-machine/master/docs/tutorial.png" /> | ||
| </a> | ||
| <h2>📖 Example</h2> | ||
| Check out the <a href="https://codesandbox.io/s/icy-dew-by1wd">Demo</a>. | ||
| Check out the <a href="https://codesandbox.io/s/wild-dawn-ud8bq">Demo</a>. | ||
| 📋 `app.js` | ||
| ```tsx | ||
| import React from 'react'; | ||
| import YourComponent from './yourComponent'; | ||
| import { StateMachineProvider, createStore } from 'little-state-machine'; | ||
| import { StateMachineProvider, createStore, useStateMachine } from 'little-state-machine'; | ||
| // create your store | ||
| createStore({ | ||
@@ -92,13 +95,3 @@ yourDetail: { name: '' }, | ||
| export default () => ( | ||
| <StateMachineProvider> | ||
| <YourComponent /> | ||
| </StateMachineProvider> | ||
| ); | ||
| ``` | ||
| 📋 `action.js` | ||
| ```tsx | ||
| export function updateName(state, payload) { | ||
| function updateName(state, payload) { | ||
| return { | ||
@@ -112,12 +105,4 @@ ...state, | ||
| } | ||
| ``` | ||
| 📋 `yourComponent.js` | ||
| ```tsx | ||
| import React from 'react'; | ||
| import { updateName } from './action.js'; | ||
| import { useStateMachine } from 'little-state-machine'; | ||
| export default function YourComponent() { | ||
| function YourComponent() { | ||
| const { actions, state } = useStateMachine(updateName); | ||
@@ -131,2 +116,8 @@ | ||
| } | ||
| export default () => ( | ||
| <StateMachineProvider> | ||
| <YourComponent /> | ||
| </StateMachineProvider> | ||
| ); | ||
| ``` | ||
@@ -146,8 +137,2 @@ | ||
| <div align="center"> | ||
| <a href="https://lrz5wloklm.csb.app/"> | ||
| <img width="500" src="https://github.com/bluebill1049/little-state-machine/blob/master/docs/DevToolScreen.png?raw=true" /> | ||
| </a> | ||
| </div> | ||
| <h2>🖥 Browser Compatibility</h2> | ||
@@ -191,4 +176,4 @@ Little State Machine supports all major browsers | ||
| src="https://avatars1.githubusercontent.com/u/42376060?s=60&v=4" | ||
| width="50" | ||
| height="50" | ||
| width="40" | ||
| height="40" | ||
| alt="@sayav" | ||
@@ -199,4 +184,4 @@ /></a> | ||
| src="https://avatars1.githubusercontent.com/u/35668113?s=60&v=4" | ||
| width="50" | ||
| height="50" | ||
| width="40" | ||
| height="40" | ||
| alt="@lemcii" | ||
@@ -206,5 +191,5 @@ /></a> | ||
| ><img | ||
| src="https://avatars2.githubusercontent.com/u/5726150?s=60&v=4" | ||
| width="50" | ||
| height="50" | ||
| src="https://avatars0.githubusercontent.com/u/5726140?s=460&u=b300a6fa08a24c59b9db6ebf246384cf8b16a140&v=4" | ||
| width="40" | ||
| height="40" | ||
| alt="@washingtonsoares" | ||
@@ -214,5 +199,5 @@ /></a> | ||
| ><img | ||
| src="https://avatars2.githubusercontent.com/u/5017964?s=60&v=4" | ||
| width="50" | ||
| height="50" | ||
| src="https://avatars0.githubusercontent.com/u/4017964?s=460&u=3a3fdffeb97749d7509d9c5e9be2cafcb98e426f&v=4" | ||
| width="40" | ||
| height="40" | ||
| alt="@lixunn" | ||
@@ -223,4 +208,4 @@ /></a> | ||
| src="https://avatars2.githubusercontent.com/u/3655410?s=60&v=4" | ||
| width="50" | ||
| height="50" | ||
| width="40" | ||
| height="40" | ||
| alt="@SamSamskies" | ||
@@ -231,4 +216,4 @@ /></a> | ||
| src="https://avatars2.githubusercontent.com/u/3356720?s=60&v=4" | ||
| width="50" | ||
| height="50" | ||
| width="40" | ||
| height="40" | ||
| alt="@peaonunes" | ||
@@ -239,4 +224,4 @@ /></a> | ||
| src="https://avatars2.githubusercontent.com/u/609452?s=60&v=4" | ||
| width="50" | ||
| height="50" | ||
| width="40" | ||
| height="40" | ||
| alt="@wilhelmeek" | ||
@@ -247,4 +232,4 @@ /></a> | ||
| src="https://avatars2.githubusercontent.com/u/279251?s=60&v=4" | ||
| width="50" | ||
| height="50" | ||
| width="40" | ||
| height="40" | ||
| alt="@iwarner" | ||
@@ -255,4 +240,4 @@ /></a> | ||
| src="https://avatars2.githubusercontent.com/u/10728145?s=60&v=4" | ||
| width="50" | ||
| height="50" | ||
| width="40" | ||
| height="40" | ||
| alt="@joejknowles" | ||
@@ -263,4 +248,4 @@ /></a> | ||
| src="https://avatars0.githubusercontent.com/u/5763108?s=60&v=4" | ||
| width="50" | ||
| height="50" | ||
| width="40" | ||
| height="40" | ||
| alt="@chris-gunawardena" | ||
@@ -271,4 +256,4 @@ /></a> | ||
| src="https://avatars1.githubusercontent.com/u/2625371?s=60&v=4" | ||
| width="50" | ||
| height="50" | ||
| width="40" | ||
| height="40" | ||
| alt="@Tymek" | ||
@@ -279,4 +264,4 @@ /></a> | ||
| src="https://avatars0.githubusercontent.com/u/2098777?s=60&v=4" | ||
| width="50" | ||
| height="50" | ||
| width="40" | ||
| height="40" | ||
| alt="@Luchanso" | ||
@@ -287,4 +272,4 @@ /></a> | ||
| src="https://avatars1.githubusercontent.com/u/1541093?s=60&v=4" | ||
| width="50" | ||
| height="50" | ||
| width="40" | ||
| height="40" | ||
| alt="@vcarel" | ||
@@ -295,4 +280,4 @@ /></a> | ||
| src="https://avatars0.githubusercontent.com/u/1481077?s=60&v=4" | ||
| width="50" | ||
| height="50" | ||
| width="40" | ||
| height="40" | ||
| alt="@gragland" | ||
@@ -303,4 +288,4 @@ /></a> | ||
| src="https://avatars2.githubusercontent.com/u/1254942?s=60&v=4" | ||
| width="50" | ||
| height="50" | ||
| width="40" | ||
| height="40" | ||
| alt="@tjshipe" | ||
@@ -311,4 +296,4 @@ /></a> | ||
| src="https://avatars1.githubusercontent.com/u/1087002?s=60&v=4" | ||
| width="50" | ||
| height="50" | ||
| width="40" | ||
| height="40" | ||
| alt="@krnlde" | ||
@@ -319,4 +304,4 @@ /></a> | ||
| src="https://avatars2.githubusercontent.com/u/784953?s=60&v=4" | ||
| width="50" | ||
| height="50" | ||
| width="40" | ||
| height="40" | ||
| alt="@msutkowski" | ||
@@ -327,6 +312,36 @@ /></a> | ||
| src="https://avatars3.githubusercontent.com/u/599247?s=60&v=4" | ||
| width="50" | ||
| height="50" | ||
| width="40" | ||
| height="40" | ||
| alt="@mlukaszczyk" | ||
| /></a> | ||
| <a href="https://github.com/susshma" | ||
| ><img | ||
| src="https://avatars0.githubusercontent.com/u/2566818?s=460&u=754ee26b96e321ff28dbc4a2744132015f534fe0&v=4" | ||
| width="40" | ||
| height="40" | ||
| /></a> | ||
| <a href="https://github.com/MatiasCiccone" | ||
| ><img | ||
| src="https://avatars3.githubusercontent.com/u/32602795?s=460&u=6a0c4dbe23c4f9a5628dc8867842b75989ecc4aa&v=4" | ||
| width="40" | ||
| height="40" | ||
| /></a> | ||
| <a href="https://github.com/ghostwriternr" | ||
| ><img | ||
| src="https://avatars0.githubusercontent.com/u/10023615?s=460&u=3ec1e4ba991699762fd22a9d9ef47a0599f937dc&v=4" | ||
| width="40" | ||
| height="40" | ||
| /></a> | ||
| <a href="https://github.com/neighborhood999" | ||
| ><img | ||
| src="https://avatars3.githubusercontent.com/u/10325111?s=400&u=f60c932f81d95a60f77f5c7f2eab4590e07c29af&v=4" | ||
| width="40" | ||
| height="40" | ||
| /></a> | ||
| <a href="https://github.com/yjp20" | ||
| ><img | ||
| src="https://avatars3.githubusercontent.com/u/44457064?s=460&u=a55119c84e0167f6a3f830dbad3133b28f0c0a8f&v=4" | ||
| width="40" | ||
| height="40" | ||
| /></a> | ||
| </p> |
New alerts
License Policy Violation
LicenseThis 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 riskPackage 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
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Mixed license
License(Experimental) Package contains multiple licenses.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by61.66%
53597
- Dev dependency count
- decreased by-31.25%
11
- Number of package files
- increased by20%
18
- Number of low license alerts
- decreased by-100%
0
- Number of lines in readme file
- increased by4.9%
321
Worsened metrics
- Lines of code
- decreased by-81.78%
92
- Number of low quality alerts
- increased by100%
4
- Number of medium supply chain risk alerts
- increased byInfinity%
1