hermes-io 2.1.0 → 2.2.0

package/README.md

@@ -0,0 +1,112 @@
+# hermes-io
+A lightweight javascript library that allows communication between Reactjs components by using the observer pattern and the hook api.
+
+# Installation
+```
+npm i hermes-io --save
+```
+
+# Get started
+In order to use `hermes-io` you need to create a react project by using something like [Create-react-app](https://create-react-app.dev/), hermes-io is Reactjs hook that communication between components,
+let's see it in action, follow the next example:
+
+```javascript
+// observers.js
+export const AddProductObserver = new Observer();
+export const RemoveProductObserver = new Observer();
+
+
+// App.js
+import { useState } from 'react';
+import { useObserver, Observer } from 'hermes-io';
+import { RemoveProductObserver, AddProductObserver } from './observers';
+import { Products } from './components/Products';
+import { ShoppingCar } from './components/ShoppingCar';
+
+export const App = (props = {}) => {
+  const [productsToBy, setProductsToBy] = useState([]);
+  const productsStore = useProductStore(); // get products from some store
+  const products = productsStore.get();
+  
+  const handleRemoveProduct = (product = {}) => {
+    const newProducts = [...productsToBy].filter(({ id = '' }) => id !== product.id);
+    setProductsToBy(newProducts);
+     productsStore.remove(product);
+  };
+  
+  const handleAddProduct = (product = {}) => {
+    setProductsToBy([...productsToBy, product]);
+    productsStore.update(product, { selected: true });  
+  };
+  
+  useObserver({
+    observer: AddProductObserver,
+    listener: handleAddProduct,
+    from: ['products-list'],
+  });
+  
+  useObserver({
+    observer: RemoveProductObserver,
+    listener: handleRemoveProduct,
+    from: ['shopping-car'],
+  });
+  
+  return <div>
+    <Products data={products} />
+    <ShoppingCar data={productsToBy}/>
+  </div>
+};
+
+
+// ShoppingCar.js
+import { RemoveProductObserver } from '../observers';
+
+export const ShoppingCar = (props = {}) => {
+  const handleRemoveProduct = (product = {}) => {
+    RemoveProductObserver.notify({ value: product, from 'shopping-car' });
+  };
+  return <div>
+    <ul>
+       {
+         data.map((product = {}) =>
+           <li key={product.id}>
+              <span>{product.name}</<span>
+              <p>{product.description}</p>
+              <small>${product.price}</<small>
+              <button onClick={() => handleRemoveProduct(product)}>Remove</<button>
+           </li>
+         ))
+       }
+    </ul>
+  </div>
+};
+
+// Products.js
+import { AddProductObserver } from '../observers';
+
+export const Products = (props = {}) => {
+  const { data = [] } = props; 
+  
+  const handleAddProduct = (product = {}) => {
+    AddProductObserver.notify({ value: product, from 'products-list' });
+  };
+  
+  return <ul>
+     {
+       data.map((product = {}) =>
+         <li key={product.id}>
+            <span>{product.name}</<span>
+            <p>{product.description}</p>
+            <small>${product.price}</<small>
+            <button disabled={product.selected} onClick={() => handleAddProduct(product)}>Add to car</<button>
+         </li>
+       ))
+     }
+  </ul>
+};
+
+```
+
+
+
+

package/context.js

@@ -1,7 +1,34 @@
-window.contexts = [];
+let recording = false;
+let collection = [];
+
+const handleMessageFromDevtools = (event) => {
+  const { source, payload } = event.data;
+  if (source === "hermes-io-devtools") {
+    if (payload === "START_RECORDING") {
+      recording = true;
+      return;
+    }
+    if (payload === "STOP_RECORDING") {
+      recording = false;
+    }
+    if (payload === "RESET_RECORDING") {
+      collection = [];
+      recording = false;
+    }
+    if (payload?.type === "SET_CONTEXT") {
+      const context = collection.find((context) => context._internalId === payload.id);
+      if (context) {
+        context.listener(context.value);
+      }
+    }
+  }
+};
+
+window.addEventListener("message", handleMessageFromDevtools);
 
 export class Context {
   id = null;
+  _internalId = null;
   date = null;
   value = null;
   listener = null;
@@ -9,18 +36,39 @@ export class Context {
   constructor(description) {
     this.id = Symbol(description);
   }
-  update({ value, listener }) {
+  update = ({ value, listener }) => {
     this.date = new Date();
     this.value = value;
     this.stackTrace = this.getStackTrace();
     this.listener = listener;
-    window.contexts.push(this.takeSnapshot())
-  }
-  takeSnapshot() {
-    return { ...this };
-  }
-  getStackTrace() {
+    if (recording) {
+      this.sendSnapshot();
+    }
+  };
+  sendSnapshot = () => {
+    const snapshot = this.takeSnapshot();
+    const { listener, stackTrace, value, date, _internalId } = snapshot;
+    collection.push(snapshot);
+    window.postMessage(
+      {
+        type: "CONTEXT_SNAPSHOT",
+        payload: { value: JSON.stringify(value.value), listener: listener.name, stackTrace, date, id: _internalId },
+        source: "hermes-io",
+      },
+      "*"
+    );
+  };
+  takeSnapshot = () => {
+    return {
+      _internalId: crypto.randomUUID(),
+      value: this.value,
+      date: this.date,
+      listener: this.listener,
+      stackTrace: this.stackTrace,
+    };
+  };
+  getStackTrace = () => {
     const err = new Error();
     return err.stack;
-  }
-};
+  };
+}

package/examples/sneaker-store/src/core/App.js

@@ -44,9 +44,10 @@ function App() {
     setProducts([...productsStore.get('collection')]);
   };
   
-  const handleAddProduct = ({ value: product = {} }) => {
+  const handleAddProduct = ({ value: product = {} }, resolve) => {
     product.selected = true;
     setProducts([...productsStore.get('collection')]);
+    resolve();
   };
   
   useObserver({

package/examples/sneaker-store/src/core/views/components/Products/Products.js

@@ -15,8 +15,9 @@ import * as contexts from "@contexts";
 const Products = (props = {}) => {
   const { data = [] } = props;
 
-  const handleAddProduct = (product = {}) => {
-    ProductsObserver.add.notify({ value: product, context: contexts.products });
+  const handleAddProduct = async (product = {}) => {
+    const result = await ProductsObserver.add.notify({ value: product, context: contexts.products });
+    console.log({ result });
   };
 
   const handleRemoveProduct = (product = {}) => {

package/hooks/useObserver.js

@@ -3,12 +3,12 @@ import React, { useEffect } from "react";
 export const useObserver = (props = {}) => {
   useEffect(() => {
     const { observer, listener, contexts = [] } = props;
-    function handleAction(payload) {
+    function handleAction(payload, resolve) {
       const hasfromList = contexts.length !== 0;
       const hasValidList = hasfromList && contexts.find((ctx) => ctx.id === payload?.context?.id);
       if (hasValidList) {
         payload?.context?.update({ value: payload, listener });
-        listener?.(payload);
+        listener?.(payload, resolve);
       }
     }
     observer.subscribe(handleAction);

package/main.js

@@ -7,6 +7,8 @@ export class Observer {
     this.subscriptors.splice(this.subscriptors.findIndex(cb => cb  === callback), 1);
   }
   notify(args = {}) {
-    this.subscriptors.forEach(callback => callback(args));
+    return new Promise((resolve) => {
+      this.subscriptors.forEach(callback => callback(args, resolve));
+    })
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hermes-io",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "A lightweight javascript library that allows communication between Reactjs components by using the observer pattern and the hook api",
   "main": "index.js",
   "scripts": {