fix: update imports in examples for v11

[rachel-fenichel]

The basics

• I validated my changes

The details

Resolves

Fixes #2364

Proposed Changes

For each plugin that has issues with imports when updated to v11:

• Install v11.0.0.beta-12
• Update imports to stop using default imports

Reason for Changes

Handle breaking change made in v11.

Test Coverage

Tested manually

[BeksOmega]

Since #2362 covers three classes of issues, can you split it up into three issues? [Edit, that way we can close it, which is more visible in the github project]

[BeksOmega]

This should import each thing it needs individually as specified here. If you don't want to fix that now, feel free to file a bug to follow up.

Here and in Vue.

[rachel-fenichel]

I don't need the generators, but I do need to have core, library blocks, and english langfiles.

I updated the imports to

  import * as Blockly from 'blockly/core';
  import * as libraryBlocks from 'blockly/blocks';
  import * as En from 'blockly/msg/en';

and added a call to Blockly.setLocale(En). This (and the inject) call fail because Blockly is undefined.

[rachel-fenichel]

I applied the same change to the Vue example and it worked fine. Do you know what the difference is? @cpcallen to comment as well.

[maribethb]

The Vue demo is built using Vite. The Svelte demo is built using rollup. Gonna guess some of the packaging changes aren't compatible with our rollup config, but our config is also pretty out of date (e.g. we're using some commonjs plugin whose git repo was archived 3 years ago) so who knows where the problem lies. This probably warrants Christopher's eyes.

I would probably start by trying a new rollup config from scratch if they have an updated hello world example.

I'll also note that rollup says it is the bundler behind Vite, so the fact that it works over there seems promising. More likely to point to a problem in our specific rollup config than a deeper incompatibility

[rachel-fenichel]

Fixed by updating the version of rollup and some of their plugins. Refreshingly, everything that needed to be replaced or updated was clearly labeled.

[rachel-fenichel]

@BeksOmega this is ready for re-review.
Changes I made:

• Updated dependencies and import statements for vue example
• Went back to latest (instead of beta) in react demo, to avoid a peer dependency conflict with the date field
• Formatted

[BeksOmega]

Sweet! I don't know enough about any of these frameworks to approve in the truest sense. But sounds like you worked through a bunch of stuff. And this isn't load bearing code. So LGTM