hermes-io 2.2.26 → 2.2.28

package/babel.config.js

@@ -0,0 +1,15 @@
+module.exports = {
+  presets: [
+    [
+      "@babel/preset-env",
+      {
+        debug: false,
+        useBuiltIns: "entry",
+        corejs: 3,
+        targets: {
+          browsers: ["last 2 versions", "not ie > 0", "not ie_mob > 0"],
+        },
+      },
+    ],
+  ],
+};

package/jest.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  testEnvironment: 'jsdom',
+  transform: {
+    '^.+\\.js$': 'babel-jest',
+  },
+  moduleFileExtensions: ['js', 'jsx', 'json'],
+  testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.js?$',
+  collectCoverageFrom: ['**/*.{js,jsx}', '!**/node_modules/**'],
+  transformIgnorePatterns: ['<rootDir>/node_modules/'],
+  coveragePathIgnorePatterns: ['/node_modules/', '/__tests__/'],
+  coverageReporters: ['html', 'text-summary'],
+  setupFilesAfterEnv: ['<rootDir>/src/setupTests.js'],
+};

package/lib/constants.js

@@ -0,0 +1 @@
+export default{CHROME_EXTENSION:"hermes-io-devtools",CONTEXT_SNAPSHOT:"CONTEXT_SNAPSHOT",START_RECORDING:"START_RECORDING",STOP_RECORDING:"STOP_RECORDING",SET_CONTEXT:"SET_CONTEXT",LOAD_RECORDING:"LOAD_RECORDING",RESET_RECORDING:"RESET_RECORDING"};

package/lib/context/context.js

@@ -0,0 +1 @@
+import CONSTANTS from"../constants";let recording=false;let collection=[];export const listenersMap=new Map;function startRecording(){recording=true}function stopRecording(){recording=false}function resetRecording(){collection=[];recording=false}function setContext({id=""}){const context=collection.find(context=>context._internalId===id);if(context){if(context.isFromExternalRecording){const listener=listenersMap.get(context.listener);return listener?.({value:JSON.parse(context.value)})}return context.listener(context.value)}}function loadRecording(payload){collection=payload.recording.map((item={})=>({...item,isFromExternalRecording:true,_internalId:item.id}))}const actions={[CONSTANTS.START_RECORDING]:startRecording,[CONSTANTS.STOP_RECORDING]:stopRecording,[CONSTANTS.RESET_RECORDING]:resetRecording,[CONSTANTS.SET_CONTEXT]:setContext,[CONSTANTS.LOAD_RECORDING]:loadRecording};const handleMessageFromDevtools=event=>{try{const{source,payload}=event.data;if(source===CONSTANTS.CHROME_EXTENSION){if(payload?.type)return actions[payload.type](payload);actions[payload]()}}catch(error){console.error(error)}};window.addEventListener("message",handleMessageFromDevtools);export class Context{constructor(description){this.id=null;this._internalId=null;this.date=null;this.value=null;this.listener=null;this.stackTrace=null;this.update=({value,listener})=>{this.date=new Date;this.value=value;this.stackTrace=this.getStackTrace();this.listener=listener;if(recording){this.sendSnapshot()}};this.sendSnapshot=()=>{const snapshot=this.takeSnapshot();const{listener,stackTrace,value,date,_internalId}=snapshot;collection.push(snapshot);window.postMessage({type:CONSTANTS.CONTEXT_SNAPSHOT,payload:{value:JSON.stringify(value.value),listener:listener.name,stackTrace,date,id:_internalId},source:"hermes-io"},"*")};this.takeSnapshot=()=>{return{_internalId:crypto.randomUUID(),value:this.value,date:this.date,listener:this.listener,stackTrace:this.stackTrace}};this.getStackTrace=()=>{const err=new Error;return err.stack};this.id=Symbol(description)}}

package/lib/context/context.test.js

@@ -0,0 +1 @@
+import{Context}from"./Context";describe("Context",()=>{let context;beforeEach(()=>{context=new Context("Test Description")});afterEach(()=>{context=null});test("update method updates context properties",()=>{const value="test value";const listener=jest.fn();context.update({value,listener});expect(context.date).toBeInstanceOf(Date);expect(context.value).toBe(value);expect(context.listener).toBe(listener);expect(context.stackTrace).toEqual(expect.any(String))});test("takeSnapshot method returns a snapshot object",()=>{const snapshot=context.takeSnapshot();expect(snapshot._internalId).toEqual(expect.any(String));expect(snapshot.value).toBe(context.value);expect(snapshot.date).toBe(context.date);expect(snapshot.listener).toBe(context.listener);expect(snapshot.stackTrace).toBe(context.stackTrace)});test("getStackTrace method returns stack trace",()=>{const stackTrace=context.getStackTrace();expect(stackTrace).toEqual(expect.any(String))})});

package/lib/context.js

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

package/lib/hooks/useObserver.js

@@ -1 +1 @@
-import React,{useEffect}from"react";export const useObserver=(props={})=>{useEffect(()=>{const{observer,listener,contexts=[]}=props;function subscriber(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,resolve)}}observer?.subscribe?.(subscriber);return()=>observer?.unsubscribe?.(subscriber)},[props])};
+import React,{useEffect}from"react";import{listenersMap}from"../context/context";export const useObserver=props=>{useEffect(()=>{const{observer,listener,contexts=[]}=props||{};function subscriber(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,resolve)}}observer?.subscribe?.(subscriber);listenersMap.set(props.listener.name,props.listener);return()=>{listenersMap.delete(props.listener.name);observer?.unsubscribe?.(subscriber)}},[props])};

