hermes-io 1.0.0 → 2.2.0

package/. quokka

@@ -0,0 +1,25 @@
+{
+  "babel": {
+    "presets": [
+      "react-app"
+    ]
+  },
+  "plugins": [
+    "alias-quokka-plugin",
+    "jsdom-quokka-plugin"
+  ],
+  "alias": {
+    "@core": "./src/core",
+    "@components": "./src/core/components",
+    "@contexts": "./src/core/contexts",
+    "@factory": "./src/core/factory",
+    "@hooks": "./src/core/hooks",
+    "@utils": "./src/core/utils",
+    "@libs": "./src/libs",
+    "@constants": "./src/core/constants",
+    "@translations": "./src/core/translations",
+    "@theme": "./src/core/theme",
+    "@routes": "./src/core/routes"
+  },
+  "node": "~/.nvm/versions/node/v16.18.1/bin/node"
+}

package/.editorconfig

@@ -0,0 +1,32 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+end_of_line = lf
+insert_final_newline = true
+
+# Matches multiple files with brace expansion notation
+# Set default charset
+[*.{js,py}]
+charset = utf-8
+
+# 4 space indentation
+[*.py]
+indent_style = space
+indent_size = 4
+
+# Tab indentation (no size specified)
+[Makefile]
+indent_style = tab
+
+# Indentation override for all JS under lib directory
+[*.js]
+indent_style = space
+indent_size = 2
+
+[{package.json,.travis.yml}]
+indent_style = space
+indent_size = 2

package/.eslintrc.js

@@ -0,0 +1,24 @@
+module.exports = {
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:react/recommended"
+    ],
+    "overrides": [
+    ],
+    "parserOptions": {
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "plugins": [
+        "react"
+    ],
+    "rules": {
+        "react/prop-types": "off",
+        "no-unused-vars": 0,
+        "react/display-name": 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

@@ -0,0 +1,74 @@
+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;
+  stackTrace = null;
+  constructor(description) {
+    this.id = Symbol(description);
+  }
+  update = ({ value, listener }) => {
+    this.date = new Date();
+    this.value = value;
+    this.stackTrace = this.getStackTrace();
+    this.listener = listener;
+    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/. quokka

@@ -0,0 +1,25 @@
+{
+  "babel": {
+    "presets": [
+      "react-app"
+    ]
+  },
+  "plugins": [
+    "alias-quokka-plugin",
+    "jsdom-quokka-plugin"
+  ],
+  "alias": {
+    "@core": "./src/core",
+    "@components": "./src/core/components",
+    "@contexts": "./src/core/contexts",
+    "@factory": "./src/core/factory",
+    "@hooks": "./src/core/hooks",
+    "@utils": "./src/core/utils",
+    "@libs": "./src/libs",
+    "@constants": "./src/core/constants",
+    "@translations": "./src/core/translations",
+    "@theme": "./src/core/theme",
+    "@routes": "./src/core/routes"
+  },
+  "node": "~/.nvm/versions/node/v16.18.1/bin/node"
+}

package/examples/sneaker-store/.editorconfig

@@ -0,0 +1,32 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+end_of_line = lf
+insert_final_newline = true
+
+# Matches multiple files with brace expansion notation
+# Set default charset
+[*.{js,py}]
+charset = utf-8
+
+# 4 space indentation
+[*.py]
+indent_style = space
+indent_size = 4
+
+# Tab indentation (no size specified)
+[Makefile]
+indent_style = tab
+
+# Indentation override for all JS under lib directory
+[*.js]
+indent_style = space
+indent_size = 2
+
+[{package.json,.travis.yml}]
+indent_style = space
+indent_size = 2

package/examples/sneaker-store/.eslintrc.js

@@ -0,0 +1,24 @@
+module.exports = {
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:react/recommended"
+    ],
+    "overrides": [
+    ],
+    "parserOptions": {
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "plugins": [
+        "react"
+    ],
+    "rules": {
+        "react/prop-types": "off",
+        "no-unused-vars": 0,
+        "react/display-name": 0
+    }
+}

package/examples/sneaker-store/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Esneyder Amin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/examples/sneaker-store/README.md

@@ -0,0 +1 @@
+# atomic-client

package/examples/sneaker-store/config-overrides.js

@@ -0,0 +1,35 @@
+const path = require("path");
+
+module.exports = {
+  webpack: function (config) {
+    config.devtool = "source-map";
+    config.resolve = {
+      extensions: [".js", ".html"],
+      alias: {
+        "@actions": path.resolve(__dirname, "src/core/actions"),
+        "@core": path.resolve(__dirname, "src/core"),
+        "@views": path.resolve(__dirname, "src/core/views"),
+        "@components": path.resolve(__dirname, "src/core/views/components"),
+        "@factory": path.resolve(__dirname, "src/core/factory"),
+        "@hooks": path.resolve(__dirname, "src/core/views/hooks"),
+        "@constants": path.resolve(__dirname, "src/core/constants"),
+        "@contexts": path.resolve(__dirname, "src/core/contexts"),
+        "@observers": path.resolve(__dirname, "src/core/observers"),
+        "@theme": path.resolve(__dirname, "src/core/theme"),
+        "@src": path.resolve(__dirname, "src"),
+        "hermes-io": path.resolve(__dirname, "../../"),
+        "react": path.resolve(__dirname, "../../node_modules/react"),
+      },
+    };
+    config.module.rules.push({
+      test: /\.js$/,
+      loader: "esbuild-loader",
+      options: {
+        loader: "jsx",
+        target: "es2020",
+      },
+    });
+    console.log(JSON.stringify(config));
+    return config;
+  },
+};

package/examples/sneaker-store/jsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "actions/*": ["src/core/actions/*"],
+      "@core/*": ["src/core/*"],
+      "@views/*": ["src/core/views/*"],
+      "@components/*": ["src/core/views/components/*"],
+      "@factory/*": ["src/core/factory/*"],
+      "@hooks/*": ["src/core/views/hooks/*"],
+      "@constants": ["src/core/constants"],
+      "@observers/*": ["src/core/observers/*"],
+      "@contexts/*": ["src/core/contexts"],
+      "@src/*": ["src/*"],
+      "@hermes-io/*": ["../../*"],
+      "react": ["../../node_modules/react"]
+    }
+  },
+  "exclude": ["node_modules"]
+}