Overhaul build process

.circleci/config.yml

@@ -2,26 +2,19 @@ version: 2
 jobs:
   build:
     docker:
-      # specify the version you desire here
       - image: cimg/node:lts
     working_directory: ~/repo
 
     steps:
       - checkout
-
-      # Download and cache dependencies
       - restore_cache:
           keys:
             - v1-dependencies-{{ checksum "package.json" }}
-            # fallback to using the latest cache if no exact match is found
             - v1-dependencies-
-
       - run: npm install
-
       - save_cache:
           paths:
             - node_modules
           key: v1-dependencies-{{ checksum "package.json" }}
-
-      # run tests!
+      - run: npm run lint
       - run: npm run test

package.json

@@ -16,35 +16,21 @@
   "license": "MIT",
   "author": "Derrick Reimer",
   "files": [
-    "dist/fathom-client.cjs.js",
-    "dist/fathom-client.esm.js",
-    "dist/index.d.ts"
+    "dist",
+    "types"
   ],
-  "main": "dist/fathom-client.cjs.js",
+  "main": "dist/fathom-client.js",
   "module": "dist/fathom-client.esm.js",
-  "types": "dist/index.d.ts",
+  "types": "types/index.d.ts",
   "scripts": {
-    "build": "npm run build:types && npm run build:js",
-    "build:js": "rollup -c",
+    "build": "npm run build:types && npm run build:cjs && npm run build:esm",
+    "build:cjs": "esbuild src/index.ts --bundle --format=cjs --outfile=dist/fathom-script.js",
+    "build:esm": "esbuild src/index.ts --bundle --format=esm --outfile=dist/fathom-script.esm.js",
     "build:types": "tsc --emitDeclarationOnly",
+    "lint": "npx tsc --noEmit && npx prettier src -c",
     "prepare": "npm run build",
-    "release": "np",
-    "test": "jest",
-    "type-check": "tsc --noEmit",
-    "type-check:watch": "npm run type-check -- --watch"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
-  "lint-staged": {
-    "*.{js,css,json,md}": [
-      "npx prettier --write"
-    ],
-    "package.json": [
-      "npx sort-package-json"
-    ]
+    "test": "npm run build && jest",
+    "release": "np"
   },
   "jest": {
     "resetMocks": false,
@@ -53,22 +39,13 @@
     ]
   },
   "devDependencies": {
-    "@babel/core": "^7.6.4",
-    "@babel/preset-env": "^7.6.3",
-    "@babel/preset-typescript": "^7.7.7",
-    "babel-jest": "^27.4",
-    "husky": "^3.0.9",
-    "jest": "^27.4",
+    "esbuild": "^0.21.5",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "jest-localstorage-mock": "^2.4.21",
-    "lint-staged": "^12.1.7",
-    "np": "^8.0.4",
-    "prettier": "^1.18.2",
-    "rollup": "^1.17.0",
-    "rollup-plugin-babel": "^4.3.3",
-    "rollup-plugin-commonjs": "^10.1.0",
-    "rollup-plugin-node-resolve": "^5.2.0",
-    "sort-package-json": "^1.22.1",
-    "typescript": "^3.7.4"
+    "np": "^10.0.5",
+    "prettier": "^3.3.2",
+    "typescript": "^5.4.5"
   },
   "np": {
     "yarn": false

src/index.ts

@@ -72,7 +72,7 @@ const flushQueue = (): void => {
   window.__fathomIsLoading = false;
   window.__fathomClientQueue = window.__fathomClientQueue || [];
 
-  window.__fathomClientQueue.forEach(command => {
+  window.__fathomClientQueue.forEach((command) => {
     switch (command.type) {
       case 'trackPageview':
         trackPageview(command.opts);
@@ -112,10 +112,10 @@ const flushQueue = (): void => {
 const checkDomainsAndWarn = (domains: string[]): void => {
   const regex = /(https?)(?=:|\/|$)/; // matches http or https followed by
   // either a : or /
-  domains.forEach(domain => {
+  domains.forEach((domain) => {
     if (regex.exec(domain) !== null)
       console.warn(
-        `The include domain ${domain} might fail to work as intended as it begins with a transfer protocol (http://, https://). Consider removing the protocol portion of the string.`
+        `The include domain ${domain} might fail to work as intended as it begins with a transfer protocol (http://, https://). Consider removing the protocol portion of the string.`,
       );
   });
 };
@@ -157,14 +157,14 @@ export const load = (siteId: string, opts?: LoadOptions): void => {
       checkDomainsAndWarn(opts.includedDomains);
       tracker.setAttribute(
         'data-included-domains',
-        opts.includedDomains.join(',')
+        opts.includedDomains.join(','),
       );
     }
     if (opts.excludedDomains) {
       checkDomainsAndWarn(opts.excludedDomains);
       tracker.setAttribute(
         'data-excluded-domains',
-        opts.excludedDomains.join(',')
+        opts.excludedDomains.join(','),
       );
     }
     if (opts.spa) tracker.setAttribute('data-spa', opts.spa);
@@ -254,7 +254,7 @@ export const enableTrackingForMe = (): void => {
  */
 export const isTrackingEnabled = (): boolean => {
   const preferenceStorage: string | null = localStorage.getItem(
-    'blockFathomTracking'
+    'blockFathomTracking',
   );
   return preferenceStorage !== null ? preferenceStorage !== 'true' : true;
 };

test/index.test.js

@@ -2,13 +2,16 @@
  * @jest-environment jsdom
  */
 
-import * as Fathom from '../src';
+const Fathom = require('../dist/fathom-script');
 
 const fathomStub = () => {
   return {
+    setSite: jest.fn(),
     trackPageview: jest.fn(),
     trackGoal: jest.fn(),
-    trackEvent: jest.fn()
+    trackEvent: jest.fn(),
+    blockTrackingForMe: jest.fn(),
+    enableTrackingForMe: jest.fn()
   };
 };
 
@@ -28,21 +31,21 @@ describe('load', () => {
   it('injects the Fathom script', () => {
     const firstScript = document.createElement('script');
     document.body.appendChild(firstScript);
-    Fathom.load();
+    Fathom.load('id');
 
     const fathomScript = document.getElementById('fathom-script');
-    expect(fathomScript.src).toBe('https://cdn.usefathom.com/script.js');
+    expect(fathomScript?.src).toBe('https://cdn.usefathom.com/script.js');
   });
 
   it('skips injecting the script if already loaded or currently loading', () => {
     // simulate the script already being loaded
-    Fathom.load();
+    Fathom.load('id');
     // ↓
     window.fathom = fathomStub();
 
     const firstScript = document.createElement('script');
     document.body.appendChild(firstScript);
-    Fathom.load();
+    Fathom.load('id');
 
     const fathomScripts = Array.from(
       document.getElementsByTagName('script')
@@ -54,7 +57,7 @@ describe('load', () => {
 
     // simulate 'onload' firing
     const fathomScript = document.getElementById('fathom-script');
-    fathomScript.dispatchEvent(new Event('load'));
+    fathomScript?.dispatchEvent(new Event('load'));
 
     expect(window.__fathomIsLoading).toBe(false);
   });
@@ -69,12 +72,12 @@ describe('load', () => {
     });
 
     const fathomScript = document.getElementById('fathom-script');
-    expect(fathomScript.src).toBe('https://bobheadxi.dev/fathom.js');
-    expect(fathomScript.getAttribute('data-included-domains')).toBe(
+    expect(fathomScript?.src).toBe('https://bobheadxi.dev/fathom.js');
+    expect(fathomScript?.getAttribute('data-included-domains')).toBe(
       'bobheadxi.dev'
     );
-    expect(fathomScript.getAttribute('data-auto')).toBe('false');
-    expect(fathomScript.getAttribute('data-honor-dnt')).toBe(null);
+    expect(fathomScript?.getAttribute('data-auto')).toBe('false');
+    expect(fathomScript?.getAttribute('data-honor-dnt')).toBe(null);
   });
 
   it('runs the queue after load', () => {
@@ -83,13 +86,13 @@ describe('load', () => {
     const firstScript = document.createElement('script');
     document.body.appendChild(firstScript);
 
-    Fathom.load();
+    Fathom.load('id');
     // ↓
     window.fathom = fathomStub();
 
     // simulate 'onload' firing
     const fathomScript = document.getElementById('fathom-script');
-    fathomScript.dispatchEvent(new Event('load'));
+    fathomScript?.dispatchEvent(new Event('load'));
 
     expect(window.fathom.trackPageview.mock.calls.length).toBe(1);
   });

tsconfig.json

@@ -1,12 +1,13 @@
 {
   "compilerOptions": {
-    "target": "ES6",
+    "lib": ["DOM", "DOM.Iterable", "ES2020"],
+    "target": "ES2020",
     "declaration": true,
-    "declarationDir": "dist",
+    "declarationDir": "types",
     "strict": true,
     "isolatedModules": true,
     "strictNullChecks": false,
-    "moduleResolution": "node"
+    "moduleResolution": "Node"
   },
   "include": ["src/**/*"],
   "exclude": ["node_modules", "dist"]