chore: upgrade to Node v20.11, use new module features (#6661)

.circleci/config.yml

@@ -1,14 +1,14 @@
 version: 2.1
 
 orbs:
-  browser-tools: circleci/browser-tools@1.4.1
+  browser-tools: circleci/browser-tools@1.4.6
 
 aliases:
   - &docker-node-image
-    - image: cimg/node:20.10
+    - image: cimg/node:20.11
 
   - &docker-node-browsers-image
-    - image: cimg/node:20.10-browsers
+    - image: cimg/node:20.11-browsers
       environment:
         CHROME_BIN: "/usr/bin/google-chrome"
 

.nvmrc

@@ -1 +1 @@
-v20.10
+v20.11

package.json

@@ -40,7 +40,7 @@
         "@types/enzyme": "~3.10.18",
         "@types/enzyme-adapter-react-16": "~1.0.9",
         "@types/mocha": "~10.0.6",
-        "@types/node": "~20.10.7",
+        "@types/node": "~20.11.5",
         "@types/react": "~16.14.55",
         "@types/react-dom": "~16.9.24",
         "@types/react-transition-group": "~4.4.10",
@@ -70,7 +70,7 @@
         "@types/react": "16.14.55"
     },
     "engines": {
-        "node": ">=20.10"
+        "node": ">=20.11"
     },
     "repository": {
         "type": "git",

packages/icons/scripts/common.mjs

@@ -17,11 +17,10 @@
 
 import { writeFileSync } from "node:fs";
 import { join, resolve } from "node:path";
-import { fileURLToPath } from "node:url";
+import iconsMetadataJson from "../icons.json" with { type: "json" };
 
-export const scriptsDir = fileURLToPath(new URL(".", import.meta.url));
-export const iconResourcesDir = resolve(scriptsDir, "../../../resources/icons");
-export const generatedSrcDir = resolve(scriptsDir, "../src/generated");
+export const iconResourcesDir = resolve(import.meta.dirname, "../../../resources/icons");
+export const generatedSrcDir = resolve(import.meta.dirname, "../src/generated");
 export const NS = "bp5";
 /** @type { [16, 20] } */
 export const ICON_SIZES = [16, 20];
@@ -46,18 +45,14 @@ export const ICON_RASTER_SCALING_FACTOR = 20;
  * @property {number} codepoint - icon font codepoint
  */
 
-const { default: iconsMetadataJson } = await import("../icons.json", { assert: { type: "json" }});
-
 /** @type {IconMetadata[]} */
-export const iconsMetadata = iconsMetadataJson.sort(
-    (a, b) => a.iconName.localeCompare(b.iconName),
-);
+export const iconsMetadata = iconsMetadataJson.sort((a, b) => a.iconName.localeCompare(b.iconName));
 
 /**
- * Writes lines to given filename in GENERATED_SRC_DIR.
+ * Writes lines to given filename in the generated sources directory.
  *
  * @param {string} filename
- * @param {Array<string>} lines
+ * @param {string[]} lines
  */
 export function writeLinesToFile(filename, ...lines) {
     const outputPath = join(generatedSrcDir, filename);

packages/icons/scripts/generate-icon-components.mjs

@@ -27,7 +27,7 @@ import { mkdirSync, readFileSync, writeFileSync } from "node:fs";
 import { join, resolve } from "node:path";
 import { parse } from "svg-parser";
 
-import { generatedSrcDir, ICON_RASTER_SCALING_FACTOR, ICON_SIZES, scriptsDir } from "./common.mjs";
+import { generatedSrcDir, ICON_RASTER_SCALING_FACTOR, ICON_SIZES } from "./common.mjs";
 
 Handlebars.registerHelper("pascalCase", iconName => pascalCase(iconName));
 
@@ -43,9 +43,13 @@ Handlebars.registerHelper("pascalCase", iconName => pascalCase(iconName));
  *  - https://github.com/facebook/react/pull/26130
  *  - https://github.com/palantir/blueprint/issues/6591
  */
-const iconComponentTemplate = Handlebars.compile(readFileSync(resolve(scriptsDir, "iconComponent.tsx.hbs"), "utf8"));
-const componentsIndexTemplate = Handlebars.compile(readFileSync(resolve(scriptsDir, "componentsIndex.ts.hbs"), "utf8"));
-const indexTemplate = Handlebars.compile(readFileSync(resolve(scriptsDir, "index.ts.hbs"), "utf8"));
+const iconComponentTemplate = Handlebars.compile(
+    readFileSync(resolve(import.meta.dirname, "iconComponent.tsx.hbs"), "utf8"),
+);
+const componentsIndexTemplate = Handlebars.compile(
+    readFileSync(resolve(import.meta.dirname, "componentsIndex.ts.hbs"), "utf8"),
+);
+const indexTemplate = Handlebars.compile(readFileSync(resolve(import.meta.dirname, "index.ts.hbs"), "utf8"));
 
 /** @type { { 16: {[iconName: string]: string}; 20: {[iconName: string]: string} } } */
 const iconPaths = {

packages/icons/scripts/generate-icon-fonts.mjs

@@ -24,14 +24,7 @@ import { getLogger } from "@twbs/fantasticon/lib/cli/logger.js";
 import { mkdirSync } from "node:fs";
 import { join, resolve } from "node:path";
 
-import {
-    generatedSrcDir,
-    ICON_RASTER_SCALING_FACTOR,
-    iconResourcesDir,
-    iconsMetadata,
-    NS,
-    scriptsDir,
-} from "./common.mjs";
+import { generatedSrcDir, ICON_RASTER_SCALING_FACTOR, iconResourcesDir, iconsMetadata, NS } from "./common.mjs";
 
 const logger = getLogger();
 
@@ -71,8 +64,8 @@ async function generateFonts(size, prefix) {
         assetTypes: [OtherAssetType.CSS, OtherAssetType.SCSS, OtherAssetType.TS],
         templates: {
             // N.B. in icons-20, we don't generate CSS or the codepoints since we expect them to be the same as icons-16
-            scss: resolve(scriptsDir, `./icons-${size}.scss.hbs`),
-            css: resolve(scriptsDir, "./icons.css.hbs"),
+            scss: resolve(import.meta.dirname, `icons-${size}.scss.hbs`),
+            css: resolve(import.meta.dirname, "icons.css.hbs"),
         },
         pathOptions: {
             scss: join(generatedSrcDir, `${size}px`, "_icon-variables.scss"),

packages/karma-build-scripts/createKarmaConfig.mjs

@@ -11,6 +11,8 @@ import { cwd, env } from "node:process";
 
 import { karmaConfig as webpackConfig } from "@blueprintjs/webpack-build-scripts";
 
+// TODO: refactor to use `await import()`, requires breaking change to make this API async
+// see https://nodejs.org/docs/latest-v20.x/api/esm.html#import-attributes
 const require = createRequire(import.meta.url);
 const coreManifest = require("../core/package.json");
 

packages/karma-build-scripts/package.json

@@ -23,6 +23,14 @@
         "mocha": "^10.2.0",
         "webpack": "^5.89.0"
     },
+    "peerDependencies": {
+        "@blueprintjs/core": "workspace:^"
+    },
+    "peerDependenciesMeta": {
+        "@blueprintjs/core": {
+            "optional": true
+        }
+    },
     "repository": {
         "type": "git",
         "url": "git@github.com:palantir/blueprint.git",

packages/node-build-scripts/assert-package-layout.mjs

@@ -16,7 +16,7 @@ import { cwd, exit } from "node:process";
 // asserts that all main fields in package.json reference existing files
 const PACKAGE_MAIN_FIELDS = ["main", "module", "style", "types", "typings", "unpkg"];
 
-const { default: manifest } = await import(join(cwd(), "package.json"), { assert: { type: "json" }});
+const { default: manifest } = await import(join(cwd(), "package.json"), { with: { type: "json" } });
 
 for (const field of PACKAGE_MAIN_FIELDS.filter(f => manifest[f] !== undefined)) {
     if (!existsSync(resolve(cwd(), manifest[field]))) {

packages/node-build-scripts/package.json

@@ -55,7 +55,7 @@
         "jest": "^29.7.0"
     },
     "engines": {
-        "node": ">=18.13"
+        "node": ">=20.11"
     },
     "repository": {
         "type": "git",

packages/node-build-scripts/src/__tests__/cssVariables.test.ts

@@ -4,13 +4,11 @@
 
 import { describe, expect, test } from "@jest/globals";
 import { readFileSync } from "node:fs";
-import { dirname, join, resolve } from "node:path";
-import { fileURLToPath } from "node:url";
+import { join, resolve } from "node:path";
 
 import { generateLessVariables, generateScssVariables, getParsedVars } from "../cssVariables.mjs";
 
-const __dirname = dirname(fileURLToPath(import.meta.url));
-const FIXTURES_DIR = join(__dirname, "__fixtures__");
+const FIXTURES_DIR = join(import.meta.dirname, "__fixtures__");
 const INPUT_DIR = resolve(FIXTURES_DIR, "input");
 const EXPECTED_DIR = resolve(FIXTURES_DIR, "expected");
 

packages/node-build-scripts/src/utils.mjs

@@ -18,7 +18,6 @@
 
 import { basename, dirname, join, resolve } from "node:path";
 import { cwd, env } from "node:process";
-import { fileURLToPath } from "node:url";
 import { packageUpSync } from "package-up";
 
 /**
@@ -49,8 +48,7 @@ export function junitReportPath(dirName, fileName = basename(cwd())) {
  * @returns the root directory of this Blueprint monorepo
  */
 export function getRootDir() {
-    const thisDirName = dirname(fileURLToPath(import.meta.url));
-    const manifestFilePath = packageUpSync({ cwd: thisDirName });
+    const manifestFilePath = packageUpSync({ cwd: import.meta.dirname });
     if (manifestFilePath === undefined) {
         return undefined;
     }

packages/stylelint-plugin/test/no-prefix-literal.test.mjs

@@ -13,10 +13,11 @@
  * limitations under the License.
  */
 
+// @ts-check
+
 import { expect } from "chai";
-import fs from "node:fs";
-import path from "node:path";
-import { fileURLToPath } from "node:url";
+import { copyFileSync, mkdirSync, readFileSync, rmSync } from "node:fs";
+import { join } from "node:path";
 import stylelint from "stylelint";
 
 const config = {
@@ -172,23 +173,22 @@ describe("no-prefix-literal", () => {
     });
 
     describe("auto-fixer", () => {
-        const testDir = path.dirname(fileURLToPath(import.meta.url));
-        const tmpDir = path.join(testDir, "tmp");
+        const tmpDir = join(import.meta.dirname, "tmp");
 
         before(() => {
-            fs.mkdirSync(tmpDir);
+            mkdirSync(tmpDir);
         });
         after(() => {
-            fs.rmSync(tmpDir, { recursive: true, force: true });
+            rmSync(tmpDir, { recursive: true, force: true });
         });
 
         it("Replaces selector text properly", async () => {
             const fixtureFilename = "contains-bp3.scss";
             // path to the fixture we want to test
-            const fixturePath = path.join(testDir, "fixtures", "no-prefix-literal", fixtureFilename);
+            const fixturePath = join(import.meta.dirname, "fixtures", "no-prefix-literal", fixtureFilename);
             // path to a copy of the fixture which we can allow stylelint to mutate
-            const mutableFixturePath = path.join(tmpDir, fixtureFilename);
-            fs.copyFileSync(fixturePath, mutableFixturePath);
+            const mutableFixturePath = join(tmpDir, fixtureFilename);
+            copyFileSync(fixturePath, mutableFixturePath);
 
             const result = await stylelint.lint({
                 files: mutableFixturePath,
@@ -200,7 +200,7 @@ describe("no-prefix-literal", () => {
             const warnings = result.results[0].warnings;
             expect(warnings).lengthOf(0);
 
-            const fixedSourceContents = fs.readFileSync(mutableFixturePath, { encoding: "utf-8" });
+            const fixedSourceContents = readFileSync(mutableFixturePath, { encoding: "utf-8" });
             expect(fixedSourceContents).to.contain(`@use "@blueprintjs/core/lib/scss/variables.scss" as bp;`);
             expect(fixedSourceContents).to.contain(".#{bp.$ns}-tag {");
         });

packages/webpack-build-scripts/package.json

@@ -39,6 +39,9 @@
         "webpack-dev-server": "^4.15.1",
         "webpack-notifier": "^1.15.0"
     },
+    "engines": {
+        "node": ">=20.11"
+    },
     "repository": {
         "type": "git",
         "url": "git@github.com:palantir/blueprint.git",

packages/webpack-build-scripts/utils.mjs

@@ -2,18 +2,28 @@
  * Copyright 2017 Palantir Technologies, Inc. All rights reserved.
  */
 
+// @ts-check
+
 import { createRequire } from "node:module";
 import { join } from "node:path";
 import { cwd } from "node:process";
 
 /**
  * Read a package name from package.json.
+ *
+ * @returns {string | undefined}
  */
 export function getPackageName() {
+    // TODO: refactor to use `await import()`, requires breaking change to make this API async
+    // see https://nodejs.org/docs/latest-v20.x/api/esm.html#import-attributes
     const require = createRequire(import.meta.url);
+    /** @type {string | undefined} */
     let name;
     try {
         name = require(join(cwd(), "package.json")).name;
+        if (name === undefined) {
+            throw new Error("package.json has no name field");
+        }
         // strip NPM scope, if possible
         const nameSplit = name.split("/");
         if (nameSplit.length > 1) {

packages/webpack-build-scripts/webpack.config.base.mjs

@@ -21,9 +21,9 @@ import cssnanoPlugin from "cssnano";
 import ForkTsCheckerNotifierPlugin from "fork-ts-checker-notifier-webpack-plugin";
 import ForkTsCheckerPlugin from "fork-ts-checker-webpack-plugin";
 import MiniCssExtractPlugin from "mini-css-extract-plugin";
-import { createRequire } from "node:module";
 import { resolve } from "node:path";
 import { cwd, env } from "node:process";
+import { fileURLToPath } from "node:url";
 import TerserPlugin from "terser-webpack-plugin";
 import webpack from "webpack";
 import WebpackNotifierPlugin from "webpack-notifier";
@@ -32,10 +32,6 @@ import { sassNodeModulesLoadPaths } from "@blueprintjs/node-build-scripts";
 
 import { getPackageName } from "./utils.mjs";
 
-// import.meta.resolve is still experimental under a CLI flag, so we create a require fn instead
-// see https://nodejs.org/docs/latest-v18.x/api/esm.html#importmetaresolvespecifier-parent
-const require = createRequire(import.meta.url);
-
 // globals
 const IS_PRODUCTION = env.NODE_ENV === "production";
 const DEV_PORT = env.PORT || 9001;
@@ -90,16 +86,16 @@ const cssLoaders = [
         ? {
               loader: MiniCssExtractPlugin.loader,
           }
-        : require.resolve("style-loader"),
+        : fileURLToPath(import.meta.resolve("style-loader")),
     {
-        loader: require.resolve("css-loader"),
+        loader: fileURLToPath(import.meta.resolve("css-loader")),
         options: {
             // necessary to minify @import-ed files using cssnano
             importLoaders: 1,
         },
     },
     {
-        loader: require.resolve("postcss-loader"),
+        loader: fileURLToPath(import.meta.resolve("postcss-loader")),
         options: {
             postcssOptions: {
                 plugins: [autoprefixer, cssnanoPlugin({ preset: "default" })],
@@ -112,7 +108,7 @@ const cssLoaders = [
 const scssLoaders = [
     ...cssLoaders,
     {
-        loader: require.resolve("sass-loader"),
+        loader: fileURLToPath(import.meta.resolve("sass-loader")),
         options: {
             sassOptions: {
                 includePaths: sassNodeModulesLoadPaths,
@@ -121,6 +117,9 @@ const scssLoaders = [
     },
 ];
 
+/**
+ * @type {webpack.Configuration & { devServer: object }}
+ */
 export default {
     // to automatically find tsconfig.json
     context: cwd(),
@@ -158,11 +157,11 @@ export default {
         rules: [
             {
                 test: /\.js$/,
-                use: require.resolve("source-map-loader"),
+                use: fileURLToPath(import.meta.resolve("source-map-loader")),
             },
             {
                 test: /\.tsx?$/,
-                loader: require.resolve("swc-loader"),
+                loader: fileURLToPath(import.meta.resolve("swc-loader")),
                 exclude: /(node_modules)/,
                 options: {
                     jsc: {