Development

package.json

@@ -4,13 +4,16 @@
   "private": true,
   "dependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@blockly/block-plus-minus": "^4.0.4",
-    "@blockly/field-grid-dropdown": "^2.0.4",
-    "@blockly/field-slider": "4.0.4",
-    "@blockly/plugin-scroll-options": "^3.0.5",
-    "@blockly/plugin-typed-variable-modal": "^5.0.6",
-    "@blockly/workspace-backpack": "^3.0.4",
-    "@blockly/zoom-to-fit": "^3.0.4",
+    "@blockly/block-plus-minus": "^8.0.9",
+    "@blockly/field-colour": "^5.0.9",
+    "@blockly/field-grid-dropdown": "^5.0.9",
+    "@blockly/field-multilineinput": "^5.0.10",
+    "@blockly/field-slider": "7.0.9",
+    "@blockly/plugin-scroll-options": "^6.0.9",
+    "@blockly/plugin-typed-variable-modal": "^8.0.9",
+    "@blockly/workspace-backpack": "^6.0.9",
+    "@blockly/workspace-minimap": "^0.2.9",
+    "@blockly/zoom-to-fit": "^6.0.9",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@fortawesome/fontawesome-svg-core": "^6.2.1",
@@ -24,7 +27,7 @@
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^7.2.1",
     "axios": "^0.28.0",
-    "blockly": "^9.2.0",
+    "blockly": "^11.1.1",
     "file-saver": "^2.0.5",
     "markdown-it": "^12.3.2",
     "mnemonic-id": "^3.2.7",

src/App.js

@@ -6,6 +6,7 @@ import { createBrowserHistory } from "history";
 import { Provider } from "react-redux";
 import store from "./store";
 import { loadUser } from "./actions/authActions";
+import ErrorBoundary from "./components/ErrorBoundary";
 
 import "./App.css";
 
