chore!: migrate dev-scripts to esm

packages/plugins/dev-scripts/README.md

@@ -13,7 +13,7 @@ playground in the browser. The page will reload if you make edits.
 
 ### `blockly-scripts build`
 
-Builds the package into the `dist` directory.
+Builds the package into the `dist/esm` and `dist/cjs` directories.
 
 ### `blockly-scripts clean`
 

packages/plugins/dev-scripts/bin/blockly-scripts.js

@@ -10,8 +10,10 @@
  * @author samelh@google.com (Sam El-Husseini)
  */
 
+import {spawnSync} from 'child_process';
+import {fileURLToPath} from 'url';
+
 const args = process.argv.slice(2);
-const {spawnSync} = require('child_process');
 
 const availableScripts = [
   'build',
@@ -25,8 +27,11 @@ const availableScripts = [
 const script = args[0];
 if (availableScripts.includes(script)) {
   const result = spawnSync(
-    'node',
-    [].concat(require.resolve('../scripts/' + script)).concat(args.slice(1)),
+    process.execPath,
+    [
+      fileURLToPath(new URL(`../scripts/${script}.js`, import.meta.url)),
+      ...args.slice(1),
+    ],
     {stdio: 'inherit'},
   );
   if (result.signal) {

packages/plugins/dev-scripts/config/tsconfig.base.json

@@ -0,0 +1,14 @@
+// This is the base config for plugins. Only update this if you want the change
+// to apply to all plugins. For changes to individual plugins, use the tsconfig
+// file in the plugin's directory.
+{
+  "compilerOptions": {
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "module": "nodenext",
+    "moduleResolution": "nodenext",
+    "target": "es2022",
+    "strict": true
+  }
+}

packages/plugins/dev-scripts/config/webpack.config.js

@@ -7,22 +7,40 @@
  * @fileoverview Webpack configuration file.
  * @author samelh@google.com (Sam El-Husseini)
  */
-'use strict';
 
-const fs = require('fs');
-const path = require('path');
-const webpack = require('webpack');
+import fs from 'fs';
+import {createRequire} from 'module';
+import path from 'path';
+import {fileURLToPath} from 'url';
+import webpack from 'webpack';
+
+const cjsRequire = createRequire(import.meta.url);
+
+/**
+ * Resolves a package to a file path, starting from this file's location. Tries
+ * ESM resolution first, then falls back to CJS.
+ * @param {string} name The name of the package to resolve.
+ * @returns {string} The absolute path of the package's entry point.
+ */
+function resolvePackage(name) {
+  try {
+    return fileURLToPath(import.meta.resolve(name));
+  } catch {
+    return cjsRequire.resolve(name);
+  }
+}
 
 const appDirectory = fs.realpathSync(process.cwd());
 const resolveApp = (relativePath) => path.resolve(appDirectory, relativePath);
 const exists = (relativePath) => fs.existsSync(resolveApp(relativePath));
 
-const packageJson = require(resolveApp('package.json'));
+const packageJson = JSON.parse(
+  fs.readFileSync(resolveApp('package.json'), 'utf8'),
+);
 
-module.exports = (env) => {
+export default (env) => {
   const mode = env.mode;
   const isDevelopment = mode === 'development';
-  const isProduction = mode === 'production';
   const isTest = mode === 'test';
   const isTypescript = exists('tsconfig.json');
 
@@ -41,12 +59,7 @@ module.exports = (env) => {
     }),
   ];
 
-  if (isProduction) {
-    // Production.
-    if (exists('./src/index.js')) entry = './src/index.js';
-    if (exists('./src/index.ts')) entry = './src/index.ts';
-    outputFile = 'index.js';
-  } else if (isDevelopment) {
+  if (isDevelopment) {
     // Development.
     if (exists('./test/index.js')) entry = './test/index.js';
     if (exists('./test/index.ts')) entry = './test/index.ts';
@@ -81,21 +94,18 @@ module.exports = (env) => {
 
   return {
     target,
-    mode: isProduction ? 'production' : 'development',
+    mode: 'development',
     entry: entry,
-    devtool: isProduction ? 'source-map' : 'eval-source-map',
+    devtool: 'eval-source-map',
     output: {
-      path: isProduction ? resolveApp('dist') : resolveApp('build'),
-      publicPath: isProduction ? '/dist/' : '/build/',
+      path: resolveApp('build'),
+      publicPath: '/build/',
       filename: outputFile,
-      library: {
-        type: 'umd',
-      },
-      globalObject: 'this',
       clean: true,
     },
     resolve: {
       extensions: ['.ts', '.js', '.json', '.wasm'],
+      extensionAlias: {'.js': ['.ts', '.js']},
       // Some deps may require node.js core modules.  Tell node.js what
       // polyfills to use for them when building for non-node.js targets
       // (Or to ignore them if the fallback is false.)
@@ -108,66 +118,20 @@ module.exports = (env) => {
         // Load Blockly source maps.
         {
           test: /(blockly[/\\].*\.js)$/,
-          use: [require.resolve('source-map-loader')],
+          use: [resolvePackage('source-map-loader')],
           enforce: 'pre',
         },
         isTypescript && {
           test: /\.tsx?$/,
-          loader: require.resolve('ts-loader'),
-          options: isProduction ? {} : {compilerOptions: {rootDir: '.'}},
+          loader: resolvePackage('ts-loader'),
+          options: {compilerOptions: {rootDir: '.'}},
         },
       ].filter(Boolean),
     },
     // Ignore spurious warnings from source-map-loader
     // It can't find source maps for some Closure modules and that is expected
     ignoreWarnings: [/Failed to parse source map.*blockly/],
     plugins,
-    externals: isProduction
-      ? {
-          'blockly': {
-            root: 'Blockly',
-            commonjs: 'blockly',
-            commonjs2: 'blockly',
-            amd: 'blockly',
-          },
-          'blockly/core': {
-            root: 'Blockly',
-            commonjs: 'blockly/core',
-            commonjs2: 'blockly/core',
-            amd: 'blockly/core',
-          },
-          'blockly/javascript': {
-            root: 'Blockly.JavaScript',
-            commonjs: 'blockly/javascript',
-            commonjs2: 'blockly/javascript',
-            amd: 'blockly/javascript',
-          },
-          'blockly/python': {
-            root: 'Blockly.Python',
-            commonjs: 'blockly/python',
-            commonjs2: 'blockly/python',
-            amd: 'blockly/python',
-          },
-          'blockly/dart': {
-            root: 'Blockly.Dart',
-            commonjs: 'blockly/dart',
-            commonjs2: 'blockly/dart',
-            amd: 'blockly/dart',
-          },
-          'blockly/php': {
-            root: 'Blockly.PHP',
-            commonjs: 'blockly/php',
-            commonjs2: 'blockly/php',
-            amd: 'blockly/php',
-          },
-          'blockly/lua': {
-            root: 'Blockly.Lua',
-            commonjs: 'blockly/lua',
-            commonjs2: 'blockly/lua',
-            amd: 'blockly/lua',
-          },
-          'jsdom': 'commonjs jsdom',
-        }
-      : {jsdom: 'commonjs jsdom'},
+    externals: {jsdom: 'commonjs jsdom'},
   };
 };

packages/plugins/dev-scripts/config/webpackDevServer.config.js

@@ -7,9 +7,8 @@
  * @fileoverview Webpack dev server configuration file.
  * @author samelh@google.com (Sam El-Husseini)
  */
-'use strict';
 
-module.exports = () => {
+export default () => {
   return {
     port: 'auto',
     hot: true,

packages/plugins/dev-scripts/package.json

@@ -21,6 +21,10 @@
     "directory": "packages/plugins/dev-scripts"
   },
   "license": "Apache-2.0",
+  "type": "module",
+  "engines": {
+    "node": ">=24"
+  },
   "dependencies": {
     "@babel/code-frame": "^8.0.0",
     "chalk": "^6.0.1",
@@ -29,21 +33,11 @@
     "rimraf": "^6.1.3",
     "source-map-loader": "^5.0.0",
     "ts-loader": "^9.6.1",
+    "typescript": "^6.0.3",
     "webpack": "^5.111.1",
     "webpack-dev-server": "^6.0.0"
   },
-  "peerDependencies": {
-    "typescript": "^4.3.2 || ^5 || ^6"
-  },
-  "peerDependenciesMeta": {
-    "typescript": {
-      "optional": true
-    }
-  },
   "publishConfig": {
     "access": "public"
-  },
-  "devDependencies": {
-    "typescript": "^6.0.3"
   }
 }

packages/plugins/dev-scripts/scripts/auditFix.js

@@ -11,16 +11,16 @@
  *   - Runs `npm audit fix` to do the fixes.
  * @author fenichel@google.com (Rachel Fenichel)
  */
-'use strict';
+import {readFileSync, realpathSync} from 'fs';
+import {resolve} from 'path';
+import {execSync} from 'child_process';
 
-const fs = require('fs');
-const path = require('path');
-const execSync = require('child_process').execSync;
+const appDirectory = realpathSync(process.cwd());
+const resolveApp = (relativePath) => resolve(appDirectory, relativePath);
 
-const appDirectory = fs.realpathSync(process.cwd());
-const resolveApp = (relativePath) => path.resolve(appDirectory, relativePath);
-
-const packageJson = require(resolveApp('package.json'));
+const packageJson = JSON.parse(
+  readFileSync(resolveApp('package.json'), 'utf8'),
+);
 
 console.log(`Running npm audit fix steps for ${packageJson.name}`);