little-state-machine - npm Package Compare versions

Comparing version 1.0.1 to 1.1.0

dist/index.d.ts

 import * as React from 'react';
 export declare let store: any;
 export declare function createStore(data: any): void;
-export declare const StateMachineContext: React.Context<{
-    store: any;
-    updateStore: () => void;
-}>;
 export declare const StateMachineProvider: React.ProviderExoticComponent<React.ProviderProps<{
@@ -18,3 +14,3 @@ store: any;
     };
-    isGlobal?: boolean;
+    shouldReRenderApp?: boolean;
 }): {
@@ -21,0 +17,0 @@ action: Function;

dist/index.es.js

@@ -19,3 +19,2 @@ import * as React from 'react';
     // @ts-ignore
-    sessionStorage.setItem('stateMachineDebug', window.STATE_MACHINE);
     const debug = sessionStorage.getItem('stateMachineDebug') === 'true';
@@ -28,3 +27,3 @@ if (debug) {
     sessionStorage.setItem('sessionStateMachine', JSON.stringify(store));
-    if (options.isGlobal !== false) {
+    if (options.shouldReRenderApp !== false) {
         updateStore(store);
@@ -38,5 +37,12 @@ }
     debugName: '',
-    isGlobal: true,
+    shouldReRenderApp: true,
 }) {
     const { store: globalState, updateStore } = useContext(StateMachineContext);
+    // @ts-ignore
+    if (!typeof window === 'undefined') {
+        // @ts-ignore
+        window.STATE_MACHINE_DEBUG = (value) => {
+            sessionStorage.setItem('stateMachineDebug', value);
+        };
+    }
     if (callbacks && Object.keys(callbacks).length) {
@@ -61,2 +67,2 @@ return {
 
-export { StateMachineContext, StateMachineProvider, createStore, store, useStateMachine };
+export { StateMachineProvider, createStore, store, useStateMachine };

dist/index.js

@@ -22,3 +22,2 @@ 'use strict';
     // @ts-ignore
-    sessionStorage.setItem('stateMachineDebug', window.STATE_MACHINE);
     const debug = sessionStorage.getItem('stateMachineDebug') === 'true';
@@ -31,3 +30,3 @@ if (debug) {
     sessionStorage.setItem('sessionStateMachine', JSON.stringify(exports.store));
-    if (options.isGlobal !== false) {
+    if (options.shouldReRenderApp !== false) {
         updateStore(exports.store);
@@ -41,5 +40,12 @@ }
     debugName: '',
-    isGlobal: true,
+    shouldReRenderApp: true,
 }) {
     const { store: globalState, updateStore } = React.useContext(StateMachineContext);
+    // @ts-ignore
+    if (!typeof window === 'undefined') {
+        // @ts-ignore
+        window.STATE_MACHINE_DEBUG = (value) => {
+            sessionStorage.setItem('stateMachineDebug', value);
+        };
+    }
     if (callbacks && Object.keys(callbacks).length) {
@@ -64,5 +70,4 @@ return {
 
-exports.StateMachineContext = StateMachineContext;
 exports.StateMachineProvider = StateMachineProvider;
 exports.createStore = createStore;
 exports.useStateMachine = useStateMachine;

package.json

 {
   "name": "little-state-machine",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "main": "dist/index.js",
@@ -5,0 +5,0 @@ "module": "dist/index.es.js",

README.md

@@ -1,2 +0,4 @@
-# little-state-machine
+<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" />
+    <h1>Little State Machine</h2>
+</div>
 
@@ -10,3 +12,4 @@ > Flux state management should be easy
 - Follow flux application architecture
-- Tiny and simple
+- Tiny and simple (663B)
+- Persist your state by default
 - Build with React Hook
@@ -17,11 +20,52 @@
     $ npm install little-state-machine
+    
+## [Demo](https://codesandbox.io/s/lrz5wloklm)
+Check out the [Demo](https://codesandbox.io/s/lrz5wloklm).
+    
+## API
+```typescript
+// individual action
+Action: (store: Object, payload: any) => void;
+// multiple actions
+Actions: { [key: string] : Action }
+// options to name action in debug, and weather trigger global state update to re-render entire app 
+Options: {
+  debugName: string, // unique debug name can really help you :)
+  shouldReRenderApp: boolean, 
+}
 
-## Usage
+```
+##### 🔗 `useStateMachine(Action | Actions, Options) =>` 
+`{ action: (any) => void, actions: { [key: string] : (any) => void}, state: Object }`
 
+This hook function will return action/actions and state of the app. 
+
+##### 🔗 `window.STATE_MACHINE_DEBUG`
+This will turn on the dev tool at console.
+
+`window.STATE_MACHINE_DEBUG(true)` to turn debug on in console
+
+`window.STATE_MACHINE_DEBUG(false)` to turn off debug on in console
+
+<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.
+
+##### 🔗 `createStore`
+Function to initial the global store, call at app root where `StateMachineProvider` is.
+
+##### 🔗 `store`
+The global store. 
+ 
+## Example
+
 app.js
 ```jsx
+import React, { useState } from 'react'
 import state from './state'
 import YourComponent from './yourComponent'
-import { StateMachineProvider, createStore } from 'little-state-machine'
+import { StateMachineProvider, store, createStore } from 'little-state-machine'
 
+// create your store
 createStore({
@@ -32,2 +76,4 @@ state,
 const App = ({children}) => {
+  const [globalState, updateStore] = useState(stateMachineStore);
+  
   return <StateMachineProvider
@@ -46,2 +92,3 @@ value={{
 ```jsx
+import React from 'react'
 import { updateName } from './action.js'
@@ -52,6 +99,7 @@ import { useStateMachine } from 'little-state-machine'
   const {
+    action,
     state: { name },
   } = useStateMachine(updateName);
 
-  return <div onClick={() => updateName('bill')}>
+  return <div onClick={() => action('bill')}>
     {name}
@@ -58,0 +106,0 @@ </div>

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

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

Improved metrics

Total package byte prevSize

154741

increased by894.61%

Number of package files

34

increased by6.25%

Lines of code

190

increased by3.83%

Number of lines in readme file

121

increased by65.75%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes