Convert remaining CommonJS Node scripts to modules and use modules by…

… default

This improves the overall consistency of the JS environment and simplifies
config for linting etc. Karma is the exception as module scripts are not
supported for its config.

.eslintrc

@@ -49,7 +49,6 @@
     {
       "files": ["*.mjs"],
       "env": { "node": true },
-      "parserOptions": { "sourceType": "module" }
     }
   ]
 }

dev-server/.eslintrc

@@ -2,9 +2,6 @@
   "env": {
     "node": true,
   },
-  "parserOptions": {
-    "sourceType": "script"
-  },
   "rules": {
     "@typescript-eslint/no-var-requires": "off",
   }

dev-server/create-server.js

@@ -1,8 +1,6 @@
-'use strict';
-
-const { existsSync, readFileSync } = require('fs');
-const https = require('https');
-const http = require('http');
+import { existsSync, readFileSync } from 'node:fs';
+import * as http from 'node:http';
+import * as https from 'node:https';
 
 const SSL_KEYFILE = '.tlskey.pem';
 const SSL_CERTFILE = '.tlscert.pem';
@@ -12,7 +10,7 @@ const SSL_CERTFILE = '.tlscert.pem';
  *
  * @type {boolean}
  */
-const useSsl = existsSync(SSL_KEYFILE) && existsSync(SSL_CERTFILE);
+export const useSsl = existsSync(SSL_KEYFILE) && existsSync(SSL_CERTFILE);
 
 /**
  * Create an HTTP(S) server to serve client assets in development.
@@ -22,7 +20,7 @@ const useSsl = existsSync(SSL_KEYFILE) && existsSync(SSL_CERTFILE);
  *
  * @param {Function} requestListener
  */
