Skip to content

Commit

Permalink
remove dev tool from the package (#37)
Browse files Browse the repository at this point in the history 
* remove dev tool from the package

* update readme

* remove extra logic

* remove dev tool

* update package.json

* remove all the dev tool related stuff and back to 1.2kb
  • Loading branch information
@bluebill1049
bluebill1049 authored May 6, 2020
1 parent 338d2ff commit daa6c7d
Show file tree
Hide file tree
Showing 51 changed files with 89 additions and 12,902 deletions.
167 changes: 73 additions & 94 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,9 @@ State management made super simple

<div align="center">

[![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)
[![npm](https://img.shields.io/npm/dt/little-state-machine.svg?style=flat-square)](https://www.npmjs.com/package/little-state-machine)
[![npm downloads](https://img.shields.io/npm/dm/little-state-machine.svg?style=for-the-badge)](https://www.npmjs.com/package/little-state-machine)
[![npm](https://img.shields.io/npm/dt/little-state-machine.svg?style=for-the-badge)](https://www.npmjs.com/package/little-state-machine)
[![npm](https://img.shields.io/bundlephobia/minzip/little-state-machine?style=for-the-badge)](https://bundlephobia.com/result?p=little-state-machine)

</div>

Expand All @@ -22,17 +23,19 @@ State management made super simple
<h2>📦 Installation</h2>

$ npm install little-state-machine

<h2>🖥 <a href="https://codesandbox.io/s/lrz5wloklm">Demo</a></h2>
Check out the <a href="https://codesandbox.io/s/lrz5wloklm">Demo</a>.
<br />

<h2>🕹 API</h2>

##### 🔗 `StateMachineProvider`

This is a Provider Component to wrapper around your entire app in order to create context.

##### 🔗 `createStore`

```
createStore(store, options?: {
name: string; // rename the store
Expand All @@ -53,65 +56,77 @@ function log(store) {
console.log(store);
}

createStore({
yourDetail, // it's an object of your state { firstName: '', lastName: '' }
}, {
middleWares: [log], // an array of middleWares, which gets run each actions
syncStores: { // you can sync with external store and transform the data
externalStoreName: 'externalStoreName',
transform: ({ externalStoreData, currentStoreData }) => {
return { ...externalStoreData, ...currentStoreData };
createStore(
{
yourDetail, // it's an object of your state { firstName: '', lastName: '' }
},
{
middleWares: [log], // an array of middleWares, which gets run each actions
syncStores: {
// you can sync with external store and transform the data
externalStoreName: 'externalStoreName',
transform: ({ externalStoreData, currentStoreData }) => {
return { ...externalStoreData, ...currentStoreData };
},
},
}
// alternative you can just specify the store name and root state name { yourDetails: { firstName: '' } }
// syncStores : {
// externalStoreName: ['yourDetail'],
// }
// or you can pass in an array of transform function
// syncStores : [
// {
// externalStoreName: 'externalStoreName',
// transform: ({ externalStoreData, currentStoreData }) => {
// return { ...externalStoreData, ...currentStoreData };
// },
// }
// ]
})
// alternative you can just specify the store name and root state name { yourDetails: { firstName: '' } }
// syncStores : {
// externalStoreName: ['yourDetail'],
// }
// or you can pass in an array of transform function
// syncStores : [
// {
// externalStoreName: 'externalStoreName',
// transform: ({ externalStoreData, currentStoreData }) => {
// return { ...externalStoreData, ...currentStoreData };
// },
// }
// ]
},
);
```

##### 🔗 `useStateMachine`
This hook function will return action/actions and state of the app.

This hook function will return action/actions and state of the app.

```typescript
import { updateUserNameAction, removeNameAction } from './actions/yourDetails';

const { action, state } = useStateMachine(updateUserNameAction);
const { actions, state } = useStateMachine({
removeNameAction,
updateUserNameAction
updateUserNameAction,
});

// The following examples are for optional argument
const { actions, state } = useStateMachine({
removeNameAction,
updateUserNameAction
}, {
removeNameAction: 'removeName',
updateUserNameAction: 'updateUserName',
});
const { actions, state } = useStateMachine(
{
removeNameAction,
updateUserNameAction,
},
{
removeNameAction: 'removeName',
updateUserNameAction: 'updateUserName',
},
);
const { action, state } = useStateMachine(updateUserNameAction, {
shouldReRenderApp: false // This will prevent App from re-render and only update the store
shouldReRenderApp: false, // This will prevent App from re-render and only update the store
});
```

<h2>⚒ DevTool</h2>

Built-in DevTool component to track your state change and action.

```jsx
import { DevTool } from 'little-state-machine-devtools';

<StateMachineProvider>
{process.env.NODE_ENV !== 'production' && <DevTool />}
</StateMachineProvider>
{process.env.NODE_ENV !== 'production' && <DevTool />}
</StateMachineProvider>;
```

<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" />
Expand All @@ -121,11 +136,13 @@ Built-in DevTool component to track your state change and action.
<h2>📖 Example</h2>

📋 `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";
Expand All @@ -142,34 +159,39 @@ export default () => {
{process.env.NODE_ENV !== 'production' && <DevTool />}
<YourComponent />
</StateMachineProvider>
)
}
);
};
```

📋 `yourComponent.js`

```jsx
import React from 'react'
import { updateName } from './action.js'
import { useStateMachine } from 'little-state-machine'
import React from 'react';
import { updateName } from './action.js';
import { useStateMachine } from 'little-state-machine';

export default function YourComponent() {
const {
action,
state: { yourDetail: { name } },
state: {
yourDetail: { name },
},
} = useStateMachine(updateName);

return <div onClick={() => action({ name: 'bill' })}>{name}</div>
return <div onClick={() => action({ name: 'bill' })}>{name}</div>;
}
```

📋 `yourDetail.js`

```js
export default {
name: 'test',
}
};
```

📋 `action.js`

```js
export function updateName(state, payload) {
return {
Expand All @@ -178,49 +200,6 @@ export function updateName(state, payload) {
...state.yourDetail,
...payload,
},
}
};
}
```

<h2>🛠 Window Object</h2>

##### 🔗 `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

<img width="700" src="https://github.com/bluebill1049/little-state-machine/blob/master/docs/devtool.png?raw=true" />

##### 🔗 `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:

<p float="left">
<a href="https://github.com/flomocommon"><img src="https://avatars2.githubusercontent.com/u/31602074?s=460&v=4" width="50" height="50" /></a>
<a href="https://github.com/kotarella1110"><img src="https://avatars0.githubusercontent.com/u/12913947?s=460&v=4" width="50" height="50" /></a>
</p>
23 changes: 0 additions & 23 deletions example/.gitignore
View file

This file was deleted.

44 changes: 0 additions & 44 deletions example/README.md
View file

This file was deleted.

40 changes: 0 additions & 40 deletions example/package.json
View file

This file was deleted.

Binary file removed example/public/favicon.ico
View file
Binary file not shown.
Loading

0 comments on commit daa6c7d

Please sign in to comment.