@@ -44,7 +45,9 @@ class App extends Component {
         <ThemeProvider theme={theme}>
           <Provider store={store}>
             <Router history={customHistory}>
-              <Content />
+              <ErrorBoundary>
+                <Content />
+              </ErrorBoundary>
             </Router>
           </Provider>
         </ThemeProvider>

src/actions/workspaceActions.js

@@ -22,7 +22,7 @@ export const workspaceChange = () => (dispatch) => {
 export const onChangeCode = () => (dispatch, getState) => {
   const workspace = Blockly.getMainWorkspace();
   var code = getState().workspace.code;
-  code.arduino = Blockly.Arduino.workspaceToCode(workspace);
+  code.arduino = Blockly.Generator.Arduino.workspaceToCode(workspace);
   var xmlDom = Blockly.Xml.workspaceToDom(workspace);
   var board = getState().board.board;
   xmlDom.setAttribute("board", board);

src/components/Blockly/BlocklyComponent.jsx

@@ -23,7 +23,7 @@
 
 import React from "react";
 
-import Blockly from "blockly/core";
+import * as Blockly from "blockly/core";
 import "blockly/blocks";
 import Toolbox from "./toolbox/Toolbox";
 
@@ -34,6 +34,8 @@ import {
   ScrollMetricsManager,
 } from "@blockly/plugin-scroll-options";
 
+import { PositionedMinimap } from "@blockly/workspace-minimap";
+
 class BlocklyComponent extends React.Component {
   constructor(props) {
     super(props);
@@ -44,7 +46,7 @@ class BlocklyComponent extends React.Component {
 
   componentDidMount() {
     const { initialXml, children, ...rest } = this.props;
-    this.primaryWorkspace = Blockly.inject(this.blocklyDiv.current, {
+    const workspace = Blockly.inject(this.blocklyDiv.current, {
       toolbox: this.toolbox.current,
       plugins: {
         // These are both required.
@@ -55,12 +57,18 @@ class BlocklyComponent extends React.Component {
     });
     // Initialize plugin.
 
+    // Initialize plugin.
+    // const minimap = new PositionedMinimap(workspace);
+    // minimap.init();
+
+    this.primaryWorkspace = workspace;
+
     this.setState({ workspace: this.primaryWorkspace });
     const plugin = new ScrollOptions(this.workspace);
     plugin.init({ enableWheelScroll: true, enableEdgeScroll: false });
     if (initialXml) {
       Blockly.Xml.domToWorkspace(
-        Blockly.Xml.textToDom(initialXml),
+        Blockly.utils.xml.textToDom(initialXml),
         this.primaryWorkspace,
       );
     }
@@ -72,7 +80,7 @@ class BlocklyComponent extends React.Component {
 
   setXml(xml) {
     Blockly.Xml.domToWorkspace(
-      Blockly.Xml.textToDom(xml),
+      Blockly.utils.xml.textToDom(xml),
       this.primaryWorkspace,
     );
   }

src/components/Blockly/BlocklySvg.js

@@ -24,7 +24,7 @@ class BlocklySvg extends Component {
     const workspace = Blockly.getMainWorkspace();
     workspace.clear();
     Blockly.Xml.domToWorkspace(
-      Blockly.Xml.textToDom(this.props.initialXml),
+      Blockly.utils.xml.textToDom(this.props.initialXml),
       workspace,
     );
     var canvas = workspace.svgBlockCanvas_.cloneNode(true);

src/components/Blockly/BlocklyWindow.js

@@ -49,7 +49,7 @@ class BlocklyWindow extends Component {
       xml = localStorage.getItem("autoSaveXML");
       // change board
       if (!xml) xml = initialXml;
-      var xmlDom = Blockly.Xml.textToDom(xml);
+      var xmlDom = Blockly.utils.xml.textToDom(xml);
       Blockly.Xml.clearWorkspaceAndLoadFromXml(xmlDom, workspace);
     }
 
@@ -58,13 +58,13 @@ class BlocklyWindow extends Component {
       // guarantees that the current xml-code (this.props.initialXml) is rendered
       workspace.clear();
       if (!xml) xml = initialXml;
-      Blockly.Xml.domToWorkspace(Blockly.Xml.textToDom(xml), workspace);
+      Blockly.Xml.domToWorkspace(Blockly.utils.xml.textToDom(xml), workspace);
     }
     if (props.language !== this.props.language) {
       // change language
       xml = localStorage.getItem("autoSaveXML");
       if (!xml) xml = initialXml;
-      xmlDom = Blockly.Xml.textToDom(xml);
+      xmlDom = Blockly.utils.xml.textToDom(xml);
       Blockly.Xml.clearWorkspaceAndLoadFromXml(xmlDom, workspace);
       // var toolbox = workspace.getToolbox();
       // workspace.updateToolbox(toolbox.toolboxDef_);

src/components/Blockly/blocks/audio.js

@@ -1,4 +1,4 @@
-import Blockly from "blockly/core";
+import * as Blockly from "blockly/core";
 import { selectedBoard } from "../helpers/board";
 import * as Types from "../helpers/types";
 import { getColour } from "../helpers/colour";
@@ -35,10 +35,10 @@ Blockly.Blocks["io_tone"] = {
     ) {
       return; // Block deleted or irrelevant event
     }
-    var freq = Blockly.Arduino.valueToCode(
+    var freq = Blockly.Generator.Arduino.valueToCode(
       this,
       "FREQUENCY",
-      Blockly.Arduino.ORDER_ATOMIC,
+      Blockly.Generator.Arduino.ORDER_ATOMIC,
     );
     if (freq < 31 || freq > 65535) {
       this.setWarningText(Blockly.Msg.ARD_TONE_WARNING, "io_tone");
@@ -64,6 +64,6 @@ Blockly.Blocks["io_notone"] = {
   },
   /** @return {!string} The type of input value for the block, an integer. */
   getBlockType: function () {
-    return Blockly.Types.NUMBER;
+    return Types.NUMBER;
   },
 };

src/components/Blockly/blocks/io.js

@@ -10,7 +10,7 @@
  *
  * TODO: maybe change this to a "PIN" BlocklyType
  */
-import Blockly from "blockly/core";
+import * as Blockly from "blockly/core";
 import { selectedBoard } from "../helpers/board";
 import * as Types from "../helpers/types";
 import { getColour } from "../helpers/colour";
@@ -41,7 +41,7 @@ Blockly.Blocks["io_digitalwrite"] = {
    * @this Blockly.Block
    */
   updateFields: function () {
-    Blockly.Arduino.Boards.refreshBlockFieldDropdown(
+    Blockly.Generator.Arduino.Boards.refreshBlockFieldDropdown(
       this,
       "PIN",
       "digitalPins",
@@ -75,7 +75,7 @@ Blockly.Blocks["io_digitalread"] = {
    * @this Blockly.Block
    */
   updateFields: function () {
-    Blockly.Arduino.Boards.refreshBlockFieldDropdown(
+    Blockly.Generator.Arduino.Boards.refreshBlockFieldDropdown(
       this,
       "PIN",
       "digitalPins",
@@ -109,7 +109,7 @@ Blockly.Blocks["io_builtin_led"] = {
    * @this Blockly.Block
    */
   updateFields: function () {
-    Blockly.Arduino.Boards.refreshBlockFieldDropdown(
+    Blockly.Generator.Arduino.Boards.refreshBlockFieldDropdown(
       this,
       "BUILT_IN_LED",
       "builtinLed",
@@ -144,7 +144,11 @@ Blockly.Blocks["io_analogwrite"] = {
    * @this Blockly.Block
    */
   updateFields: function () {
-    Blockly.Arduino.Boards.refreshBlockFieldDropdown(this, "PIN", "pwmPins");
+    Blockly.Generator.Arduino.Boards.refreshBlockFieldDropdown(
+      this,
+      "PIN",
+      "pwmPins",
+    );
   },
   /** @return {!string} The type of input value for the block, an integer. */
   getBlockType: function () {
@@ -178,7 +182,11 @@ Blockly.Blocks["io_analogread"] = {
    * @this Blockly.Block
    */
   updateFields: function () {
-    Blockly.Arduino.Boards.refreshBlockFieldDropdown(this, "PIN", "analogPins");
+    Blockly.Generator.Arduino.Boards.refreshBlockFieldDropdown(
+      this,
+      "PIN",
+      "analogPins",
+    );
   },
 };
 
@@ -310,6 +318,10 @@ Blockly.Blocks["io_analogreadmillivolt"] = {
    * @this Blockly.Block
    */
   updateFields: function () {
-    Blockly.Arduino.Boards.refreshBlockFieldDropdown(this, "PIN", "analogPins");
+    Blockly.Generator.Arduino.Boards.refreshBlockFieldDropdown(
+      this,
+      "PIN",
+      "analogPins",
+    );
   },
 };

src/components/Blockly/blocks/lists.js

@@ -1,4 +1,4 @@
-import Blockly, { FieldDropdown } from "blockly/core";
+import * as Blockly from "blockly/core";
 import * as Types from "../helpers/types";
 import { getColour } from "../helpers/colour";
 
@@ -14,7 +14,7 @@ Blockly.Blocks["lists_create_empty"] = {
     this.appendValueInput("NUMBER");
     this.appendDummyInput()
       .appendField("Items of Type")
-      .appendField(new FieldDropdown(Types.VARIABLE_TYPES), "type");
+      .appendField(new Blockly.FieldDropdown(Types.VARIABLE_TYPES), "type");
     this.setOutput(true, Types.ARRAY.typeName);
     this.setTooltip(Blockly.Msg.ARD_TIME_MILLIS_TIP);
   },

src/components/Blockly/blocks/logic.js

@@ -1,4 +1,4 @@
-import Blockly from "blockly/core";
+import * as Blockly from "blockly/core";
 import { getColour } from "../helpers/colour";
 import * as Types from "../helpers/types";
 import { getCompatibleTypes } from "../helpers/types";
@@ -20,7 +20,10 @@ Blockly.Blocks["controls_if"] = {
     this.setPreviousStatement(true);
     this.setNextStatement(true);
     this.setMutator(
-      new Blockly.Mutator(["controls_if_elseif", "controls_if_else"]),
+      new Blockly.icons.MutatorIcon(
+        ["controls_if_elseif", "controls_if_else"],
+        this,
+      ),
     );
     this.setTooltip(Blockly.Msg.CONTROLS_IF_TOOLTIP_1);
     this.elseifCount_ = 0;
@@ -110,10 +113,16 @@ Blockly.Blocks["controls_if"] = {
     this.updateShape_();
     // Reconnect any child blocks.
     for (var i = 1; i <= this.elseifCount_; i++) {
-      Blockly.Mutator.reconnect(valueConnections[i], this, "IF" + i);
-      Blockly.Mutator.reconnect(statementConnections[i], this, "DO" + i);
+      if (valueConnections[i]) {
+        valueConnections[i].reconnect(this, "IF" + i);
+      }
+      if (statementConnections[i]) {
+        statementConnections[i].reconnect(this, "DO" + i);
+      }
+    }
+    if (elseStatementConnection) {
+      elseStatementConnection.reconnect(this, "ELSE");
     }
-    Blockly.Mutator.reconnect(elseStatementConnection, this, "ELSE");
   },
   /**
    * Store pointers to any connected child blocks.
@@ -463,18 +472,18 @@ Blockly.Blocks["logic_compare"] = {
     }
     if (blockA !== null && blockB === null) {
       this.getInput("A").setCheck(
-        getCompatibleTypes(blockA.outputConnection.check_[0]),
+        getCompatibleTypes(blockA.outputConnection.check[0]),
       );
       this.getInput("B").setCheck(
-        getCompatibleTypes(blockA.outputConnection.check_[0]),
+        getCompatibleTypes(blockA.outputConnection.check[0]),
       );
     }
     if (blockB !== null && blockA === null) {
       this.getInput("B").setCheck(
-        getCompatibleTypes(blockB.outputConnection.check_[0]),
+        getCompatibleTypes(blockB.outputConnection.check[0]),
       );
       this.getInput("A").setCheck(
-        getCompatibleTypes(blockB.outputConnection.check_[0]),
+        getCompatibleTypes(blockB.outputConnection.check[0]),
       );
     }
   },
@@ -491,7 +500,9 @@ Blockly.Blocks["switch_case"] = {
       Blockly.Msg.cases_condition,
     );
     this.appendStatementInput("CASE0").appendField(Blockly.Msg.cases_do);
-    this.setMutator(new Blockly.Mutator(["case_incaseof", "case_default"]));
+    this.setMutator(
+      new Blockly.icons.MutatorIcon(["case_incaseof", "case_default"], this),
+    );
     this.caseCount_ = 0;
     this.defaultCount_ = 0;
   },
@@ -511,8 +522,10 @@ Blockly.Blocks["switch_case"] = {
   },
 
   domToMutation: function (xmlElement) {
-    this.caseCount_ = parseInt(xmlElement.getAttribute("case"), 10);
+    this.caseCount_ = parseInt(xmlElement.getAttribute("case"), 10) || 0;
     this.defaultCount_ = parseInt(xmlElement.getAttribute("default"), 10);
+    this.removeInput("CASECONDITION0");
+    this.removeInput("CASE0");
     for (var x = 0; x <= this.caseCount_; x++) {
       this.appendValueInput("CASECONDITION" + x).appendField(
         Blockly.Msg.cases_condition,
@@ -535,7 +548,7 @@ Blockly.Blocks["switch_case"] = {
       connection = caseBlock.nextConnection;
     }
     if (this.defaultCount_) {
-      var defaultBlock = Blockly.Block.obtain(workspace, "case_default");
+      var defaultBlock = workspace.newBlock("case_default");
       defaultBlock.initSvg();
       connection.connect(defaultBlock.previousConnection);
     }

src/components/Blockly/blocks/loops.js

@@ -1,4 +1,4 @@
-import Blockly from "blockly";
+import * as Blockly from "blockly";
 import { getColour } from "../helpers/colour";
 import { getCompatibleTypes } from "../helpers/types";
 import * as Types from "../helpers/types";
@@ -131,7 +131,7 @@ Blockly.Blocks["controls_forEach"] = {
   customContextMenu: Blockly.Blocks["controls_for"].customContextMenu,
   /** @returns {!string} The type of the variable used in this block */
   getVarType: function (varName) {
-    return Blockly.Types.NUMBER;
+    return Types.NUMBER;
   },
 };