feat(client): add tsconfig support to editor and use it in ts compiler (#66259)

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

@@ -16,13 +16,25 @@ export class Compiler {
     this.tsvfs = tsvfs;
   }
 
-  async setup(opts?: { useNodeModules?: boolean; compilerOptions?: unknown }) {
+  async setup(opts?: { useNodeModules?: boolean; tsconfig?: string }) {
     const ts = this.ts;
     const tsvfs = this.tsvfs;
 
-    const parsedOptions = ts.convertCompilerOptionsFromJson(
-      opts?.compilerOptions ?? {},
-      '/'
+    // This just parses the JSON, it doesn't do any validation.
+    const parsedOptions = opts?.tsconfig
+      ? (ts.parseConfigFileTextToJson('', opts.tsconfig).config as {
+          compilerOptions?: unknown;
+        })
+      : undefined;
+
+    // For now we're only interested in the compilerOptions, so that's all we're
+    // extracting and validating.  For everything else, we could
+    // parseJsonConfigFileContent and create a host using createSystem and
+    // fsMap, but that needs compilerOptions... This is a bit of a chicken and
+    // egg problem, which we don't need to solve yet.
+    const validatedOptions = ts.convertCompilerOptionsFromJson(
+      parsedOptions?.compilerOptions ?? {},
+      './'
     );
 
     const compilerOptions: CompilerOptions = {
@@ -34,7 +46,7 @@ export class Compiler {
       // 3.8.0-rc."
       jsx: ts.JsxEmit.Preserve, // Babel will handle JSX,
       allowUmdGlobalAccess: true, // Necessary because React is loaded via a UMD script.
-      ...parsedOptions.options
+      ...validatedOptions.options
     };
 
     const fsMap = opts?.useNodeModules

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

@@ -1,4 +1,3 @@
-import type { CompilerOptions } from 'typescript';
 import { Compiler } from './modules/typescript-compiler';
 
 // Most of the ts types are only a guideline. This is because we're not bundling
@@ -27,7 +26,7 @@ interface TSCompiledMessage {
 interface SetupEvent extends MessageEvent {
   data: {
     type: 'setup';
-    compilerOptions?: CompilerOptions;
+    tsconfig?: string;
   };
 }
 
@@ -83,7 +82,7 @@ function handleCancelRequest({ value }: { value: number }) {
 
 async function handleSetupRequest(data: SetupEvent['data'], port: MessagePort) {
   await compiler.setup({
-    compilerOptions: data.compilerOptions
+    tsconfig: data.tsconfig
   });
   // We freeze this to prevent learners from getting the worker into a weird
   // state.