refactor(generators): Migrate Python generators to TypeScript #7602 (#…

…7617)

* refactor(generators): Migrate python_generator.js to TypeScript

* refactor(generators): Migrate generators/python/* to TypeScript

  First pass doing very mechanistic migration, not attempting to fix
  all the resulting type errors.

* fix(generators): Fix type errors in generator functions

  This consists almost entirely of adding casts, so the code output
  by tsc should be as similar as possible to the pre-migration .js
  source files.

* refactor(generators): Migrate generators/python.js to TypeScript

  The way the generator functions are added to
  pythonGenerator.forBlock has been modified so that incorrect
  generator function signatures will cause tsc to generate a type
  error.

* chore(generator): Format

  One block protected with // prettier-ignore to preserve careful
  comment formatting.

  Where there are repeated concatenations prettier has made a pretty
  mess of things, but the correct fix is probably to use template
  literals instead (rather than just locally disabling prettier).
  This is one of the items in the to-do list in #7600.

generators/python.js → generators/python.ts

@@ -36,8 +36,18 @@ export const pythonGenerator = new PythonGenerator();
 pythonGenerator.addReservedWords('math,random,Number');
 
 // Install per-block-type generator functions:
-Object.assign(
-  pythonGenerator.forBlock,
-  colour, lists, logic, loops, math, procedures,
-  text, variables, variablesDynamic
-);
+// Install per-block-type generator functions:
+const generators: typeof pythonGenerator.forBlock = {
+  ...colour,
+  ...lists,
+  ...logic,
+  ...loops,
+  ...math,
+  ...procedures,
+  ...text,
+  ...variables,
+  ...variablesDynamic,
+};
+for (const name in generators) {
+  pythonGenerator.forBlock[name] = generators[name];
+}

generators/python/colour.js → generators/python/colour.ts

@@ -10,41 +10,62 @@
 
 // Former goog.module ID: Blockly.Python.colour
 
+import type {Block} from '../../core/block.js';
+import type {PythonGenerator} from './python_generator.js';
 import {Order} from './python_generator.js';
 
-
-export function colour_picker(block, generator) {
+export function colour_picker(
+  block: Block,
+  generator: PythonGenerator,
+): [string, Order] {
   // Colour picker.
   const code = generator.quote_(block.getFieldValue('COLOUR'));
   return [code, Order.ATOMIC];
-};
+}
 
-export function colour_random(block, generator) {
+export function colour_random(
+  block: Block,
+  generator: PythonGenerator,
+): [string, Order] {
   // Generate a random colour.
-  generator.definitions_['import_random'] = 'import random';
-  const code = '\'#%06x\' % random.randint(0, 2**24 - 1)';
+  // TODO(#7600): find better approach than casting to any to override
+  // CodeGenerator declaring .definitions protected.
+  (generator as AnyDuringMigration).definitions_['import_random'] =
+    'import random';
+  const code = "'#%06x' % random.randint(0, 2**24 - 1)";
   return [code, Order.FUNCTION_CALL];
-};
+}
 
-export function colour_rgb(block, generator) {
+export function colour_rgb(
+  block: Block,
+  generator: PythonGenerator,
+): [string, Order] {
   // Compose a colour from RGB components expressed as percentages.
-  const functionName = generator.provideFunction_('colour_rgb', `
+  const functionName = generator.provideFunction_(
+    'colour_rgb',
+    `
 def ${generator.FUNCTION_NAME_PLACEHOLDER_}(r, g, b):
   r = round(min(100, max(0, r)) * 2.55)
   g = round(min(100, max(0, g)) * 2.55)
   b = round(min(100, max(0, b)) * 2.55)
   return '#%02x%02x%02x' % (r, g, b)
-`);
+`,
+  );
   const r = generator.valueToCode(block, 'RED', Order.NONE) || 0;
   const g = generator.valueToCode(block, 'GREEN', Order.NONE) || 0;
   const b = generator.valueToCode(block, 'BLUE', Order.NONE) || 0;
   const code = functionName + '(' + r + ', ' + g + ', ' + b + ')';
   return [code, Order.FUNCTION_CALL];
-};
+}
 
-export function colour_blend(block, generator) {
+export function colour_blend(
+  block: Block,
+  generator: PythonGenerator,
+): [string, Order] {
   // Blend two colours together.
-  const functionName = generator.provideFunction_('colour_blend', `
+  const functionName = generator.provideFunction_(
+    'colour_blend',
+    `
 def ${generator.FUNCTION_NAME_PLACEHOLDER_}(colour1, colour2, ratio):
   r1, r2 = int(colour1[1:3], 16), int(colour2[1:3], 16)
   g1, g2 = int(colour1[3:5], 16), int(colour2[3:5], 16)
@@ -54,15 +75,14 @@ def ${generator.FUNCTION_NAME_PLACEHOLDER_}(colour1, colour2, ratio):
   g = round(g1 * (1 - ratio) + g2 * ratio)
   b = round(b1 * (1 - ratio) + b2 * ratio)
   return '#%02x%02x%02x' % (r, g, b)
-`);
+`,
+  );
   const colour1 =
-      generator.valueToCode(block, 'COLOUR1', Order.NONE)
-      || '\'#000000\'';
+    generator.valueToCode(block, 'COLOUR1', Order.NONE) || "'#000000'";
   const colour2 =
-      generator.valueToCode(block, 'COLOUR2', Order.NONE)
-      || '\'#000000\'';
+    generator.valueToCode(block, 'COLOUR2', Order.NONE) || "'#000000'";
   const ratio = generator.valueToCode(block, 'RATIO', Order.NONE) || 0;
   const code =
-      functionName + '(' + colour1 + ', ' + colour2 + ', ' + ratio + ')';
+    functionName + '(' + colour1 + ', ' + colour2 + ', ' + ratio + ')';
   return [code, Order.FUNCTION_CALL];
-};
+}