chore: upgrade node to 21 (#11440)

.github/workflows/changeset.yml

@@ -19,7 +19,7 @@ jobs:
       - uses: pnpm/action-setup@v2
       - uses: actions/setup-node@v3
         with:
-          node-version: "20"
+          node-version: "21"
           cache: "pnpm"
       - name: Authenticate NPM
         uses: DimensionDev/github-token-action@latest

.github/workflows/compile.yml

@@ -38,7 +38,7 @@ jobs:
       - uses: actions/setup-node@v3
         with:
           # Keep consistent between node version in the .node-version file and below.
-          node-version: "20"
+          node-version: "21"
           cache: 'pnpm'
       - name: Authenticate NPM
         uses: DimensionDev/github-token-action@latest

.github/workflows/linters.yml

@@ -29,7 +29,7 @@ jobs:
       - uses: pnpm/action-setup@v2
       - uses: actions/setup-node@v3
         with:
-          node-version: "20"
+          node-version: "21"
           cache: "pnpm"
       - name: Authenticate NPM
         uses: DimensionDev/github-token-action@latest
@@ -89,7 +89,7 @@ jobs:
       - uses: pnpm/action-setup@v2
       - uses: actions/setup-node@v3
         with:
-          node-version: "20"
+          node-version: "21"
           cache: "pnpm"
       - name: Authenticate NPM
         uses: DimensionDev/github-token-action@latest
@@ -106,7 +106,7 @@ jobs:
       - uses: pnpm/action-setup@v2
       - uses: actions/setup-node@v3
         with:
-          node-version: "20"
+          node-version: "21"
           cache: "pnpm"
       - name: Authenticate NPM
         uses: DimensionDev/github-token-action@latest
@@ -129,7 +129,7 @@ jobs:
       - uses: pnpm/[email protected]
       - uses: actions/setup-node@v3
         with:
-          node-version: "20"
+          node-version: "21"
           cache: "pnpm"
       - name: Authenticate NPM
         uses: DimensionDev/github-token-action@latest

.github/workflows/spell-checking.yml

@@ -20,7 +20,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v3
         with:
-          node-version: "20"
+          node-version: "21"
       - name: Check Spell
         if: ${{ github.event.pull_request }}
         run: |

.node-version

@@ -1 +1 @@
-v20.4.0
+v21.2.0

.vscode/settings.json

@@ -2,6 +2,8 @@
     "eslint.experimental.useFlatConfig": true,
     "typescript.tsdk": "node_modules/typescript/lib",
     "typescript.preferences.importModuleSpecifierEnding": "js",
+    "js/ts.implicitProjectConfig.module": "NodeNext",
+    "js/ts.implicitProjectConfig.target": "ESNext",
     "editor.formatOnSave": true,
     "editor.formatOnSaveMode": "file",
     "explorer.fileNesting.patterns": {

eslint.config.js

@@ -559,7 +559,7 @@ export default tseslint.config(
                 ecmaVersion: 'latest',
                 EXPERIMENTAL_useProjectService: true,
                 // projectService: true,
-                tsconfigRootDir: join(fileURLToPath(import.meta.url), '..'),
+                tsconfigRootDir: import.meta.dirname,
                 warnOnUnsupportedTypeScriptVersion: false,
                 allowAutomaticSingleRunInference: true,
             },

package.json

@@ -3,7 +3,7 @@
   "type": "module",
   "packageManager": "[email protected]",
   "engines": {
-    "node": ">=18.7.0",
+    "node": ">=21.2.0",
     "pnpm": ">=8.6.0",
     "yarn": ">=999.0.0",
     "npm": ">=999.0.0"

packages/injected-script/rollup.config.js

@@ -1,11 +1,8 @@
-import { createRequire } from 'node:module'
 import nodePolyfills from 'rollup-plugin-polyfill-node'
 import resolve from '@rollup/plugin-node-resolve'
 import commonjs from '@rollup/plugin-commonjs'
 import replace from '@rollup/plugin-replace'
-
-const require = createRequire(import.meta.url)
-const { swc } = require('rollup-plugin-swc3')
+import swc from 'rollup-plugin-swc3'
 
 export default {
     input: 'main/index.ts',

packages/mask-sdk/rollup.config.js

@@ -1,8 +1,6 @@
 import node from '@rollup/plugin-node-resolve'
 import image from '@rollup/plugin-image'
-import { createRequire } from 'node:module'
-const require = createRequire(import.meta.url)
-const { swc } = require('rollup-plugin-swc3')
+import swc from 'rollup-plugin-swc3'
 
 export default {
     input: 'main/index.ts',

packages/mask/.webpack/config.ts

@@ -25,11 +25,10 @@ import { ProfilingPlugin } from './plugins/ProfilingPlugin.js'
 import './clean-hmr.js'
 import { TrustedTypesPlugin } from './plugins/TrustedTypesPlugin.js'
 
-const __dirname = fileURLToPath(dirname(import.meta.url))
 const require = createRequire(import.meta.url)
-const patchesDir = join(__dirname, '../../../patches')
-const templateContent = readFile(join(__dirname, './template.html'), 'utf8')
-const popupTemplateContent = readFile(join(__dirname, './popups.html'), 'utf8')
+const patchesDir = join(import.meta.dirname, '../../../patches')
+const templateContent = readFile(join(import.meta.dirname, './template.html'), 'utf8')
+const popupTemplateContent = readFile(join(import.meta.dirname, './popups.html'), 'utf8')
 
 export async function createConfiguration(_inputFlags: BuildFlags): Promise<webpack.Configuration> {
     const VERSION = JSON.parse(await readFile(new URL('../../../package.json', import.meta.url), 'utf-8')).version
@@ -46,7 +45,7 @@ export async function createConfiguration(_inputFlags: BuildFlags): Promise<webp
     const baseConfig = {
         name: 'mask',
         // to set a correct base path for source map
-        context: join(__dirname, '../../../'),
+        context: join(import.meta.dirname, '../../../'),
         mode: flags.mode,
         devtool: computedFlags.sourceMapKind,
         target: ['web', 'es2022'],
@@ -64,7 +63,7 @@ export async function createConfiguration(_inputFlags: BuildFlags): Promise<webp
         cache: {
             type: 'filesystem',
             buildDependencies: {
-                config: [fileURLToPath(import.meta.url)],
+                config: [import.meta.filename],
                 patches: await pnpmPatches,
             },
             version: cacheKey,
@@ -122,7 +121,7 @@ export async function createConfiguration(_inputFlags: BuildFlags): Promise<webp
                     test: /\.tsx?$/,
                     parser: { worker: ['OnDemandWorker', '...'] },
                     // Compile all ts files in the workspace
-                    include: join(__dirname, '../../'),
+                    include: join(import.meta.dirname, '../../'),
                     loader: require.resolve('swc-loader'),
                     options: {
                         sourceMaps: !!computedFlags.sourceMapKind,
@@ -212,15 +211,15 @@ export async function createConfiguration(_inputFlags: BuildFlags): Promise<webp
             ...emitManifestFile(flags, computedFlags),
             new CopyPlugin({
                 patterns: [
-                    { from: join(__dirname, '../public/'), to: flags.outputPath },
+                    { from: join(import.meta.dirname, '../public/'), to: flags.outputPath },
                     {
-                        from: join(__dirname, '../../injected-script/dist/injected-script.js'),
+                        from: join(import.meta.dirname, '../../injected-script/dist/injected-script.js'),
                         to: nonWebpackJSFiles,
                     },
-                    { from: join(__dirname, '../../gun-utils/gun.js'), to: nonWebpackJSFiles },
-                    { from: join(__dirname, '../../mask-sdk/dist/mask-sdk.js'), to: nonWebpackJSFiles },
+                    { from: join(import.meta.dirname, '../../gun-utils/gun.js'), to: nonWebpackJSFiles },
+                    { from: join(import.meta.dirname, '../../mask-sdk/dist/mask-sdk.js'), to: nonWebpackJSFiles },
                     {
-                        context: join(__dirname, '../../polyfills/dist/'),
+                        context: join(import.meta.dirname, '../../polyfills/dist/'),
                         from: '*.js',
                         to: polyfillFolder,
                     },
@@ -233,7 +232,7 @@ export async function createConfiguration(_inputFlags: BuildFlags): Promise<webp
                         to: join(polyfillFolder, 'lockdown.js'),
                     },
                     {
-                        from: join(__dirname, '../../sentry/dist/sentry.js'),
+                        from: join(import.meta.dirname, '../../sentry/dist/sentry.js'),
                         to: nonWebpackJSFiles,
                     },
                 ],
@@ -354,11 +353,13 @@ export async function createConfiguration(_inputFlags: BuildFlags): Promise<webp
     } satisfies webpack.Configuration
 
     const entries = (baseConfig.entry = {
-        dashboard: withReactDevTools(join(__dirname, '../dashboard/initialization/index.ts')),
-        popups: withReactDevTools(join(__dirname, '../popups/initialization/index.ts')),
-        contentScript: withReactDevTools(join(__dirname, '../content-script/index.ts')),
-        background: normalizeEntryDescription(join(__dirname, '../background/initialization/mv2-entry.ts')),
-        backgroundWorker: normalizeEntryDescription(join(__dirname, '../background/initialization/mv3-entry.ts')),
+        dashboard: withReactDevTools(join(import.meta.dirname, '../dashboard/initialization/index.ts')),
+        popups: withReactDevTools(join(import.meta.dirname, '../popups/initialization/index.ts')),
+        contentScript: withReactDevTools(join(import.meta.dirname, '../content-script/index.ts')),
+        background: normalizeEntryDescription(join(import.meta.dirname, '../background/initialization/mv2-entry.ts')),
+        backgroundWorker: normalizeEntryDescription(
+            join(import.meta.dirname, '../background/initialization/mv3-entry.ts'),
+        ),
         devtools: undefined as EntryDescription | undefined,
     }) satisfies Record<string, EntryDescription | undefined>
     delete entries.devtools
@@ -374,7 +375,7 @@ export async function createConfiguration(_inputFlags: BuildFlags): Promise<webp
         await addHTMLEntry({ chunks: ['background'], filename: 'background.html', gun: true, perf: flags.profiling }),
     )
     if (flags.devtools) {
-        entries.devtools = normalizeEntryDescription(join(__dirname, '../devtools/panels/index.tsx'))
+        entries.devtools = normalizeEntryDescription(join(import.meta.dirname, '../devtools/panels/index.tsx'))
         baseConfig.plugins.push(
             await addHTMLEntry({ chunks: ['devtools'], filename: 'devtools-background.html', perf: flags.profiling }),
         )
@@ -384,7 +385,7 @@ export async function createConfiguration(_inputFlags: BuildFlags): Promise<webp
     function withReactDevTools(entry: string | string[] | EntryDescription): EntryDescription {
         if (!flags.devtools) return normalizeEntryDescription(entry)
         entry = normalizeEntryDescription(entry)
-        entry.import = joinEntryItem(join(__dirname, '../devtools/content-script/index.ts'), entry.import)
+        entry.import = joinEntryItem(join(import.meta.dirname, '../devtools/content-script/index.ts'), entry.import)
         return entry
     }
 }

packages/mask/.webpack/flags.ts

@@ -1,8 +1,5 @@
 import type { Configuration } from 'webpack'
-import { join, isAbsolute, dirname } from 'node:path'
-import { fileURLToPath } from 'node:url'
-
-const __dirname = fileURLToPath(dirname(import.meta.url))
+import { join, isAbsolute } from 'node:path'
 
 export enum ManifestFile {
     ChromiumMV2 = 'chromium-mv2',
@@ -49,9 +46,9 @@ export function normalizeBuildFlags(flags: BuildFlags): NormalizedFlags {
         reactRefresh = hmr,
         devtools = mode === 'development' || channel !== 'stable',
         sourceMapPreference = mode === 'development',
-        outputPath = join(__dirname, '../../../', mode === 'development' ? 'dist' : 'build'),
+        outputPath = join(import.meta.dirname, '../../../', mode === 'development' ? 'dist' : 'build'),
     } = flags
-    if (!isAbsolute(outputPath)) outputPath = join(__dirname, '../../../', outputPath)
+    if (!isAbsolute(outputPath)) outputPath = join(import.meta.dirname, '../../../', outputPath)
 
     if (mode === 'production' || profiling) hmr = false
     if (!hmr) reactRefresh = false

packages/polyfills/config.js

@@ -49,7 +49,7 @@ globalThis[Symbol.for('mask_init_polyfill')] = true;
         ],
     },
     {
-        input: fileURLToPath(new URL('./web-apis/index.ts', import.meta.url)),
+        input: fileURLToPath(import.meta.resolve('./web-apis/index.ts')),
         output: {
             file: 'dist/dom.js',
             format: 'iife',
@@ -58,7 +58,7 @@ globalThis[Symbol.for('mask_init_polyfill')] = true;
         plugins: plugins(),
     },
     {
-        input: fileURLToPath(new URL('./web-apis/worker.ts', import.meta.url)),
+        input: fileURLToPath(import.meta.resolve('./web-apis/worker.ts')),
         output: {
             file: 'dist/worker.js',
             format: 'iife',

packages/polyfills/rollup.config.js

@@ -1,17 +1,16 @@
 import { createHash } from 'node:crypto'
 import { mkdir, readFile, writeFile } from 'node:fs/promises'
-import { fileURLToPath } from 'node:url'
 
-const lockfilePath = fileURLToPath(new URL('../../pnpm-lock.yaml', import.meta.url))
+const lockfilePath = new URL('../../pnpm-lock.yaml', import.meta.url)
 const lockfile = await readFile(lockfilePath)
 const hash = createHash('sha256')
 hash.update(lockfile)
 const polyfillVersion = 'v0' + hash.digest('hex')
 
-const versionFilePath = fileURLToPath(new URL('./dist/version.txt', import.meta.url))
+const versionFilePath = new URL('./dist/version.txt', import.meta.url)
 const built = (await readFile(versionFilePath, 'utf-8').catch(() => '')) === polyfillVersion
 if (built) process.exit(0)
-await mkdir(fileURLToPath(new URL('./dist/', import.meta.url))).catch(() => '')
+await mkdir(new URL('./dist/', import.meta.url)).catch(() => '')
 await writeFile(versionFilePath, polyfillVersion)
 
 export default (await import('./config.js')).default

packages/scripts/src/bin/build.mjs

@@ -1,14 +1,8 @@
 #!/usr/bin/env node
 import { spawnSync } from 'child_process'
-import { fileURLToPath } from 'url'
 const child = spawnSync(
     process.execPath,
-    [
-        '--loader',
-        'ts-node/esm/transpile-only',
-        fileURLToPath(new URL('./build.ts', import.meta.url)),
-        ...process.argv.slice(2),
-    ],
+    ['--loader', 'ts-node/esm/transpile-only', import.meta.resolve('./build.ts'), ...process.argv.slice(2)],
     { stdio: 'inherit' },
 )
 if (child.status) process.exit(child.status)

packages/scripts/src/bin/dev.mjs

@@ -1,14 +1,8 @@
 #!/usr/bin/env node
 import { spawnSync } from 'child_process'
-import { fileURLToPath } from 'url'
 const child = spawnSync(
     process.execPath,
-    [
-        '--loader',
-        'ts-node/esm/transpile-only',
-        fileURLToPath(new URL('./dev.ts', import.meta.url)),
-        ...process.argv.slice(2),
-    ],
+    ['--loader', 'ts-node/esm/transpile-only', import.meta.resolve('./dev.ts'), ...process.argv.slice(2)],
     { stdio: 'inherit' },
 )
 if (child.status) process.exit(child.status)

packages/scripts/src/extension/dotenv.ts

@@ -1,13 +1,12 @@
 import { config } from 'dotenv'
-import { fileURLToPath } from 'url'
 import { ROOT_PATH } from '../utils/paths.js'
 import type { BuildFlags } from './flags.js'
 import { ManifestFile } from '../../../mask/.webpack/flags.js'
 
 export function applyDotEnv(flags: BuildFlags) {
     if (flags.mode === 'production') return
 
-    const { parsed, error } = config({ path: fileURLToPath(new URL('./.env/dev-preference', ROOT_PATH)) })
+    const { parsed, error } = config({ path: new URL('./.env/dev-preference', ROOT_PATH) })
     if (error) console.error(new TypeError('Failed to parse env file', { cause: error }))
     if (!parsed) return
 

packages/scripts/src/linter/plugin-projects.ts

@@ -41,7 +41,7 @@ export async function fixPluginsTSConfig() {
         .map((x) => x.name)
         .sort()
     config.references = plugins.map((name) => ({ path: `./${name}/tsconfig.json` }))
-    return writeFile(fileURLToPath(file), await prettier(JSON.stringify(config), 'json', 2), 'utf-8')
+    return writeFile(file, await prettier(JSON.stringify(config), 'json', 2), 'utf-8')
 }
 
 task(fixPluginsTSConfig, 'fix-plugins-tsconfig', 'Fix plugins/tsconfig.json')

packages/scripts/src/utils/process-lock.ts

@@ -1,7 +1,6 @@
 // TODO: load this lazy
 import Lock from 'proper-lockfile'
 import { fileURLToPath } from 'url'
-const __filename = fileURLToPath(import.meta.url)
 
 export async function getProcessLock(lockName: string) {
     const lockfilePath = getLockPosition(lockName)
@@ -10,7 +9,7 @@ export async function getProcessLock(lockName: string) {
             await new Promise((resolve) => setTimeout(resolve, 500))
         } else {
             try {
-                Lock.lockSync(__filename, { lockfilePath, update: 200 })
+                Lock.lockSync(import.meta.filename, { lockfilePath, update: 200 })
                 return
             } catch {
                 // ignore