blockly 8.20220331.0-beta.1 → 9.0.0-beta.0

package/core/serialization/{blocks.js → blocks.ts}

@@ -8,31 +8,27 @@
  * @fileoverview Handles serializing blocks to plain JavaScript objects only
  * containing state.
  */
-'use strict';
 
 /**
  * Handles serializing blocks to plain JavaScript objects only containing state.
  * @namespace Blockly.serialization.blocks
  */
-goog.module('Blockly.serialization.blocks');
-
-const Xml = goog.require('Blockly.Xml');
-const eventUtils = goog.require('Blockly.Events.utils');
-const priorities = goog.require('Blockly.serialization.priorities');
-const serializationRegistry = goog.require('Blockly.serialization.registry');
-const {BadConnectionCheck, MissingBlockType, MissingConnection, RealChildOfShadow} = goog.require('Blockly.serialization.exceptions');
-/* eslint-disable-next-line no-unused-vars */
-const {Block} = goog.requireType('Blockly.Block');
-/* eslint-disable-next-line no-unused-vars */
-const {BlockSvg} = goog.requireType('Blockly.BlockSvg');
-// eslint-disable-next-line no-unused-vars
-const {Connection} = goog.requireType('Blockly.Connection');
-// eslint-disable-next-line no-unused-vars
-const {ISerializer} = goog.require('Blockly.serialization.ISerializer');
-const {Size} = goog.require('Blockly.utils.Size');
-// eslint-disable-next-line no-unused-vars
-const {Workspace} = goog.requireType('Blockly.Workspace');
-const {inputTypes} = goog.require('Blockly.inputTypes');
+import * as goog from '../../closure/goog/goog.js';
+goog.declareModuleId('Blockly.serialization.blocks');
+
+import type {Block} from '../block.js';
+import type {BlockSvg} from '../block_svg.js';
+import type {Connection} from '../connection.js';
+import * as eventUtils from '../events/utils.js';
+import {inputTypes} from '../input_types.js';
+import type {ISerializer} from '../interfaces/i_serializer.js';
+import {Size} from '../utils/size.js';
+import type {Workspace} from '../workspace.js';
+import * as Xml from '../xml.js';
+
+import {BadConnectionCheck, MissingBlockType, MissingConnection, RealChildOfShadow} from './exceptions.js';
+import * as priorities from './priorities.js';
+import * as serializationRegistry from './registry.js';
 
 
 // TODO(#5160): Remove this once lint is fixed.
@@ -40,64 +36,61 @@ const {inputTypes} = goog.require('Blockly.inputTypes');
 
 /**
  * Represents the state of a connection.
- * @typedef {{
- *   shadow: (!State|undefined),
- *   block: (!State|undefined)
- * }}
  * @alias Blockly.serialization.blocks.ConnectionState
  */
-let ConnectionState;
-exports.ConnectionState = ConnectionState;
+export interface ConnectionState {
+  shadow: State|undefined;
+  block: State|undefined;
+}
 
 /**
  * Represents the state of a given block.
- * @typedef {{
- *     type: string,
- *     id: (string|undefined),
- *     x: (number|undefined),
- *     y: (number|undefined),
- *     collapsed: (boolean|undefined),
- *     enabled: (boolean|undefined),
- *     inline: (boolean|undefined),
- *     data: (string|undefined),
- *     extra-state: (*|undefined),
- *     icons: (!Object<string, *>|undefined),
- *     fields: (!Object<string, *>|undefined),
- *     inputs: (!Object<string, !ConnectionState>|undefined),
- *     next: (!ConnectionState|undefined)
- * }}
  * @alias Blockly.serialization.blocks.State
  */
