hermes-io 2.2.41 → 2.3.42

package/README.md

@@ -21,9 +21,6 @@ Install from chrome web store [here](https://chrome.google.com/webstore/detail/h
 
 ![chrome extension](https://raw.githubusercontent.com/Maxtermax/hermes-io-devtools/master/demo.gif) 
  
-## Documentation: 
-https://github.com/Maxtermax/hermes-io#readme
-
 ## Contributing: 
 Feel free to open a PR explaining your changes, this library is open to suggestions and improvements.
 

package/__test__/context.test.js

@@ -0,0 +1,41 @@
+import { vi } from 'vitest';
+import { Context } from "../src/context/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 = vi.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/__test__/observer.test.js

@@ -0,0 +1,34 @@
+import { Observer } from "../src/observer/observer";
+
+describe("Observer", () => {
+  let observer;
+  let callback1;
+  let callback2;
+
+  beforeEach(() => {
+    observer = new Observer();
+    callback1 = vi.fn();
+    callback2 = vi.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/__test__/useObserver.test.js

@@ -0,0 +1,63 @@
+import { renderHook, act } from "@testing-library/react-hooks/dom";
+import { Context, listenersMap } from "../src/context/context";
+import { Observer, useObserver } from "../src/observer/observer";
+import { test } from "vitest";
+
+// Mock the observer object and its methods
+const mockObserver = {
+  subscribe: vi.fn(),
+  unsubscribe: vi.fn(),
+};
+
+describe("useObserver", () => {
+  let context;
+  beforeEach(() => {
+    context = new Context("Test");
+  });
+
+  afterEach(() => {
+    listenersMap.clear();
+    vi.clearAllMocks();
+    context = null;
+  });
+
+  test("should subscribe and unsubscribe to observer ", async () => {
+    const observer = new Observer();
+    const listener = vi.fn();
+    const contexts = [context];
+    const { unmount } = await renderHook(() => {
+      const hook = useObserver({ observer, listener, contexts });
+      expect(observer.subscriptors.length).toBe(1);
+      return hook;
+    });
+    await act(() => unmount());
+    expect(observer.subscriptors.length).toBe(0);
+  });
+
+  it("should add and remove listener from listenersMap", async () => {
+    const observer = new Observer();
+    const listener = vi.fn();
+    const { unmount } = await renderHook(() => {
+      const hook = useObserver({ observer, listener, contexts: [context] });
+      expect(listenersMap.size).toBe(1);
+      return hook;
+    });
+    await act(() => unmount());
+    expect(listenersMap.size).toBe(0);
+  });
+
+  it("should call listener on notification", async () => {
+    const observer = mockObserver;
+    const listener = vi.fn();
+    renderHook(() => {
+      useObserver({ observer, listener, contexts: [context] });
+      observer.notify({
+        context,
+        value: {
+          test: true,
+        },
+      });
+      expect(listener).toHaveBeenCalledTimes(1);
+    });
+  });
+});

package/__test__/withNotify.test.jsx

@@ -0,0 +1,20 @@
+import { test, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { withNotify } from "../src/components/withNotify/withNotify";
+import { Context } from "../src/context/context";
+import { Observer } from "../src/observer/observer";
+
+const TestContext = new Context("Test");
+const TestObserver = new Observer();
+
+const Wrapper = withNotify((props) => <h1>{Object.keys(props)}</h1>, {
+  context: TestContext,
+  observer: TestObserver,
+});
+
+test("Should add ", () => {
+  render(<Wrapper />);
+  const node = screen.getByText(/notify/gi);
+  expect(node).toBeInTheDocument();
+})
+

package/__test__/withReactive.test.jsx

@@ -0,0 +1,36 @@
+import { test, expect } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import { withReactive } from "../src/components/withReactive/withReactive";
+import { Context } from "../src/context/context";
+import { Observer } from "../src/observer/observer";
+
+const TestContext = new Context("Test");
+const TestObserver = new Observer();
+
+const Wrapper = withReactive({
+  context: TestContext,
+  observer: TestObserver,
+  values: {
+    title: "test",
+  },
+});
+
+test("Should Renders the component correctly", () => {
+  render(<Wrapper id="test" render={({ title }) => <h1>{title}</h1>} />);
+  const node = screen.getByText(/test/gi);
+  expect(node).toBeInTheDocument();
+});
+
+test("Should re-render on notification", async () => {
+  await render(<Wrapper id="test2" render={({ title }) => <h1>{title}</h1>} />);
+  TestObserver.notify({
+    context: TestContext,
+    value: {
+      type: "test2",
+      value: { title: "new title" },
+    },
+  });
+  await waitFor(() =>
+    expect(screen.getByText(/new title/gi)).toBeInTheDocument()
+  );
+});

package/lib/components/withNotify/withNotify.js

@@ -0,0 +1 @@
+function _extends(){return(_extends=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[r]=n[r])}return t}).apply(this,arguments)}import t from"react";export function withNotify(e,n){var r=n.context,o=n.observer,i=function(t){return o.notify({context:r,value:t})};return function(n){return t.createElement(e,_extends({notify:i},n))}}

package/lib/components/withReactive/withReactive.js

@@ -0,0 +1 @@
+function _extends(){return(_extends=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e}).apply(this,arguments)}import{useObserver as e}from"../../hooks/useObserver";import r,{useState as t}from"react";export function withReactive(n){var o=n.context,a=n.observer,i=n.values,u=void 0===i?{}:i;return function(n){var i=t(!1),s=(i[0],i[1]);return e({listener:function(e){var r=e.value,t=r.type,o=r.value;n.id===t&&(u=_extends({},u,o),s(function(e){return!e}))},contexts:[o],observer:a}),r.createElement(r.Fragment,null,n.render(u))}}

package/lib/context/context.js

@@ -1 +1 @@
-function _extends(){return(_extends=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}import e from"../constants";var _obj,recording=!1,collection=[];export var listenersMap=new Map;var actions=((_obj={})[e.START_RECORDING]=function(){recording=!0},_obj[e.STOP_RECORDING]=function(){recording=!1},_obj[e.RESET_RECORDING]=function(){collection=[],recording=!1},_obj[e.SET_CONTEXT]=function(t){var n=t.id,r=void 0===n?"":n,a=collection.find(function(e){return e._internalId===r});if(a){if(a.isFromExternalRecording){var i=listenersMap.get(a.listener);return null==i?void 0:i({value:JSON.parse(a.value)})}return a.listener(a.value)}},_obj[e.LOAD_RECORDING]=function(t){collection=t.recording.map(function(e){return void 0===e&&(e={}),_extends({},e,{isFromExternalRecording:!0,_internalId:e.id})})},_obj);window.addEventListener("message",function(t){try{var n=t.data,r=n.source,a=n.payload;if(r===e.CHROME_EXTENSION){if(null==a?void 0:a.type)return actions[a.type](a);actions[a]()}}catch(e){console.error(e)}});export var Context=function(t){var n=this;this.id=null,this._internalId=null,this.date=null,this.value=null,this.listener=null,this.stackTrace=null,this.update=function(e){var t=e.value,r=e.listener;n.date=new Date,n.value=t,n.stackTrace=n.getStackTrace(),n.listener=r,recording&&n.sendSnapshot()},this.sendSnapshot=function(){var t=n.takeSnapshot(),r=t.listener,a=t.stackTrace,i=t.value,o=t.date,s=t._internalId;collection.push(t),window.postMessage({type:e.CONTEXT_SNAPSHOT,payload:{value:JSON.stringify(i.value),listener:r.name,stackTrace:a,date:o,id:s},source:"hermes-io"},"*")},this.takeSnapshot=function(){return{_internalId:crypto.randomUUID(),value:n.value,date:n.date,listener:n.listener,stackTrace:n.stackTrace}},this.getStackTrace=function(){return Error().stack},this.id=Symbol(t)};
+function _extends(){return(_extends=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}import e from"../constants";var _obj,recording=!1,collection=[];export var listenersMap=new Map;var actions=((_obj={})[e.START_RECORDING]=function(){recording=!0},_obj[e.STOP_RECORDING]=function(){recording=!1},_obj[e.RESET_RECORDING]=function(){collection=[],recording=!1},_obj[e.SET_CONTEXT]=function(e){var t=e.id,n=void 0===t?"":t,r=collection.find(function(e){return e._internalId===n});if(r){if(r.isFromExternalRecording){var a=listenersMap.get(r.listener);return null==a?void 0:a({value:JSON.parse(r.value)})}return r.listener(r.value)}},_obj[e.LOAD_RECORDING]=function(e){collection=e.recording.map(function(e){return void 0===e&&(e={}),_extends({},e,{isFromExternalRecording:!0,_internalId:e.id})})},_obj);window.addEventListener("message",function(t){try{var n=t.data,r=n.source,a=n.payload;if(r===e.CHROME_EXTENSION){if(null==a?void 0:a.type)return actions[a.type](a);actions[a]()}}catch(e){console.error(e)}});export var Context=function(t){var n=this;this.id=null,this._internalId=null,this.date=null,this.value=null,this.listener=null,this.stackTrace=null,this.update=function(e){var t=e.value,r=e.listener;n.date=new Date,n.value=t,n.stackTrace=n.getStackTrace(),n.listener=r,recording&&n.sendSnapshot()},this.sendSnapshot=function(){var t=n.takeSnapshot(),r=t.listener,a=t.stackTrace,i=t.value,o=t.date,s=t._internalId;collection.push(t),window.postMessage({type:e.CONTEXT_SNAPSHOT,payload:{value:JSON.stringify(i.value),listener:r.name,stackTrace:a,date:o,id:s},source:"hermes-io"},"*")},this.takeSnapshot=function(){return{_internalId:crypto.randomUUID(),value:n.value,date:n.date,listener:n.listener,stackTrace:n.stackTrace}},this.getStackTrace=function(){return Error().stack},this.id=Symbol(t)};

package/lib/index.js

@@ -1 +1 @@
-export*from"./hooks";export*from"./observer/observer";export*from"./context/context";
+export*from"./hooks";export*from"./observer/observer";export*from"./context/context";export*from"./components/withReactive/withReactive";export*from"./components/withNotify/withNotify";

package/lib/observer/observer.js

@@ -1 +1 @@
-export var Observer=function(){function r(){this.subscriptors=[]}var s=r.prototype;return s.subscribe=function(r){this.subscriptors.push(r)},s.unsubscribe=function(r){this.subscriptors.splice(this.subscriptors.findIndex(function(s){return s===r}),1)},s.notify=function(r){void 0===r&&(r={});var s=this;return new Promise(function(t){s.subscriptors.forEach(function(s){return s(r,t)})})},r}();
+export var Observer=function(){function r(){this.subscriptors=[]}var s=r.prototype;return s.subscribe=function(r){this.subscriptors.push(r)},s.unsubscribe=function(r){this.subscriptors.splice(this.subscriptors.findIndex(function(s){return s===r}),1)},s.notify=function(r){var s=this;return void 0===r&&(r={}),new Promise(function(t){s.subscriptors.forEach(function(s){return s(r,t)})})},r}();

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "hermes-io",
-  "version": "2.2.41",
+  "version": "2.3.42",
   "description": "A lightweight React library that allows communication between Reactjs components by using the observer pattern and the hook api",
   "main": "./lib/index.js",
   "module": "./lib/index.js",
   "scripts": {
-    "test": "jest",
-    "prepare": "swc ./src -d ./lib && cp ./utils/README.md ./README.md"
+    "test": "vitest __test__",
+    "prepare": "swc ./src -d ./lib"
   },
   "exports": {
     ".": {
@@ -26,16 +26,21 @@
     "react": "^18.2.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.8",
-    "@babel/preset-env": "^7.22.7",
+    "@sveltejs/vite-plugin-svelte": "^3.0.2",
     "@swc/cli": "^0.1.62",
     "@swc/core": "^1.3.71",
-    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/dom": "^9.3.4",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.2.1",
     "@testing-library/react-hooks": "^8.0.1",
-    "babel-jest": "^29.6.1",
-    "jest": "^29.6.1",
-    "jest-environment-jsdom": "^29.6.1",
+    "@testing-library/svelte": "^4.1.0",
+    "@testing-library/user-event": "^14.5.2",
+    "@vitejs/plugin-react": "^4.2.1",
+    "happy-dom": "^13.3.8",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "vite": "^5.1.0",
+    "vitest": "^1.2.2",
+    "@vitejs/plugin-react-swc": "^3.6.0"
   }
 }

package/vite.config.js

@@ -0,0 +1,16 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react-swc";
+import * as path from "path";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: [{ find: "@", replacement: path.resolve(__dirname, "src") }],
+  },
+  test: {
+    globals: true,
+    environment: "happy-dom",
+    setupFiles: "./vitest-setup.js",
+  },
+});

package/vitest-setup.js

@@ -0,0 +1,19 @@
+import '@testing-library/jest-dom/vitest';
+import { render } from '@testing-library/react';
+
+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 & 0x3) | 0x8;
+          return v.toString(16);
+        }
+      );
+    },
+  },
+});
+
+global.render = render;

package/babel.config.js

@@ -1,15 +0,0 @@
-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

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

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

@@ -1 +0,0 @@
-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=[]}}