package/lib/hooks/useObserver.test.js

@@ -0,0 +1 @@
+import React from"react";import{renderHook,act}from"@testing-library/react-hooks/dom";import{Context}from"../context/context";import{useObserver}from"./useObserver";import{listenersMap}from"../context/context";const mockObserver={subscribe:jest.fn(),unsubscribe:jest.fn()};describe("useObserver",()=>{let context;beforeEach(()=>{context=new Context("Test")});afterEach(()=>{listenersMap.clear();jest.clearAllMocks();context=null});it("should subscribe and unsubscribe to observer",async()=>{const observer=mockObserver;const listener=jest.fn();const contexts=[context];const props={observer,listener,contexts};let hook;await act(()=>{hook=renderHook(()=>useObserver(props))});const{unmount}=hook;expect(observer.subscribe).toHaveBeenCalledTimes(1);expect(observer.subscribe).toHaveBeenCalledWith(expect.any(Function));act(()=>{unmount()});expect(observer.unsubscribe).toHaveBeenCalledTimes(1);expect(observer.unsubscribe).toHaveBeenCalledWith(expect.any(Function))});it("should add and remove listener from listenersMap",async()=>{const observer=mockObserver;const listener=jest.fn();const props={observer,listener,contexts:[context]};await act(()=>{renderHook(()=>useObserver(props))});expect(listenersMap.get(listener.name)).toBe(listener);act(()=>{listenersMap.clear()});expect(listenersMap.size).toBe(0)});it("should call listener and context update when payload matches context id",async()=>{const observer=mockObserver;const listener=jest.fn();const context={id:"contextId",update:jest.fn()};const payload={context};const props={observer,listener,contexts:[context]};await act(()=>{renderHook(()=>useObserver(props))});const subscribeCallback=observer.subscribe.mock.calls[0][0];const resolve=jest.fn();act(()=>{subscribeCallback(payload,resolve)});expect(context.update).toHaveBeenCalledTimes(1);expect(context.update).toHaveBeenCalledWith({value:payload,listener});expect(listener).toHaveBeenCalledTimes(1);expect(listener).toHaveBeenCalledWith(payload,resolve)})});

package/lib/index.js

@@ -1 +1 @@
-export*from"./hooks";export*from"./main";export*from"./context";
+export*from"./hooks";export*from"./observer/observer";export*from"./context/context";

package/lib/observer/observer.js

@@ -0,0 +1 @@
+export class Observer{subscribe(callback){this.subscriptors.push(callback)}unsubscribe(callback){this.subscriptors.splice(this.subscriptors.findIndex(cb=>cb===callback),1)}notify(args={}){return new Promise(resolve=>{this.subscriptors.forEach(callback=>callback(args,resolve))})}constructor(){this.subscriptors=[]}}

package/lib/observer/observer.test.js

@@ -0,0 +1 @@
+import{Observer}from"./observer";describe("Observer",()=>{let observer;let callback1;let callback2;beforeEach(()=>{observer=new Observer;callback1=jest.fn();callback2=jest.fn()});afterEach(()=>{observer=null;callback1=null;callback2=null});it("subscribe and notify",()=>{observer.subscribe(callback1);observer.subscribe(callback2);const args={data:"test"};observer.notify(args);expect(callback1).toHaveBeenCalledWith(args,expect.any(Function));expect(callback2).toHaveBeenCalledWith(args,expect.any(Function))});it("unsubscribe",async()=>{observer.subscribe(callback1);observer.unsubscribe(callback1);expect(callback1).not.toHaveBeenCalled()})});

package/lib/setupTests.js

@@ -0,0 +1 @@
+require("@testing-library/jest-dom");jest.setTimeout(6e3*10);Object.defineProperty(globalThis,"crypto",{value:{randomUUID:()=>{return"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,function(c){var r=Math.random()*16|0,v=c==="x"?r:r&3|8;return v.toString(16)})}}});window.SVGPathElement=jest.fn();global.navigator={userAgent:"node"};window.navigator={userAgent:"node"};window.matchMedia=window.matchMedia||function(){return{matches:false,addListener:function(){},removeListener:function(){}}};

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "hermes-io",
-  "version": "2.2.26",
+  "version": "2.2.28",
   "description": "A lightweight javascript library that allows communication between Reactjs components by using the observer pattern and the hook api",
   "main": "./lib/index.js",
-  "module": "lib/index.js",
+  "module": "./lib/index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "test": "jest",
     "prepare": "swc ./src -d ./lib && cp ./utils/README.md ./README.md"
   },
   "exports": {
@@ -24,5 +24,18 @@
   "license": "MIT",
   "peerDependencies": {
     "react": "^18.2.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.22.8",
+    "@babel/preset-env": "^7.22.7",
+    "@swc/cli": "^0.1.62",
+    "@swc/core": "^1.3.71",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react-hooks": "^8.0.1",
+    "babel-jest": "^29.6.1",
+    "jest": "^29.6.1",
+    "jest-environment-jsdom": "^29.6.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   }
 }