hermes-io 2.2.11 → 2.2.13

package/. quokka

@@ -10,7 +10,6 @@
   ],
   "alias": {
     "@core": "./src/core",
-    "@components": "./src/core/components",
     "@contexts": "./src/core/contexts",
     "@factory": "./src/core/factory",
     "@hooks": "./src/core/hooks",

package/README.md

@@ -10,8 +10,7 @@ A lightweight javascript library that allows communication between components by
 - [notify](#notify)
 - Devtools (TODO)
 
-[DevTools Preview](https://www.youtube.com/watch?v=OSL9ob56urw)
-
+![DevTools Preview](https://raw.githubusercontent.com/Maxtermax/hermes-io-devtools/master/demo.gif)
 
 # Installation
 ```

package/hooks/index.js

@@ -1 +1,2 @@
 export * from './useObserver';
+export * from './useProxy';

package/hooks/useObserver.js

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

package/hooks/useProxy.js

@@ -0,0 +1,32 @@
+import React, { useEffect, useState, useRef } from "react";
+import { useObserver } from './useObserver';
+
+export const useProxy = (target, options) => {
+  const proxyRef = useRef({ ...target });
+  const [value, setValue] = useState(target);
+  useObserver({
+    observer: options?.observer,
+    contexts: options?.contexts,
+    listener: (payload) => value[payload.value],
+  })
+  useEffect(() => {
+    function setup() {
+      const handler = {
+        get: function (_target, prop) {
+          return value[prop];
+        },
+        set: function (target, prop, newValue) {
+          target[prop] = newValue;
+          setValue({ ...target });
+          options?.contexts?.forEach?.((context) =>
+            options?.observer?.notify?.({ value: proxyRef, context })
+          );
+          return true;
+        },
+      };
+      proxyRef.current = new Proxy(target, handler);
+    }
+    setup();
+  }, [target, setValue, proxyRef, value, options]);
+  return proxyRef;
+};

package/index.js

@@ -1,4 +1,3 @@
 export * from "./hooks";
-export * from "./components";
 export * from "./main";
 export * from "./context";

package/package.json

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

package/components/WithActions.js

@@ -1,3 +0,0 @@
-import React from 'react';
-
-export const withActions = (actions, Component) => (props = {}) => <Component actions={actions} {...props}/>;

package/components/WithStore.js

@@ -1,3 +0,0 @@
-import React from 'react';
-
-export const withStore = (store, Component) => (props = {}) => <Component store={store} {...props}/>;

package/components/index.js

@@ -1,3 +0,0 @@
-export * from './WithActions';
-export * from './WithStore';
-