test: use ts compiler in cli tests (#62783)

tools/client-plugins/browser-scripts/modules/typescript-compiler.ts

@@ -11,15 +11,12 @@ export class Compiler {
   tsvfs: TSVFS;
   tsEnv?: VirtualTypeScriptEnvironment;
   compilerHost?: CompilerHost;
-  constructor(
-    ts: typeof import('typescript'),
-    tsvfs: typeof import('@typescript/vfs')
-  ) {
+  constructor(ts: TS, tsvfs: TSVFS) {
     this.ts = ts;
     this.tsvfs = tsvfs;
   }
 
-  async setup() {
+  async setup(opts?: { useNodeModules: boolean }) {
     const ts = this.ts;
     const tsvfs = this.tsvfs;
 
@@ -33,17 +30,21 @@ export class Compiler {
       jsx: ts.JsxEmit.Preserve, // Babel will handle JSX,
       allowUmdGlobalAccess: true // Necessary because React is loaded via a UMD script.
     };
-    const fsMap = await tsvfs.createDefaultMapFromCDN(
-      compilerOptions,
-      ts.version,
-      false, // TODO: cache this. It needs a store that's available to workers and implements https://github.com/microsoft/TypeScript-Website/blob/ac68b8b8e4a621113c4ee45c4051002fd55ede24/packages/typescript-vfs/src/index.ts#L11
-      ts
-    );
+
+    const fsMap = opts?.useNodeModules
+      ? tsvfs.createDefaultMapFromNodeModules(compilerOptions, ts)
+      : await tsvfs.createDefaultMapFromCDN(
+          compilerOptions,
+          ts.version,
+          false, // TODO: cache this. It needs a store that's available to workers and implements https://github.com/microsoft/TypeScript-Website/blob/ac68b8b8e4a621113c4ee45c4051002fd55ede24/packages/typescript-vfs/src/index.ts#L11
+          ts
+        );
 
     // This can be any path, but doing this means import React from 'react' works, if we ever need it.
     const reactTypesPath = `/node_modules/@types/react/index.d.ts`;
 
     // It may be necessary to get all the types (global.d.ts etc)
+
     fsMap.set(reactTypesPath, reactTypes['react-18'] || '');
 
     const system = tsvfs.createSystem(fsMap);
@@ -65,10 +66,14 @@ export class Compiler {
     ).compilerHost;
   }
 
-  compile(code: string, fileName: string) {
+  compile(rawCode: string, fileName: string) {
     if (!this.tsEnv || !this.compilerHost) {
       throw Error('TypeScript environment not set up');
     }
+    // If we try to update or create an empty file, the environment will become
+    // permanently unable to interact with that file. The workaround is to create
+    // a file with a single newline character.
+    const code = rawCode || '\n';
     // TODO: If creating the file fresh each time is too slow, we can try checking
     // if the file exists and updating it if it does.
     this.tsEnv.createFile(fileName, code);

tools/client-plugins/browser-scripts/package.json

@@ -32,13 +32,14 @@
     "@babel/preset-typescript": "7.23.3",
     "@freecodecamp/eslint-config": "workspace:*",
     "@types/copy-webpack-plugin": "^8.0.1",
-    "@typescript/vfs": "^1.6.0",
+    "@typescript/vfs": "1.6.1",
     "babel-loader": "8.3.0",
     "copy-webpack-plugin": "9.1.0",
     "eslint": "^9.39.1",
     "process": "0.11.10",
     "pyodide": "^0.23.3",
     "sass.js": "0.11.1",
+    "typescript": "5.9.2",
     "util": "0.12.5",
     "webpack": "5.90.3",
     "webpack-cli": "4.10.0"

tools/client-plugins/browser-scripts/typescript-worker.ts

@@ -92,11 +92,7 @@ async function handleCheckIsReadyRequest(port: MessagePort) {
 }
 
 function handleCompileRequest(data: TSCompileEvent['data'], port: MessagePort) {
-  // If we try to update or create an empty file, the environment will become
-  // permanently unable to interact with that file. The workaround is to create
-  // a file with a single newline character.
-  const code = (data.code || '').slice() || '\n';
-  const { result, error } = compiler.compile(code, 'index.tsx');
+  const { result, error } = compiler.compile(data.code, 'index.tsx');
   const message: TSCompiledMessage = {
     type: 'compiled',
     value: result,