-function createServer(requestListener) {
+export function createServer(requestListener) {
   let server;
   if (useSsl) {
     const options = {
@@ -35,8 +33,3 @@ function createServer(requestListener) {
   }
   return server;
 }
-
-module.exports = {
-  createServer,
-  useSsl,
-};

dev-server/serve-dev.js

@@ -1,16 +1,15 @@
-'use strict';
 /* eslint-env node */
+import express from 'express';
+import log from 'fancy-log';
+import Mustache from 'mustache';
+import mustacheExpress from 'mustache-express';
+import * as fs from 'node:fs';
+import * as path from 'node:path';
+import { fileURLToPath } from 'node:url';
 
-const fs = require('fs');
-const path = require('path');
-
-const express = require('express');
-const log = require('fancy-log');
-const mustacheExpress = require('mustache-express');
-const Mustache = require('mustache');
-
-const { createServer, useSsl } = require('./create-server');
+import { createServer, useSsl } from './create-server.js';
 
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const HTML_PATH = `${__dirname}/documents/html/`;
 const PDF_PATH = `${__dirname}/documents/pdf/`;
 const TEMPLATE_PATH = `${__dirname}/templates/`;
@@ -95,7 +94,7 @@ function templateContext(config) {
  * @param {number} port - The port that the test server should listen on.
  * @param {Config} config - Config for the server
  */
-function serveDev(port, config) {
+export function serveDev(port, config) {
   const app = express();
 
   app.engine('mustache', mustacheExpress());
@@ -197,5 +196,3 @@ function serveDev(port, config) {
     }
   });
 }
-
-module.exports = serveDev;

dev-server/serve-package.js

@@ -1,12 +1,13 @@
-'use strict';
+import express from 'express';
+import log from 'fancy-log';
+import { readFileSync } from 'node:fs';
+import * as path from 'node:path';
+import { fileURLToPath } from 'node:url';
 
-const { readFileSync } = require('fs');
+import { createServer, useSsl } from './create-server.js';
 
-const express = require('express');
-const log = require('fancy-log');
-
-const { createServer, useSsl } = require('./create-server');
-const { version } = require('../package.json');
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const { version } = JSON.parse(readFileSync(`${__dirname}/../package.json`));
 
 /**
  * An express server which serves the contents of the package.
@@ -19,7 +20,7 @@ const { version } = require('../package.json');
  * returned by the service's '/embed.js' route and included in the '/app.html'
  * app.
  */
-function servePackage(port) {
+export function servePackage(port) {
   const app = express();
 
   // Enable CORS for assets so that cross-origin font loading works.
@@ -47,5 +48,3 @@ function servePackage(port) {
     log(`Package served at ${scheme}://localhost:${port}/hypothesis`);
   });
 }
-
-module.exports = servePackage;

gulpfile.mjs

@@ -8,8 +8,8 @@ import {
 import changed from 'gulp-changed';
 import gulp from 'gulp';
 
-import serveDev from './dev-server/serve-dev.js';
-import servePackage from './dev-server/serve-package.js';
+import { serveDev } from './dev-server/serve-dev.js';
+import { servePackage } from './dev-server/serve-package.js';
 import tailwindConfig from './tailwind.config.mjs';
 import annotatorTailwindConfig from './tailwind-annotator.config.mjs';
 import sidebarTailwindConfig from './tailwind-sidebar.config.mjs';
@@ -154,7 +154,7 @@ gulp.task(
   gulp.parallel('build-css', () =>
     runTests({
       bootstrapFile: 'src/sidebar/test/bootstrap.js',
-      karmaConfig: 'src/karma.config.js',
+      karmaConfig: 'src/karma.config.cjs',
       rollupConfig: 'rollup-tests.config.mjs',
       testsPattern: 'src/**/*-test.js',
     })

package.json

@@ -6,6 +6,7 @@
   "homepage": "https://hypothes.is",
   "bugs": "https://github.com/hypothesis/client/issues",
   "repository": "hypothesis/client",
+  "type": "module",
   "devDependencies": {
     "@aws-sdk/client-s3": "^3.504.0",
     "@babel/core": "^7.1.6",

scripts/.eslintrc

@@ -2,18 +2,9 @@
   "env": {
     "node": true
   },
-  "parserOptions": {
-    "sourceType": "script"
-  },
   "rules": {
     "@typescript-eslint/no-var-requires": "off",
     "no-console": "off",
     "react-hooks/rules-of-hooks": "off"
-  },
-  "overrides": [
-    {
-      "files": ["*.mjs"],
-      "parserOptions": { "sourceType": "module" }
-    }
-  ]
+  }
 }

scripts/create-github-release.js

@@ -1,18 +1,20 @@
 #!/usr/bin/env node
 
-'use strict';
-
 /**
  * Creates a GitHub release for the repository.
  *
  * This should be run just after a released is tagged with the tag name
  * `v<VERSION>` where <VERSION> is the `version` field in package.json.
  */
+import { Octokit } from '@octokit/rest';
+import * as fs from 'node:fs';
+import * as path from 'node:path';
+import { fileURLToPath } from 'node:url';
 
-const { Octokit } = require('@octokit/rest');
+import { changelistSinceTag } from './generate-change-list.js';
 
-const pkg = require('../package.json');
-const { changelistSinceTag } = require('./generate-change-list');
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const pkg = JSON.parse(fs.readFileSync(`${__dirname}/../package.json`));
 
 async function createGitHubRelease({ previousVersion }) {
   // See https://github.com/docker/docker/issues/679

scripts/deploy-to-s3.js

@@ -1,18 +1,14 @@
 #!/usr/bin/env node
-
-'use strict';
-
-const fs = require('fs');
-const { extname } = require('path');
-
-const { program } = require('commander');
-const Arborist = require('@npmcli/arborist');
-const packlist = require('npm-packlist');
-const {
+import {
   S3Client,
   PutObjectCommand,
   GetBucketLocationCommand,
-} = require('@aws-sdk/client-s3');
+} from '@aws-sdk/client-s3';
+import Arborist from '@npmcli/arborist';
+import { program } from 'commander';
+import * as fs from 'node:fs';
+import { extname } from 'node:path';
+import packlist from 'npm-packlist';
 
 /**
  * File extension / mime type associations for file types we actually use.
@@ -114,7 +110,9 @@ async function uploadPackageToS3(bucket, options) {
   const files = await packlist(tree);
 
   // Get name, version and main module of the package.
-  const packageJson = require(`${process.cwd()}/package.json`);
+  const packageJson = JSON.parse(
+    fs.readFileSync(`${process.cwd()}/package.json`),
+  );
   const packageName = packageJson.name;
   const version = packageJson.version;
   const entryPoint = packageJson.main;

scripts/generate-change-list.js

@@ -1,8 +1,5 @@
-'use strict';
-
-const { execSync } = require('child_process');
-
-const wrapText = require('wrap-text');
+import { execSync } from 'node:child_process';
+import wrapText from 'wrap-text';
 
 /**
  * Return a `Date` indicating when a Git tag was created.
@@ -127,16 +124,19 @@ function formatChangeList(pullRequests) {
  *
  * Tag names are usually `vX.Y.Z` where `X.Y.Z` is the package version.
  */
-async function changelistSinceTag(octokit, tag = getHighestVersionTag()) {
+export async function changelistSinceTag(
+  octokit,
+  tag = getHighestVersionTag(),
+) {
   const org = 'hypothesis';
   const repo = 'client';
 
   const mergedPRs = await getPRsMergedSince(octokit, org, repo, tag);
   return formatChangeList(mergedPRs);
 }
 
-if (require.main === module) {
-  const { Octokit } = require('@octokit/rest');
+async function main() {
+  const { Octokit } = await import('@octokit/rest');
   const octokit = new Octokit({ auth: process.env.GITHUB_TOKEN });
   const tag = process.argv[2] || getHighestVersionTag();
 
@@ -149,6 +149,6 @@ if (require.main === module) {
     });
 }
 
-module.exports = {
-  changelistSinceTag,
-};
+if (import.meta.url.endsWith(process.argv[1])) {
+  main();
+}