refactor: migrate scratch-blocks to Typescript

src/checkable_continuous_flyout.js

@@ -6,7 +6,7 @@
 
 import * as Blockly from "blockly/core";
 import { ContinuousFlyout } from "@blockly/continuous-toolbox";
-import { RecyclableBlockFlyoutInflater } from "./recyclable_block_flyout_inflater.js";
+import { RecyclableBlockFlyoutInflater } from "./recyclable_block_flyout_inflater";
 import { StatusIndicatorLabel } from "./status_indicator_label";
 
 export class CheckableContinuousFlyout extends ContinuousFlyout {

src/index.ts

@@ -60,7 +60,7 @@ import { registerFieldTextInputRemovable } from "./fields/field_textinput_remova
 import { registerFieldVariableGetter } from "./fields/field_variable_getter.js";
 import { registerFieldVariable } from "./fields/field_variable.js";
 import { registerFieldVerticalSeparator } from "./fields/field_vertical_separator.js";
-import { registerRecyclableBlockFlyoutInflater } from "./recyclable_block_flyout_inflater.js";
+import { registerRecyclableBlockFlyoutInflater } from "./recyclable_block_flyout_inflater";
 import { registerScratchBlockPaster } from "./scratch_block_paster.js";
 import { registerStatusIndicatorLabelFlyoutInflater } from "./status_indicator_label_flyout_inflater";
 import { registerScratchContinuousCategory } from "./scratch_continuous_category.js";

src/recyclable_block_flyout_inflater.ts

@@ -13,26 +13,27 @@ import { CheckboxBubble } from "./checkbox_bubble";
 export class RecyclableBlockFlyoutInflater extends Blockly.BlockFlyoutInflater {
   /**
    * Whether or not block recycling is enabled.
-   * @type {boolean}
    */
   recyclingEnabled = true;
 
   /**
    * Map from block type to block instance.
-   * @type {Map<string, !Blockly.BlockSvg>}
    */
-  recycledBlocks = new Map();
+  recycledBlocks = new Map<string, Blockly.BlockSvg>();
 
   /**
    * Creates a block on the flyout workspace from the given block definition.
    *
-   * @param {!Object} state A JSON representation of a block to load.
-   * @param {!Blockly.WorkspaceSvg} flyoutWorkspace The flyout's workspace.
-   * @returns {!Blockly.BlockSvg} The newly created block.
+   * @param state A JSON representation of a block to load.
+   * @param flyoutWorkspace The flyout's workspace.
+   * @returns The newly created block.
    */
-  load(state, flyoutWorkspace) {
+  load(
+    state: Blockly.utils.toolbox.BlockInfo,
+    flyoutWorkspace: Blockly.WorkspaceSvg
+  ): Blockly.IBoundedElement {
     const block = super.load(state, flyoutWorkspace);
-    if (block.checkboxInFlyout) {
+    if ("checkboxInFlyout" in block && block.checkboxInFlyout) {
       block.moveBy(
         CheckboxBubble.CHECKBOX_SIZE + CheckboxBubble.CHECKBOX_MARGIN,
         0
@@ -45,19 +46,21 @@ export class RecyclableBlockFlyoutInflater extends Blockly.BlockFlyoutInflater {
   /**
    * Toggles whether or not recycling is enabled.
    *
-   * @param {boolean} enabled True if recycling should be enabled.
+   * @param enabled True if recycling should be enabled.
    */
-  setRecyclingEnabled(enabled) {
+  setRecyclingEnabled(enabled: boolean) {
     this.recyclingEnabled = enabled;
   }
 
   /**
    * Creates a new block from the given block definition.
    *
-   * @param {!Object} blockDefinition The definition to create a block from.
-   * @returns {!Blockly.BlockSvg} The newly created block.
+   * @param blockDefinition The definition to create a block from.
+   * @returns The newly created block.
    */
-  createBlock(blockDefinition) {
+  createBlock(
+    blockDefinition: Blockly.utils.toolbox.BlockInfo
+  ): Blockly.BlockSvg {
     const blockType = this.getTypeFromDefinition(blockDefinition);
     return (
       this.getRecycledBlock(blockType) ??
@@ -68,15 +71,17 @@ export class RecyclableBlockFlyoutInflater extends Blockly.BlockFlyoutInflater {
   /**
    * Returns the type of a block from an XML or JSON block definition.
    *
-   * @param blockDefinition {!Object} The block definition to parse.
-   * @returns {string} The block type.
+   * @param blockDefinition The block definition to parse.
+   * @returns The block type.
    */
-  getTypeFromDefinition(blockDefinition) {
+  getTypeFromDefinition(
+    blockDefinition: Blockly.utils.toolbox.BlockInfo
+  ): string {
     if (blockDefinition["blockxml"]) {
       const xml =
         typeof blockDefinition["blockxml"] === "string"
           ? Blockly.utils.xml.textToDom(blockDefinition["blockxml"])
-          : blockDefinition["blockxml"];
+          : (blockDefinition["blockxml"] as Element);
       return xml.getAttribute("type");
     } else {
       return blockDefinition["type"];
@@ -88,9 +93,9 @@ export class RecyclableBlockFlyoutInflater extends Blockly.BlockFlyoutInflater {
    * top of the workspace. Used during large workspace swaps to limit the number
    * of new DOM elements we need to create.
    *
-   * @param {!Blockly.BlockSvg} block The block to recycle.
+   * @param block The block to recycle.
    */
-  recycleBlock(block) {
+  recycleBlock(block: Blockly.BlockSvg) {
     const xy = block.getRelativeToSurfaceXY();
     block.moveBy(-xy.x, -xy.y);
     this.recycledBlocks.set(block.type, block);
@@ -100,11 +105,10 @@ export class RecyclableBlockFlyoutInflater extends Blockly.BlockFlyoutInflater {
    * Returns a block from the cache of recycled blocks with the given type, or
    * undefined if one cannot be found.
    *
-   * @param {string} blockType The type of the block to try to recycle.
-   * @returns {?Blockly.BlockSvg} The recycled block, or undefined if
-   *     one could not be recycled.
+   * @param blockType The type of the block to try to recycle.
+   * @returns The recycled block, or undefined if one could not be recycled.
    */
-  getRecycledBlock(blockType) {
+  getRecycledBlock(blockType: string): Blockly.BlockSvg | undefined {
     const block = this.recycledBlocks.get(blockType);
     this.recycledBlocks.delete(blockType);
     return block;
@@ -113,10 +117,10 @@ export class RecyclableBlockFlyoutInflater extends Blockly.BlockFlyoutInflater {
   /**
    * Returns whether the given block can be recycled or not.
    *
-   * @param {!Blockly.BlockSvg} block The block to check for recyclability.
-   * @returns {boolean} True if the block can be recycled. False otherwise.
+   * @param block The block to check for recyclability.
+   * @returns True if the block can be recycled. False otherwise.
    */
-  blockIsRecyclable(block) {
+  blockIsRecyclable(block: Blockly.Block): boolean {
     if (!this.recyclingEnabled) {
       return false;
     }
@@ -144,9 +148,7 @@ export class RecyclableBlockFlyoutInflater extends Blockly.BlockFlyoutInflater {
       }
       // Check children.
       if (input.connection) {
-        const targetBlock =
-          /** @type {Blockly.BlockSvg} */
-          (input.connection.targetBlock());
+        const targetBlock = input.connection.targetBlock();
         if (targetBlock && !this.blockIsRecyclable(targetBlock)) {
           return false;
         }
@@ -158,9 +160,9 @@ export class RecyclableBlockFlyoutInflater extends Blockly.BlockFlyoutInflater {
   /**
    * Disposes of the provided block.
    *
-   * @param {!Blockly.BlockSvg} element The block to dispose of.
+   * @param element The block to dispose of.
    */
-  disposeElement(element) {
+  disposeElement(element: Blockly.BlockSvg) {
     if (this.blockIsRecyclable(element)) {
       this.removeListeners(element.id);
       this.recycleBlock(element);
@@ -173,9 +175,7 @@ export class RecyclableBlockFlyoutInflater extends Blockly.BlockFlyoutInflater {
    * Clears the cache of recycled blocks.
    */
   emptyRecycledBlocks() {
-    this.recycledBlocks
-      .values()
-      .forEach((block) => block.dispose(false, false));
+    this.recycledBlocks.forEach((block) => block.dispose(false, false));
     this.recycledBlocks.clear();
   }
 }