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

client/utils/__fixtures__/challenges.ts

@@ -1,4 +1,4 @@
-import { ChallengeFile } from "../../src/redux/prop-types";
+import { ChallengeFile } from '../../src/redux/prop-types';
 
 export const challengeFiles: ChallengeFile[] = [
   {
@@ -13,7 +13,7 @@ export const challengeFiles: ChallengeFile[] = [
     tail: '',
     editableRegionBoundaries: [],
     usesMultifileEditor: true,
-    path: 'index.ts',
+    path: 'index.ts'
   },
   {
     contents: 'some css',
@@ -27,7 +27,7 @@ export const challengeFiles: ChallengeFile[] = [
     tail: '',
     editableRegionBoundaries: [],
     usesMultifileEditor: true,
-    path: 'styles.css',
+    path: 'styles.css'
   },
   {
     contents: 'some html',
@@ -41,7 +41,7 @@ export const challengeFiles: ChallengeFile[] = [
     tail: '',
     editableRegionBoundaries: [],
     usesMultifileEditor: true,
-    path: 'index.html',
+    path: 'index.html'
   },
   {
     contents: 'some js',
@@ -55,7 +55,7 @@ export const challengeFiles: ChallengeFile[] = [
     tail: '',
     editableRegionBoundaries: [],
     usesMultifileEditor: true,
-    path: 'script.js',
+    path: 'script.js'
   },
   {
     contents: 'some jsx',
@@ -69,7 +69,7 @@ export const challengeFiles: ChallengeFile[] = [
     tail: '',
     editableRegionBoundaries: [],
     usesMultifileEditor: true,
-    path: 'index.jsx',
+    path: 'index.jsx'
   },
   {
     contents: 'some tsx',
@@ -83,6 +83,20 @@ export const challengeFiles: ChallengeFile[] = [
     tail: '',
     editableRegionBoundaries: [],
     usesMultifileEditor: true,
-    path: 'index.tsx',
+    path: 'index.tsx'
+  },
+  {
+    contents: '{\n  "compilerOptions": {}\n}',
+    error: null,
+    ext: 'json',
+    head: '',
+    history: ['tsconfig.json'],
+    fileKey: 'tsconfigjson',
+    name: 'tsconfig',
+    seed: '{\n  "compilerOptions": {}\n}',
+    tail: '',
+    editableRegionBoundaries: [],
+    usesMultifileEditor: true,
+    path: 'tsconfig.json'
   }
-]
+];

client/utils/sort-challengefiles.test.ts

@@ -15,7 +15,7 @@ describe('sort-files', () => {
       expect(sorted.length).toEqual(expected.length);
     });
 
-    it('should sort the objects into jsx, tsx, html, css, js, ts order', () => {
+    it('should sort the objects into jsx, tsx, html, css, js, ts, tsconfig order', () => {
       const sorted = sortChallengeFiles(challengeFiles);
       const sortedKeys = sorted.map(({ fileKey }) => fileKey);
       const expected = [
@@ -24,7 +24,8 @@ describe('sort-files', () => {
         'indexhtml',
         'stylescss',
         'scriptjs',
-        'indexts'
+        'indexts',
+        'tsconfigjson'
       ];
       expect(sortedKeys).toStrictEqual(expected);
     });

client/utils/sort-challengefiles.ts

@@ -14,6 +14,8 @@ export function sortChallengeFiles<File extends { fileKey: string }>(
     if (b.fileKey === 'scriptjs') return 1;
     if (a.fileKey === 'indexts') return -1;
     if (b.fileKey === 'indexts') return 1;
+    if (a.fileKey === 'tsconfigjson') return -1;
+    if (b.fileKey === 'tsconfigjson') return 1;
     return 0;
   });
 }