feat!: Update more plugins to ESM

eslint.config.mjs

@@ -416,8 +416,13 @@ export default defineConfig(
       'packages/plugins/block-test/**',
       'packages/plugins/content-highlight/**',
       'packages/plugins/continuous-toolbox/**',
+      'packages/plugins/cross-tab-copy-paste/**',
+      'packages/plugins/dev-create/**',
       'packages/plugins/dev-scripts/**',
       'packages/plugins/dev-tools/**',
+      'packages/plugins/disable-top-blocks/**',
+      'packages/plugins/field-angle/**',
+      'packages/plugins/field-bitmap/**',
       'packages/plugins/field-colour/**',
       'packages/plugins/field-colour-hsv-sliders/**',
       'packages/plugins/field-grid-dropdown/**',

packages/plugins/cross-tab-copy-paste/package.json

@@ -12,9 +12,13 @@
     "start": "blockly-scripts start",
     "test": "blockly-scripts test"
   },
-  "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "unpkg": "./dist/index.js",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
+  "unpkg": "./dist/esm/index.js",
+  "type": "module",
+  "engines": {
+    "node": ">=24"
+  },
   "author": "",
   "keywords": [
     "blockly",
@@ -38,6 +42,13 @@
     "dist",
     "src"
   ],
+  "exports": {
+    ".": {
+      "node":    {"types": "./dist/cjs/index.d.ts", "default": "./dist/cjs/index.js"},
+      "import":  {"types": "./dist/esm/index.d.ts", "default": "./dist/esm/index.js"},
+      "require": {"types": "./dist/cjs/index.d.ts", "default": "./dist/cjs/index.js"}
+    }
+  },
   "devDependencies": {
     "@blockly/dev-scripts": "^13.4.0",
     "@blockly/dev-tools": "^13.4.0"

packages/plugins/cross-tab-copy-paste/test/index.ts

@@ -10,7 +10,7 @@
 
 import * as Blockly from 'blockly';
 import {toolboxCategories, createPlayground} from '@blockly/dev-tools';
-import {CrossTabCopyPaste} from '../src/index';
+import {CrossTabCopyPaste} from '../src/index.js';
 
 /**
  * Create a workspace.

packages/plugins/cross-tab-copy-paste/tsconfig.json

@@ -1,14 +1,8 @@
 {
+  "extends": "@blockly/dev-scripts/config/tsconfig.base.json",
   "compilerOptions": {
     "rootDir": "./src",
-    "outDir": "dist",
-    "declaration": true,
-    "declarationMap": true,
-    "sourceMap": true,
-    "module": "es2015",
-    "moduleResolution": "bundler",
-    "target": "es6",
-    "strict": true
+    "outDir": "dist/esm"
   },
   // NOTE: `test/**/*` is automatically included in `blockly-scripts start`.
   // Only src matters for production builds.

packages/plugins/dev-create/bin/app.js

@@ -1,10 +1,10 @@
-const chalk = require('chalk').default;
-const fs = require('fs-extra');
-const path = require('path');
-const execSync = require('child_process').execSync;
-const {checkAndCreateDir} = require('./common');
+import chalk from 'chalk';
+import fs from 'fs-extra';
+import path from 'path';
+import {execSync} from 'child_process';
+import {checkAndCreateDir} from './common.js';
 
-exports.createApp = function (name, options) {
+export function createApp(name, options) {
   const root = process.cwd();
   const dir = options.dir ?? name;
   const appPath = path.join(root, dir);
@@ -25,16 +25,21 @@ exports.createApp = function (name, options) {
     'package-lock.json',
     'package.json',
   ].map((file) => {
-    return path.resolve(__dirname, sampleDir, file);
+    return path.resolve(import.meta.dirname, sampleDir, file);
   });
-  fs.copySync(path.resolve(__dirname, sampleDir), appPath, {
+  fs.copySync(path.resolve(import.meta.dirname, sampleDir), appPath, {
     filter(src) {
       return !excludes.includes(src);
     },
   });
 
   // Create package.json file for app.
-  const templateJson = require(path.join(sampleDir, 'package.json'));
+  const templateJson = JSON.parse(
+    fs.readFileSync(
+      path.resolve(import.meta.dirname, sampleDir, 'package.json'),
+      'utf8',
+    ),
+  );
   const packageJson = {
     ...templateJson,
     name: name,
@@ -63,4 +68,4 @@ exports.createApp = function (name, options) {
   }
   console.log(chalk.blue('  npm start'));
   console.log('See README.md for more commands and information.');
-};
+}

packages/plugins/dev-create/bin/common.js

@@ -1,11 +1,11 @@
-const fs = require('fs-extra');
+import fs from 'fs-extra';
 
 /**
  * Create package directory if it doesn't exist yet.
  * Throws if the directory exists and isn't the current directory.
  * @param {string} path Path at which to create directory.
  */
-exports.checkAndCreateDir = function (path) {
+export function checkAndCreateDir(path) {
   const root = process.cwd();
   // If we're already in the desired directory, don't need to create it.
   if (path == root) {
@@ -20,4 +20,4 @@ exports.checkAndCreateDir = function (path) {
     // Create the directory.
     fs.mkdirSync(path);
   }
-};
+}

packages/plugins/dev-create/bin/create.js

@@ -10,17 +10,19 @@
  * templates.
  */
 
-'use strict';
-
-const commander = require('commander');
-const scriptPackageJson = require('../package.json');
-const {createApp} = require('./app');
-const {createPlugin} = require('./plugin');
+import {Command} from 'commander';
+import fs from 'fs-extra';
+import path from 'path';
+import {createApp} from './app.js';
+import {createPlugin} from './plugin.js';
 
 const pluginTypes = ['plugin', 'field', 'block', 'theme'];
+const scriptPackageJson = JSON.parse(
+  fs.readFileSync(path.join(import.meta.dirname, '../package.json'), 'utf8'),
+);
 const scriptName = scriptPackageJson.name;
 
-const program = new commander.Command(scriptName);
+const program = new Command(scriptName);
 
 program
   .command('plugin', {isDefault: true})

packages/plugins/dev-create/bin/plugin.js

@@ -10,19 +10,17 @@
  * templates.
  */
 
-'use strict';
-
-const chalk = require('chalk').default;
-const fs = require('fs-extra');
-const path = require('path');
-const execSync = require('child_process').execSync;
-const {checkAndCreateDir} = require('./common');
+import chalk from 'chalk';
+import fs from 'fs-extra';
+import path from 'path';
+import {execSync} from 'child_process';
+import {checkAndCreateDir} from './common.js';
 
 const pluginTypes = ['plugin', 'field', 'block', 'theme'];
 
 const root = process.cwd();
 
-exports.createPlugin = function (pluginName, options) {
+export function createPlugin(pluginName, options) {
   let gitRoot = '';
   let gitURL = '';
   try {
@@ -38,7 +36,7 @@ exports.createPlugin = function (pluginName, options) {
   const isGit = !!gitURL;
   const isFirstParty =
     options.firstParty ||
-    gitURL == 'https://github.com/RaspberryPiFoundation/blockly-samples';
+    gitURL == 'https://github.com/RaspberryPiFoundation/blockly';
 
   /**
    * Gets the name of the plugin prefixed with the type.
@@ -108,17 +106,21 @@ exports.createPlugin = function (pluginName, options) {
       'start': 'blockly-scripts start',
       'test': 'blockly-scripts test',
     },
-    main: './dist/index.js',
-    module: './src/index.js',
-    unpkg: './dist/index.js',
+    main: './dist/cjs/index.js',
+    module: './dist/esm/index.js',
+    unpkg: './dist/esm/index.js',
+    type: 'module',
+    engines: {
+      node: '>=24',
+    },
     author: pluginAuthor,
     keywords: [
       'blockly',
       'blockly-plugin',
       pluginType != 'plugin' && `blockly-${pluginType}`,
       pluginName,
     ].filter(Boolean),
-    homepage: isGit ? `${gitURL}/tree/master/${gitPluginPath}#readme` : '',
+    homepage: isGit ? `${gitURL}/tree/main/${gitPluginPath}#readme` : '',
     bugs: isGit
       ? {
           url: `${gitURL}/issues`,
@@ -137,6 +139,19 @@ exports.createPlugin = function (pluginName, options) {
       src: 'src',
     },
     files: ['dist', 'src'],
+    exports: {
+      '.': {
+        node: {types: './dist/cjs/index.d.ts', default: './dist/cjs/index.js'},
+        import: {
+          types: './dist/esm/index.d.ts',
+          default: './dist/esm/index.js',
+        },
+        require: {
+          types: './dist/cjs/index.d.ts',
+          default: './dist/cjs/index.js',
+        },
+      },
+    },
     devDependencies: {},
     peerDependencies: {
       blockly: `^${latestBlocklyVersion}`,
@@ -165,19 +180,22 @@ exports.createPlugin = function (pluginName, options) {
 
   // Write the README.md to the new package.
   let readme = fs.readFileSync(
-    path.resolve(__dirname, templateDir, 'README.md'),
+    path.resolve(import.meta.dirname, templateDir, 'README.md'),
     'utf-8',
   );
   readme = readme.replace(/@blockly\/plugin/gim, `${pluginPackageName}`);
   fs.writeFileSync(path.join(pluginPath, 'README.md'), readme, 'utf-8');
 
   // Copy the rest of the template folder into the new package.
-  fs.copySync(path.resolve(__dirname, templateDir, 'template'), pluginPath);
+  fs.copySync(
+    path.resolve(import.meta.dirname, templateDir, 'template'),
+    pluginPath,
+  );
 
   // Copy third party plugin files to the new package if third-party.
   if (!isFirstParty) {
     fs.copySync(
-      path.resolve(__dirname, templatesDir, 'third_party'),
+      path.resolve(import.meta.dirname, templatesDir, 'third_party'),
       pluginPath,
     );
   }
@@ -213,4 +231,4 @@ exports.createPlugin = function (pluginName, options) {
   console.log(`Search ${chalk.red(`'TODO'`)} to see remaining tasks.`);
 
   process.exit(1);
-};
+}

packages/plugins/dev-create/package.json

@@ -3,6 +3,10 @@
   "version": "13.4.0",
   "description": "A tool for creating a Blockly plugin based on a template.",
   "bin": "./bin/create.js",
+  "type": "module",
+  "engines": {
+    "node": ">=24"
+  },
   "author": "Blockly Team",
   "keywords": [
     "blockly",

packages/plugins/dev-create/templates/block/template/test/block_test.mocha.js

@@ -4,18 +4,15 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-const chai = require('chai');
-const Blockly = require('blockly/core');
-const {testHelpers} = require('@blockly/dev-tools');
-const {dartGenerator} = require('blockly/dart');
-const {javascriptGenerator} = require('blockly/javascript');
-const {luaGenerator} = require('blockly/lua');
-const {phpGenerator} = require('blockly/php');
-const {pythonGenerator} = require('blockly/python');
-
-require('../src/index');
-
-const assert = chai.assert;
+import {assert} from 'chai';
+import * as Blockly from 'blockly/core';
+import {testHelpers} from '@blockly/dev-tools';
+import {dartGenerator} from 'blockly/dart';
+import {javascriptGenerator} from 'blockly/javascript';
+import {luaGenerator} from 'blockly/lua';
+import {phpGenerator} from 'blockly/php';
+import {pythonGenerator} from 'blockly/python';
+import '../src/index.js';
 
 const {
   CodeGenerationTestSuite,
@@ -44,14 +41,16 @@ suite('BlockTemplate', function () {
 
   suite('Creation', function () {
     // TODO Add basic test for creation of block using newBlock call.
-    const block = this.workspace.newBlock('block_type');
-    assertBlockStructure(block);
+    test('newBlock', function () {
+      const block = this.workspace.newBlock('block_template');
+      assertBlockStructure(block);
+    });
   });
 
   suite('Code generation', function () {
     const trivialCreateBlock = (workspace) => {
       // TODO implement.
-      // return workspace.newBlock('block_type');
+      // return workspace.newBlock('block_template');
     };
 
     /**
@@ -129,10 +128,10 @@ suite('BlockTemplate', function () {
     // TODO update xml and expectedXml.
     {
       title: 'Empty XML',
-      xml: '<block type="block_type"/>',
+      xml: '<block type="block_template"/>',
       expectedXml:
         '<block xmlns="https://developers.google.com/blockly/xml" ' +
-        'type="block_type" id="1"></block>',
+        'type="block_template" id="1"></block>',
       assertBlockStructure: (block) => {
         // TODO implement.
         // assertBlockStructure(block);

packages/plugins/dev-create/templates/block/template/test/index.js

@@ -10,7 +10,7 @@
 
 import * as Blockly from 'blockly';
 import {createPlayground} from '@blockly/dev-tools';
-import '../src/index';
+import '../src/index.js';
 
 // TODO: Edit list of blocks.
 const allBlocks = ['block_template'];

packages/plugins/dev-create/templates/field/template/test/field_test.mocha.js

@@ -4,8 +4,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-const {testHelpers} = require('@blockly/dev-tools');
-const {FieldTemplate} = require('../src/index');
+import {testHelpers} from '@blockly/dev-tools';
+import {FieldTemplate} from '../src/index.js';
 
 const {
   FieldCreationTestCase,

packages/plugins/dev-create/templates/field/template/test/index.js

@@ -10,7 +10,7 @@
 
 import * as Blockly from 'blockly';
 import {generateFieldTestBlocks, createPlayground} from '@blockly/dev-tools';
-import '../src/index';
+import '../src/index.js';
 
 const toolbox = generateFieldTestBlocks('field_template', [
   {

packages/plugins/dev-create/templates/plugin/template/test/index.js

@@ -10,7 +10,7 @@
 
 import * as Blockly from 'blockly';
 import {toolboxCategories, createPlayground} from '@blockly/dev-tools';
-import {Plugin} from '../src/index';
+import {Plugin} from '../src/index.js';
 
 /**
  * Create a workspace.

packages/plugins/dev-create/templates/theme/template/test/index.js

@@ -10,7 +10,7 @@
 
 import * as Blockly from 'blockly';
 import {toolboxCategories, createPlayground} from '@blockly/dev-tools';
-import Theme from '../src/index';
+import Theme from '../src/index.js';
 
 /**
  * Create a workspace.