-let State;
-exports.State = State;
+export interface State {
+  type: string;
+  id?: string;
+  x?: number;
+  y?: number;
+  collapsed?: boolean;
+  enabled?: boolean;
+  inline?: boolean;
+  data?: string;
+  extraState?: AnyDuringMigration;
+  icons?: {[key: string]: AnyDuringMigration};
+  fields?: {[key: string]: AnyDuringMigration};
+  inputs?: {[key: string]: ConnectionState};
+  next?: ConnectionState;
+}
 
 /**
  * Returns the state of the given block as a plain JavaScript object.
- * @param {!Block} block The block to serialize.
- * @param {{addCoordinates: (boolean|undefined), addInputBlocks:
- *     (boolean|undefined), addNextBlocks: (boolean|undefined),
- *     doFullSerialization: (boolean|undefined)}=} param1
- *     addCoordinates: If true, the coordinates of the block are added to the
- *       serialized state. False by default.
- *     addinputBlocks: If true, children of the block which are connected to
- *       inputs will be serialized. True by default.
- *     addNextBlocks: If true, children of the block which are connected to the
- *       block's next connection (if it exists) will be serialized.
- *       True by default.
- *     doFullSerialization: If true, fields that normally just save a reference
- *       to some external state (eg variables) will instead serialize all of the
- *       info about that state. This supports deserializing the block into a
- *       workspace where that state doesn't yet exist. True by default.
- * @return {?State} The serialized state of the block, or null if the block
- *     could not be serialied (eg it was an insertion marker).
+ * @param block The block to serialize.
+ * @param param1 addCoordinates: If true, the coordinates of the block are added
+ *     to the serialized state. False by default. addinputBlocks: If true,
+ *     children of the block which are connected to inputs will be serialized.
+ *     True by default. addNextBlocks: If true, children of the block which are
+ *     connected to the block's next connection (if it exists) will be
+ *     serialized. True by default. doFullSerialization: If true, fields that
+ *     normally just save a reference to some external state (eg variables) will
+ *     instead serialize all of the info about that state. This supports
+ *     deserializing the block into a workspace where that state doesn't yet
+ *     exist. True by default.
+ * @return The serialized state of the block, or null if the block could not be
+ *     serialied (eg it was an insertion marker).
  * @alias Blockly.serialization.blocks.save
  */
-const save = function(block, {
+export function save(block: Block, {
   addCoordinates = false,
   addInputBlocks = true,
   addNextBlocks = true,
-  doFullSerialization = true,
-} = {}) {
+  doFullSerialization = true
+}: {
+  addCoordinates?: boolean,
+  addInputBlocks?: boolean,
+  addNextBlocks?: boolean,
+  doFullSerialization?: boolean
+} = {}): State|null {
   if (block.isInsertionMarker()) {
     return null;
   }
@@ -108,30 +101,45 @@ const save = function(block, {
   };
 
   if (addCoordinates) {
-    saveCoords(block, state);
-  }
-  saveAttributes(block, state);
-  saveExtraState(block, state);
-  saveIcons(block, state);
-  saveFields(block, state, doFullSerialization);
+    // AnyDuringMigration because:  Argument of type '{ type: string; id:
+    // string; }' is not assignable to parameter of type 'State'.
+    saveCoords(block, state as AnyDuringMigration);
+  }
+  // AnyDuringMigration because:  Argument of type '{ type: string; id: string;
+  // }' is not assignable to parameter of type 'State'.
+  saveAttributes(block, state as AnyDuringMigration);
+  // AnyDuringMigration because:  Argument of type '{ type: string; id: string;
+  // }' is not assignable to parameter of type 'State'.
+  saveExtraState(block, state as AnyDuringMigration);
+  // AnyDuringMigration because:  Argument of type '{ type: string; id: string;
+  // }' is not assignable to parameter of type 'State'.
+  saveIcons(block, state as AnyDuringMigration);
+  // AnyDuringMigration because:  Argument of type '{ type: string; id: string;
+  // }' is not assignable to parameter of type 'State'.
+  saveFields(block, state as AnyDuringMigration, doFullSerialization);
   if (addInputBlocks) {
-    saveInputBlocks(block, state, doFullSerialization);
+    // AnyDuringMigration because:  Argument of type '{ type: string; id:
+    // string; }' is not assignable to parameter of type 'State'.
+    saveInputBlocks(block, state as AnyDuringMigration, doFullSerialization);
   }
   if (addNextBlocks) {
-    saveNextBlocks(block, state, doFullSerialization);
+    // AnyDuringMigration because:  Argument of type '{ type: string; id:
+    // string; }' is not assignable to parameter of type 'State'.
+    saveNextBlocks(block, state as AnyDuringMigration, doFullSerialization);
   }
 
-  return state;
-};
-exports.save = save;
+  // AnyDuringMigration because:  Type '{ type: string; id: string; }' is not
+  // assignable to type 'State'.
+  return state as AnyDuringMigration;
+}
 
 /**
  * Adds attributes to the given state object based on the state of the block.
  * Eg collapsed, disabled, inline, etc.
- * @param {!Block} block The block to base the attributes on.
- * @param {!State} state The state object to append to.
+ * @param block The block to base the attributes on.
+ * @param state The state object to append to.
  */
