hermes-io 2.2.32 → 2.2.35

package/lib/constants.js

@@ -1 +1,9 @@
-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"};
+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

@@ -1 +1,101 @@
-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)}}
+import t from "../constants";
+let e = false;
+let s = [];
+export const listenersMap = new Map();
+function n() {
+    e = true;
+}
+function i() {
+    e = false;
+}
+function a() {
+    s = [];
+    e = false;
+}
+function r({ id: e = "" }) {
+    const n = s.find((t)=>t._internalId === e);
+    if (n) {
+        if (n.isFromExternalRecording) {
+            const t = listenersMap.get(n.listener);
+            return t?.({
+                value: JSON.parse(n.value)
+            });
+        }
+        return n.listener(n.value);
+    }
+}
+function l(e) {
+    s = e.recording.map((t = {})=>({
+            ...t,
+            isFromExternalRecording: true,
+            _internalId: t.id
+        }));
+}
+const o = {
+    [t.START_RECORDING]: n,
+    [t.STOP_RECORDING]: i,
+    [t.RESET_RECORDING]: a,
+    [t.SET_CONTEXT]: r,
+    [t.LOAD_RECORDING]: l
+};
+const c = (e)=>{
+    try {
+        const { source: s, payload: n } = e.data;
+        if (s === t.CHROME_EXTENSION) {
+            if (n?.type) return o[n.type](n);
+            o[n]();
+        }
+    } catch (t) {
+        console.error(t);
+    }
+};
+window.addEventListener("message", c);
+export class Context {
+    constructor(n){
+        this.id = null;
+        this._internalId = null;
+        this.date = null;
+        this.value = null;
+        this.listener = null;
+        this.stackTrace = null;
+        this.update = ({ value: t, listener: s })=>{
+            this.date = new Date();
+            this.value = t;
+            this.stackTrace = this.getStackTrace();
+            this.listener = s;
+            if (e) {
+                this.sendSnapshot();
+            }
+        };
+        this.sendSnapshot = ()=>{
+            const e = this.takeSnapshot();
+            const { listener: n, stackTrace: i, value: a, date: r, _internalId: l } = e;
+            s.push(e);
+            window.postMessage({
+                type: t.CONTEXT_SNAPSHOT,
+                payload: {
+                    value: JSON.stringify(a.value),
+                    listener: n.name,
+                    stackTrace: i,
+                    date: r,
+                    id: l
+                },
+                source: "hermes-io"
+            }, "*");
+        };
+        this.takeSnapshot = ()=>{
+            return {
+                _internalId: crypto.randomUUID(),
+                value: this.value,
+                date: this.date,
+                listener: this.listener,
+                stackTrace: this.stackTrace
+            };
+        };
+        this.getStackTrace = ()=>{
+            const t = new Error();
+            return t.stack;
+        };
+        this.id = Symbol(n);
+    }
+}

package/lib/hooks/index.js

@@ -1 +1 @@
-export*from"./useObserver";
+export * from './useObserver';

package/lib/hooks/useObserver.js

@@ -1 +1,26 @@
-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])};
+import e, { useEffect as t } from "react";
+import { listenersMap as n } from "../context/context";
+export const useObserver = (r)=>{
+    t(()=>{
+        const { observer: e, listener: t, contexts: o = [] } = r || {};
+        function s(e, n) {
+            const r = o.length !== 0;
+            const s = r && o.find((t)=>t.id === e?.context?.id);
+            if (s) {
+                e?.context?.update({
+                    value: e,
+                    listener: t
+                });
+                t?.(e, n);
+            }
+        }
+        e?.subscribe?.(s);
+        n.set(r.listener.name, r.listener);
+        return ()=>{
+            n.delete(r.listener.name);
+            e?.unsubscribe?.(s);
+        };
+    }, [
+        r
+    ]);
+};

package/lib/index.js

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

package/lib/observer/observer.js

@@ -1 +1,16 @@
-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=[]}}
+export class Observer {
+    subscribe(s) {
+        this.subscriptors.push(s);
+    }
+    unsubscribe(s) {
+        this.subscriptors.splice(this.subscriptors.findIndex((r)=>r === s), 1);
+    }
+    notify(s = {}) {
+        return new Promise((r)=>{
+            this.subscriptors.forEach((i)=>i(s, r));
+        });
+    }
+    constructor(){
+        this.subscriptors = [];
+    }
+}

package/lib/setupTests.js

@@ -1 +1,26 @@
-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(){}}};
+require("@testing-library/jest-dom");
+jest.setTimeout(6000 * 10);
+Object.defineProperty(globalThis, "crypto", {
+    value: {
+        randomUUID: ()=>{
+            return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(e) {
+                var x = Math.random() * 16 | 0, t = e === "x" ? x : x & 0x3 | 0x8;
+                return t.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,6 +1,6 @@
 {
   "name": "hermes-io",
-  "version": "2.2.32",
+  "version": "2.2.35",
   "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",

package/lib/context/context.test.js

@@ -1 +0,0 @@
-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/hooks/useObserver.test.js

@@ -1 +0,0 @@
-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/observer/observer.test.js

@@ -1 +0,0 @@
-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()})});