From b5cd8390002f9ffd59cdea6bd908f3be21bc6330 Mon Sep 17 00:00:00 2001
From: Beka Westberg <bwestberg@google.com>
Date: Sun, 11 Sep 2022 13:06:41 -0700
Subject: [PATCH] chore: remove AnyDuringMigration from common renderer (#6402)

* chore: remove AnyDuringMigration from common renderer

* chore: remove AnyDuringMigration in common drawer

* chore: format

* chore: add dividers back

* chore: format
---
 core/renderers/common/constants.ts     |  44 +++----
 core/renderers/common/debugger.ts      |  16 +--
 core/renderers/common/drawer.ts        |  56 +++-----
 core/renderers/common/i_path_object.ts |  39 +++---
 core/renderers/common/info.ts          |  43 +++---
 core/renderers/common/marker_svg.ts    | 174 +++++++++++--------------
 core/renderers/common/path_object.ts   |  23 ++--
 core/renderers/geras/drawer.ts         |   2 +-
 core/renderers/geras/info.ts           |  12 +-
 core/renderers/measurables/icon.ts     |   1 +
 core/renderers/thrasos/info.ts         |  10 +-
 core/renderers/zelos/drawer.ts         |  10 +-
 core/renderers/zelos/info.ts           |   2 +-
 13 files changed, 189 insertions(+), 243 deletions(-)

diff --git a/core/renderers/common/constants.ts b/core/renderers/common/constants.ts
index 75063f9b4..1954839f1 100644
--- a/core/renderers/common/constants.ts
+++ b/core/renderers/common/constants.ts
@@ -93,6 +93,16 @@ export type DynamicShape = {
 /** An object containing sizing and type information about a shape. */
 export type Shape = BaseShape|DynamicShape;
 
+/**
+ * Returns whether the shape is dynamic or not.
+ *
+ * @param shape The shape to check for dynamic-ness.
+ * @returns Whether the shape is a dynamic shape or not.
+ */
+export function isDynamicShape(shape: Shape): shape is DynamicShape {
+  return (shape as DynamicShape).isDynamic;
+}
+
 /**
  * An object that provides constants for rendering blocks.
  *
@@ -185,7 +195,7 @@ export class ConstantProvider {
 
   EXTERNAL_VALUE_INPUT_PADDING = 2;
   EMPTY_STATEMENT_INPUT_HEIGHT: number;
-  START_POINT: AnyDuringMigration;
+  START_POINT: string;
 
   /** Height of SVG path for jagged teeth at the end of collapsed blocks. */
   JAGGED_TEETH_HEIGHT = 12;
@@ -289,9 +299,7 @@ export class ConstantProvider {
   embossFilterId = '';
 
   /** The <filter> element to use for highlighting, or null if not set. */
-  // AnyDuringMigration because:  Type 'null' is not assignable to type
-  // 'SVGElement'.
-  private embossFilter_: SVGElement = null as AnyDuringMigration;
+  private embossFilter_: SVGElement|null = null;
 
   /**
    * The ID of the disabled pattern, or the empty string if no pattern is set.
@@ -303,9 +311,7 @@ export class ConstantProvider {
   /**
    * The <pattern> element to use for disabled blocks, or null if not set.
    */
-  // AnyDuringMigration because:  Type 'null' is not assignable to type
-  // 'SVGElement'.
-  private disabledPattern_: SVGElement = null as AnyDuringMigration;
+  private disabledPattern_: SVGElement|null = null;
 
   /**
    * The ID of the debug filter, or the empty string if no pattern is set.
@@ -315,14 +321,10 @@ export class ConstantProvider {
   /**
    * The <filter> element to use for a debug highlight, or null if not set.
    */
-  // AnyDuringMigration because:  Type 'null' is not assignable to type
-  // 'SVGElement'.
-  private debugFilter_: SVGElement = null as AnyDuringMigration;
+  private debugFilter_: SVGElement|null = null;
 
   /** The <style> element to use for injecting renderer specific CSS. */
-  // AnyDuringMigration because:  Type 'null' is not assignable to type
-  // 'HTMLStyleElement'.
-  private cssNode_: HTMLStyleElement = null as AnyDuringMigration;
+  private cssNode_: HTMLStyleElement|null = null;
 
   /**
    * Cursor colour.
@@ -718,9 +720,7 @@ export class ConstantProvider {
     if (this.debugFilter_) {
       dom.removeNode(this.debugFilter_);
     }
-    // AnyDuringMigration because:  Type 'null' is not assignable to type
-    // 'HTMLStyleElement'.
-    this.cssNode_ = null as AnyDuringMigration;
+    this.cssNode_ = null;
   }
 
   /**
@@ -958,11 +958,9 @@ export class ConstantProvider {
                          k1="0" k2="1" k3="1" k4="0" />
           </filter>
         */
-    // AnyDuringMigration because:  Argument of type 'SVGElement | null' is not
-    // assignable to parameter of type 'Element | undefined'.
     const embossFilter = dom.createSvgElement(
         Svg.FILTER, {'id': 'blocklyEmbossFilter' + this.randomIdentifier},
-        this.defs_ as AnyDuringMigration);
+        this.defs_);
     dom.createSvgElement(
         Svg.FEGAUSSIANBLUR,
         {'in': 'SourceAlpha', 'stdDeviation': 1, 'result': 'blur'},
@@ -1009,8 +1007,6 @@ export class ConstantProvider {
        stroke="#cc0" />
           </pattern>
         */
-    // AnyDuringMigration because:  Argument of type 'SVGElement | null' is not
-    // assignable to parameter of type 'Element | undefined'.
     const disabledPattern = dom.createSvgElement(
         Svg.PATTERN, {
           'id': 'blocklyDisabledPattern' + this.randomIdentifier,
@@ -1018,7 +1014,7 @@ export class ConstantProvider {
           'width': 10,
           'height': 10,
         },
-        this.defs_ as AnyDuringMigration);
+        this.defs_);
     dom.createSvgElement(
         Svg.RECT, {'width': 10, 'height': 10, 'fill': '#aaa'}, disabledPattern);
     dom.createSvgElement(
@@ -1037,8 +1033,6 @@ export class ConstantProvider {
   private createDebugFilter() {
     // Only create the debug filter once.
     if (!this.debugFilter_) {
-      // AnyDuringMigration because:  Argument of type 'SVGElement | null' is
-      // not assignable to parameter of type 'Element | undefined'.
       const debugFilter = dom.createSvgElement(
           Svg.FILTER, {
             'id': 'blocklyDebugFilter' + this.randomIdentifier,
@@ -1047,7 +1041,7 @@ export class ConstantProvider {
             'y': '-30%',
             'x': '-40%',
           },
-          this.defs_ as AnyDuringMigration);
+          this.defs_);
       // Set all gaussian blur pixels to 1 opacity before applying flood
       const debugComponentTransfer = dom.createSvgElement(
           Svg.FECOMPONENTTRANSFER, {'result': 'outBlur'}, debugFilter);
diff --git a/core/renderers/common/debugger.ts b/core/renderers/common/debugger.ts
index 863c28d19..f701e77ae 100644
--- a/core/renderers/common/debugger.ts
+++ b/core/renderers/common/debugger.ts
@@ -58,9 +58,7 @@ export class Debug {
    * The SVG root of the block that is being rendered.  Debug elements will
    * be attached to this root.
    */
-  // AnyDuringMigration because:  Type 'null' is not assignable to type
-  // 'SVGElement'.
-  private svgRoot_: SVGElement = null as AnyDuringMigration;
+  private svgRoot_: SVGElement|null = null;
 
   private randomColour_ = '';
 
@@ -239,15 +237,11 @@ export class Debug {
       colour = 'goldenrod';
       fill = colour;
     }
-    // AnyDuringMigration because:  Property 'offsetInBlock_' is private and
-    // only accessible within class 'RenderedConnection'. AnyDuringMigration
-    // because:  Property 'offsetInBlock_' is private and only accessible within
-    // class 'RenderedConnection'.
     this.debugElements_.push(dom.createSvgElement(
         Svg.CIRCLE, {
           'class': 'blockRenderDebug',
-          'cx': (conn as AnyDuringMigration).offsetInBlock_.x,
-          'cy': (conn as AnyDuringMigration).offsetInBlock_.y,
+          'cx': conn.getOffsetInBlock().x,
+          'cy': conn.getOffsetInBlock().y,
           'r': size,
           'fill': fill,
           'stroke': colour,
@@ -280,9 +274,7 @@ export class Debug {
         },
         this.svgRoot_));
 
-    // AnyDuringMigration because:  Property 'isTopOrBottomRow' does not exist
-    // on type 'typeof Types'.
-    if ((Types as AnyDuringMigration).isTopOrBottomRow(row)) {
+    if (Types.isTopOrBottomRow(row)) {
       return;
     }
 
diff --git a/core/renderers/common/drawer.ts b/core/renderers/common/drawer.ts
index 83074dfa3..293fbbace 100644
--- a/core/renderers/common/drawer.ts
+++ b/core/renderers/common/drawer.ts
@@ -13,6 +13,7 @@ import * as goog from '../../../closure/goog/goog.js';
 goog.declareModuleId('Blockly.blockRendering.Drawer');
 
 import type {BlockSvg} from '../../block_svg.js';
+import {Coordinate} from '../../utils.js';
 import * as svgPaths from '../../utils/svg_paths.js';
 import {Connection} from '../measurables/connection.js';
 import type {ExternalValueInput} from '../measurables/external_value_input.js';
@@ -23,6 +24,7 @@ import type {PreviousConnection} from '../measurables/previous_connection.js';
 import type {Row} from '../measurables/row.js';
 import {Types} from '../measurables/types.js';
 
+import {isDynamicShape} from './constants.js';
 import type {ConstantProvider, Notch, PuzzleTab} from './constants.js';
 import * as debug from './debug.js';
 import type {RenderInfo} from './info.js';
@@ -34,9 +36,9 @@ import type {RenderInfo} from './info.js';
  * @alias Blockly.blockRendering.Drawer
  */
 export class Drawer {
-  block_: AnyDuringMigration;
-  info_: AnyDuringMigration;
-  topLeft_: AnyDuringMigration;
+  block_: BlockSvg;
+  info_: RenderInfo;
+  topLeft_: Coordinate;
   outlinePath_ = '';
   inlinePath_ = '';
   protected constants_: ConstantProvider;
@@ -77,7 +79,7 @@ export class Drawer {
       this.block_.pathObject.flipRTL();
     }
     if (debug.isDebuggerEnabled()) {
-      this.block_.renderingDebugger.drawDebug(this.block_, this.info_);
+      this.block_.renderingDebugger?.drawDebug(this.block_, this.info_);
     }
     this.recordSizeOnBlock_();
   }
@@ -98,7 +100,7 @@ export class Drawer {
   /** Hide icons that were marked as hidden. */
   protected hideHiddenIcons_() {
     for (let i = 0, iconInfo; iconInfo = this.info_.hiddenIcons[i]; i++) {
-      iconInfo.icon.iconGroup_.setAttribute('display', 'none');
+      iconInfo.icon.iconGroup_?.setAttribute('display', 'none');
     }
   }
 
@@ -140,9 +142,7 @@ export class Drawer {
           Types.isPreviousConnection(elem) && elem instanceof Connection) {
         this.outlinePath_ +=
             ((elem as PreviousConnection).shape as Notch).pathLeft;
-        // AnyDuringMigration because:  Property 'isHat' does not exist on type
-        // 'typeof Types'.
-      } else if ((Types as AnyDuringMigration).isHat(elem)) {
+      } else if (Types.isHat(elem)) {
         this.outlinePath_ += this.constants_.START_HAT.path;
       } else if (Types.isSpacer(elem)) {
         this.outlinePath_ += svgPaths.lineOnAxis('h', elem.width);
@@ -173,15 +173,9 @@ export class Drawer {
     const input = row.getLastInput() as ExternalValueInput | InlineInput;
     this.positionExternalValueConnection_(row);
 
-    // AnyDuringMigration because:  Property 'pathDown' does not exist on type
-    // 'Shape'. AnyDuringMigration because:  Property 'pathDown' does not exist
-    // on type 'Shape'. AnyDuringMigration because:  Property 'pathDown' does
-    // not exist on type 'Shape'.
-    const pathDown =
-        typeof (input.shape as AnyDuringMigration).pathDown === 'function' ?
-        ((input.shape as AnyDuringMigration).pathDown as (p1: number) =>
-             AnyDuringMigration)(input.height) :
-        (input.shape as AnyDuringMigration).pathDown;
+    const pathDown = isDynamicShape(input.shape) ?
+        input.shape.pathDown(input.height) :
+        (input.shape as PuzzleTab).pathDown;
 
     this.outlinePath_ += svgPaths.lineOnAxis('H', input.xPos + input.width) +
         pathDown +
@@ -265,10 +259,9 @@ export class Drawer {
     if (outputConnection) {
       const tabBottom =
           outputConnection.connectionOffsetY + outputConnection.height;
-      const pathUp = typeof outputConnection.shape.pathUp === 'function' ?
-          (outputConnection.shape.pathUp as (p1: number) =>
-               AnyDuringMigration)(outputConnection.height) :
-          outputConnection.shape.pathUp;
+      const pathUp = isDynamicShape(outputConnection.shape) ?
+          outputConnection.shape.pathUp(outputConnection.height) :
+          (outputConnection.shape as PuzzleTab).pathUp;
 
       // Draw a line up to the bottom of the tab.
       this.outlinePath_ += svgPaths.lineOnAxis('V', tabBottom) + pathUp;
@@ -300,25 +293,16 @@ export class Drawer {
    * @param fieldInfo The rendering information for the field or icon.
    */
   protected layoutField_(fieldInfo: Icon|Field) {
-    let svgGroup;
-    if (Types.isField(fieldInfo)) {
-      // AnyDuringMigration because:  Property 'field' does not exist on type
-      // 'Icon | Field'.
-      svgGroup = (fieldInfo as AnyDuringMigration).field.getSvgRoot();
-    } else if (Types.isIcon(fieldInfo)) {
-      // AnyDuringMigration because:  Property 'icon' does not exist on type
-      // 'Icon | Field'.
-      svgGroup = (fieldInfo as AnyDuringMigration).icon.iconGroup_;
-    }
+    const svgGroup = Types.isField(fieldInfo) ?
+        (fieldInfo as Field).field.getSvgRoot() :
+        (fieldInfo as Icon).icon.iconGroup_!;  // Never null in rendered case.
 
     const yPos = fieldInfo.centerline - fieldInfo.height / 2;
     let xPos = fieldInfo.xPos;
     let scale = '';
     if (this.info_.RTL) {
       xPos = -(xPos + fieldInfo.width);
-      // AnyDuringMigration because:  Property 'flipRtl' does not exist on type
-      // 'Icon | Field'.
-      if ((fieldInfo as AnyDuringMigration).flipRtl) {
+      if (fieldInfo.flipRtl) {
         xPos += fieldInfo.width;
         scale = 'scale(-1 1)';
       }
@@ -327,9 +311,7 @@ export class Drawer {
       svgGroup.setAttribute('display', 'block');
       svgGroup.setAttribute(
           'transform', 'translate(' + xPos + ',' + yPos + ')');
-      // AnyDuringMigration because:  Property 'icon' does not exist on type
-      // 'Icon | Field'.
-      (fieldInfo as AnyDuringMigration).icon.computeIconLocation();
+      (fieldInfo as Icon).icon.computeIconLocation();
     } else {
       svgGroup.setAttribute(
           'transform', 'translate(' + xPos + ',' + yPos + ')' + scale);
diff --git a/core/renderers/common/i_path_object.ts b/core/renderers/common/i_path_object.ts
index 4159775a1..ede481199 100644
--- a/core/renderers/common/i_path_object.ts
+++ b/core/renderers/common/i_path_object.ts
@@ -14,7 +14,8 @@ import * as goog from '../../../closure/goog/goog.js';
 goog.declareModuleId('Blockly.blockRendering.IPathObject');
 
 import type {BlockStyle} from '../../theme.js';
-
+import type {BlockSvg} from '../../block_svg.js';
+import type {Connection} from '../../connection.js';
 import type {ConstantProvider} from './constants.js';
 
 
@@ -26,7 +27,11 @@ import type {ConstantProvider} from './constants.js';
  * @alias Blockly.blockRendering.IPathObject
  */
 export interface IPathObject {
-  /** The primary path of the block. */
+  /**
+   * The primary path of the block.
+   *
+   * @internal
+   */
   svgPath: SVGElement;
 
   /** The renderer's constant provider. */
@@ -39,13 +44,13 @@ export interface IPathObject {
    * Holds the cursors SVG element when the cursor is attached to the block.
    * This is null if there is no cursor on the block.
    */
-  cursorSvg: SVGElement;
+  cursorSvg: SVGElement|null;
 
   /**
    * Holds the markers SVG element when the marker is attached to the block.
    * This is null if there is no marker on the block.
    */
-  markerSvg: SVGElement;
+  markerSvg: SVGElement|null;
 
   /**
    * Set the path generated by the renderer onto the respective SVG element.
@@ -53,7 +58,7 @@ export interface IPathObject {
    * @param pathString The path.
    * @internal
    */
-  setPath: AnyDuringMigration;
+  setPath(pathString: string): void;
 
   /**
    * Apply the stored colours to the block's path, taking into account whether
@@ -62,7 +67,7 @@ export interface IPathObject {
    * @param block The source block.
    * @internal
    */
-  applyColour: AnyDuringMigration;
+  applyColour(block: BlockSvg): void;
 
   /**
    * Update the style.
@@ -70,14 +75,14 @@ export interface IPathObject {
    * @param blockStyle The block style to use.
    * @internal
    */
-  setStyle: AnyDuringMigration;
+  setStyle(blockStyle: BlockStyle): void;
 
   /**
    * Flip the SVG paths in RTL.
    *
    * @internal
    */
-  flipRTL: () => void;
+  flipRTL(): void;
 
   /**
    * Add the cursor SVG to this block's SVG group.
@@ -86,7 +91,7 @@ export interface IPathObject {
    *     group.
    * @internal
    */
-  setCursorSvg: AnyDuringMigration;
+  setCursorSvg(cursorSvg: SVGElement): void;
 
   /**
    * Add the marker SVG to this block's SVG group.
@@ -95,7 +100,7 @@ export interface IPathObject {
    *     group.
    * @internal
    */
-  setMarkerSvg: AnyDuringMigration;
+  setMarkerSvg(markerSvg: SVGElement): void;
 
   /**
    * Set whether the block shows a highlight or not.  Block highlighting is
@@ -104,7 +109,7 @@ export interface IPathObject {
    * @param highlighted True if highlighted.
    * @internal
    */
-  updateHighlighted: AnyDuringMigration;
+  updateHighlighted(highlighted: boolean): void;
 
   /**
    * Add or remove styling showing that a block is selected.
@@ -112,7 +117,7 @@ export interface IPathObject {
    * @param enable True if selection is enabled, false otherwise.
    * @internal
    */
-  updateSelected: AnyDuringMigration;
+  updateSelected(enabled: boolean): void;
 
   /**
    * Add or remove styling showing that a block is dragged over a delete area.
@@ -121,7 +126,7 @@ export interface IPathObject {
    *     otherwise.
    * @internal
    */
-  updateDraggingDelete: AnyDuringMigration;
+  updateDraggingDelete(enabled: boolean): void;
 
   /**
    * Add or remove styling showing that a block is an insertion marker.
@@ -129,7 +134,7 @@ export interface IPathObject {
    * @param enable True if the block is an insertion marker, false otherwise.
    * @internal
    */
-  updateInsertionMarker: AnyDuringMigration;
+  updateInsertionMarker(enabled: boolean): void;
 
   /**
    * Add or remove styling showing that a block is movable.
@@ -137,7 +142,7 @@ export interface IPathObject {
    * @param enable True if the block is movable, false otherwise.
    * @internal
    */
-  updateMovable: AnyDuringMigration;
+  updateMovable(enabled: boolean): void;
 
   /**
    * Add or remove styling that shows that if the dragging block is dropped,
@@ -147,7 +152,7 @@ export interface IPathObject {
    * @param enable True if styling should be added.
    * @internal
    */
-  updateReplacementFade: AnyDuringMigration;
+  updateReplacementFade(enabled: boolean): void;
 
   /**
    * Add or remove styling that shows that if the dragging block is dropped,
@@ -157,5 +162,5 @@ export interface IPathObject {
    * @param enable True if styling should be added.
    * @internal
    */
-  updateShapeForInputHighlight: AnyDuringMigration;
+  updateShapeForInputHighlight(conn: Connection, enable: boolean): void;
 }
diff --git a/core/renderers/common/info.ts b/core/renderers/common/info.ts
index 96774df10..f3aa1a277 100644
--- a/core/renderers/common/info.ts
+++ b/core/renderers/common/info.ts
@@ -51,9 +51,9 @@ import type {Renderer} from './renderer.js';
  * @alias Blockly.blockRendering.RenderInfo
  */
 export class RenderInfo {
-  block_: AnyDuringMigration;
+  block_: BlockSvg;
   protected constants_: ConstantProvider;
-  outputConnection: OutputConnection;
+  outputConnection: OutputConnection|null;
   isInline: boolean;
   isCollapsed: boolean;
   isInsertionMarker: boolean;
@@ -108,13 +108,9 @@ export class RenderInfo {
      * A measurable representing the output connection if the block has one.
      * Otherwise null.
      */
-    // AnyDuringMigration because:  Type 'OutputConnection | null' is not
-    // assignable to type 'OutputConnection'.
-    this.outputConnection =
-        (!block.outputConnection ?
-             null :
-             new OutputConnection(this.constants_, (block.outputConnection))) as
-        AnyDuringMigration;
+    this.outputConnection = block.outputConnection ?
+        new OutputConnection(this.constants_, block.outputConnection) :
+        null;
 
     /**
      * Whether the block should be rendered as a single line, either because
@@ -195,7 +191,7 @@ export class RenderInfo {
       }
     }
 
-    let lastInput = null;
+    let lastInput = undefined;
     // Loop across all of the inputs on the block, creating objects for anything
     // that needs to be rendered and breaking the block up into visual rows.
     for (let i = 0, input; input = this.block_.inputList[i]; i++) {
@@ -358,7 +354,7 @@ export class RenderInfo {
    * @param lastInput The input that follows.
    * @returns True if the next input should be rendered on a new row.
    */
-  protected shouldStartNewRow_(input: Input, lastInput: Input): boolean {
+  protected shouldStartNewRow_(input: Input, lastInput?: Input): boolean {
     // If this is the first input, just add to the existing row.
     // That row is either empty or has some icons in it.
     if (!lastInput) {
@@ -424,9 +420,7 @@ export class RenderInfo {
     }
     // Between inputs and the end of the row.
     if (prev && Types.isInput(prev) && !next) {
-      // AnyDuringMigration because:  Property 'isExternalInput' does not exist
-      // on type 'typeof Types'.
-      if ((Types as AnyDuringMigration).isExternalInput(prev)) {
+      if (Types.isExternalInput(prev)) {
         return this.constants_.NO_PADDING;
       } else if (Types.isInlineInput(prev)) {
         return this.constants_.LARGE_PADDING;
@@ -507,9 +501,7 @@ export class RenderInfo {
         if (missingSpace > 0) {
           this.addAlignmentPadding_(row, missingSpace);
         }
-        // AnyDuringMigration because:  Property 'isTopOrBottomRow' does not
-        // exist on type 'typeof Types'.
-        if ((Types as AnyDuringMigration).isTopOrBottomRow(row)) {
+        if (Types.isTopOrBottomRow(row)) {
           row.widthWithConnectedBlocks = row.width;
         }
       }
@@ -666,9 +658,7 @@ export class RenderInfo {
     }
     if (Types.isTopRow(row)) {
       const topRow = row as TopRow;
-      // AnyDuringMigration because:  Property 'isHat' does not exist on type
-      // 'typeof Types'.
-      if ((Types as AnyDuringMigration).isHat(elem)) {
+      if (Types.isHat(elem)) {
         return topRow.capline - elem.height / 2;
       }
       return topRow.capline + elem.height / 2;
@@ -714,12 +704,13 @@ export class RenderInfo {
           Math.max(widestRowWithConnectedBlocks, row.widthWithConnectedBlocks);
       this.recordElemPositions_(row);
     }
-    if (this.outputConnection && this.block_.nextConnection &&
-        this.block_.nextConnection.isConnected()) {
-      // Include width of connected block in value to stack width measurement.
-      widestRowWithConnectedBlocks = Math.max(
-          widestRowWithConnectedBlocks,
-          this.block_.nextConnection.targetBlock().getHeightWidth().width);
+    if (this.outputConnection && this.block_.nextConnection) {
+      const target = this.block_.nextConnection.targetBlock();
+      if (target) {
+        // Include width of connected block in value to stack width measurement.
+        widestRowWithConnectedBlocks = Math.max(
+            widestRowWithConnectedBlocks, target.getHeightWidth().width);
+      }
     }
 
     this.widthWithChildren = widestRowWithConnectedBlocks + this.startX;
diff --git a/core/renderers/common/marker_svg.ts b/core/renderers/common/marker_svg.ts
index bf63f1b7e..9d767fd00 100644
--- a/core/renderers/common/marker_svg.ts
+++ b/core/renderers/common/marker_svg.ts
@@ -57,7 +57,7 @@ export class MarkerSvg {
   private parent_: IASTNodeLocationSvg|null = null;
 
   /** The current SVG element for the marker. */
-  currentMarkerSvg: Element|null = null;
+  currentMarkerSvg: SVGElement|null = null;
   colour_: string;
 
   /** The root SVG group containing the marker. */
@@ -96,10 +96,8 @@ export class MarkerSvg {
    *
    * @returns The root SVG node.
    */
-  getSvgRoot(): SVGElement {
-    // AnyDuringMigration because:  Type 'SVGGElement | null' is not assignable
-    // to type 'SVGElement'.
-    return this.svgGroup_ as AnyDuringMigration;
+  getSvgRoot(): SVGElement|null {
+    return this.svgGroup_;
   }
 
   /**
@@ -233,13 +231,12 @@ export class MarkerSvg {
 
     if (block.previousConnection) {
       const connectionShape =
-          this.constants_.shapeFor(block.previousConnection) as Notch |
-          PuzzleTab;
+          this.constants_.shapeFor(block.previousConnection) as Notch;
       this.positionPrevious_(
           width, markerOffset, markerHeight, connectionShape);
     } else if (block.outputConnection) {
       const connectionShape =
-          this.constants_.shapeFor(block.outputConnection) as Notch | PuzzleTab;
+          this.constants_.shapeFor(block.outputConnection) as PuzzleTab;
       this.positionOutput_(width, height, connectionShape);
     } else {
       this.positionBlock_(width, markerOffset, markerHeight);
@@ -382,9 +379,9 @@ export class MarkerSvg {
   /** Show the current marker. */
   protected showCurrent_() {
     this.hide();
-    // AnyDuringMigration because:  Property 'style' does not exist on type
-    // 'Element'.
-    (this.currentMarkerSvg as AnyDuringMigration)!.style.display = '';
+    if (this.currentMarkerSvg) {
+      this.currentMarkerSvg.style.display = '';
+    }
   }
 
   /**************************
@@ -405,11 +402,13 @@ export class MarkerSvg {
         svgPaths.lineOnAxis('V', -markerOffset) +
         svgPaths.lineOnAxis('H', width + markerOffset * 2) +
         svgPaths.lineOnAxis('V', markerHeight);
-    this.markerBlock_!.setAttribute('d', markerPath);
+    if (!this.markerBlock_) {
+      throw new Error(
+          'createDom should be called before positioning the marker');
+    }
+    this.markerBlock_.setAttribute('d', markerPath);
     if (this.workspace.RTL) {
-      // AnyDuringMigration because:  Argument of type 'SVGPathElement | null'
-      // is not assignable to parameter of type 'SVGElement'.
-      this.flipRtl_(this.markerBlock_ as AnyDuringMigration);
+      this.flipRtl_(this.markerBlock_);
     }
     this.currentMarkerSvg = this.markerBlock_;
   }
@@ -444,15 +443,12 @@ export class MarkerSvg {
    * @param width The new width, in workspace units.
    */
   protected positionLine_(x: number, y: number, width: number) {
-    // AnyDuringMigration because:  Argument of type 'number' is not assignable
-    // to parameter of type 'string'.
-    this.markerSvgLine_!.setAttribute('x', x as AnyDuringMigration);
-    // AnyDuringMigration because:  Argument of type 'number' is not assignable
-    // to parameter of type 'string'.
-    this.markerSvgLine_!.setAttribute('y', y as AnyDuringMigration);
-    // AnyDuringMigration because:  Argument of type 'number' is not assignable
-    // to parameter of type 'string'.
-    this.markerSvgLine_!.setAttribute('width', width as AnyDuringMigration);
+    if (!this.markerSvgLine_) {
+      throw new Error('createDom should be called before positioning the line');
+    }
+    this.markerSvgLine_.setAttribute('x', `${x}`);
+    this.markerSvgLine_.setAttribute('y', `${y}`);
+    this.markerSvgLine_.setAttribute('width', `${width}`);
     this.currentMarkerSvg = this.markerSvgLine_;
   }
 
@@ -465,19 +461,19 @@ export class MarkerSvg {
    * @param connectionShape The shape object for the connection.
    */
   protected positionOutput_(
-      width: number, height: number, connectionShape: Notch|PuzzleTab) {
-    // AnyDuringMigration because:  Property 'pathDown' does not exist on type
-    // 'Notch | PuzzleTab'.
+      width: number, height: number, connectionShape: PuzzleTab) {
+    if (!this.markerBlock_) {
+      throw new Error(
+          'createDom should be called before positioning the output');
+    }
     const markerPath = svgPaths.moveBy(width, 0) +
         svgPaths.lineOnAxis('h', -(width - connectionShape.width)) +
         svgPaths.lineOnAxis('v', this.constants_.TAB_OFFSET_FROM_TOP) +
-        (connectionShape as AnyDuringMigration).pathDown +
-        svgPaths.lineOnAxis('V', height) + svgPaths.lineOnAxis('H', width);
-    this.markerBlock_!.setAttribute('d', markerPath);
+        connectionShape.pathDown + svgPaths.lineOnAxis('V', height) +
+        svgPaths.lineOnAxis('H', width);
+    this.markerBlock_.setAttribute('d', markerPath);
     if (this.workspace.RTL) {
-      // AnyDuringMigration because:  Argument of type 'SVGPathElement | null'
-      // is not assignable to parameter of type 'SVGElement'.
-      this.flipRtl_(this.markerBlock_ as AnyDuringMigration);
+      this.flipRtl_(this.markerBlock_);
     }
     this.currentMarkerSvg = this.markerBlock_;
   }
@@ -494,20 +490,20 @@ export class MarkerSvg {
    */
   protected positionPrevious_(
       width: number, markerOffset: number, markerHeight: number,
-      connectionShape: Notch|PuzzleTab) {
-    // AnyDuringMigration because:  Property 'pathLeft' does not exist on type
-    // 'Notch | PuzzleTab'.
+      connectionShape: Notch) {
+    if (!this.markerBlock_) {
+      throw new Error(
+          'createDom should be called before positioning the previous connection marker');
+    }
     const markerPath = svgPaths.moveBy(-markerOffset, markerHeight) +
         svgPaths.lineOnAxis('V', -markerOffset) +
         svgPaths.lineOnAxis('H', this.constants_.NOTCH_OFFSET_LEFT) +
-        (connectionShape as AnyDuringMigration).pathLeft +
+        connectionShape.pathLeft +
         svgPaths.lineOnAxis('H', width + markerOffset * 2) +
         svgPaths.lineOnAxis('V', markerHeight);
-    this.markerBlock_!.setAttribute('d', markerPath);
+    this.markerBlock_.setAttribute('d', markerPath);
     if (this.workspace.RTL) {
-      // AnyDuringMigration because:  Argument of type 'SVGPathElement | null'
-      // is not assignable to parameter of type 'SVGElement'.
-      this.flipRtl_(this.markerBlock_ as AnyDuringMigration);
+      this.flipRtl_(this.markerBlock_);
     }
     this.currentMarkerSvg = this.markerBlock_;
   }
@@ -522,18 +518,13 @@ export class MarkerSvg {
    * @param height The new height, in workspace units.
    */
   protected positionRect_(x: number, y: number, width: number, height: number) {
-    // AnyDuringMigration because:  Argument of type 'number' is not assignable
-    // to parameter of type 'string'.
-    this.markerSvgRect_!.setAttribute('x', x as AnyDuringMigration);
-    // AnyDuringMigration because:  Argument of type 'number' is not assignable
-    // to parameter of type 'string'.
-    this.markerSvgRect_!.setAttribute('y', y as AnyDuringMigration);
-    // AnyDuringMigration because:  Argument of type 'number' is not assignable
-    // to parameter of type 'string'.
-    this.markerSvgRect_!.setAttribute('width', width as AnyDuringMigration);
-    // AnyDuringMigration because:  Argument of type 'number' is not assignable
-    // to parameter of type 'string'.
-    this.markerSvgRect_!.setAttribute('height', height as AnyDuringMigration);
+    if (!this.markerSvgRect_) {
+      throw new Error('createDom should be called before positioning the rect');
+    }
+    this.markerSvgRect_.setAttribute('x', `${x}`);
+    this.markerSvgRect_.setAttribute('y', `${y}`);
+    this.markerSvgRect_.setAttribute('width', `${width}`);
+    this.markerSvgRect_.setAttribute('height', `${height}`);
     this.currentMarkerSvg = this.markerSvgRect_;
   }
 
@@ -548,10 +539,14 @@ export class MarkerSvg {
 
   /** Hide the marker. */
   hide() {
-    this.markerSvgLine_!.style.display = 'none';
-    this.markerSvgRect_!.style.display = 'none';
-    this.markerInput_!.style.display = 'none';
-    this.markerBlock_!.style.display = 'none';
+    if (!this.markerSvgLine_ || !this.markerSvgRect_ || !this.markerInput_ ||
+        !this.markerBlock_) {
+      throw new Error('createDom should be called before hiding the marker');
+    }
+    this.markerSvgLine_.style.display = 'none';
+    this.markerSvgRect_.style.display = 'none';
+    this.markerInput_.style.display = 'none';
+    this.markerBlock_.style.display = 'none';
   }
 
   /**
@@ -572,7 +567,7 @@ export class MarkerSvg {
    *
    * @returns The object holding attributes to make the marker blink.
    */
-  protected getBlinkProperties_(): AnyDuringMigration {
+  protected getBlinkProperties_(): object {
     return {
       'attributeType': 'XML',
       'attributeName': 'fill',
@@ -598,30 +593,24 @@ export class MarkerSvg {
         </g>
         */
 
-    // AnyDuringMigration because:  Argument of type 'SVGGElement | null' is not
-    // assignable to parameter of type 'Element | undefined'.
     this.markerSvg_ = dom.createSvgElement(
         Svg.G, {
           'width': this.constants_.CURSOR_WS_WIDTH,
           'height': this.constants_.WS_CURSOR_HEIGHT,
         },
-        this.svgGroup_ as AnyDuringMigration);
+        this.svgGroup_);
 
     // A horizontal line used to represent a workspace coordinate or next
     // connection.
-    // AnyDuringMigration because:  Argument of type 'SVGGElement | null' is not
-    // assignable to parameter of type 'Element | undefined'.
     this.markerSvgLine_ = dom.createSvgElement(
         Svg.RECT, {
           'width': this.constants_.CURSOR_WS_WIDTH,
           'height': this.constants_.WS_CURSOR_HEIGHT,
           'style': 'display: none',
         },
-        this.markerSvg_ as AnyDuringMigration);
+        this.markerSvg_);
 
     // A filled in rectangle used to represent a stack.
-    // AnyDuringMigration because:  Argument of type 'SVGGElement | null' is not
-    // assignable to parameter of type 'Element | undefined'.
     this.markerSvgRect_ = dom.createSvgElement(
         Svg.RECT, {
           'class': 'blocklyVerticalMarker',
@@ -629,19 +618,14 @@ export class MarkerSvg {
           'ry': 10,
           'style': 'display: none',
         },
-        this.markerSvg_ as AnyDuringMigration);
+        this.markerSvg_);
 
     // A filled in puzzle piece used to represent an input value.
-    // AnyDuringMigration because:  Argument of type 'SVGGElement | null' is not
-    // assignable to parameter of type 'Element | undefined'.
     this.markerInput_ = dom.createSvgElement(
-        Svg.PATH, {'transform': '', 'style': 'display: none'},
-        this.markerSvg_ as AnyDuringMigration);
+        Svg.PATH, {'transform': '', 'style': 'display: none'}, this.markerSvg_);
 
     // A path used to represent a previous connection and a block, an output
     // connection and a block, or a block.
-    // AnyDuringMigration because:  Argument of type 'SVGGElement | null' is not
-    // assignable to parameter of type 'Element | undefined'.
     this.markerBlock_ = dom.createSvgElement(
         Svg.PATH, {
           'transform': '',
@@ -649,32 +633,19 @@ export class MarkerSvg {
           'fill': 'none',
           'stroke-width': this.constants_.CURSOR_STROKE_WIDTH,
         },
-        this.markerSvg_ as AnyDuringMigration);
+        this.markerSvg_);
 
     // Markers and stack markers don't blink.
     if (this.isCursor()) {
       const blinkProperties = this.getBlinkProperties_();
-      // AnyDuringMigration because:  Argument of type 'SVGRectElement | null'
-      // is not assignable to parameter of type 'Element | undefined'.
+      dom.createSvgElement(Svg.ANIMATE, blinkProperties, this.markerSvgLine_);
+      dom.createSvgElement(Svg.ANIMATE, blinkProperties, this.markerInput_);
       dom.createSvgElement(
-          Svg.ANIMATE, blinkProperties,
-          this.markerSvgLine_ as AnyDuringMigration);
-      // AnyDuringMigration because:  Argument of type 'SVGPathElement | null'
-      // is not assignable to parameter of type 'Element | undefined'.
-      dom.createSvgElement(
-          Svg.ANIMATE, blinkProperties,
-          this.markerInput_ as AnyDuringMigration);
-      blinkProperties['attributeName'] = 'stroke';
-      // AnyDuringMigration because:  Argument of type 'SVGPathElement | null'
-      // is not assignable to parameter of type 'Element | undefined'.
-      dom.createSvgElement(
-          Svg.ANIMATE, blinkProperties,
-          this.markerBlock_ as AnyDuringMigration);
+          Svg.ANIMATE, {...blinkProperties, attributeName: 'stroke'},
+          this.markerBlock_);
     }
 
-    // AnyDuringMigration because:  Type 'SVGGElement | null' is not assignable
-    // to type 'Element'.
-    return this.markerSvg_ as AnyDuringMigration;
+    return this.markerSvg_;
   }
 
   /**
@@ -683,16 +654,21 @@ export class MarkerSvg {
    * @param _curNode The node that we want to draw the marker for.
    */
   protected applyColour_(_curNode: ASTNode) {
-    this.markerSvgLine_!.setAttribute('fill', this.colour_);
-    this.markerSvgRect_!.setAttribute('stroke', this.colour_);
-    this.markerInput_!.setAttribute('fill', this.colour_);
-    this.markerBlock_!.setAttribute('stroke', this.colour_);
+    if (!this.markerSvgLine_ || !this.markerSvgRect_ || !this.markerInput_ ||
+        !this.markerBlock_) {
+      throw new Error(
+          'createDom should be called before applying color to the markerj');
+    }
+    this.markerSvgLine_.setAttribute('fill', this.colour_);
+    this.markerSvgRect_.setAttribute('stroke', this.colour_);
+    this.markerInput_.setAttribute('fill', this.colour_);
+    this.markerBlock_.setAttribute('stroke', this.colour_);
 
     if (this.isCursor()) {
       const values = this.colour_ + ';transparent;transparent;';
-      this.markerSvgLine_!.firstElementChild!.setAttribute('values', values);
-      this.markerInput_!.firstElementChild!.setAttribute('values', values);
-      this.markerBlock_!.firstElementChild!.setAttribute('values', values);
+      this.markerSvgLine_.firstElementChild!.setAttribute('values', values);
+      this.markerInput_.firstElementChild!.setAttribute('values', values);
+      this.markerBlock_.firstElementChild!.setAttribute('values', values);
     }
   }
 
diff --git a/core/renderers/common/path_object.ts b/core/renderers/common/path_object.ts
index e88a314dd..f72895a3e 100644
--- a/core/renderers/common/path_object.ts
+++ b/core/renderers/common/path_object.ts
@@ -29,7 +29,7 @@ import type {IPathObject} from './i_path_object.js';
  * @alias Blockly.blockRendering.PathObject
  */
 export class PathObject implements IPathObject {
-  svgRoot: AnyDuringMigration;
+  svgRoot: SVGElement;
   /** @internal */
   svgPath: SVGElement;
 
@@ -39,9 +39,7 @@ export class PathObject implements IPathObject {
    *
    * @internal
    */
-  // AnyDuringMigration because:  Type 'null' is not assignable to type
-  // 'SVGElement'.
-  cursorSvg: SVGElement = null as AnyDuringMigration;
+  cursorSvg: SVGElement|null = null;
 
   /**
    * Holds the markers svg element when the marker is attached to the block.
@@ -49,9 +47,7 @@ export class PathObject implements IPathObject {
    *
    * @internal
    */
-  // AnyDuringMigration because:  Type 'null' is not assignable to type
-  // 'SVGElement'.
-  markerSvg: SVGElement = null as AnyDuringMigration;
+  markerSvg: SVGElement|null = null;
 
   /** @internal */
   constants: ConstantProvider;
@@ -104,9 +100,7 @@ export class PathObject implements IPathObject {
    */
   setCursorSvg(cursorSvg: SVGElement) {
     if (!cursorSvg) {
-      // AnyDuringMigration because:  Type 'null' is not assignable to type
-      // 'SVGElement'.
-      this.cursorSvg = null as AnyDuringMigration;
+      this.cursorSvg = null;
       return;
     }
 
@@ -123,9 +117,7 @@ export class PathObject implements IPathObject {
    */
   setMarkerSvg(markerSvg: SVGElement) {
     if (!markerSvg) {
-      // AnyDuringMigration because:  Type 'null' is not assignable to type
-      // 'SVGElement'.
-      this.markerSvg = null as AnyDuringMigration;
+      this.markerSvg = null;
       return;
     }
 
@@ -279,6 +271,7 @@ export class PathObject implements IPathObject {
    * @param _enable True if styling should be added.
    * @internal
    */
-  updateShapeForInputHighlight(_conn: Connection, _enable: boolean) {}
+  updateShapeForInputHighlight(_conn: Connection, _enable: boolean) {
+    // NOOP
+  }
 }
-// NOP
diff --git a/core/renderers/geras/drawer.ts b/core/renderers/geras/drawer.ts
index e3546cf77..8f9511e83 100644
--- a/core/renderers/geras/drawer.ts
+++ b/core/renderers/geras/drawer.ts
@@ -59,7 +59,7 @@ export class Drawer extends BaseDrawer {
       pathObject.flipRTL();
     }
     if (debug.isDebuggerEnabled()) {
-      this.block_.renderingDebugger.drawDebug(this.block_, this.info_);
+      this.block_?.renderingDebugger?.drawDebug(this.block_, this.info_);
     }
     this.recordSizeOnBlock_();
   }
diff --git a/core/renderers/geras/info.ts b/core/renderers/geras/info.ts
index 17be507a0..305cde369 100644
--- a/core/renderers/geras/info.ts
+++ b/core/renderers/geras/info.ts
@@ -431,11 +431,13 @@ export class RenderInfo extends BaseRenderInfo {
     }
     if (this.outputConnection && this.block_.nextConnection &&
         this.block_.nextConnection.isConnected()) {
-      // Include width of connected block in value to stack width measurement.
-      widestRowWithConnectedBlocks = Math.max(
-          widestRowWithConnectedBlocks,
-          this.block_.nextConnection.targetBlock().getHeightWidth().width -
-              this.constants_.DARK_PATH_OFFSET);
+      const target = this.block_.nextConnection.targetBlock();
+      if (target) {
+        // Include width of connected block in value to stack width measurement.
+        widestRowWithConnectedBlocks = Math.max(
+            widestRowWithConnectedBlocks,
+            target.getHeightWidth().width - this.constants_.DARK_PATH_OFFSET);
+      }
     }
 
     this.bottomRow.baseline = yCursor - this.bottomRow.descenderHeight;
diff --git a/core/renderers/measurables/icon.ts b/core/renderers/measurables/icon.ts
index d171f3107..3fdfd99fd 100644
--- a/core/renderers/measurables/icon.ts
+++ b/core/renderers/measurables/icon.ts
@@ -29,6 +29,7 @@ import {Types} from './types.js';
  */
 export class Icon extends Measurable {
   isVisible: boolean;
+  flipRtl = false;
 
   /**
    * An object containing information about the space an icon takes up during
diff --git a/core/renderers/thrasos/info.ts b/core/renderers/thrasos/info.ts
index 1175453d5..e11e7d382 100644
--- a/core/renderers/thrasos/info.ts
+++ b/core/renderers/thrasos/info.ts
@@ -321,10 +321,12 @@ export class RenderInfo extends BaseRenderInfo {
     }
     if (this.outputConnection && this.block_.nextConnection &&
         this.block_.nextConnection.isConnected()) {
-      // Include width of connected block in value to stack width measurement.
-      widestRowWithConnectedBlocks = Math.max(
-          widestRowWithConnectedBlocks,
-          this.block_.nextConnection.targetBlock().getHeightWidth().width);
+      const target = this.block_.nextConnection.targetBlock();
+      if (target) {
+        // Include width of connected block in value to stack width measurement.
+        widestRowWithConnectedBlocks = Math.max(
+            widestRowWithConnectedBlocks, target.getHeightWidth().width);
+      }
     }
 
     this.bottomRow.baseline = yCursor - this.bottomRow.descenderHeight;
diff --git a/core/renderers/zelos/drawer.ts b/core/renderers/zelos/drawer.ts
index a9f6ea04c..ca63cdcf5 100644
--- a/core/renderers/zelos/drawer.ts
+++ b/core/renderers/zelos/drawer.ts
@@ -63,7 +63,7 @@ export class Drawer extends BaseDrawer {
       pathObject.flipRTL();
     }
     if (debug.isDebuggerEnabled()) {
-      this.block_.renderingDebugger.drawDebug(this.block_, this.info_);
+      this.block_?.renderingDebugger?.drawDebug(this.block_, this.info_);
     }
     this.recordSizeOnBlock_();
     if (this.info_.outputConnection) {
@@ -139,6 +139,10 @@ export class Drawer extends BaseDrawer {
    * Add steps to draw the right side of an output with a dynamic connection.
    */
   protected drawRightDynamicConnection_() {
+    if (!this.info_.outputConnection) {
+      throw new Error(
+          `Cannot draw the output connection of a block that doesn't have one`);
+    }
     this.outlinePath_ += (this.info_.outputConnection.shape as DynamicShape)
                              .pathRightDown(this.info_.outputConnection.height);
   }
@@ -147,6 +151,10 @@ export class Drawer extends BaseDrawer {
    * Add steps to draw the left side of an output with a dynamic connection.
    */
   protected drawLeftDynamicConnection_() {
+    if (!this.info_.outputConnection) {
+      throw new Error(
+          `Cannot draw the output connection of a block that doesn't have one`);
+    }
     this.positionOutputConnection_();
 
     this.outlinePath_ += (this.info_.outputConnection.shape as DynamicShape)
diff --git a/core/renderers/zelos/info.ts b/core/renderers/zelos/info.ts
index 82bdec730..fbeb59fb8 100644
--- a/core/renderers/zelos/info.ts
+++ b/core/renderers/zelos/info.ts
@@ -461,7 +461,7 @@ export class RenderInfo extends BaseRenderInfo {
    * @returns The amount of spacing to reduce the first or last spacer.
    */
   protected getNegativeSpacing_(elem: Measurable): number {
-    if (!elem) {
+    if (!elem || !this.outputConnection) {
       return 0;
     }
     const connectionWidth = this.outputConnection.width;