Support Blockly 11

Author: nbudin

package.json

@@ -19,7 +19,7 @@
   "author": "Nat Budin <natbudin@gmail.com>",
   "license": "MIT",
   "dependencies": {
-    "blockly": ">= 10.0.0 < 11.0.0",
+    "blockly": ">= 11.0.0",
     "prop-types": "^15.8.1"
   },
   "peerDependencies": {

src/BlocklyWorkspaceProps.ts

@@ -1,4 +1,5 @@
-import Blockly, { WorkspaceSvg } from "blockly";
+import * as Blockly from "blockly/core";
+import { WorkspaceSvg } from "blockly";
 import { RefObject } from "react";
 
 export interface CommonBlocklyProps {

src/dev-index.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import ReactDOM from "react-dom";
-import Blockly from "blockly";
+import * as Blockly from "blockly/core";
 import { javascriptGenerator } from "blockly/javascript";
 
 import { BlocklyWorkspace } from "./index";
@@ -67,7 +67,9 @@ const TestEditor = () => {
     });
     const newXml = Blockly.Xml.domToText(Blockly.Xml.workspaceToDom(workspace));
     setGeneratedXml(newXml);
-    const newJson = JSON.stringify(Blockly.serialization.workspaces.save(workspace));
+    const newJson = JSON.stringify(
+      Blockly.serialization.workspaces.save(workspace)
+    );
     setGeneratedJson(newJson);
     const code = javascriptGenerator.workspaceToCode(workspace);
     setGeneratedCode(code);
@@ -80,11 +82,19 @@ const TestEditor = () => {
   const onJsonChange = React.useCallback((newJson) => {
     setGeneratedJson(JSON.stringify(newJson));
   }, []);
-  const [ serialState, setSerialState ] = useState<"XML" | "JSON">("XML")
+  const [serialState, setSerialState] = useState<"XML" | "JSON">("XML");
   return (
     <>
       <div style={{ height: "600px", width: "800px" }}>
-        <button onClick={(e)=>setSerialState((e.target as HTMLElement).innerText == "XML" ? "XML" : "JSON")}>{serialState == "XML" ? "JSON" : "XML"} </button>
+        <button
+          onClick={(e) =>
+            setSerialState(
+              (e.target as HTMLElement).innerText == "XML" ? "XML" : "JSON"
+            )
+          }
+        >
+          {serialState == "XML" ? "JSON" : "XML"}{" "}
+        </button>
         <BlocklyWorkspace
           key={serialState}
           toolboxConfiguration={toolboxConfiguration}
@@ -96,8 +106,12 @@ const TestEditor = () => {
               snap: true,
             },
           }}
-          initialXml={serialState === "XML" ? ConfigFiles.INITIAL_XML : undefined}
-          initialJson={serialState === "JSON" ? ConfigFiles.INITIAL_JSON : undefined}
+          initialXml={
+            serialState === "XML" ? ConfigFiles.INITIAL_XML : undefined
+          }
+          initialJson={
+            serialState === "JSON" ? ConfigFiles.INITIAL_JSON : undefined
+          }
           className="fill-height"
           onWorkspaceChange={onWorkspaceChange}
           onXmlChange={onXmlChange}

src/index.ts

@@ -1,7 +1,8 @@
 import useBlocklyWorkspace from "./useBlocklyWorkspace";
 import BlocklyWorkspace from "./BlocklyWorkspace";
-import Blockly, {WorkspaceSvg, Workspace} from "blockly";
+import { WorkspaceSvg, Workspace } from "blockly";
+import * as Blockly from "blockly/core";
 import ToolboxDefinition1 = Blockly.utils.toolbox.ToolboxDefinition;
 export type ToolboxDefinition = ToolboxDefinition1;
 export { BlocklyWorkspace, useBlocklyWorkspace };
-export {WorkspaceSvg, Workspace};
+export { WorkspaceSvg, Workspace };

src/useBlocklyWorkspace.ts

@@ -1,5 +1,6 @@
 import React from "react";
-import Blockly, { Workspace, WorkspaceSvg } from "blockly";
+import * as Blockly from "blockly/core";
+import { Workspace, WorkspaceSvg } from "blockly";
 import { UseBlocklyProps } from "./BlocklyWorkspaceProps";
 
 import debounce from "./debounce";
@@ -50,10 +51,14 @@ const useBlocklyWorkspace = ({
   onImportError,
   onInject,
   onDispose,
-}: UseBlocklyProps): { workspace: WorkspaceSvg | null; xml: string | null, json: object | null } => {
-  // onImportError replaces onImportXmlError 
+}: UseBlocklyProps): {
+  workspace: WorkspaceSvg | null;
+  xml: string | null;
+  json: object | null;
+} => {
+  // onImportError replaces onImportXmlError
   // This is done for not breaking the signature until depreaction
-  onImportError = onImportError ?? onImportXmlError
+  onImportError = onImportError ?? onImportXmlError;
 
   const [workspace, setWorkspace] = React.useState<WorkspaceSvg | null>(null);
   const [xml, setXml] = React.useState<string | null>(initialXml || null);
@@ -72,7 +77,11 @@ const useBlocklyWorkspace = ({
   const toolboxConfigurationRef = React.useRef(toolboxConfiguration);
   React.useEffect(() => {
     toolboxConfigurationRef.current = toolboxConfiguration;
-    if (toolboxConfiguration && workspace && !workspaceConfiguration?.readOnly) {
+    if (
+      toolboxConfiguration &&
+      workspace &&
+      !workspaceConfiguration?.readOnly
+    ) {
       workspace.updateToolbox(toolboxConfiguration);
     }
   }, [toolboxConfiguration, workspace, workspaceConfiguration]);
@@ -180,15 +189,14 @@ const useBlocklyWorkspace = ({
         setXml(null);
       }
       setDidInitialImport(true);
-    }
-    else if (json && workspace && !didInitialImport) {
+    } else if (json && workspace && !didInitialImport) {
       const success = importFromJson(json, workspace, onImportError);
       if (!success) {
         setJson(null);
       }
       const jsonToXml = Blockly.Xml.domToText(
         Blockly.Xml.workspaceToDom(workspace)
-      )
+      );
       setXml(jsonToXml);
       setDidInitialImport(true);
     }