Bump msw from 1.3.2 to 2.0.8

.eslintrc.js

@@ -3,12 +3,13 @@ module.exports = {
   parser: '@typescript-eslint/parser',
   parserOptions: {
     createDefaultProgram: true,
-    project: './tsconfig.eslint.json',
+    project: './tsconfig.json',
     tsconfigRootDir: __dirname,
   },
   settings: {
     'import/resolver': {
       typescript: {},
     },
   },
+  rules: { 'spaced-comment': 'off' },
 };

.npmignore

@@ -8,7 +8,7 @@ tsconfig.eslint.json
 .eslintrc.js
 .eslintignore
 babel.config.js
-jest.config.js
+vitest.config.ts
 .prettierrc.json
 .prettierignore
 images/

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Changed
+
+- `promjs` dependency brought to the same repo after it seems to be deprecated.
+
 ## [0.3.0] - 2022-09-07
 
 ### Added

package.json

@@ -11,7 +11,7 @@
   "repository": "cabify/prom-react",
   "scripts": {
     "clean": "rimraf dist/* es2015/*",
-    "build": "yarn run clean && cross-env BABEL_ENV=build package-build",
+    "build": "yarn run clean && cross-env BABEL_ENV=build package-build -p tsconfig.build.json" ,
     "build:watch": "cross-env BABEL_ENV=build package-build -w",
     "format": "prettier --loglevel warn --write .",
     "format:check": "prettier --check .",
@@ -23,15 +23,14 @@
     "publish:minor": "npm version minor",
     "publish:patch": "npm version patch",
     "publish:canary": "npm version prerelease --preid=beta",
-    "test": "jest",
-    "test:ci": "jest",
-    "typecheck": "tsc --project tsconfig.eslint.json"
+    "test": "vitest",
+    "test:ci": "vitest",
+    "typecheck": "tsc --project tsconfig.json"
   },
   "dependencies": {
     "@shopify/network": "^3.0.0",
     "@shopify/react-performance": "^4.0.1",
     "events": "^3.3.0",
-    "promjs": "^0.4.1",
     "react-beforeunload": "^2.6.0"
   },
   "devDependencies": {
@@ -41,22 +40,22 @@
     "@testing-library/jest-dom": "6.2.0",
     "@testing-library/react": "14.1.2",
     "@testing-library/user-event": "14.5.2",
-    "@types/jest": "29.5.11",
     "@types/react": "18.2.46",
     "@types/react-beforeunload": "2.1.5",
     "@types/react-dom": "18.2.18",
+    "@vitejs/plugin-react": "4.2.0",
     "cross-env": "7.0.3",
     "eslint": "8.56.0",
     "eslint-import-resolver-typescript": "3.6.1",
-    "jest": "29.7.0",
-    "jest-environment-jsdom": "29.7.0",
-    "msw": "1.3.2",
+    "happy-dom": "^12.10.3",
+    "msw": "2.0.8",
     "prettier": "3.1.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "rimraf": "5.0.5",
     "typescript": "5.3.3",
-    "whatwg-fetch": "3.6.20"
+    "vite-tsconfig-paths": "4.2.1",
+    "vitest": "0.34.6"
   },
   "publishConfig": {
     "access": "public"

src/MetricsContext.ts

@@ -1,6 +1,7 @@
-import { Registry } from 'promjs/registry';
 import { createContext, useContext } from 'react';
 
+import { Registry } from './promjs/registry';
+
 export interface NavigationData {
   start: number;
   duration: number;

src/MetricsProvider.spec.tsx

@@ -1,13 +1,28 @@
 import { Stage, usePerformanceMark } from '@shopify/react-performance';
 import { render, screen } from '@testing-library/react';
-import { MockedRequest } from 'msw';
-import { Metric } from 'promjs';
 import { useEffect } from 'react';
+import { Mock } from 'vitest';
 
-import { hasAnyRequest, waitForRequests } from '../test/mockServer';
+import { hasAnyRequest, server, waitForRequests } from '../test/mockServer';
 import { GoldenMetrics, MetricDefinition } from './createMetrics';
 import { useMetrics } from './MetricsContext';
 import { MetricsProvider } from './MetricsProvider';
+import { Metric } from './promjs/types';
+
+beforeAll(() => {
+  server.listen({ onUnhandledRequest: 'error' });
+});
+
+afterEach(() => {
+  server.resetHandlers();
+  server.events.removeAllListeners('request:start');
+  server.events.removeAllListeners('request:match');
+  server.events.removeAllListeners('request:unhandled');
+});
+
+afterAll(() => {
+  server.close();
+});
 
 const LoadMetricChecker = ({
   onLoad,
@@ -43,13 +58,13 @@ const TestSection = () => {
 };
 
 describe('<MetricsProvider />', () => {
-  let requestsPromise: Promise<MockedRequest[]>;
-  let requests: MockedRequest[];
+  let requestsPromise: Promise<Request[]>;
+  let requests: Request[];
 
   describe('default behavior', () => {
-    let getNormalizedPath: jest.Mock;
+    let getNormalizedPath: Mock;
     beforeEach(async () => {
-      getNormalizedPath = jest.fn(() => '/normalized');
+      getNormalizedPath = vi.fn(() => '/normalized');
       requestsPromise = waitForRequests(
         'POST',
         'http://push-aggregation-gateway/push-metrics',
@@ -72,14 +87,16 @@ describe('<MetricsProvider />', () => {
       expect(screen.getByText('My app')).toBeInTheDocument();
     });
 
-    it('should emit a loaded app metric', () => {
-      expect(requests[0].body).toContain(
+    it('should emit a loaded app metric', async () => {
+      const body = await requests[0].text();
+      expect(body).toContain(
         'prom_react_app_loaded{app_name="test-app",owner="team",status="success"} 1',
       );
     });
 
-    it('should emit navigation metrics', () => {
-      expect(requests[1].body).toContain(
+    it('should emit navigation metrics', async () => {
+      const body = await requests[1].text();
+      expect(body).toContain(
         'prom_react_navigation_duration_seconds_count{app_name="test-app",owner="team",navigation_type="full_page",path="/normalized"} 1',
       );
     });
@@ -117,19 +134,20 @@ describe('<MetricsProvider />', () => {
       requests = await requestsPromise;
     });
 
-    it('should allow to define and use them', () => {
-      expect(requests[2].body).toContain(
+    it('should allow to define and use them', async () => {
+      const body = await requests[2].text();
+      expect(body).toContain(
         'test_metric{app_name="test-app",owner="team",custom_label="customValue"} 1',
       );
     });
   });
 
   describe('when no aggregator url is provided', () => {
     let anyRequest: Promise<boolean>;
-    let onLoad: jest.Mock;
+    let onLoad: Mock;
     beforeEach(() => {
       anyRequest = hasAnyRequest();
-      onLoad = jest.fn();
+      onLoad = vi.fn();
       render(
         <MetricsProvider appName="test-app" owner="team">
           <LoadMetricChecker onLoad={onLoad} />
@@ -161,14 +179,14 @@ describe('<MetricsProvider />', () => {
   });
 
   describe('when no aggregator server is down', () => {
-    let onLoad: jest.Mock;
+    let onLoad: Mock;
     beforeEach(async () => {
       requestsPromise = waitForRequests(
         'POST',
         'http://push-aggregation-gateway/push-metrics',
         2,
       );
-      onLoad = jest.fn();
+      onLoad = vi.fn();
       render(
         <MetricsProvider
           appName="test-app"
@@ -193,7 +211,7 @@ describe('<MetricsProvider />', () => {
     it('should store metrics for further consumption', () => {
       expect(onLoad).toHaveBeenCalledWith([
         {
-          value: 1,
+          value: 0,
           labels: {
             app_name: 'test-app',
             owner: 'team',

src/MetricsProvider.tsx

@@ -3,7 +3,6 @@ import {
   useNavigationListener,
 } from '@shopify/react-performance';
 import EventEmitter from 'events';
-import prom from 'promjs';
 import {
   PropsWithChildren,
   useCallback,
@@ -14,13 +13,17 @@ import {
 } from 'react';
 import { useBeforeunload } from 'react-beforeunload';
 
-import { ObserveCallback } from '.';
 import {
   createMetrics,
   GoldenMetrics,
   MetricDefinition,
 } from './createMetrics';
-import { MetricsContext, NavigationData } from './MetricsContext';
+import {
+  MetricsContext,
+  NavigationData,
+  ObserveCallback,
+} from './MetricsContext';
+import { Registry } from './promjs/registry';
 import { addToMetrics, sendMetricsToGateway } from './utils';
 
 export interface MetricsProviderProps {
@@ -106,7 +109,7 @@ const MetricsProvider = ({
     null,
   );
 
-  const registry = useRef(prom());
+  const registry = useRef(new Registry());
   const eventEmitter = useRef(new EventEmitter());
 
   const defaultTags = useMemo(

src/createMetrics.ts

@@ -1,4 +1,4 @@
-import { Registry } from 'promjs/registry';
+import { Registry } from './promjs/registry';
 
 export enum GoldenMetrics {
   AppLoaded = 'prom_react_app_loaded',

src/index.spec.ts

@@ -4,7 +4,7 @@ import {
   MetricsProvider,
   useMetrics,
   usePerformanceMark,
-} from './index';
+} from '.';
 
 describe('index', () => {
   it('should export a provider', () => {

src/promjs/collector.ts

@@ -0,0 +1,57 @@
+import { Labels, Metric, MetricValue } from './types';
+import { findExistingMetric } from './utils';
+
+export abstract class Collector<Value extends MetricValue> {
+  private readonly data: Metric<Value>[];
+
+  constructor() {
+    this.data = [];
+  }
+
+  get(labels?: Labels): Metric<Value> | undefined {
+    return findExistingMetric<Value>(labels, this.data);
+  }
+
+  set(value: Value, labels?: Labels): this {
+    const existing = findExistingMetric(labels, this.data);
+    if (existing) {
+      existing.value = value;
+    } else {
+      this.data.push({
+        labels,
+        value,
+      });
+    }
+
+    return this;
+  }
+
+  collect(labels?: Labels): Metric<Value>[] {
+    if (!labels) {
+      return this.data;
+    }
+    return this.data.filter((item) => {
+      if (!item.labels) {
+        return false;
+      }
+      const entries = Object.entries(labels);
+      for (let i = 0; i < entries.length; i += 1) {
+        const [label, value] = entries[i];
+        if (item.labels[label] !== value) {
+          return false;
+        }
+      }
+      return true;
+    });
+  }
+
+  resetAll(): this {
+    for (let i = 0; i < this.data.length; i += 1) {
+      this.reset(this.data[i].labels);
+    }
+
+    return this;
+  }
+
+  abstract reset(labels?: Labels): void;
+}

src/promjs/counter.ts

@@ -0,0 +1,25 @@
+import { Collector } from './collector';
+import { CounterValue, Labels } from './types';
+
+export class Counter extends Collector<CounterValue> {
+  inc(labels?: Labels): this {
+    this.add(1, labels);
+    return this;
+  }
+
+  add(amount: number, labels?: Labels): this {
+    if (amount < 0) {
+      throw new Error(
+        `Expected increment amount to be greater than -1. Received: ${amount}`,
+      );
+    }
+    const metric = this.get(labels);
+    this.set(metric ? metric.value + amount : amount, labels);
+
+    return this;
+  }
+
+  reset(labels?: Labels): void {
+    this.set(0, labels);
+  }
+}

src/promjs/gauge.ts

@@ -0,0 +1,16 @@
+import { Counter } from './counter';
+import { Labels } from './types';
+
+export class Gauge extends Counter {
+  dec(labels?: Labels): this {
+    const metric = this.get(labels);
+    this.set(metric ? metric.value - 1 : 0, labels);
+    return this;
+  }
+
+  sub(amount: number, labels?: Labels): this {
+    const metric = this.get(labels);
+    this.set(metric ? metric.value - amount : 0, labels);
+    return this;
+  }
+}