hermes-io 2.9.74 → 2.9.76

package/README.md

@@ -1,24 +1,47 @@
 # hermes-io
 A lightweight React library that allows communication between components by using the observer pattern and the hook api.
 
+## Documentation
+See: https://hermes-io-docs.vercel.app/
+
 ## Usage
 ```javascript
-function App({ notify }) {
-  const increment = () => {
-    notify({
-      value: {
-        type: INCREMENT,
-      },
-    });
-  };
+import { MicroStore } from "hermes-io";
+
+export const store = new MicroStore();
+export const storeId = 'counter-id';
+```
 
-  const decrement = () => {
-    notify({
-      value: {
-        type: DECREMENT,
-      },
-    });
+```javascript
+export const actions = {
+  INCREMENT: "INCREMENT",
+  DECREMENT: "DECREMENT"
+};
+
+export default function reducer(store, action) {
+  const actionsMap = {
+    [actions.INCREMENT]: () => {
+      store.state.count += 1;
+    },
+   [actions.DECREMENT]: () => {
+      store.state.count -= 1;
+    },
   };
+  return actionsMap[action.payload.type]();
+};
+```
+
+```javascript
+import { useObservableStore } from "hermes-io";
+import { store, storeId } from "@/store";
+import reducer, { actions } from "@/reducer";
+
+export default function App() {
+  useObservableStore(storeId, { count: 0 }, reducer, store);
+
+  const increment = () => store.mutate({ type: events.INCREMENT });
+
+  const decrement = () => store.mutate({ type: events.DECREMENT });
 
   return (
     <div>
@@ -29,35 +52,26 @@ function App({ notify }) {
     </div>
   );
 };
-export default withNotify(App, {
-  context: CounterContext,
-  observer: CounterObserver
-});
 ```
 
 ```javascript
-export function Counter() {
-  const [count, setCount] = useState(0);
-  const handleCounterNotification = (event) => {
-    const { value = {} } = event;
-    const { type } = value;
-    if (type === INCREMENT) setCount((prevValue) => prevValue + 1);
-    if (type === DECREMENT) setCount((prevValue) => prevValue - 1);
-  };
+import { useMutations } from "hermes-io";
+import { store, storeId } from "@/store";
+import { actions } from "@/reducer";
 
-  useObserver({
-    contexts: [CounterContext],
-    observer: CounterObserver,
-    listener: handleCounterNotification,
+export function Counter() {
+  const { state, onEvent } = useMutations({
+    initialState: { count: 0 },
+    id: storeId,
+    store,
   });
+  onEvent(actions.INCREMENT, () => ({ count: state.count });
+  onEvent(actions.DECREMENT, () => ({ count: state.count });
 
-  return <h1>Counter: {count}</h1>;
+  return <h1>Counter: {state.count}</h1>;
 }
 ```
-<img src="https://raw.githubusercontent.com/Maxtermax/hermes-io-counter-demo/master/src/assets/optimized.gif" />
-
-## Documentation
-See: https://hermes-io-docs.vercel.app/
+<img src="https://miro.medium.com/v2/resize:fit:1400/format:webp/1*VhOkr1735qdrHHyuJszqvQ.gif" />
 
 
 ## Devtool

package/lib/hooks/index.js

@@ -1 +1 @@
-export*from"./useObserver";export*from"./useMutations";export*from"./useStore";export*from"./useStoreFactory";
+export*from"./useObserver";export*from"./useMutations";export*from"./useStore";export*from"./useObservableStore";

package/lib/hooks/useObservableStore.js

@@ -0,0 +1 @@
+import{useStore as r}from"./useStore";import{Context as e}from"../context/context";import{Observer as o}from"../observer/observer";import{Store as t}from"../store/store";export var useObservableStore=function(s,n,m,i){var c={store:new t({id:s,context:new e("Context_"+s),observer:new o}),reducer:m,data:n};return i&&(c.microStore=i),{store:r(c).store}};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hermes-io",
-  "version": "2.9.74",
+  "version": "2.9.76",
   "description": "A lightweight React library that allows communication between Reactjs components by using the observer pattern and the hook api",
   "main": "./lib/index.js",
   "module": "./lib/index.js",