🚚 chore(vm): migrate to typescript part 1

packages/block/src/index.ts

@@ -234,9 +234,11 @@ export * as callbackRegistry from './callback_registry';
 export * as constants from './constants';
 export * as scratchBlocksUtils from './utils';
 export type * as proceduresSerializer from './serialization/procedures';
+export type * as variableModel from './variable_model';
 
 export {reportValue} from './report_value';
 export {Colours} from './theme';
+export {BlockDragEnd} from './events/block_drag_end';
 export * as Theme from './theme';
 export {glowStack} from './glow';
 

packages/gui/src/types.d.ts

@@ -101,3 +101,8 @@ declare module 'react-tabs' {
     export const Tab: React.ComponentType<TabProps>;
     export const TabPanel: React.ComponentType<CommonProps>;
 }
+
+/**
+ * Compile-time injected clipcc global metadata
+ */
+declare const clipcc: { VERSION?: string };

packages/render/src/RenderWebGL.js

@@ -1391,7 +1391,7 @@ class RenderWebGL extends EventEmitter {
      * Return drawable pixel data and color at a given scratch position
      * @param {int} scratchX The scratch x coordinate of the picking location.
      * @param {int} scratchY The scratch y coordinate of the picking location.
-     * @returns {?ColorExtraction} Data about the picked color
+     * @returns Data about the picked color
      */
     extractColorInScratchCoordinate (scratchX, scratchY) {
         this._doExitDrawRegion();

packages/vm/eslint.config.js

@@ -1,14 +1,16 @@
 const clipccConfig = require('eslint-config-clipcc');
 const clipccNode = require('eslint-config-clipcc/node');
 const clipccES6 = require('eslint-config-clipcc/es6');
+const clipccTS = require('eslint-config-clipcc/ts');
 const globals = require('globals');
 
 module.exports = [
     ...clipccConfig,
     ...clipccNode,
     ...clipccES6,
+    ...clipccTS,
     {
-        files: ['src/**/*.js'],
+        files: ['src/**/*.{js,ts}'],
         languageOptions: {
             globals: {
                 ...globals.browser
@@ -28,7 +30,7 @@ module.exports = [
         }
     },
     {
-        files: ['test/**/*.js'],
+        files: ['test/**/*.{js,ts}'],
         languageOptions: {
             globals: {
                 ...globals.browser,

packages/vm/package.json

@@ -11,13 +11,13 @@
   },
   "exports": {
     "types": "./dist/types/index.d.ts",
-    "webpack": "./src/index.js",
+    "webpack": "./src/index.ts",
     "node": "./dist/node/scratch-vm.js",
     "browser": "./dist/web/scratch-vm.min.js",
-    "default": "./src/index.js"
+    "default": "./src/index.ts"
   },
   "scripts": {
-    "build:types": "tsc --project ./tsconfig.dts.json",
+    "build:types": "tsc",
     "build": "pnpm run build:types && webpack --progress --color --bail",
     "coverage": "jest --silent --coverage",
     "i18n:src": "mkdirp translations/core && format-message extract --out-file translations/core/en.json src/extensions/**/index.js",
@@ -57,6 +57,8 @@
     "@babel/eslint-parser": "7.28.6",
     "@babel/preset-env": "7.29.2",
     "@babel/preset-typescript": "^7.28.5",
+    "@types/atob": "^2.1.4",
+    "@types/btoa": "^1.2.5",
     "@types/fastestsmallesttextencoderdecoder": "^1.0.2",
     "@types/node": "^25.5.2",
     "adm-zip": "0.4.11",
@@ -73,6 +75,7 @@
     "clipcc-svg-renderer": "workspace:~",
     "codingclip-worker-loader": "^3.0.10",
     "copy-webpack-plugin": "^14.0.0",
+    "domhandler": "^5.0.3",
     "eslint": "^9.39.2",
     "eslint-config-clipcc": "workspace:*",
     "format-message-cli": "6.2.4",

packages/vm/src/blocks/category_prototype.ts

@@ -0,0 +1,21 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type BlockUtility from '../engine/block-utility';
+import type {HatMetadata, MonitorBlockInfo} from '../engine/runtime';
+
+export type BlockArgs = {
+    [argName: string]: any;
+    mutation?: Record<string, any>;
+}
+
+export type BlockFunction = (args: BlockArgs, util: BlockUtility) => any;
+
+export interface CategoryPrototype {
+    /**
+     * Retrieve the block primitives implemented by this package.
+     * @returns Mapping of opcode to Function.
+     */
+    getPrimitives(): Record<string, BlockFunction>;
+    getHats?(): Record<string, HatMetadata>;
+    getMonitored?(): Record<string, MonitorBlockInfo>;
+    getOrders?(): Record<string, (string | {execute: string})[]>;
+}

packages/vm/src/blocks/scratch3_control.js → packages/vm/src/blocks/scratch3_control.ts

@@ -1,25 +1,32 @@
-import Cast from '../util/cast.js';
+import Cast from '../util/cast';
+import type {BlockArgs, CategoryPrototype} from './category_prototype';
+import type Runtime from '../engine/runtime';
+import type RenderedTarget from '../sprites/rendered-target';
+import type BlockUtility from '../engine/block-utility';
+import type {BaseExecutionContext} from '../engine/block-utility';
+
+interface ControlExecutionContext extends BaseExecutionContext {
+    loopCounter?: number;
+    index?: number;
+}
 
-class Scratch3ControlBlocks {
-    constructor (runtime) {
+class Scratch3ControlBlocks implements CategoryPrototype {
+    /**
+     * The "counter" block value. For compatibility with 2.0.
+     */
+    private _counter = 0;
+    constructor (
         /**
          * The runtime instantiating this block package.
-         * @type {Runtime}
-         */
-        this.runtime = runtime;
-
-        /**
-         * The "counter" block value. For compatibility with 2.0.
-         * @type {number}
          */
-        this._counter = 0;
-
+        public runtime: Runtime
+    ) {
         this.runtime.on('RUNTIME_DISPOSED', this.clearCounter.bind(this));
     }
 
     /**
      * Retrieve the block primitives implemented by this package.
-     * @returns {Record<string, Function>} Mapping of opcode to Function.
+     * @returns Mapping of opcode to Function.
      */
     getPrimitives () {
         return {
@@ -50,7 +57,7 @@ class Scratch3ControlBlocks {
         };
     }
 
-    repeat (args, util) {
+    repeat (args: BlockArgs, util: BlockUtility) {
         const times = Math.round(Cast.toNumber(args.TIMES));
         // Initialize loop
         if (typeof util.stackFrame.loopCounter === 'undefined') {
@@ -60,56 +67,56 @@ class Scratch3ControlBlocks {
         // When the branch finishes, `repeat` will be executed again and
         // the second branch will be taken, yielding for the rest of the frame.
         // Decrease counter
-        util.stackFrame.loopCounter--;
+        (util.stackFrame as ControlExecutionContext).loopCounter!--;
         // If we still have some left, start the branch.
-        if (util.stackFrame.loopCounter >= 0) {
+        if ((util.stackFrame as ControlExecutionContext).loopCounter! >= 0) {
             util.startBranch(1, true);
         }
     }
 
-    repeatUntil (args, util) {
+    repeatUntil (args: BlockArgs, util: BlockUtility) {
         const condition = Cast.toBoolean(args.CONDITION);
         // If the condition is false (repeat UNTIL), start the branch.
         if (!condition) {
             util.startBranch(1, true);
         }
     }
 
-    repeatWhile (args, util) {
+    repeatWhile (args: BlockArgs, util: BlockUtility) {
         const condition = Cast.toBoolean(args.CONDITION);
         // If the condition is true (repeat WHILE), start the branch.
         if (condition) {
             util.startBranch(1, true);
         }
     }
 
-    forEach (args, util) {
+    forEach (args: BlockArgs, util: BlockUtility) {
         const variable = util.target.lookupOrCreateVariable(
             args.VARIABLE.id, args.VARIABLE.name);
 
         if (typeof util.stackFrame.index === 'undefined') {
             util.stackFrame.index = 0;
         }
 
-        if (util.stackFrame.index < Number(args.VALUE)) {
-            util.stackFrame.index++;
-            variable.value = util.stackFrame.index;
+        if ((util.stackFrame as ControlExecutionContext).index! < Number(args.VALUE)) {
+            (util.stackFrame as ControlExecutionContext).index!++;
+            variable.value = (util.stackFrame as ControlExecutionContext).index;
             util.startBranch(1, true);
         }
     }
 
-    waitUntil (args, util) {
+    waitUntil (args: BlockArgs, util: BlockUtility) {
         const condition = Cast.toBoolean(args.CONDITION);
         if (!condition) {
             util.yield();
         }
     }
 
-    forever (args, util) {
+    forever (args: BlockArgs, util: BlockUtility) {
         util.startBranch(1, true);
     }
 
-    wait (args, util) {
+    wait (args: BlockArgs, util: BlockUtility) {
         if (util.stackTimerNeedsInit()) {
             const duration = Math.max(0, 1000 * Cast.toNumber(args.DURATION));
 
@@ -121,14 +128,14 @@ class Scratch3ControlBlocks {
         }
     }
 
-    if (args, util) {
+    if (args: BlockArgs, util: BlockUtility) {
         const condition = Cast.toBoolean(args.CONDITION);
         if (condition) {
             util.startBranch(1, false);
         }
     }
 
-    ifElse (args, util) {
+    ifElse (args: BlockArgs, util: BlockUtility) {
         const condition = Cast.toBoolean(args.CONDITION);
         if (condition) {
             util.startBranch(1, false);
@@ -137,7 +144,7 @@ class Scratch3ControlBlocks {
         }
     }
 
-    stop (args, util) {
+    stop (args: BlockArgs, util: BlockUtility) {
         const option = args.STOP_OPTION;
         if (option === 'all') {
             util.stopAll();
@@ -149,12 +156,12 @@ class Scratch3ControlBlocks {
         }
     }
 
-    createClone (args, util) {
+    createClone (args: BlockArgs, util: BlockUtility) {
         // Cast argument to string
         args.CLONE_OPTION = Cast.toString(args.CLONE_OPTION);
 
         // Set clone target
-        let cloneTarget;
+        let cloneTarget: RenderedTarget | undefined;
         if (args.CLONE_OPTION === '_myself_') {
             cloneTarget = util.target;
         } else {
@@ -174,7 +181,7 @@ class Scratch3ControlBlocks {
         }
     }
 
-    deleteClone (args, util) {
+    deleteClone (args: BlockArgs, util: BlockUtility) {
         if (util.target.isOriginal) return;
         this.runtime.disposeTarget(util.target);
         this.runtime.stopForTarget(util.target);
@@ -192,7 +199,7 @@ class Scratch3ControlBlocks {
         this._counter++;
     }
 
-    allAtOnce (args, util) {
+    allAtOnce (args: BlockArgs, util: BlockUtility) {
         // Since the "all at once" block is implemented for compatiblity with
         // Scratch 2.0 projects, it behaves the same way it did in 2.0, which
         // is to simply run the contained script (like "if 1 = 1").