[lizschwab]

The basics

• I validated my changes

The details

Resolves

Towards #10642

Proposed Changes

Update the following plugins to ESM:

• block-test
• dev-tools
• theme-modern

Additionally, updated the target to es2020 in dev-scripts, as this puts the plugins on the same target as blockly and reduces potential conflicts.

Reason for Changes

Plugin ESM migration

Documentation

See breaking changes

BREAKING CHANGES

The following changes affect all plugins:

• Upgraded to Node >=24.
  • Security support for V22 is scheduled to end April 30, 2027, so we have upgraded to >=24. If your node version is earlier than 24, you will need to upgrade your Node version.
• Published JavaScript now targets ES2020 (previously ES6 for most plugins).
  • If you are using older toolchains (e.g. webpack 4), you will need to configure your bundler to transpile @blockly/* from node_modules.
• Dropped support for UMD and browser globals are no longer set. They are now authored as ES Modules with a dual build of ESM and CJS.
  • If you are using <script> tags or AMD, you will need to use an import map with <script type="module">. Additionally, you will need to replace each window.X global with an import statement.
• Plugins are now shipped unminified and unbundled.
  • If you're using a bundler, no change is needed. If you're using import-maps, you will need to include each plugin you're using and its' dependencies in your import map. Example of what this and the previous bullet point together might look like for <script>-tag users:

  <script type="importmap">
  {"imports": {
    "blockly/core": "https://esm.sh/blockly@13.4.0/core",
    "blockly/msg/en": "https://esm.sh/blockly@13.4.0/msg/en",
    "@blockly/theme-modern": "https://unpkg.com/@blockly/theme-modern/dist/esm/index.js"
  }}
  </script>
  <script type="module">
  import * as Blockly from 'blockly/core';
  import * as En from 'blockly/msg/en';
  import theme from '@blockly/theme-modern';
  Blockly.setLocale(En);
  </script>

  Note that with the way it currently publishes its content, blockly cannot be loaded directly from a CDN such as unpkg in a <script type="module">; this is why the example imports from esm.sh, as it converts packages to ESM on request. You will need a CDN that converts packages to ES modules to import blockly. Plugins can still be loaded directly from CDNs such as unpkg.
• Deep imports are no longer supported (example: import '@blockly/dev-tools/src/playground/options.js')
  • If you're using deep imports for @blockly plugins, you will need to import from the root instead. If something you depend on isn't exported, you should open an issue and we will evaluate whether it should be exported.

The following changes affect plugins included in this PR:

• dev-tools: The exported addGUIControls method now returns a Promise
  • Any package which uses addGUIControls to build their own playground will need to await or use .then().

[lizschwab]

Failing check is expected.