refactor(blocks): Migrate blocks/lists.js to TypeScript (#6902)

* refactor(blocks): Auto-migration of blocks/lists.js to ts

* fix(blocks): Manually migrate & fix types in lists.ts

* chore(blocks): format lists.ts

  Not running clang-format on this as for some reason it decides
  half way through the file to indent everything after that by
  an extra four spaces (and then has to re-wrap a bunch of lines
  that are consequently too long).

* refactor(blocks): Improve types in lists.ts

  It turns out that the way I originally specified the types for
  the mixins meant that they were all 'any', which is a bit
  useless.  Change them so that tsc actually typechecks
  properties (including method calls) on the mixed-in blocks,
  and then fix the numerous additional type errors which
  doing this revealed.

  (By "fix", I mean apply "as" casts and "!"s as required to
  suppress type errors from tsc.  Actually fixing the code in a
  way that makes the blocks meaningfully more bulletproof is
  left as an exercise to the reader - sorry, I mean: will be
  dealt with in a future PR.)

* fix(blocks): Additional fixes for comments PR #6902
This commit is contained in:
Christopher Allen
2023-04-18 12:50:54 +01:00
committed by GitHub
parent edc5843c4c
commit 0177dff49c

View File

@@ -8,34 +8,30 @@
* @fileoverview List blocks for Blockly. * @fileoverview List blocks for Blockly.
* @suppress {checkTypes} * @suppress {checkTypes}
*/ */
'use strict';
goog.module('Blockly.libraryBlocks.lists'); import * as goog from '../closure/goog/goog.js';
goog.declareModuleId('Blockly.libraryBlocks.lists');
const fieldRegistry = goog.require('Blockly.fieldRegistry'); import * as fieldRegistry from '../core/field_registry.js';
const xmlUtils = goog.require('Blockly.utils.xml'); import * as xmlUtils from '../core/utils/xml.js';
const {Align} = goog.require('Blockly.Input'); import {Align} from '../core/input.js';
/* eslint-disable-next-line no-unused-vars */ import type {Block} from '../core/block.js';
const {Block} = goog.requireType('Blockly.Block'); import type {Connection} from '../core/connection.js';
// const {BlockDefinition} = goog.requireType('Blockly.blocks'); import type {BlockSvg} from '../core/block_svg.js';
// TODO (6248): Properly import the BlockDefinition type. import type {BlockDefinition} from '../core/blocks.js';
/* eslint-disable-next-line no-unused-vars */ import {ConnectionType} from '../core/connection_type.js';
const BlockDefinition = Object; import type {FieldDropdown} from '../core/field_dropdown.js';
const {ConnectionType} = goog.require('Blockly.ConnectionType'); import {Msg} from '../core/msg.js';
const {Msg} = goog.require('Blockly.Msg'); import {Mutator} from '../core/mutator.js';
const {Mutator} = goog.require('Blockly.Mutator'); import type {Workspace} from '../core/workspace.js';
/* eslint-disable-next-line no-unused-vars */ import {createBlockDefinitionsFromJsonArray, defineBlocks} from '../core/common.js';
const {Workspace} = goog.requireType('Blockly.Workspace'); import '../core/field_dropdown.js';
const {createBlockDefinitionsFromJsonArray, defineBlocks} = goog.require('Blockly.common');
/** @suppress {extraRequire} */
goog.require('Blockly.FieldDropdown');
/** /**
* A dictionary of the block definitions provided by this module. * A dictionary of the block definitions provided by this module.
* @type {!Object<string, !BlockDefinition>}
*/ */
const blocks = createBlockDefinitionsFromJsonArray([ export const blocks = createBlockDefinitionsFromJsonArray([
// Block for creating an empty list // Block for creating an empty list
// The 'list_create_with' block is preferred as it is more flexible. // The 'list_create_with' block is preferred as it is more flexible.
// <block type="lists_create_with"> // <block type="lists_create_with">
@@ -119,98 +115,114 @@ const blocks = createBlockDefinitionsFromJsonArray([
'helpUrl': '%{BKY_LISTS_LENGTH_HELPURL}', 'helpUrl': '%{BKY_LISTS_LENGTH_HELPURL}',
}, },
]); ]);
exports.blocks = blocks;
blocks['lists_create_with'] = {
/** Type of a 'lists_create_with' block. */
type CreateWithBlock = Block&ListCreateWithMixin;
interface ListCreateWithMixin extends ListCreateWithMixinType {
itemCount_: number;
}
type ListCreateWithMixinType = typeof LISTS_CREATE_WITH;
const LISTS_CREATE_WITH = {
/** /**
* Block for creating a list with any number of elements of any type. * Block for creating a list with any number of elements of any type.
* @this {Block}
*/ */
init: function() { init: function(this: CreateWithBlock) {
this.setHelpUrl(Msg['LISTS_CREATE_WITH_HELPURL']); this.setHelpUrl(Msg['LISTS_CREATE_WITH_HELPURL']);
this.setStyle('list_blocks'); this.setStyle('list_blocks');
this.itemCount_ = 3; this.itemCount_ = 3;
this.updateShape_(); this.updateShape_();
this.setOutput(true, 'Array'); this.setOutput(true, 'Array');
this.setMutator(new Mutator(['lists_create_with_item'], this)); this.setMutator(new Mutator(
['lists_create_with_item'],
this as unknown as BlockSvg)); // BUG(#6905)
this.setTooltip(Msg['LISTS_CREATE_WITH_TOOLTIP']); this.setTooltip(Msg['LISTS_CREATE_WITH_TOOLTIP']);
}, },
/** /**
* Create XML to represent list inputs. * Create XML to represent list inputs.
* Backwards compatible serialization implementation. * Backwards compatible serialization implementation.
* @return {!Element} XML storage element.
* @this {Block}
*/ */
mutationToDom: function() { mutationToDom: function(this: CreateWithBlock): Element {
const container = xmlUtils.createElement('mutation'); const container = xmlUtils.createElement('mutation');
container.setAttribute('items', this.itemCount_); container.setAttribute('items', String(this.itemCount_));
return container; return container;
}, },
/** /**
* Parse XML to restore the list inputs. * Parse XML to restore the list inputs.
* Backwards compatible serialization implementation. * Backwards compatible serialization implementation.
* @param {!Element} xmlElement XML storage element. *
* @this {Block} * @param xmlElement XML storage element.
*/ */
domToMutation: function(xmlElement) { domToMutation: function(this: CreateWithBlock, xmlElement: Element) {
this.itemCount_ = parseInt(xmlElement.getAttribute('items'), 10); const items = xmlElement.getAttribute('items');
if (!items) throw new TypeError('element did not have items');
this.itemCount_ = parseInt(items, 10);
this.updateShape_(); this.updateShape_();
}, },
/** /**
* Returns the state of this block as a JSON serializable object. * Returns the state of this block as a JSON serializable object.
* @return {{itemCount: number}} The state of this block, ie the item count. *
* @return The state of this block, ie the item count.
*/ */
saveExtraState: function() { saveExtraState: function(this: CreateWithBlock): {itemCount: number} {
return { return {
'itemCount': this.itemCount_, 'itemCount': this.itemCount_,
}; };
}, },
/** /**
* Applies the given state to this block. * Applies the given state to this block.
* @param {*} state The state to apply to this block, ie the item count. *
* @param state The state to apply to this block, ie the item count.
*/ */
loadExtraState: function(state) { loadExtraState: function(this: CreateWithBlock, state: AnyDuringMigration) {
this.itemCount_ = state['itemCount']; this.itemCount_ = state['itemCount'];
this.updateShape_(); this.updateShape_();
}, },
/** /**
* Populate the mutator's dialog with this block's components. * Populate the mutator's dialog with this block's components.
* @param {!Workspace} workspace Mutator's workspace. *
* @return {!Block} Root block in mutator. * @param workspace Mutator's workspace.
* @this {Block} * @return Root block in mutator.
*/ */
decompose: function(workspace) { decompose: function(this: CreateWithBlock, workspace: Workspace): ContainerBlock {
const containerBlock = workspace.newBlock('lists_create_with_container'); const containerBlock =
containerBlock.initSvg(); workspace.newBlock('lists_create_with_container') as ContainerBlock;
let connection = containerBlock.getInput('STACK').connection; (containerBlock as BlockSvg).initSvg();
let connection = containerBlock.getInput('STACK')!.connection;
for (let i = 0; i < this.itemCount_; i++) { for (let i = 0; i < this.itemCount_; i++) {
const itemBlock = workspace.newBlock('lists_create_with_item'); const itemBlock =
itemBlock.initSvg(); workspace.newBlock('lists_create_with_item') as ItemBlock;
connection.connect(itemBlock.previousConnection); (itemBlock as BlockSvg).initSvg();
if (!itemBlock.previousConnection) {
throw new Error('itemBlock has no previousConnection');
}
connection!.connect(itemBlock.previousConnection);
connection = itemBlock.nextConnection; connection = itemBlock.nextConnection;
} }
return containerBlock; return containerBlock;
}, },
/** /**
* Reconfigure this block based on the mutator dialog's components. * Reconfigure this block based on the mutator dialog's components.
* @param {!Block} containerBlock Root block in mutator. *
* @this {Block} * @param containerBlock Root block in mutator.
*/ */
compose: function(containerBlock) { compose: function(this: CreateWithBlock, containerBlock: Block) {
let itemBlock = containerBlock.getInputTargetBlock('STACK'); let itemBlock: ItemBlock|null =
containerBlock.getInputTargetBlock('STACK') as ItemBlock;
// Count number of inputs. // Count number of inputs.
const connections = []; const connections: Connection[] = [];
while (itemBlock) { while (itemBlock) {
if (itemBlock.isInsertionMarker()) { if (itemBlock.isInsertionMarker()) {
itemBlock = itemBlock.getNextBlock(); itemBlock = itemBlock.getNextBlock() as ItemBlock | null;
continue; continue;
} }
connections.push(itemBlock.valueConnection_); connections.push(itemBlock.valueConnection_ as Connection);
itemBlock = itemBlock.getNextBlock(); itemBlock = itemBlock.getNextBlock() as ItemBlock | null;
} }
// Disconnect any children that don't belong. // Disconnect any children that don't belong.
for (let i = 0; i < this.itemCount_; i++) { for (let i = 0; i < this.itemCount_; i++) {
const connection = this.getInput('ADD' + i).connection.targetConnection; const connection = this.getInput('ADD' + i)!.connection!.targetConnection;
if (connection && connections.indexOf(connection) === -1) { if (connection && connections.indexOf(connection) === -1) {
connection.disconnect(); connection.disconnect();
} }
@@ -224,29 +236,29 @@ blocks['lists_create_with'] = {
}, },
/** /**
* Store pointers to any connected child blocks. * Store pointers to any connected child blocks.
* @param {!Block} containerBlock Root block in mutator. *
* @this {Block} * @param containerBlock Root block in mutator.
*/ */
saveConnections: function(containerBlock) { saveConnections: function(this: CreateWithBlock, containerBlock: Block) {
let itemBlock = containerBlock.getInputTargetBlock('STACK'); let itemBlock: ItemBlock|null =
containerBlock.getInputTargetBlock('STACK') as ItemBlock;
let i = 0; let i = 0;
while (itemBlock) { while (itemBlock) {
if (itemBlock.isInsertionMarker()) { if (itemBlock.isInsertionMarker()) {
itemBlock = itemBlock.getNextBlock(); itemBlock = itemBlock.getNextBlock() as ItemBlock | null;
continue; continue;
} }
const input = this.getInput('ADD' + i); const input = this.getInput('ADD' + i);
itemBlock.valueConnection_ = input && input.connection.targetConnection; itemBlock.valueConnection_ =
itemBlock = itemBlock.getNextBlock(); input?.connection!.targetConnection as Connection;
itemBlock = itemBlock.getNextBlock() as ItemBlock | null;
i++; i++;
} }
}, },
/** /**
* Modify this block to have the correct number of inputs. * Modify this block to have the correct number of inputs.
* @private
* @this {Block}
*/ */
updateShape_: function() { updateShape_: function(this: CreateWithBlock) {
if (this.itemCount_ && this.getInput('EMPTY')) { if (this.itemCount_ && this.getInput('EMPTY')) {
this.removeInput('EMPTY'); this.removeInput('EMPTY');
} else if (!this.itemCount_ && !this.getInput('EMPTY')) { } else if (!this.itemCount_ && !this.getInput('EMPTY')) {
@@ -268,13 +280,18 @@ blocks['lists_create_with'] = {
} }
}, },
}; };
blocks['lists_create_with'] = LISTS_CREATE_WITH;
blocks['lists_create_with_container'] = { /** Type for a 'lists_create_with_container' block. */
type ContainerBlock = Block&ContainerMutator;
interface ContainerMutator extends ContainerMutatorType {}
type ContainerMutatorType = typeof LISTS_CREATE_WITH_CONTAINER;
const LISTS_CREATE_WITH_CONTAINER = {
/** /**
* Mutator block for list container. * Mutator block for list container.
* @this {Block}
*/ */
init: function() { init: function(this: ContainerBlock) {
this.setStyle('list_blocks'); this.setStyle('list_blocks');
this.appendDummyInput().appendField( this.appendDummyInput().appendField(
Msg['LISTS_CREATE_WITH_CONTAINER_TITLE_ADD']); Msg['LISTS_CREATE_WITH_CONTAINER_TITLE_ADD']);
@@ -283,13 +300,20 @@ blocks['lists_create_with_container'] = {
this.contextMenu = false; this.contextMenu = false;
}, },
}; };
blocks['lists_create_with_container'] = LISTS_CREATE_WITH_CONTAINER;
blocks['lists_create_with_item'] = { /** Type for a 'lists_create_with_item' block. */
type ItemBlock = Block&ItemMutator;
interface ItemMutator extends ItemMutatorType {
valueConnection_?: Connection;
}
type ItemMutatorType = typeof LISTS_CREATE_WITH_ITEM;
const LISTS_CREATE_WITH_ITEM = {
/** /**
* Mutator block for adding items. * Mutator block for adding items.
* @this {Block}
*/ */
init: function() { init: function(this: ItemBlock) {
this.setStyle('list_blocks'); this.setStyle('list_blocks');
this.appendDummyInput().appendField(Msg['LISTS_CREATE_WITH_ITEM_TITLE']); this.appendDummyInput().appendField(Msg['LISTS_CREATE_WITH_ITEM_TITLE']);
this.setPreviousStatement(true); this.setPreviousStatement(true);
@@ -298,13 +322,18 @@ blocks['lists_create_with_item'] = {
this.contextMenu = false; this.contextMenu = false;
}, },
}; };
blocks['lists_create_with_item'] = LISTS_CREATE_WITH_ITEM;
blocks['lists_indexOf'] = { /** Type for a 'lists_indexOf' block. */
type IndexOfBlock = Block&IndexOfMutator;
interface IndexOfMutator extends IndexOfMutatorType {}
type IndexOfMutatorType = typeof LISTS_INDEXOF;
const LISTS_INDEXOF = {
/** /**
* Block for finding an item in the list. * Block for finding an item in the list.
* @this {Block}
*/ */
init: function() { init: function(this: IndexOfBlock) {
const OPERATORS = [ const OPERATORS = [
[Msg['LISTS_INDEX_OF_FIRST'], 'FIRST'], [Msg['LISTS_INDEX_OF_FIRST'], 'FIRST'],
[Msg['LISTS_INDEX_OF_LAST'], 'LAST'], [Msg['LISTS_INDEX_OF_LAST'], 'LAST'],
@@ -318,6 +347,7 @@ blocks['lists_indexOf'] = {
type: 'field_dropdown', type: 'field_dropdown',
options: OPERATORS, options: OPERATORS,
}); });
if (!operatorsDropdown) throw new Error('field_dropdown not found');
this.appendValueInput('FIND').appendField(operatorsDropdown, 'END'); this.appendValueInput('FIND').appendField(operatorsDropdown, 'END');
this.setInputsInline(true); this.setInputsInline(true);
// Assign 'this' to a variable for use in the tooltip closure below. // Assign 'this' to a variable for use in the tooltip closure below.
@@ -328,13 +358,20 @@ blocks['lists_indexOf'] = {
}); });
}, },
}; };
blocks['lists_indexOf'] = LISTS_INDEXOF;
blocks['lists_getIndex'] = { /** Type for a 'lists_getIndex' block. */
type GetIndexBlock = Block&GetIndexMutator;
interface GetIndexMutator extends GetIndexMutatorType {
WHERE_OPTIONS: Array<[string, string]>;
}
type GetIndexMutatorType = typeof LISTS_GETINDEX;
const LISTS_GETINDEX = {
/** /**
* Block for getting element at index. * Block for getting element at index.
* @this {Block}
*/ */
init: function() { init: function(this: GetIndexBlock) {
const MODE = [ const MODE = [
[Msg['LISTS_GET_INDEX_GET'], 'GET'], [Msg['LISTS_GET_INDEX_GET'], 'GET'],
[Msg['LISTS_GET_INDEX_GET_REMOVE'], 'GET_REMOVE'], [Msg['LISTS_GET_INDEX_GET_REMOVE'], 'GET_REMOVE'],
@@ -352,15 +389,14 @@ blocks['lists_getIndex'] = {
const modeMenu = fieldRegistry.fromJson({ const modeMenu = fieldRegistry.fromJson({
type: 'field_dropdown', type: 'field_dropdown',
options: MODE, options: MODE,
}); }) as FieldDropdown;
modeMenu.setValidator( modeMenu.setValidator(
/** /** @param value The input value. */
* @param {*} value The input value. function(this: FieldDropdown, value: string) {
* @this {FieldDropdown}
*/
function(value) {
const isStatement = (value === 'REMOVE'); const isStatement = (value === 'REMOVE');
this.getSourceBlock().updateStatement_(isStatement); (this.getSourceBlock() as GetIndexBlock)
.updateStatement_(isStatement);
return undefined;
}); });
this.appendValueInput('VALUE').setCheck('Array').appendField( this.appendValueInput('VALUE').setCheck('Array').appendField(
Msg['LISTS_GET_INDEX_INPUT_IN_LIST']); Msg['LISTS_GET_INDEX_INPUT_IN_LIST']);
@@ -435,23 +471,23 @@ blocks['lists_getIndex'] = {
/** /**
* Create XML to represent whether the block is a statement or a value. * Create XML to represent whether the block is a statement or a value.
* Also represent whether there is an 'AT' input. * Also represent whether there is an 'AT' input.
* @return {!Element} XML storage element. *
* @this {Block} * @return XML storage element.
*/ */
mutationToDom: function() { mutationToDom: function(this: GetIndexBlock): Element {
const container = xmlUtils.createElement('mutation'); const container = xmlUtils.createElement('mutation');
const isStatement = !this.outputConnection; const isStatement = !this.outputConnection;
container.setAttribute('statement', isStatement); container.setAttribute('statement', String(isStatement));
const isAt = this.getInput('AT').type === ConnectionType.INPUT_VALUE; const isAt = this.getInput('AT')!.type === ConnectionType.INPUT_VALUE;
container.setAttribute('at', isAt); container.setAttribute('at', String(isAt));
return container; return container;
}, },
/** /**
* Parse XML to restore the 'AT' input. * Parse XML to restore the 'AT' input.
* @param {!Element} xmlElement XML storage element. *
* @this {Block} * @param xmlElement XML storage element.
*/ */
domToMutation: function(xmlElement) { domToMutation: function(this: GetIndexBlock, xmlElement: Element) {
// Note: Until January 2013 this block did not have mutations, // Note: Until January 2013 this block did not have mutations,
// so 'statement' defaults to false and 'at' defaults to true. // so 'statement' defaults to false and 'at' defaults to true.
const isStatement = (xmlElement.getAttribute('statement') === 'true'); const isStatement = (xmlElement.getAttribute('statement') === 'true');
@@ -459,17 +495,18 @@ blocks['lists_getIndex'] = {
const isAt = (xmlElement.getAttribute('at') !== 'false'); const isAt = (xmlElement.getAttribute('at') !== 'false');
this.updateAt_(isAt); this.updateAt_(isAt);
}, },
/** /**
* Returns the state of this block as a JSON serializable object. * Returns the state of this block as a JSON serializable object.
* Returns null for efficiency if no state is needed (not a statement) * Returns null for efficiency if no state is needed (not a statement)
* @return {?{isStatement: boolean}} The state of this block, ie whether it's *
* a statement. * @return The state of this block, ie whether it's a statement.
*/ */
saveExtraState: function() { saveExtraState: function(this: GetIndexBlock): ({
isStatement: boolean
} | null) {
if (!this.outputConnection) { if (!this.outputConnection) {
return { return {
'isStatement': true, isStatement: true,
}; };
} }
return null; return null;
@@ -477,10 +514,11 @@ blocks['lists_getIndex'] = {
/** /**
* Applies the given state to this block. * Applies the given state to this block.
* @param {*} state The state to apply to this block, ie whether it's a *
* @param state The state to apply to this block, ie whether it's a
* statement. * statement.
*/ */
loadExtraState: function(state) { loadExtraState: function(this: GetIndexBlock, state: AnyDuringMigration) {
if (state['isStatement']) { if (state['isStatement']) {
this.updateStatement_(true); this.updateStatement_(true);
} else if (typeof state === 'string') { } else if (typeof state === 'string') {
@@ -491,15 +529,15 @@ blocks['lists_getIndex'] = {
/** /**
* Switch between a value block and a statement block. * Switch between a value block and a statement block.
* @param {boolean} newStatement True if the block should be a statement. *
* @param newStatement True if the block should be a statement.
* False if the block should be a value. * False if the block should be a value.
* @private
* @this {Block}
*/ */
updateStatement_: function(newStatement) { updateStatement_: function(this: GetIndexBlock, newStatement: boolean) {
const oldStatement = !this.outputConnection; const oldStatement = !this.outputConnection;
if (newStatement !== oldStatement) { if (newStatement !== oldStatement) {
this.unplug(true, true); // TODO(#6920): The .unplug only has one parameter.
(this.unplug as (arg0?: boolean, arg1?: boolean) => void)(true, true);
if (newStatement) { if (newStatement) {
this.setOutput(false); this.setOutput(false);
this.setPreviousStatement(true); this.setPreviousStatement(true);
@@ -513,11 +551,10 @@ blocks['lists_getIndex'] = {
}, },
/** /**
* Create or delete an input for the numeric index. * Create or delete an input for the numeric index.
* @param {boolean} isAt True if the input should exist. *
* @private * @param isAt True if the input should exist.
* @this {Block}
*/ */
updateAt_: function(isAt) { updateAt_: function(this: GetIndexBlock, isAt: boolean) {
// Destroy old 'AT' and 'ORDINAL' inputs. // Destroy old 'AT' and 'ORDINAL' inputs.
this.removeInput('AT'); this.removeInput('AT');
this.removeInput('ORDINAL', true); this.removeInput('ORDINAL', true);
@@ -534,20 +571,18 @@ blocks['lists_getIndex'] = {
const menu = fieldRegistry.fromJson({ const menu = fieldRegistry.fromJson({
type: 'field_dropdown', type: 'field_dropdown',
options: this.WHERE_OPTIONS, options: this.WHERE_OPTIONS,
}); }) as FieldDropdown;
menu.setValidator( menu.setValidator(
/** /**
* @param {*} value The input value. * @param value The input value.
* @this {FieldDropdown} * @return Null if the field has been replaced; otherwise undefined.
* @return {null|undefined} Null if the field has been replaced;
* otherwise undefined.
*/ */
function(value) { function(this: FieldDropdown, value: string) {
const newAt = (value === 'FROM_START') || (value === 'FROM_END'); const newAt = (value === 'FROM_START') || (value === 'FROM_END');
// The 'isAt' variable is available due to this function being a // The 'isAt' variable is available due to this function being a
// closure. // closure.
if (newAt !== isAt) { if (newAt !== isAt) {
const block = this.getSourceBlock(); const block = this.getSourceBlock() as GetIndexBlock;
block.updateAt_(newAt); block.updateAt_(newAt);
// This menu has been destroyed and replaced. Update the // This menu has been destroyed and replaced. Update the
// replacement. // replacement.
@@ -556,19 +591,26 @@ blocks['lists_getIndex'] = {
} }
return undefined; return undefined;
}); });
this.getInput('AT').appendField(menu, 'WHERE'); this.getInput('AT')!.appendField(menu, 'WHERE');
if (Msg['LISTS_GET_INDEX_TAIL']) { if (Msg['LISTS_GET_INDEX_TAIL']) {
this.moveInputBefore('TAIL', null); this.moveInputBefore('TAIL', null);
} }
}, },
}; };
blocks['lists_getIndex'] = LISTS_GETINDEX;
blocks['lists_setIndex'] = { /** Type for a 'lists_setIndex' block. */
type SetIndexBlock = Block&SetIndexMutator;
interface SetIndexMutator extends SetIndexMutatorType {
WHERE_OPTIONS: Array<[string, string]>;
}
type SetIndexMutatorType = typeof LISTS_SETINDEX;
const LISTS_SETINDEX = {
/** /**
* Block for setting the element at index. * Block for setting the element at index.
* @this {Block}
*/ */
init: function() { init: function(this: SetIndexBlock) {
const MODE = [ const MODE = [
[Msg['LISTS_SET_INDEX_SET'], 'SET'], [Msg['LISTS_SET_INDEX_SET'], 'SET'],
[Msg['LISTS_SET_INDEX_INSERT'], 'INSERT'], [Msg['LISTS_SET_INDEX_INSERT'], 'INSERT'],
@@ -587,7 +629,7 @@ blocks['lists_setIndex'] = {
const operationDropdown = fieldRegistry.fromJson({ const operationDropdown = fieldRegistry.fromJson({
type: 'field_dropdown', type: 'field_dropdown',
options: MODE, options: MODE,
}); }) as FieldDropdown;
this.appendDummyInput() this.appendDummyInput()
.appendField(operationDropdown, 'MODE') .appendField(operationDropdown, 'MODE')
.appendField('', 'SPACE'); .appendField('', 'SPACE');
@@ -642,21 +684,21 @@ blocks['lists_setIndex'] = {
}, },
/** /**
* Create XML to represent whether there is an 'AT' input. * Create XML to represent whether there is an 'AT' input.
* @return {!Element} XML storage element. *
* @this {Block} * @return XML storage element.
*/ */
mutationToDom: function() { mutationToDom: function(this: SetIndexBlock): Element {
const container = xmlUtils.createElement('mutation'); const container = xmlUtils.createElement('mutation');
const isAt = this.getInput('AT').type === ConnectionType.INPUT_VALUE; const isAt = this.getInput('AT')!.type === ConnectionType.INPUT_VALUE;
container.setAttribute('at', isAt); container.setAttribute('at', String(isAt));
return container; return container;
}, },
/** /**
* Parse XML to restore the 'AT' input. * Parse XML to restore the 'AT' input.
* @param {!Element} xmlElement XML storage element. *
* @this {Block} * @param xmlElement XML storage element.
*/ */
domToMutation: function(xmlElement) { domToMutation: function(this: SetIndexBlock, xmlElement: Element) {
// Note: Until January 2013 this block did not have mutations, // Note: Until January 2013 this block did not have mutations,
// so 'at' defaults to true. // so 'at' defaults to true.
const isAt = (xmlElement.getAttribute('at') !== 'false'); const isAt = (xmlElement.getAttribute('at') !== 'false');
@@ -668,9 +710,10 @@ blocks['lists_setIndex'] = {
* This block does not need to serialize any specific state as it is already * This block does not need to serialize any specific state as it is already
* encoded in the dropdown values, but must have an implementation to avoid * encoded in the dropdown values, but must have an implementation to avoid
* the backward compatible XML mutations being serialized. * the backward compatible XML mutations being serialized.
* @return {null} The state of this block. *
* @return The state of this block.
*/ */
saveExtraState: function() { saveExtraState: function(this: SetIndexBlock): null {
return null; return null;
}, },
@@ -679,15 +722,14 @@ blocks['lists_setIndex'] = {
* No extra state is needed or expected as it is already encoded in the * No extra state is needed or expected as it is already encoded in the
* dropdown values. * dropdown values.
*/ */
loadExtraState: function() {}, loadExtraState: function(this: SetIndexBlock) {},
/** /**
* Create or delete an input for the numeric index. * Create or delete an input for the numeric index.
* @param {boolean} isAt True if the input should exist. *
* @private * @param isAt True if the input should exist.
* @this {Block}
*/ */
updateAt_: function(isAt) { updateAt_: function(this: SetIndexBlock, isAt: boolean) {
// Destroy old 'AT' and 'ORDINAL' input. // Destroy old 'AT' and 'ORDINAL' input.
this.removeInput('AT'); this.removeInput('AT');
this.removeInput('ORDINAL', true); this.removeInput('ORDINAL', true);
@@ -704,20 +746,18 @@ blocks['lists_setIndex'] = {
const menu = fieldRegistry.fromJson({ const menu = fieldRegistry.fromJson({
type: 'field_dropdown', type: 'field_dropdown',
options: this.WHERE_OPTIONS, options: this.WHERE_OPTIONS,
}); }) as FieldDropdown;
menu.setValidator( menu.setValidator(
/** /**
* @param {*} value The input value. * @param value The input value.
* @this {FieldDropdown} * @return Null if the field has been replaced; otherwise undefined.
* @return {null|undefined} Null if the field has been replaced;
* otherwise undefined.
*/ */
function(value) { function(this: FieldDropdown, value: string) {
const newAt = (value === 'FROM_START') || (value === 'FROM_END'); const newAt = (value === 'FROM_START') || (value === 'FROM_END');
// The 'isAt' variable is available due to this function being a // The 'isAt' variable is available due to this function being a
// closure. // closure.
if (newAt !== isAt) { if (newAt !== isAt) {
const block = this.getSourceBlock(); const block = this.getSourceBlock() as SetIndexBlock;
block.updateAt_(newAt); block.updateAt_(newAt);
// This menu has been destroyed and replaced. Update the // This menu has been destroyed and replaced. Update the
// replacement. // replacement.
@@ -731,16 +771,24 @@ blocks['lists_setIndex'] = {
this.moveInputBefore('ORDINAL', 'TO'); this.moveInputBefore('ORDINAL', 'TO');
} }
this.getInput('AT').appendField(menu, 'WHERE'); this.getInput('AT')!.appendField(menu, 'WHERE');
}, },
}; };
blocks['lists_setIndex'] = LISTS_SETINDEX;
blocks['lists_getSublist'] = { /** Type for a 'lists_getSublist' block. */
type GetSublistBlock = Block&GetSublistMutator;
interface GetSublistMutator extends GetSublistMutatorType {
WHERE_OPTIONS_1: Array<[string, string]>;
WHERE_OPTIONS_2: Array<[string, string]>;
}
type GetSublistMutatorType = typeof LISTS_GETSUBLIST;
const LISTS_GETSUBLIST = {
/** /**
* Block for getting sublist. * Block for getting sublist.
* @this {Block}
*/ */
init: function() { init: function(this: GetSublistBlock) {
this['WHERE_OPTIONS_1'] = [ this['WHERE_OPTIONS_1'] = [
[Msg['LISTS_GET_SUBLIST_START_FROM_START'], 'FROM_START'], [Msg['LISTS_GET_SUBLIST_START_FROM_START'], 'FROM_START'],
[Msg['LISTS_GET_SUBLIST_START_FROM_END'], 'FROM_END'], [Msg['LISTS_GET_SUBLIST_START_FROM_END'], 'FROM_END'],
@@ -768,23 +816,23 @@ blocks['lists_getSublist'] = {
}, },
/** /**
* Create XML to represent whether there are 'AT' inputs. * Create XML to represent whether there are 'AT' inputs.
* @return {!Element} XML storage element. *
* @this {Block} * @return XML storage element.
*/ */
mutationToDom: function() { mutationToDom: function(this: GetSublistBlock): Element {
const container = xmlUtils.createElement('mutation'); const container = xmlUtils.createElement('mutation');
const isAt1 = this.getInput('AT1').type === ConnectionType.INPUT_VALUE; const isAt1 = this.getInput('AT1')!.type === ConnectionType.INPUT_VALUE;
container.setAttribute('at1', isAt1); container.setAttribute('at1', String(isAt1));
const isAt2 = this.getInput('AT2').type === ConnectionType.INPUT_VALUE; const isAt2 = this.getInput('AT2')!.type === ConnectionType.INPUT_VALUE;
container.setAttribute('at2', isAt2); container.setAttribute('at2', String(isAt2));
return container; return container;
}, },
/** /**
* Parse XML to restore the 'AT' inputs. * Parse XML to restore the 'AT' inputs.
* @param {!Element} xmlElement XML storage element. *
* @this {Block} * @param xmlElement XML storage element.
*/ */
domToMutation: function(xmlElement) { domToMutation: function(this: GetSublistBlock, xmlElement: Element) {
const isAt1 = (xmlElement.getAttribute('at1') === 'true'); const isAt1 = (xmlElement.getAttribute('at1') === 'true');
const isAt2 = (xmlElement.getAttribute('at2') === 'true'); const isAt2 = (xmlElement.getAttribute('at2') === 'true');
this.updateAt_(1, isAt1); this.updateAt_(1, isAt1);
@@ -796,9 +844,10 @@ blocks['lists_getSublist'] = {
* This block does not need to serialize any specific state as it is already * This block does not need to serialize any specific state as it is already
* encoded in the dropdown values, but must have an implementation to avoid * encoded in the dropdown values, but must have an implementation to avoid
* the backward compatible XML mutations being serialized. * the backward compatible XML mutations being serialized.
* @return {null} The state of this block. *
* @return The state of this block.
*/ */
saveExtraState: function() { saveExtraState: function(this: GetSublistBlock): null {
return null; return null;
}, },
@@ -807,17 +856,16 @@ blocks['lists_getSublist'] = {
* No extra state is needed or expected as it is already encoded in the * No extra state is needed or expected as it is already encoded in the
* dropdown values. * dropdown values.
*/ */
loadExtraState: function() {}, loadExtraState: function(this: GetSublistBlock) {},
/** /**
* Create or delete an input for a numeric index. * Create or delete an input for a numeric index.
* This block has two such inputs, independent of each other. * This block has two such inputs, independent of each other.
* @param {number} n Specify first or second input (1 or 2). *
* @param {boolean} isAt True if the input should exist. * @param n Specify first or second input (1 or 2).
* @private * @param isAt True if the input should exist.
* @this {Block}
*/ */
updateAt_: function(n, isAt) { updateAt_: function(this: GetSublistBlock, n: 1|2, isAt: boolean) {
// Create or delete an input for the numeric index. // Create or delete an input for the numeric index.
// Destroy old 'AT' and 'ORDINAL' inputs. // Destroy old 'AT' and 'ORDINAL' inputs.
this.removeInput('AT' + n); this.removeInput('AT' + n);
@@ -834,21 +882,22 @@ blocks['lists_getSublist'] = {
} }
const menu = fieldRegistry.fromJson({ const menu = fieldRegistry.fromJson({
type: 'field_dropdown', type: 'field_dropdown',
options: this['WHERE_OPTIONS_' + n], // TODO(#6920): Rewrite this so that clang-format doesn't make such an
}); // awful unreadable mess of it.
options: this
[('WHERE_OPTIONS_' + n) as ('WHERE_OPTIONS_1' | 'WHERE_OPTIONS_2')],
}) as FieldDropdown;
menu.setValidator( menu.setValidator(
/** /**
* @param {*} value The input value. * @param value The input value.
* @this {FieldDropdown} * @return Null if the field has been replaced; otherwise undefined.
* @return {null|undefined} Null if the field has been replaced;
* otherwise undefined.
*/ */
function(value) { function(this: FieldDropdown, value: string) {
const newAt = (value === 'FROM_START') || (value === 'FROM_END'); const newAt = (value === 'FROM_START') || (value === 'FROM_END');
// The 'isAt' variable is available due to this function being a // The 'isAt' variable is available due to this function being a
// closure. // closure.
if (newAt !== isAt) { if (newAt !== isAt) {
const block = this.getSourceBlock(); const block = this.getSourceBlock() as GetSublistBlock;
block.updateAt_(n, newAt); block.updateAt_(n, newAt);
// This menu has been destroyed and replaced. // This menu has been destroyed and replaced.
// Update the replacement. // Update the replacement.
@@ -856,7 +905,7 @@ blocks['lists_getSublist'] = {
return null; return null;
} }
}); });
this.getInput('AT' + n).appendField(menu, 'WHERE' + n); this.getInput('AT' + n)!.appendField(menu, 'WHERE' + n);
if (n === 1) { if (n === 1) {
this.moveInputBefore('AT1', 'AT2'); this.moveInputBefore('AT1', 'AT2');
if (this.getInput('ORDINAL1')) { if (this.getInput('ORDINAL1')) {
@@ -868,13 +917,15 @@ blocks['lists_getSublist'] = {
} }
}, },
}; };
blocks['lists_getSublist'] = LISTS_GETSUBLIST;
type SortBlock = Block|typeof blocks['lists_sort'];
blocks['lists_sort'] = { blocks['lists_sort'] = {
/** /**
* Block for sorting a list. * Block for sorting a list.
* @this {Block}
*/ */
init: function() { init: function(this: SortBlock) {
this.jsonInit({ this.jsonInit({
'message0': '%{BKY_LISTS_SORT_TITLE}', 'message0': '%{BKY_LISTS_SORT_TITLE}',
'args0': [ 'args0': [
@@ -909,12 +960,13 @@ blocks['lists_sort'] = {
}, },
}; };
type SplitBlock = Block|typeof blocks['lists_split'];
blocks['lists_split'] = { blocks['lists_split'] = {
/** /**
* Block for splitting text into a list, or joining a list into text. * Block for splitting text into a list, or joining a list into text.
* @this {Block}
*/ */
init: function() { init: function(this: SplitBlock) {
// Assign 'this' to a variable for use in the closures below. // Assign 'this' to a variable for use in the closures below.
const thisBlock = this; const thisBlock = this;
const dropdown = fieldRegistry.fromJson({ const dropdown = fieldRegistry.fromJson({
@@ -924,6 +976,7 @@ blocks['lists_split'] = {
[Msg['LISTS_SPLIT_TEXT_FROM_LIST'], 'JOIN'], [Msg['LISTS_SPLIT_TEXT_FROM_LIST'], 'JOIN'],
], ],
}); });
if (!dropdown) throw new Error('field_dropdown not found');
dropdown.setValidator(function(newMode) { dropdown.setValidator(function(newMode) {
thisBlock.updateType_(newMode); thisBlock.updateType_(newMode);
}); });
@@ -947,49 +1000,49 @@ blocks['lists_split'] = {
}, },
/** /**
* Modify this block to have the correct input and output types. * Modify this block to have the correct input and output types.
* @param {string} newMode Either 'SPLIT' or 'JOIN'. *
* @private * @param newMode Either 'SPLIT' or 'JOIN'.
* @this {Block}
*/ */
updateType_: function(newMode) { updateType_: function(this: SplitBlock, newMode: string) {
const mode = this.getFieldValue('MODE'); const mode = this.getFieldValue('MODE');
if (mode !== newMode) { if (mode !== newMode) {
const inputConnection = this.getInput('INPUT').connection; const inputConnection = this.getInput('INPUT')!.connection;
inputConnection.setShadowDom(null); inputConnection!.setShadowDom(null);
const inputBlock = inputConnection.targetBlock(); const inputBlock = inputConnection!.targetBlock();
// TODO(#6920): This is probably not needed; see details in bug.
if (inputBlock) { if (inputBlock) {
inputConnection.disconnect(); inputConnection!.disconnect();
if (inputBlock.isShadow()) { if (inputBlock.isShadow()) {
inputBlock.dispose(); inputBlock.dispose(false);
} else { } else {
this.bumpNeighbours(); this.bumpNeighbours();
} }
} }
} }
if (newMode === 'SPLIT') { if (newMode === 'SPLIT') {
this.outputConnection.setCheck('Array'); this.outputConnection!.setCheck('Array');
this.getInput('INPUT').setCheck('String'); this.getInput('INPUT')!.setCheck('String');
} else { } else {
this.outputConnection.setCheck('String'); this.outputConnection!.setCheck('String');
this.getInput('INPUT').setCheck('Array'); this.getInput('INPUT')!.setCheck('Array');
} }
}, },
/** /**
* Create XML to represent the input and output types. * Create XML to represent the input and output types.
* @return {!Element} XML storage element. *
* @this {Block} * @return XML storage element.
*/ */
mutationToDom: function() { mutationToDom: function(this: SplitBlock): Element {
const container = xmlUtils.createElement('mutation'); const container = xmlUtils.createElement('mutation');
container.setAttribute('mode', this.getFieldValue('MODE')); container.setAttribute('mode', this.getFieldValue('MODE'));
return container; return container;
}, },
/** /**
* Parse XML to restore the input and output types. * Parse XML to restore the input and output types.
* @param {!Element} xmlElement XML storage element. *
* @this {Block} * @param xmlElement XML storage element.
*/ */
domToMutation: function(xmlElement) { domToMutation: function(this: SplitBlock, xmlElement: Element) {
this.updateType_(xmlElement.getAttribute('mode')); this.updateType_(xmlElement.getAttribute('mode'));
}, },
@@ -998,9 +1051,10 @@ blocks['lists_split'] = {
* This block does not need to serialize any specific state as it is already * This block does not need to serialize any specific state as it is already
* encoded in the dropdown values, but must have an implementation to avoid * encoded in the dropdown values, but must have an implementation to avoid
* the backward compatible XML mutations being serialized. * the backward compatible XML mutations being serialized.
* @return {null} The state of this block. *
* @return The state of this block.
*/ */
saveExtraState: function() { saveExtraState: function(this: SplitBlock): null {
return null; return null;
}, },
@@ -1009,7 +1063,7 @@ blocks['lists_split'] = {
* No extra state is needed or expected as it is already encoded in the * No extra state is needed or expected as it is already encoded in the
* dropdown values. * dropdown values.
*/ */
loadExtraState: function() {}, loadExtraState: function(this: SplitBlock) {},
}; };
// Register provided blocks. // Register provided blocks.