🚚 chore: migrate vm to typescript part 2

packages/audio/package.json

@@ -34,6 +34,7 @@
     "@babel/core": "7.29.0",
     "@babel/eslint-parser": "7.28.6",
     "@babel/preset-env": "7.29.2",
+    "@types/node": "^25.5.2",
     "babel-eslint": "10.0.3",
     "babel-loader": "^10.1.1",
     "eslint": "^9.39.2",

packages/audio/src/AudioEngine.js

@@ -140,7 +140,7 @@ class AudioEngine {
      * Decode a sound, decompressing it into audio samples.
      * @param {object} sound - an object containing audio data and metadata for
      *     a sound
-     * @param {Buffer} sound.data - sound data loaded from scratch-storage
+     * @param {{buffer: ArrayBuffer}} sound.data - sound data loaded from scratch-storage
      * @returns {?Promise} - a promise which will resolve to the sound id and
      *     buffer if decoded
      */
@@ -217,8 +217,8 @@ class AudioEngine {
      *
      * @param {object} sound - an object containing audio data and metadata for
      *     a sound
-     * @param {Buffer} sound.data - sound data loaded from scratch-storage
-     * @returns {?Promise} - a promise which will resolve to the buffer
+     * @param {{buffer: ArrayBuffer}} sound.data - sound data loaded from scratch-storage
+     * @returns - a promise which will resolve to the buffer
      */
     decodeSoundPlayer (sound) {
         return this._decodeSound(sound)

packages/audio/src/SoundPlayer.js

@@ -41,7 +41,7 @@ class SoundPlayer extends EventEmitter {
 
         /**
          * Output audio node.
-         * @type {AudioNode}
+         * @type {AudioBufferSourceNode}
          */
         this.outputNode = null;
 

packages/block/src/blocks/control.ts

@@ -36,7 +36,7 @@ Blockly.Blocks['control_forever'] = {
       message0: Blockly.Msg.CONTROL_FOREVER,
       message1: '%1', // Statement
       message2: '%1', // Icon
-      lastDummyAlign2: 'RIGHT',
+      implicitAlign2: 'RIGHT',
       args1: [
         {
           type: 'input_statement',
@@ -69,7 +69,7 @@ Blockly.Blocks['control_repeat'] = {
       message0: Blockly.Msg.CONTROL_REPEAT,
       message1: '%1', // Statement
       message2: '%1', // Icon
-      lastDummyAlign2: 'RIGHT',
+      implicitAlign2: 'RIGHT',
       args0: [
         {
           type: 'input_value',
@@ -263,7 +263,7 @@ Blockly.Blocks['control_repeat_until'] = {
       message0: Blockly.Msg.CONTROL_REPEATUNTIL,
       message1: '%1',
       message2: '%1',
-      lastDummyAlign2: 'RIGHT',
+      implicitAlign2: 'RIGHT',
       args0: [
         {
           type: 'input_value',
@@ -302,7 +302,7 @@ Blockly.Blocks['control_while'] = {
       message0: Blockly.Msg.CONTROL_WHILE,
       message1: '%1',
       message2: '%1',
-      lastDummyAlign2: 'RIGHT',
+      implicitAlign2: 'RIGHT',
       args0: [
         {
           type: 'input_value',

packages/block/src/blocks/data.ts

@@ -29,7 +29,7 @@ Blockly.Blocks['data_variable'] = {
   init: function(this: Blockly.Block) {
     this.jsonInit({
       message0: '%1',
-      lastDummyAlign0: 'CENTRE',
+      implicitAlign0: 'CENTRE',
       args0: [
         {
           type: 'field_variable_getter',
@@ -142,7 +142,7 @@ Blockly.Blocks['data_listcontents'] = {
   init: function(this: Blockly.Block) {
     this.jsonInit({
       message0: '%1',
-      lastDummyAlign0: 'CENTRE',
+      implicitAlign0: 'CENTRE',
       args0: [
         {
           type: 'field_variable_getter',

packages/block/src/events/block_comment_collapse.ts

@@ -16,7 +16,7 @@ export class BlockCommentCollapse extends BlockCommentBase {
   override type = 'block_comment_collapse';
 
   /** Whether the comment is collpased. */
-  protected newCollapsed?: boolean;
+  newCollapsed?: boolean;
 
   /**
    * @param icon The comment icon this event corresponds to.

packages/block/src/events/func_change.ts

@@ -19,10 +19,10 @@ export class FuncChange extends FuncBase {
   override type = FuncChange.TYPE;
 
   /** The previous extra state of the procedure. */
-  protected oldExtraState?: ProcedureExtraState;
+  oldExtraState?: ProcedureExtraState;
 
   /** The new extra state of the procedure. */
-  protected newExtraState?: ProcedureExtraState;
+  newExtraState?: ProcedureExtraState;
 
   /**
    * @param procedure The procedure model.

packages/block/src/events/var_create.ts

@@ -5,13 +5,14 @@
  */
 
 import * as Blockly from 'blockly/core';
-import type {VariableModel} from '../variable_model';
+import type {VariableModel, VariableType} from '../variable_model';
 import type {VariableMap} from '../variable_map';
 
 /**
  * Class for a variable creation event.
  */
 export class VarCreate extends Blockly.Events.VarCreate {
+  override varType?: VariableType;
   isCloud = false;
   isLocal = false;
 

packages/block/src/events/var_delete.ts

@@ -5,13 +5,14 @@
  */
 
 import * as Blockly from 'blockly/core';
-import type {VariableModel} from '../variable_model';
+import type {VariableModel, VariableType} from '../variable_model';
 import type {VariableMap} from '../variable_map';
 
 /**
  * Class for a variable deletion event.
  */
 export class VarDelete extends Blockly.Events.VarDelete {
+  override varType?: VariableType;
   isCloud = false;
   isLocal = false;
 

packages/block/src/index.ts

@@ -239,8 +239,21 @@ export type * as variableModel from './variable_model';
 export {reportValue} from './report_value';
 export {Colours} from './theme';
 export {BlockDragEnd} from './events/block_drag_end';
+export {BlockDragOutside} from './events/block_drag_outside';
+export {FuncChange} from './events/func_change';
+export {FuncCreate} from './events/func_create';
+export {FuncDelete} from './events/func_delete';
+export {BlockCommentCreate} from './events/block_comment_create';
+export {BlockCommentDelete} from './events/block_comment_delete';
+export {BlockCommentMove} from './events/block_comment_move';
+export {BlockCommentResize} from './events/block_comment_resize';
+export {BlockCommentCollapse} from './events/block_comment_collapse';
+export {BlockChange} from './events/block_change';
+export {VarCreate} from './events/var_create';
+export {VarDelete} from './events/var_delete';
 export * as Theme from './theme';
 export {glowStack} from './glow';
+export type {BlockCommentState} from './block_comment_icon';
 
 export {
   FieldAngle,

packages/block/src/variable_map.ts

@@ -5,7 +5,7 @@
  */
 
 import * as Blockly from 'blockly/core';
-import type {VariableModel} from './variable_model';
+import type {VariableModel, VariableType} from './variable_model';
 
 /**
  * Class that provides storage for variables.
@@ -25,7 +25,7 @@ export class VariableMap extends Blockly.VariableMap {
    */
   override createVariable(
     name: string,
-    varType?: string,
+    varType?: VariableType,
     varId?: string,
     isLocal?: boolean,
     isCloud?: boolean

packages/block/src/variable_model.ts

@@ -6,7 +6,11 @@
 
 import * as Blockly from 'blockly/core';
 
+// It should be consistent with constants.ts definitions.
+export type VariableType = '' | 'list' | 'broadcast_msg';
+
 export interface ScratchVariableState extends Blockly.IVariableState {
+  type?: VariableType;
   isLocal: boolean;
   isCloud: boolean;
 }
@@ -27,7 +31,7 @@ export class VariableModel
   constructor(
     workspace: Blockly.Workspace,
     name: string,
-    type?: string,
+    type?: VariableType,
     id?: string,
     isLocal = false,
     isCloud = false

packages/block/src/variables.ts

@@ -28,7 +28,7 @@ import './variable_model';
 import './variable_map';
 import * as callbackRegistry from './callback_registry';
 import * as Constants from './constants';
-import {VariableModel} from './variable_model';
+import {VariableModel, type VariableType} from './variable_model';
 import type {VerticalFlyout} from './toolbox/flyout';
 import type {Toolbox} from './toolbox/toolbox';
 
@@ -51,7 +51,7 @@ export const CLOUD_PREFIX = '☁ ';
 export function createVariable(
   workspace: Blockly.WorkspaceSvg,
   callback?: (id?: string) => void,
-  type = Constants.SCALAR_VARIABLE_TYPE
+  type: VariableType = Constants.SCALAR_VARIABLE_TYPE
 ) {
   // Decide on a modal message based on the type. If type was not
   // provided, default to the original message for scalar variables.

packages/gui/.babelrc

@@ -9,6 +9,6 @@
     "presets": [
         ["@babel/preset-env", {"targets": {"browsers": ["last 3 versions", "Safari >= 8", "iOS >= 8"]}}],
         "@babel/preset-react",
-        "@babel/preset-typescript"
+        ["@babel/preset-typescript", {"optimizeConstEnums": true}]
     ]
 }

packages/gui/src/global.d.ts

@@ -0,0 +1,13 @@
+import type ScratchLinkWebSocket from '../../vm/src/util/scratch-link-websocket';
+
+type ScratchLinkSafariSocket = (new (type: 'BLE' | 'BT') => ScratchLinkWebSocket) & {
+    isSafariHelperCompatible: () => boolean;
+};
+
+declare global {
+    interface Window {
+        Scratch?: {
+            ScratchLinkSafariSocket?: ScratchLinkSafariSocket;
+        }
+    }
+}

packages/gui/src/lib/default-project/index.js → packages/gui/src/lib/default-project/index.ts

@@ -4,14 +4,15 @@ import projectData from './project-data';
 import popWav from '!!arraybuffer-loader!./83a9787d4cb6f3b7632b4ddfebf74367.wav';
 // import meowWav from '!arraybuffer-loader!./83c36d806dc92327b9e7049a565c6bff.wav';
 import backdrop from './cd21514d0531fdffb22204e0ec5ed84a.svg?raw';
+import type {Translator} from '../storage';
 // import costume1 from './bcf454acf82e4504149f7ffe07081dbc.svg?raw';
 // import costume2 from './0fb9be3e8397c983338cb71dc84d0b25.svg?raw';
 
 
-const defaultProject = translator => {
+const defaultProject = (translator?: Translator) => {
     let _TextEncoder;
     if (typeof TextEncoder === 'undefined') {
-        // eslint-disable-next-line global-require
+        // eslint-disable-next-line global-require, @typescript-eslint/no-require-imports
         _TextEncoder = require('fastestsmallesttextencoderdecoder').TextEncoder;
     } else {
         _TextEncoder = TextEncoder;

packages/gui/src/lib/default-project/project-data.js → packages/gui/src/lib/default-project/project-data.ts

@@ -1,35 +1,30 @@
 import {defineMessages} from 'react-intl';
 import sharedMessages from '../shared-messages';
+import type {Translator} from '../storage';
 
 let messages = defineMessages({
-    meow: {
-        defaultMessage: 'Meow',
-        description: 'Name for the meow sound',
-        id: 'gui.defaultProject.meow'
-    },
-    variable: {
-        defaultMessage: 'my variable',
-        description: 'Name for the default variable',
-        id: 'gui.defaultProject.variable'
+    backdrop: {
+        id: 'gui.defaultProject.backdrop',
+        defaultMessage: 'Backdrop',
+        description: 'Name for the default backdrop'
     }
 });
 
 messages = {...messages, ...sharedMessages};
 
 // use the default message if a translation function is not passed
-/** @type {Translator} */
-const defaultTranslator = msgObj => msgObj.defaultMessage;
+const defaultTranslator: Translator = msgObj => msgObj.defaultMessage ?? msgObj.id;
 
 /**
  * @typedef {import('../storage').Translator} Translator
  */
 
 /**
  * Generate a localized version of the default project
- * @param {Translator} translateFunction a function to use for translating the default names
+ * @param translateFunction a function to use for translating the default names
  * @returns the project data json for the default project
  */
-const projectData = translateFunction => {
+const projectData = (translateFunction?: Translator) => {
     const translator = translateFunction || defaultTranslator;
     return ({
         targets: [

packages/gui/src/lib/storage.ts

@@ -2,10 +2,11 @@ import {
     ScratchStorage,
     type Asset
 } from 'clipcc-storage';
+import type {IntlShape} from 'react-intl';
 
 import defaultProject from './default-project';
 
-export type Translator = ((messageId: string, defaultMessage?: string, description?: string) => string) | undefined;
+export type Translator = IntlShape['formatMessage'];
 
 type ConfigResponse = string | {
     url: string;
@@ -24,7 +25,7 @@ class Storage extends ScratchStorage {
     private assetHost = '';
     private cdnHost = '';
     private authorizationToken = '';
-    private translator: Translator;
+    private translator?: Translator;
 
     constructor () {
         super();

packages/gui/test/unit/util/default-project.test.js

@@ -1,4 +1,4 @@
-import defaultProjectGenerator from '../../../src/lib/default-project/index.js';
+import defaultProjectGenerator from '../../../src/lib/default-project/index';
 
 describe('defaultProject', () => {
     // This test ensures that the assets referenced in the default project JSON

packages/gui/tsconfig.json

@@ -1,7 +1,8 @@
 {
   "include": [
     "./src/**/*",
-    "./test/**/*"
+    "./test/**/*",
+    "types/**/*.d.ts"
   ],
   "compilerOptions": {
     /* Visit https://aka.ms/tsconfig to read more about this file */

packages/lint-config/index.js

@@ -32,6 +32,7 @@ module.exports = [
         rules: {
             // Most packaages uses JSDoc to generate declaration files, which has lots of undefined types.
             'jsdoc/no-undefined-types': 'warn',
+            'jsdoc/require-returns-type': 'off', /** tsc can infer return types */
             'jsdoc/reject-function-type': 'warn',
             'jsdoc/check-param-names': 'error',
             'jsdoc/check-tag-names': 'error',

packages/lint-config/ts.js

@@ -25,7 +25,7 @@ module.exports = [
             // Disable JSDoc type requirements for TypeScript (it has its own types)
             'jsdoc/require-jsdoc': 'off',
             'jsdoc/require-param-type': 'off',
-            'jsdoc/require-returns-type': 'off',
+            'jsdoc/require-property-type': 'off',
             'func-style': 'off',
 
             // Disable rules that conflict with TypeScript's type system
@@ -41,7 +41,10 @@ module.exports = [
             'no-useless-constructor': 'off',
             // Use TypeScript-aware no-shadow to avoid false positives on enums/types
             'no-shadow': 'off',
-            '@typescript-eslint/no-shadow': 'error'
+            '@typescript-eslint/no-shadow': 'error',
+            // TypeScript overloads and declaration merging are intentional
+            'no-redeclare': 'off',
+            '@typescript-eslint/no-redeclare': ['error', {ignoreDeclarationMerge: true}]
         }
     }
 ];