Blockly v9 causes `TypeError: Class constructors cannot be invoked without 'new'` in many plugins + demos due to ES5-style subclasses

[cpcallen]

Categories

• Plugins
• Examples
• (Codelabs?)

Components

So far I have found (but not yet fixed) this error in:

• [x] plugins/field-date
• [x] examples/pitch-field-demo
• [x] examples/turtle-field-demo
• [ ] Maybe others?

Describe the bug

To Reproduce

1. Link the demo or plugin-test against Blockly v. 9.0.0-beta.1
   • Or use the version so linked on GitHub Pages (as of 2022-09-08) via the URLs above
2. Open the browser console.
3. See error (e.g. from field-date):

   Uncaught (in promise) TypeError: Class constructors cannot be invoked without 'new'
       at new Blockly.FieldDate (field_date.js?fdfc:51:45)
       at Blockly.FieldDate.fromJson (field_date.js?fdfc:71:10)
       at Object.fromJsonInternal$$module$build$src$core$field_registry [as fromJsonInternal] (field_registry.ts?42f1:82:22)
       at fromJson$$module$build$src$core$field_registry (field_registry.ts?42f1:61:20)
       at BlockSvg$$module$build$src$core$block_svg.fieldFromJson_ (block.ts?6432:1813:33)
       at BlockSvg$$module$build$src$core$block_svg.interpolate_ (block.ts?6432:1713:28)
       at BlockSvg$$module$build$src$core$block_svg.jsonInit (block.ts?6432:1554:12)
       at BlockSvg$$module$build$src$core$block_svg.eval [as init] (common.ts?52f0:237:10)
       at BlockSvg$$module$build$src$core$block_svg.doInit_ (block.ts?6432:287:14)
       at new BlockSvg$$module$build$src$core$block_svg (block_svg.ts?8904:208:10)
   

4. Note also that Blockly has in consequence failed to load/inject successfully.

Expected behaviour

No errors occur.

Additional context

This is caused by Blockly no longer being transpiled to ES5, combined with the fact that the traditional form of an ES5 subclass constructor super call—SuperClass.call(this, /* args */);—can't be used when SuperClass is an ES6 class.

It is still possible to subclass ES6 classes using ES5, but a better fix here would be to update the plugins and examples to use ES6 classes.