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';
 }