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

tools/challenge-parser/parser/__fixtures__/simple.md

@@ -58,6 +58,14 @@ body {
 var x = 'y';
 ```
 
+```json
+{
+  "compilerOptions": {
+    "target": "ES2020"
+  }
+}
+```
+
 
 # --solutions--
 

tools/challenge-parser/parser/__snapshots__/index.acceptance.test.js.snap

@@ -374,6 +374,19 @@ exports[`challenge parser > should parse a simple md file 1`] = `
       "name": "script",
       "tail": "",
     },
+    {
+      "contents": "{
+  "compilerOptions": {
+    "target": "ES2020"
+  }
+}",
+      "editableRegionBoundaries": [],
+      "ext": "json",
+      "head": "",
+      "id": "",
+      "name": "tsconfig",
+      "tail": "",
+    },
   ],
   "description": "<section id="description">
 <p>Paragraph 1</p>

tools/challenge-parser/parser/plugins/__snapshots__/add-seed.test.js.snap

@@ -35,6 +35,19 @@ exports[`add-seed plugin > should have an output to match the snapshot 1`] = `
       "name": "script",
       "tail": "",
     },
+    {
+      "contents": "{
+  "compilerOptions": {
+    "target": "ES2020"
+  }
+}",
+      "editableRegionBoundaries": [],
+      "ext": "json",
+      "head": "",
+      "id": "",
+      "name": "tsconfig",
+      "tail": "",
+    },
   ],
 }
 `;

tools/challenge-parser/parser/plugins/add-seed.test.js

@@ -272,6 +272,19 @@ const Button = () => {
 };`);
   });
 
+  it('handles json', () => {
+    expect.assertions(1);
+    plugin(simpleAST, file);
+    const {
+      data: { challengeFiles }
+    } = file;
+    const tsconfigjsonc = challengeFiles.find(x => x.ext === 'json');
+
+    expect(tsconfigjsonc.contents).toBe(
+      `{\n  "compilerOptions": {\n    "target": "ES2020"\n  }\n}`
+    );
+  });
+
   it('should throw an error if a seed has no contents', () => {
     expect.assertions(1);
     expect(() => plugin(withEmptyContentsAST, file)).toThrow(

tools/challenge-parser/parser/plugins/utils/get-file-visitor.js

@@ -8,7 +8,16 @@ const keyToSection = {
   head: 'before-user-code',
   tail: 'after-user-code'
 };
-const supportedLanguages = ['js', 'css', 'html', 'jsx', 'py', 'ts', 'tsx'];
+const supportedLanguages = [
+  'js',
+  'css',
+  'html',
+  'jsx',
+  'py',
+  'ts',
+  'tsx',
+  'json'
+];
 const longToShortLanguages = {
   javascript: 'js',
   typescript: 'ts',
@@ -30,7 +39,8 @@ function getFilenames(lang) {
   const langToFilename = {
     js: 'script',
     css: 'styles',
-    py: 'main'
+    py: 'main',
+    json: 'tsconfig'
   };
   return langToFilename[lang] ?? 'index';
 }

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.