react-blockly 7.0.0 is released!

[Nat Budin]

Hi everyone, I’m pleased to announce that react-blockly version 7.0.0 is available!  This release has been in alpha pre-releases for some time now, but has proved stable enough to release for production use.

Version 7 is a complete rewrite of react-blockly, and greatly simplifies the library.  This is possible because of a combination of:

• Blockly’s support for JSON toolbox configurations (rather than XML)
• React hooks (available in React 16.8 and up)

Because of these, we are able to dramatically reduce the amount of code in react-blockly:

• Rather than 7 React components, we have just 1 (BlocklyWorkspace) plus a hook (useBlocklyWorkspace)
• react-blockly no longer generates XML inside your HTML and therefore avoids React’s JS console warnings in development mode
• immutable.js is no longer a dependency
• react-blockly’s toolbox configuration format now aligns with Blockly’s official format

All of this does mean that applications using react-blockly 6 will most likely need to make some changes in order to successfully upgrade.  The BlocklyWorkspace component is mostly compatible with the prior version, but if you’re using a custom toolbox, you’ll need to update the format.  react-blockly 7 also includes TypeScript type definitions, which should hopefully help with the upgrade process if you use TypeScript in your project.

I’d like to thank everyone who helped make this happen:

• The Blockly team at Google for chatting with me and for adding JSON toolbox support, which was the catalyst for this rewrite
• Sam Fuller for doing the original rewrite into hook-based functional components
• Peli de Halleux for contributing to the hooks rewrite and for the first version of the TypeScript definitions
• cqh963852 for setting up the TypeScript toolchain in the project
  
• Marco van Meegen for the final version of the TypeScript definitions that we’re now shipping

If you’re using react-blockly, I highly encourage upgrading to version 7.  It is much simpler than previous versions and should be significantly more stable and reliable, and will allow you to access Blockly features as they develop much more easily than before.

One final plug: I’d love to find co-maintainers, or even people interested in taking over maintenance of react-blockly.  I don’t use it myself in any projects anymore since I left my previous job, and I think it would be great to have someone who actually uses react-blockly as a maintainer.  If you’re interested, please email me.

Thanks everyone!

Nat

[feni...@google.com]

Hi Nat,

Thank you for the update! It's super cool to see how you were able to pare down your wrapper into a smaller and simpler library.

Please pass my thanks on to your contributors as well!

Cheers,

Rachel

[4spacetime]

Hi,

Sorry if this question is incorrectly directed.

I am trying to make the best choice as to if I should used React as the wrapper for Blockly, or Angular 14, as I note Google's Angular JS version is now not supported, but I assume  Angular written in typescript continues to be, but I don't know if that is a suitable wrapper alternative to React. My initial thought was to stick with google software wherever i can.

If not React or Angular, then what is best for web use of Blockly.

So far I have under windows 10 installed NVM, and then NPM for node js and Blockly with npm install --save blockly . 

I use Visual Studio Code with the extension to show browser preview.

I have used NPM to install webpack

So I believe I am at the final stage of choosing and installing a Wrapper for Blockly.

Hence wanting to know the best one to use.

On a separate question, I would ideally like a batch code for the various relevant filenames that are used to set up Blockly Playground and also the Blockly factory, to which I hope to then make edits to adjust according to my preference. I suppose that is a tall ask, but if it could be accessed and used that would be a great starting point.

If there are any answers to the above, that would be appreciated.

I come from Matlab and Python, but was so impressed with the possibilities of Blockly that i wanted to be able to use it and hopefully create new blocks for ML applications to help teach that aspect.

Kind Regards

Ather