-const saveAttributes = function(block, state) {
+function saveAttributes(block: Block, state: State) {
   if (block.isCollapsed()) {
     state['collapsed'] = true;
   }
@@ -146,26 +154,25 @@ const saveAttributes = function(block, state) {
   if (block.data) {
     state['data'] = block.data;
   }
-};
+}
 
 /**
  * Adds the coordinates of the given block to the given state object.
- * @param {!Block} block The block to base the coordinates on.
- * @param {!State} state The state object to append to.
+ * @param block The block to base the coordinates on.
+ * @param state The state object to append to.
  */
-const saveCoords = function(block, state) {
+function saveCoords(block: Block, state: State) {
   const workspace = block.workspace;
   const xy = block.getRelativeToSurfaceXY();
   state['x'] = Math.round(workspace.RTL ? workspace.getWidth() - xy.x : xy.x);
   state['y'] = Math.round(xy.y);
-};
-
+}
 /**
  * Adds any extra state the block may provide to the given state object.
- * @param {!Block} block The block to serialize the extra state of.
- * @param {!State} state The state object to append to.
+ * @param block The block to serialize the extra state of.
+ * @param state The state object to append to.
  */
-const saveExtraState = function(block, state) {
+function saveExtraState(block: Block, state: State) {
   if (block.saveExtraState) {
     const extraState = block.saveExtraState();
     if (extraState !== null) {
@@ -180,14 +187,14 @@ const saveExtraState = function(block, state) {
                   ' xmlns="https://developers.google.com/blockly/xml"', '');
     }
   }
-};
+}
 
 /**
  * Adds the state of all of the icons on the block to the given state object.
- * @param {!Block} block The block to serialize the icon state of.
- * @param {!State} state The state object to append to.
+ * @param block The block to serialize the icon state of.
+ * @param state The state object to append to.
  */
-const saveIcons = function(block, state) {
+function saveIcons(block: Block, state: State) {
   // TODO(#2105): Remove this logic and put it in the icon.
   if (block.getCommentText()) {
     state['icons'] = {
@@ -199,48 +206,48 @@ const saveIcons = function(block, state) {
       },
     };
   }
-};
+}
 
 /**
  * Adds the state of all of the fields on the block to the given state object.
- * @param {!Block} block The block to serialize the field state of.
- * @param {!State} state The state object to append to.
- * @param {boolean} doFullSerialization Whether or not to serialize the full
- *     state of the field (rather than possibly saving a reference to some
- *     state).
+ * @param block The block to serialize the field state of.
+ * @param state The state object to append to.
+ * @param doFullSerialization Whether or not to serialize the full state of the
+ *     field (rather than possibly saving a reference to some state).
  */
-const saveFields = function(block, state, doFullSerialization) {
+function saveFields(block: Block, state: State, doFullSerialization: boolean) {
   const fields = Object.create(null);
   for (let i = 0; i < block.inputList.length; i++) {
     const input = block.inputList[i];
     for (let j = 0; j < input.fieldRow.length; j++) {
       const field = input.fieldRow[j];
       if (field.isSerializable()) {
-        fields[field.name] = field.saveState(doFullSerialization);
+        fields[field.name!] = field.saveState(doFullSerialization);
       }
     }
   }
   if (Object.keys(fields).length) {
     state['fields'] = fields;
   }
-};
+}
 
 /**
  * Adds the state of all of the child blocks of the given block (which are
  * connected to inputs) to the given state object.
- * @param {!Block} block The block to serialize the input blocks of.
- * @param {!State} state The state object to append to.
- * @param {boolean} doFullSerialization Whether or not to do full serialization.
+ * @param block The block to serialize the input blocks of.
+ * @param state The state object to append to.
+ * @param doFullSerialization Whether or not to do full serialization.
  */
-const saveInputBlocks = function(block, state, doFullSerialization) {
+function saveInputBlocks(
+    block: Block, state: State, doFullSerialization: boolean) {
   const inputs = Object.create(null);
   for (let i = 0; i < block.inputList.length; i++) {
     const input = block.inputList[i];
     if (input.type === inputTypes.DUMMY) {
       continue;
     }
-    const connectionState = saveConnection(
-        /** @type {!Connection} */ (input.connection), doFullSerialization);
+    const connectionState =
+        saveConnection(input.connection as Connection, doFullSerialization);
     if (connectionState) {
       inputs[input.name] = connectionState;
     }
@@ -249,16 +256,17 @@ const saveInputBlocks = function(block, state, doFullSerialization) {
   if (Object.keys(inputs).length) {
     state['inputs'] = inputs;
   }
-};
+}
 
 /**
  * Adds the state of all of the next blocks of the given block to the given
  * state object.
- * @param {!Block} block The block to serialize the next blocks of.
- * @param {!State} state The state object to append to.
- * @param {boolean} doFullSerialization Whether or not to do full serialization.
+ * @param block The block to serialize the next blocks of.
+ * @param state The state object to append to.
+ * @param doFullSerialization Whether or not to do full serialization.
  */
-const saveNextBlocks = function(block, state, doFullSerialization) {
+function saveNextBlocks(
+    block: Block, state: State, doFullSerialization: boolean) {
   if (!block.nextConnection) {
     return;
   }
@@ -267,18 +275,18 @@ const saveNextBlocks = function(block, state, doFullSerialization) {
   if (connectionState) {
     state['next'] = connectionState;
   }
-};
+}
 
 /**
  * Returns the state of the given connection (ie the state of any connected
  * shadow or real blocks).
- * @param {!Connection} connection The connection to serialize the connected
- *     blocks of.
- * @return {?ConnectionState} An object containing the state of any connected
- *     shadow block, or any connected real block.
- * @param {boolean} doFullSerialization Whether or not to do full serialization.
+ * @param connection The connection to serialize the connected blocks of.
+ * @return An object containing the state of any connected shadow block, or any
+ *     connected real block.
+ * @param doFullSerialization Whether or not to do full serialization.
  */
-const saveConnection = function(connection, doFullSerialization) {
+function saveConnection(connection: Connection, doFullSerialization: boolean):
+    ConnectionState|null {
   const shadow = connection.getShadowState(true);
   const child = connection.targetBlock();
   if (!shadow && !child) {
@@ -292,22 +300,22 @@ const saveConnection = function(connection, doFullSerialization) {
     state['block'] = save(child, {doFullSerialization});
   }
   return state;
-};
+}
 
 /**
  * Loads the block represented by the given state into the given workspace.
- * @param {!State} state The state of a block to deserialize into the workspace.
- * @param {!Workspace} workspace The workspace to add the block to.
- * @param {{recordUndo: (boolean|undefined)}=} param1
- *     recordUndo: If true, events triggered by this function will be undo-able
- *       by the user. False by default.
- * @return {!Block} The block that was just loaded.
+ * @param state The state of a block to deserialize into the workspace.
+ * @param workspace The workspace to add the block to.
+ * @param param1 recordUndo: If true, events triggered by this function will be
+ *     undo-able by the user. False by default.
+ * @return The block that was just loaded.
  * @alias Blockly.serialization.blocks.append
  */
-const append = function(state, workspace, {recordUndo = false} = {}) {
+export function append(
+    state: State, workspace: Workspace,
+    {recordUndo = false}: {recordUndo?: boolean} = {}): Block {
   return appendInternal(state, workspace, {recordUndo});
-};
-exports.append = append;
+}
 
 /**
  * Loads the block represented by the given state into the given workspace.
@@ -315,25 +323,24 @@ exports.append = append;
  * external API.
  * But it is exported so that other places within Blockly can call it directly
  * with the extra parameters.
- * @param {!State} state The state of a block to deserialize into the workspace.
- * @param {!Workspace} workspace The workspace to add the block to.
- * @param {{parentConnection: (!Connection|undefined), isShadow:
- *     (boolean|undefined), recordUndo: (boolean|undefined)}=} param1
- *     parentConnection: If provided, the system will attempt to connect the
- *       block to this connection after it is created. Undefined by default.
- *     isShadow: If true, the block will be set to a shadow block after it is
- *       created. False by default.
- *     recordUndo: If true, events triggered by this function will be undo-able
- *       by the user. False by default.
- * @return {!Block} The block that was just appended.
+ * @param state The state of a block to deserialize into the workspace.
+ * @param workspace The workspace to add the block to.
+ * @param param1 parentConnection: If provided, the system will attempt to
+ *     connect the block to this connection after it is created. Undefined by
+ *     default. isShadow: If true, the block will be set to a shadow block after
+ *     it is created. False by default. recordUndo: If true, events triggered by
+ *     this function will be undo-able by the user. False by default.
+ * @return The block that was just appended.
  * @alias Blockly.serialization.blocks.appendInternal
- * @package
+ * @internal
  */
-const appendInternal = function(state, workspace, {
-  parentConnection = undefined,
-  isShadow = false,
-  recordUndo = false,
-} = {}) {
+export function appendInternal(
+    state: State, workspace: Workspace,
+    {parentConnection = undefined, isShadow = false, recordUndo = false}: {
+      parentConnection?: Connection,
+      isShadow?: boolean,
+      recordUndo?: boolean
+    } = {}): Block {
   const prevRecordUndo = eventUtils.getRecordUndo();
   eventUtils.setRecordUndo(recordUndo);
   const existingGroup = eventUtils.getGroup();
@@ -345,14 +352,14 @@ const appendInternal = function(state, workspace, {
   const block = appendPrivate(state, workspace, {parentConnection, isShadow});
 
   eventUtils.enable();
-  eventUtils.fire(new (eventUtils.get(eventUtils.BLOCK_CREATE))(block));
+  eventUtils.fire(new (eventUtils.get(eventUtils.BLOCK_CREATE))!(block));
   eventUtils.setGroup(existingGroup);
   eventUtils.setRecordUndo(prevRecordUndo);
 
   // Adding connections to the connection db is expensive. This defers that
   // operation to decrease load time.
   if (workspace.rendered) {
-    const blockSvg = /** @type {!BlockSvg} */ (block);
+    const blockSvg = block as BlockSvg;
     setTimeout(() => {
       if (!blockSvg.disposed) {
         blockSvg.setConnectionTracking(true);
@@ -361,28 +368,25 @@ const appendInternal = function(state, workspace, {
   }
 
   return block;
-};
-exports.appendInternal = appendInternal;
+}
 
 /**
  * Loads the block represented by the given state into the given workspace.
  * This is defined privately so that it can be called recursively without firing
  * eroneous events. Events (and other things we only want to occur on the top
  * block) are handled by appendInternal.
- * @param {!State} state The state of a block to deserialize into the workspace.
- * @param {!Workspace} workspace The workspace to add the block to.
- * @param {{parentConnection: (!Connection|undefined),
- *     isShadow: (boolean|undefined)}=} param1
- *     parentConnection: If provided, the system will attempt to connect the
- *       block to this connection after it is created. Undefined by default.
- *     isShadow: The block will be set to a shadow block after it is created.
- *       False by default.
- * @return {!Block} The block that was just appended.
+ * @param state The state of a block to deserialize into the workspace.
+ * @param workspace The workspace to add the block to.
+ * @param param1 parentConnection: If provided, the system will attempt to
+ *     connect the block to this connection after it is created. Undefined by
+ *     default. isShadow: The block will be set to a shadow block after it is
+ *     created. False by default.
+ * @return The block that was just appended.
  */
-const appendPrivate = function(state, workspace, {
-  parentConnection = undefined,
-  isShadow = false,
-} = {}) {
+function appendPrivate(
+    state: State, workspace: Workspace,
+    {parentConnection = undefined, isShadow = false}:
+        {parentConnection?: Connection, isShadow?: boolean} = {}): Block {
   if (!state['type']) {
     throw new MissingBlockType(state);
   }
@@ -400,15 +404,15 @@ const appendPrivate = function(state, workspace, {
   initBlock(block, workspace.rendered);
 
   return block;
-};
+}
 
 /**
  * Applies any coordinate information available on the state object to the
  * block.
- * @param {!Block} block The block to set the position of.
- * @param {!State} state The state object to reference.
+ * @param block The block to set the position of.
+ * @param state The state object to reference.
  */
-const loadCoords = function(block, state) {
+function loadCoords(block: Block, state: State) {
   let x = state['x'] === undefined ? 0 : state['x'];
   const y = state['y'] === undefined ? 0 : state['y'];
 
@@ -416,14 +420,14 @@ const loadCoords = function(block, state) {
   x = workspace.RTL ? workspace.getWidth() - x : x;
 
   block.moveBy(x, y);
-};
+}
 
 /**
  * Applies any attribute information available on the state object to the block.
- * @param {!Block} block The block to set the attributes of.
- * @param {!State} state The state object to reference.
+ * @param block The block to set the attributes of.
+ * @param state The state object to reference.
  */
-const loadAttributes = function(block, state) {
+function loadAttributes(block: Block, state: State) {
   if (state['collapsed']) {
     block.setCollapsed(true);
   }
@@ -436,33 +440,33 @@ const loadAttributes = function(block, state) {
   if (state['data'] !== undefined) {
     block.data = state['data'];
   }
-};
+}
 
 /**
  * Applies any extra state information available on the state object to the
  * block.
- * @param {!Block} block The block to set the extra state of.
- * @param {!State} state The state object to reference.
+ * @param block The block to set the extra state of.
+ * @param state The state object to reference.
  */
-const loadExtraState = function(block, state) {
+function loadExtraState(block: Block, state: State) {
   if (!state['extraState']) {
     return;
   }
   if (block.loadExtraState) {
     block.loadExtraState(state['extraState']);
-  } else {
+  } else if (block.domToMutation) {
     block.domToMutation(Xml.textToDom(state['extraState']));
   }
-};
+}
 
 /**
  * Attempts to connect the block to the parent connection, if it exists.
- * @param {(!Connection|undefined)} parentConnection The parent connection to
- *     try to connect the block to.
- * @param {!Block} child The block to try to connect to the parent.
- * @param {!State} state The state which defines the given block
+ * @param parentConnection The parent connection to try to connect the block to.
+ * @param child The block to try to connect to the parent.
+ * @param state The state which defines the given block
  */
-const tryToConnectParent = function(parentConnection, child, state) {
+function tryToConnectParent(
+    parentConnection: Connection|undefined, child: Block, state: State) {
   if (!parentConnection) {
     return;
   }
@@ -498,15 +502,15 @@ const tryToConnectParent = function(parentConnection, child, state) {
                                                      'previous connection',
         child, state);
   }
-};
+}
 
 /**
  * Applies icon state to the icons on the block, based on the given state
  * object.
- * @param {!Block} block The block to set the icon state of.
- * @param {!State} state The state object to reference.
+ * @param block The block to set the icon state of.
+ * @param state The state object to reference.
  */
-const loadIcons = function(block, state) {
+function loadIcons(block: Block, state: State) {
   if (!state['icons']) {
     return;
   }
@@ -523,18 +527,18 @@ const loadIcons = function(block, state) {
     }
     if (comment['pinned'] && block.rendered && !block.isInFlyout) {
       // Give the block a chance to be positioned and rendered before showing.
-      const blockSvg = /** @type {!BlockSvg} */ (block);
-      setTimeout(() => blockSvg.getCommentIcon().setVisible(true), 1);
+      const blockSvg = block as BlockSvg;
+      setTimeout(() => blockSvg.getCommentIcon()!.setVisible(true), 1);
     }
   }
-};
+}
 
 /**
  * Applies any field information available on the state object to the block.
- * @param {!Block} block The block to set the field state of.
- * @param {!State} state The state object to reference.
+ * @param block The block to set the field state of.
+ * @param state The state object to reference.
  */
-const loadFields = function(block, state) {
+function loadFields(block: Block, state: State) {
   if (!state['fields']) {
     return;
   }
@@ -550,15 +554,15 @@ const loadFields = function(block, state) {
     }
     field.loadState(fieldState);
   }
-};
+}
 
 /**
  * Creates any child blocks (attached to inputs) defined by the given state
  * and attaches them to the given block.
- * @param {!Block} block The block to attach input blocks to.
- * @param {!State} state The state object to reference.
+ * @param block The block to attach input blocks to.
+ * @param state The state object to reference.
  */
-const loadInputBlocks = function(block, state) {
+function loadInputBlocks(block: Block, state: State) {
   if (!state['inputs']) {
     return;
   }
@@ -571,15 +575,15 @@ const loadInputBlocks = function(block, state) {
     }
     loadConnection(input.connection, state['inputs'][inputName]);
   }
-};
+}
 
 /**
  * Creates any next blocks defined by the given state and attaches them to the
  * given block.
- * @param {!Block} block The block to attach next blocks to.
- * @param {!State} state The state object to reference.
+ * @param block The block to attach next blocks to.
+ * @param state The state object to reference.
  */
-const loadNextBlocks = function(block, state) {
+function loadNextBlocks(block: Block, state: State) {
   if (!state['next']) {
     return;
   }
@@ -587,17 +591,16 @@ const loadNextBlocks = function(block, state) {
     throw new MissingConnection('next', block, state);
   }
   loadConnection(block.nextConnection, state['next']);
-};
-
+}
 /**
  * Applies the state defined by connectionState to the given connection, ie
  * assigns shadows and attaches child blocks.
- * @param {!Connection} connection The connection to deserialize the
- *     connected blocks of.
- * @param {!ConnectionState} connectionState The object containing the state of
- *     any connected shadow block, or any connected real block.
+ * @param connection The connection to deserialize the connected blocks of.
+ * @param connectionState The object containing the state of any connected
+ *     shadow block, or any connected real block.
  */
-const loadConnection = function(connection, connectionState) {
+function loadConnection(
+    connection: Connection, connectionState: ConnectionState) {
   if (connectionState['shadow']) {
     connection.setShadowState(connectionState['shadow']);
   }
@@ -606,53 +609,57 @@ const loadConnection = function(connection, connectionState) {
         connectionState['block'], connection.getSourceBlock().workspace,
         {parentConnection: connection});
   }
-};
+}
 
 // TODO(#5146): Remove this from the serialization system.
 /**
  * Initializes the give block, eg init the model, inits the svg, renders, etc.
- * @param {!Block} block The block to initialize.
- * @param {boolean} rendered Whether the block is a rendered or headless block.
+ * @param block The block to initialize.
+ * @param rendered Whether the block is a rendered or headless block.
  */
-const initBlock = function(block, rendered) {
+function initBlock(block: Block, rendered: boolean) {
   if (rendered) {
-    const blockSvg = /** @type {!BlockSvg} */ (block);
+    const blockSvg = block as BlockSvg;
     // Adding connections to the connection db is expensive. This defers that
     // operation to decrease load time.
     blockSvg.setConnectionTracking(false);
 
     blockSvg.initSvg();
     blockSvg.render(false);
+    // fixes #6076 JSO deserialization doesn't
+    // set .iconXY_ property so here it will be set
+    const icons = blockSvg.getIcons();
+    for (let i = 0; i < icons.length; i++) {
+      icons[i].computeIconLocation();
+    }
   } else {
     block.initModel();
   }
-};
+}
 
 // Alias to disambiguate saving within the serializer.
 const saveBlock = save;
 
 /**
  * Serializer for saving and loading block state.
- * @implements {ISerializer}
  * @alias Blockly.serialization.blocks.BlockSerializer
  */
-class BlockSerializer {
+class BlockSerializer implements ISerializer {
+  priority: number;
+
   /* eslint-disable-next-line require-jsdoc */
   constructor() {
-    /**
-     * The priority for deserializing blocks.
-     * @type {number}
-     */
+    /** The priority for deserializing blocks. */
     this.priority = priorities.BLOCKS;
   }
 
   /**
    * Serializes the blocks of the given workspace.
-   * @param {!Workspace} workspace The workspace to save the blocks of.
-   * @return {?{languageVersion: number, blocks:!Array<!State>}} The state of
-   *     the workspace's blocks, or null if there are no blocks.
+   * @param workspace The workspace to save the blocks of.
+   * @return The state of the workspace's blocks, or null if there are no
+   *     blocks.
    */
-  save(workspace) {
+  save(workspace: Workspace): {languageVersion: number, blocks: State[]}|null {
     const blockStates = [];
     for (const block of workspace.getTopBlocks(false)) {
       const state =
@@ -673,11 +680,11 @@ class BlockSerializer {
   /**
    * Deserializes the blocks defined by the given state into the given
    * workspace.
-   * @param {{languageVersion: number, blocks:!Array<!State>}} state The state
-   *     of the blocks to deserialize.
-   * @param {!Workspace} workspace The workspace to deserialize into.
+   * @param state The state of the blocks to deserialize.
+   * @param workspace The workspace to deserialize into.
    */
-  load(state, workspace) {
+  load(
+      state: {languageVersion: number, blocks: State[]}, workspace: Workspace) {
     const blockStates = state['blocks'];
     for (const state of blockStates) {
       append(state, workspace, {recordUndo: eventUtils.getRecordUndo()});
@@ -686,9 +693,9 @@ class BlockSerializer {
 
   /**
    * Disposes of any blocks that exist on the workspace.
-   * @param {!Workspace} workspace The workspace to clear the blocks of.
+   * @param workspace The workspace to clear the blocks of.
    */
-  clear(workspace) {
+  clear(workspace: Workspace) {
     // Cannot use workspace.clear() because that also removes variables.
     for (const block of workspace.getTopBlocks(false)) {
       block.dispose(false);