Convert to consistently use JS modules (Stirling-Tools#6854)

# Description of Changes
Modernises the codebase and gets rid of warnings where Node complains
that it doesn't know what type of JS it's supposed to be reading on
`.js` files. We might as well update everything to just use correct JS
syntax instead of keeping with some files having Node-specific imports.

Author: jbrunton96

frontend/editor/postcss.config.js

@@ -1,3 +1,6 @@
-module.exports = {
-  plugins: [require("@tailwindcss/postcss"), require("autoprefixer")],
+import tailwindcssPostcss from "@tailwindcss/postcss";
+import autoprefixer from "autoprefixer";
+
+export default {
+  plugins: [tailwindcssPostcss, autoprefixer],
 };

frontend/editor/scripts/generate-icons.js

@@ -1,8 +1,8 @@
 #!/usr/bin/env node
 
-const { icons } = require("@iconify-json/material-symbols");
-const fs = require("fs");
-const path = require("path");
+import { icons } from "@iconify-json/material-symbols";
+import fs from "node:fs";
+import path from "node:path";
 
 // Check for verbose flag
 const isVerbose =
@@ -19,7 +19,7 @@ const debug = (message) => {
 // Function to scan codebase for LocalIcon usage
 function scanForUsedIcons() {
   const usedIcons = new Set();
-  const srcDir = path.join(__dirname, "..", "src");
+  const srcDir = path.join(import.meta.dirname, "..", "src");
 
   info("🔍 Scanning codebase for LocalIcon usage...");
 
@@ -140,7 +140,7 @@ async function main() {
 
   // Check if we need to regenerate (compare with existing)
   const outputPath = path.join(
-    __dirname,
+    import.meta.dirname,
     "..",
     "src",
     "assets",
@@ -200,7 +200,7 @@ async function main() {
   }
 
   // Create output directory
-  const outputDir = path.join(__dirname, "..", "src", "assets");
+  const outputDir = path.join(import.meta.dirname, "..", "src", "assets");
   if (!fs.existsSync(outputDir)) {
     fs.mkdirSync(outputDir, { recursive: true });
   }

frontend/editor/scripts/generate-licenses.js

@@ -1,36 +1,29 @@
 #!/usr/bin/env node
 
-const { execSync } = require("node:child_process");
-const {
-  existsSync,
-  mkdirSync,
-  writeFileSync,
-  readFileSync,
-} = require("node:fs");
-const path = require("node:path");
-
-const { argv } = require("node:process");
+import { execSync } from "node:child_process";
+import { existsSync, mkdirSync, writeFileSync, readFileSync } from "node:fs";
+import path from "node:path";
+import { argv } from "node:process";
+
 const inputIdx = argv.indexOf("--input");
 const INPUT_FILE = inputIdx > -1 ? argv[inputIdx + 1] : null;
 const POSTPROCESS_ONLY = !!INPUT_FILE;
 
-// __dirname is available in CommonJS by default
-
 /**
  * Generate 3rd party licenses for frontend dependencies
  * This script creates a JSON file similar to the Java backend's 3rdPartyLicenses.json
  */
 
 const OUTPUT_FILE = path.join(
-  __dirname,
+  import.meta.dirname,
   "..",
   "src",
   "assets",
   "3rdPartyLicenses.json",
 );
 // package.json lives at the workspace root (frontend/), not editor/. The
 // script is at frontend/editor/scripts/, so walk up two levels.
-const PACKAGE_JSON = path.join(__dirname, "..", "..", "package.json");
+const PACKAGE_JSON = path.join(import.meta.dirname, "..", "..", "package.json");
 
 // Ensure the output directory exists
 const outputDir = path.dirname(OUTPUT_FILE);
@@ -192,7 +185,7 @@ try {
 
     // Write license warnings to a separate file for CI/CD
     const warningsFile = path.join(
-      __dirname,
+      import.meta.dirname,
       "..",
       "src",
       "assets",

frontend/editor/scripts/generate-og-image.mjs

@@ -16,11 +16,10 @@
 /* global document, getComputedStyle */ // used inside page.evaluate (browser context)
 
 import fs from "node:fs/promises";
+import { readFileSync } from "node:fs";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
-import { createRequire } from "node:module";
 
-const require = createRequire(import.meta.url);
 const HERE = path.dirname(fileURLToPath(import.meta.url));
 const ROOT = path.resolve(HERE, "..");
 
@@ -69,11 +68,14 @@ export const THEME = {
 };
 
 // ---- icon resolution (material-symbols via iconify) ------------------------
-function resolveIcon(icon) {
+async function resolveIcon(icon) {
   if (!icon) return "";
   if (icon.trim().startsWith("<svg")) return icon; // raw svg passed through
-  const { getIconData, iconToSVG } = require("@iconify/utils");
-  const set = require("@iconify-json/material-symbols/icons.json");
+  const { getIconData, iconToSVG } = await import("@iconify/utils");
+  const { default: set } = await import(
+    "@iconify-json/material-symbols/icons.json",
+    { with: { type: "json" } }
+  );
   const data = getIconData(set, icon);
   if (!data) throw new Error(`icon not found in material-symbols: "${icon}"`);
   const { attributes, body } = iconToSVG(data);
@@ -148,7 +150,7 @@ const escapeHtml = (s) =>
 let _browser = null;
 async function getBrowser() {
   if (_browser) return _browser;
-  const puppeteer = require("puppeteer");
+  const { default: puppeteer } = await import("puppeteer");
   _browser = await puppeteer.launch({
     headless: "new",
     args: ["--no-sandbox"],
@@ -163,7 +165,7 @@ export async function renderOgCard({
   outFile,
   theme = THEME,
 }) {
-  const iconSvg = resolveIcon(icon);
+  const iconSvg = await resolveIcon(icon);
   const html = await buildHtml({ name, description, iconSvg, theme });
   const browser = await getBrowser();
   const page = await browser.newPage();
@@ -230,7 +232,7 @@ const kebab = (id) => id.replace(/([A-Z])/g, "-$1").toLowerCase();
 
 // English name/description live next to each tool as the `t(key, fallback)` default.
 function readRegistryStrings() {
-  const src = require("node:fs").readFileSync(
+  const src = readFileSync(
     path.join(ROOT, "src/core/data/useTranslatedToolRegistry.tsx"),
     "utf8",
   );
@@ -268,7 +270,7 @@ export async function generateMissing(theme = THEME) {
 // Each tool's app icon lives as `icon="<material-symbol>"` just before its
 // `name: t("home.<id>.title", …)`. Pair each title with the closest preceding icon.
 function readRegistryIcons() {
-  const src = require("node:fs").readFileSync(
+  const src = readFileSync(
     path.join(ROOT, "src/core/data/useTranslatedToolRegistry.tsx"),
     "utf8",
   );
@@ -288,25 +290,26 @@ function readRegistryIcons() {
   return byId;
 }
 
-function iconExists(name) {
+async function iconExists(name) {
   if (!name) return false;
   try {
-    const { getIconData } = require("@iconify/utils");
-    return !!getIconData(
-      require("@iconify-json/material-symbols/icons.json"),
-      name,
+    const { getIconData } = await import("@iconify/utils");
+    const { default: set } = await import(
+      "@iconify-json/material-symbols/icons.json",
+      { with: { type: "json" } }
     );
+    return !!getIconData(set, name);
   } catch {
     return false;
   }
 }
 
 // First candidate that resolves; also tries dropping a "-rounded" suffix.
-function firstResolvableIcon(candidates) {
+async function firstResolvableIcon(candidates) {
   for (const c of candidates) {
-    if (iconExists(c)) return c;
+    if (await iconExists(c)) return c;
     const alt = c && c.replace(/-rounded$/, "");
-    if (alt && alt !== c && iconExists(alt)) return alt;
+    if (alt && alt !== c && (await iconExists(alt))) return alt;
   }
   return "description-outline";
 }
@@ -324,14 +327,14 @@ export async function generateAll(theme = THEME) {
   const { titles, descs } = readRegistryStrings();
   const regIcons = readRegistryIcons();
   const ogMap = JSON.parse(
-    require("node:fs").readFileSync(
-      path.join(ROOT, "src/core/data/ogImageMap.json"),
-      "utf8",
-    ),
+    readFileSync(path.join(ROOT, "src/core/data/ogImageMap.json"), "utf8"),
   );
   const results = [];
   for (const [id, basename] of Object.entries(ogMap)) {
-    const icon = firstResolvableIcon([regIcons[id], MISSING_TOOL_ICONS[id]]);
+    const icon = await firstResolvableIcon([
+      regIcons[id],
+      MISSING_TOOL_ICONS[id],
+    ]);
     await renderOgCard({
       name: titles[id] || humanizeId(id),
       description: descs[id] || "",

frontend/editor/src/core/tests/live/encrypted-unlock-then-tool.spec.ts

@@ -7,7 +7,7 @@ import {
 } from "@app/tests/helpers/ui-helpers";
 import path from "path";
 
-const FIXTURES_DIR = path.join(__dirname, "../test-fixtures");
+const FIXTURES_DIR = path.join(import.meta.dirname, "../test-fixtures");
 const ENCRYPTED_PDF = path.join(FIXTURES_DIR, "encrypted.pdf");
 const SAMPLE_PDF = path.join(FIXTURES_DIR, "sample.pdf");
 

frontend/editor/src/core/tests/stubbed/add-page-numbers-tool.spec.ts

@@ -2,7 +2,10 @@ import { test, expect } from "@app/tests/helpers/stub-test-base";
 import { uploadFiles } from "@app/tests/helpers/ui-helpers";
 import path from "path";
 
-const SAMPLE_PDF = path.join(__dirname, "../test-fixtures/sample.pdf");
+const SAMPLE_PDF = path.join(
+  import.meta.dirname,
+  "../test-fixtures/sample.pdf",
+);
 
 /**
  * Add Page Numbers walks the user through a multi-step config: position

frontend/editor/src/core/tests/stubbed/add-stamp-tool.spec.ts

@@ -2,7 +2,10 @@ import { test, expect } from "@app/tests/helpers/stub-test-base";
 import { uploadFiles } from "@app/tests/helpers/ui-helpers";
 import path from "path";
 
-const SAMPLE_PDF = path.join(__dirname, "../test-fixtures/sample.pdf");
+const SAMPLE_PDF = path.join(
+  import.meta.dirname,
+  "../test-fixtures/sample.pdf",
+);
 
 /**
  * AddStamp loads, accepts a PDF upload, and remains interactive.

frontend/editor/src/core/tests/stubbed/cert-sign-wizard.spec.ts

@@ -3,7 +3,7 @@ import { uploadFiles } from "@app/tests/helpers/ui-helpers";
 import type { Page, Route } from "@playwright/test";
 import path from "path";
 
-const FIXTURES_DIR = path.join(__dirname, "../test-fixtures");
+const FIXTURES_DIR = path.join(import.meta.dirname, "../test-fixtures");
 const SAMPLE_PDF = path.join(FIXTURES_DIR, "sample.pdf");
 
 // app-config the desktop bundle would return: hardware signing is offered only there.

frontend/editor/src/core/tests/stubbed/certificate-validation.spec.ts

@@ -5,7 +5,7 @@ import { suppressNativeFilePicker } from "@app/tests/helpers/ui-helpers";
 // ---------------------------------------------------------------------------
 // Test fixtures — pre-generated keystores in test-fixtures/certs/
 // ---------------------------------------------------------------------------
-const CERTS_DIR = path.join(__dirname, "../test-fixtures/certs");
+const CERTS_DIR = path.join(import.meta.dirname, "../test-fixtures/certs");
 const VALID_P12 = path.join(CERTS_DIR, "valid-test.p12");
 const EXPIRED_P12 = path.join(CERTS_DIR, "expired-test.p12");
 const NOT_YET_VALID_P12 = path.join(CERTS_DIR, "not-yet-valid-test.p12");

frontend/editor/src/core/tests/stubbed/comments-sidebar-order.spec.ts

@@ -2,7 +2,7 @@ import { test, expect } from "@app/tests/helpers/stub-test-base";
 import path from "path";
 
 const ANNOTATED_PDF = path.join(
-  __dirname,
+  import.meta.dirname,
   "../test-fixtures/annotations_out_of_order.pdf",
 );