Migrate client-metrics-web to ESM

packages/client-metrics-web/README.md

@@ -49,8 +49,6 @@ Include in your client-side code:
 
 ```js
 import { MetricsClient } from '@dotcom-reliability-kit/client-metrics-web';
-// or
-const { MetricsClient } = require('@dotcom-reliability-kit/client-metrics-web');
 ```
 
 > [!TIP]

packages/client-metrics-web/lib/index.js

@@ -1,9 +1,5 @@
-const { MetricsClient } = require('./metrics-client.js');
-const { InMemoryQueue } = require('./queue/in-memory-queue.js');
-const { Queue } = require('./queue/queue.js');
+import { MetricsClient } from './metrics-client.js';
+import { InMemoryQueue } from './queue/in-memory-queue.js';
+import { Queue } from './queue/queue.js';
 
-module.exports = {
-	MetricsClient,
-	InMemoryQueue,
-	Queue
-};
+export { MetricsClient, InMemoryQueue, Queue };

packages/client-metrics-web/lib/metrics-client.js

@@ -1,6 +1,6 @@
 // biome-ignore-all lint/suspicious/noConsole: required because we're in a browser environment
-const { InMemoryQueue } = require('./queue/in-memory-queue');
-const { Queue } = require('./queue/queue');
+import { InMemoryQueue } from './queue/in-memory-queue.js';
+import { Queue } from './queue/queue.js';
 
 /**
  * @import { MetricsClientOptions, MetricsClient as MetricsClientType, MetricsEvent } from '@dotcom-reliability-kit/client-metrics-web'
@@ -10,7 +10,7 @@ const namespacePattern = /^([a-z0-9_-]+)(\.[a-z0-9_-]+)*$/i;
 const testHostnamePattern = /(local|test|staging)/i;
 const systemCodePattern = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;
 
-exports.MetricsClient = class MetricsClient {
+export class MetricsClient {
 	/** @type {boolean} */
 	#isAvailable = false;
 
@@ -281,4 +281,4 @@ exports.MetricsClient = class MetricsClient {
 		}
 		return detail;
 	}
-};
+}

packages/client-metrics-web/lib/queue/in-memory-queue.js

@@ -1,9 +1,9 @@
-const { Queue } = require('./queue');
+import { Queue } from './queue.js';
 
 /**
  * @import { QueueOptions, Metric, InMemoryQueue as InMemoryQueueType} from '@dotcom-reliability-kit/client-metrics-web'
  */
-exports.InMemoryQueue = class InMemoryQueue extends Queue {
+export class InMemoryQueue extends Queue {
 	/** @type { Metric[] } */
 	#queue;
 
@@ -51,4 +51,4 @@ exports.InMemoryQueue = class InMemoryQueue extends Queue {
 	get size() {
 		return this.#queue.length;
 	}
-};
+}

packages/client-metrics-web/lib/queue/queue.js

@@ -4,7 +4,7 @@
 
 const DEFAULT_QUEUE_CAPACITY = 10_000;
 
-exports.Queue = class Queue {
+export class Queue {
 	/** @type { number } */
 	#capacity;
 
@@ -49,4 +49,4 @@ exports.Queue = class Queue {
 	get size() {
 		throw new Error('Must be implemented by subclass');
 	}
-};
+}

packages/client-metrics-web/package.json

@@ -10,6 +10,7 @@
   "homepage": "https://github.com/Financial-Times/dotcom-reliability-kit/tree/main/packages/client-metrics-web#readme",
   "bugs": "https://github.com/Financial-Times/dotcom-reliability-kit/issues?q=label:\"package: client-metrics-web\"",
   "license": "MIT",
+  "type": "module",
   "scripts": {
     "test": "npm run test:unit && npm run test:end-to-end",
     "test:unit": "node --test --experimental-test-module-mocks --experimental-test-coverage --test-coverage-exclude='**/*.spec.js' --test-coverage-branches=100 --test-coverage-functions=100 --test-coverage-lines=100 'test/unit/**/*.spec.js'",

packages/client-metrics-web/test/unit/lib/metrics-client.spec.js

@@ -1,13 +1,9 @@
 // biome-ignore-all lint/suspicious/noConsole: required because we're in a browser environment
-const { after, afterEach, beforeEach, describe, it, mock } = require('node:test');
-const assert = require('node:assert/strict');
+import assert from 'node:assert/strict';
+import { after, afterEach, beforeEach, describe, it, mock } from 'node:test';
 
-mock.module('../../../package.json', {
-	defaultExport: { version: '0.0.0-test' }
-});
-
-const { MetricsClient } = require('@dotcom-reliability-kit/client-metrics-web');
-const { Queue } = require('../../../lib/queue/queue.js');
+import { MetricsClient } from '@dotcom-reliability-kit/client-metrics-web';
+import { Queue } from '../../../lib/queue/queue.js';
 
 class MockQueue extends Queue {
 	mockItems = [];

packages/client-metrics-web/test/unit/lib/queue/in-memory-queue.spec.js

@@ -1,7 +1,7 @@
-const { describe, it } = require('node:test');
-const assert = require('node:assert/strict');
+import assert from 'node:assert/strict';
+import { describe, it } from 'node:test';
 
-const { InMemoryQueue } = require('../../../../lib/queue/in-memory-queue');
+import { InMemoryQueue } from '../../../../lib/queue/in-memory-queue.js';
 
 describe('InMemoryQueue (extends Queue)', () => {
 	const testMetric = {

packages/client-metrics-web/test/unit/lib/queue/queue.spec.js

@@ -1,6 +1,7 @@
-const { describe, it } = require('node:test');
-const assert = require('node:assert/strict');
-const { Queue } = require('../../../../lib/queue/queue');
+import assert from 'node:assert/strict';
+import { describe, it } from 'node:test';
+
+import { Queue } from '../../../../lib/queue/queue.js';
 
 describe('Queue (base class)', () => {
 	it('has a constructor that sets the capacity', () => {