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

Author: ojeytonwilliams

client/src/templates/Challenges/classic/editor.tsx

@@ -232,7 +232,8 @@ const modeMap = {
   ts: 'typescript',
   tsx: 'typescript',
   py: 'python',
-  python: 'python'
+  python: 'python',
+  json: 'json'
 };
 
 let monacoThemesDefined = false;
@@ -413,6 +414,11 @@ const Editor = (props: EditorProps): JSX.Element => {
       allowUmdGlobalAccess: true
     });
 
+    // support JSONC:
+    monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+      allowComments: true
+    });
+
     defineMonacoThemes(monaco, { usesMultifileEditor });
     // If a model is not provided, then the editor 'owns' the model it creates
     // and will dispose of that model if it is replaced. Since we intend to

client/src/templates/Challenges/classic/multifile-editor.tsx

@@ -19,6 +19,7 @@ export type VisibleEditors = {
   indexts?: boolean;
   indextsx?: boolean;
   mainpy?: boolean;
+  tsconfigjson?: boolean;
 };
 type MultifileEditorProps = Pick<
   EditorProps,
@@ -72,7 +73,8 @@ const MultifileEditor = (props: MultifileEditorProps) => {
       indexts,
       indexjsx,
       indextsx,
-      mainpy
+      mainpy,
+      tsconfigjson
     },
     usesMultifileEditor,
     showProjectPreview,
@@ -102,6 +104,7 @@ const MultifileEditor = (props: MultifileEditorProps) => {
   if (scriptjs) editorKeys.push('scriptjs');
   if (mainpy) editorKeys.push('mainpy');
   if (indexts) editorKeys.push('indexts');
+  if (tsconfigjson) editorKeys.push('tsconfigjson');
 
   const editorAndSplitterKeys = editorKeys.reduce((acc: string[] | [], key) => {
     if (acc.length === 0) {

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

packages/challenge-builder/src/build.test.ts

@@ -0,0 +1,36 @@
+import { describe, expect, it } from 'vitest';
+import { getTSConfig } from './build';
+import { ChallengeFile } from '@freecodecamp/shared/utils/polyvinyl';
+
+describe('getTSConfig', () => {
+  it("should return the tsconfig file's contents if it exists", () => {
+    const compileOptions = 'any string is valid here';
+    const challengeFiles = [
+      { name: 'index', ext: 'ts' },
+      { name: 'tsconfig', ext: 'json', contents: compileOptions }
+    ] as ChallengeFile[];
+
+    expect(getTSConfig(challengeFiles)).toEqual(compileOptions);
+  });
+
+  it('should return null if there is no tsconfig file', () => {
+    const challengeFiles = [
+      { name: 'index', ext: 'ts' },
+      { name: 'app', ext: 'ts' }
+    ] as ChallengeFile[];
+
+    expect(getTSConfig(challengeFiles)).toBeNull();
+  });
+
+  it('should throw an error if there are multiple tsconfig.json files', () => {
+    const challengeFiles = [
+      { name: 'index', ext: 'ts' },
+      { name: 'tsconfig', ext: 'json' },
+      { name: 'tsconfig', ext: 'json' }
+    ] as ChallengeFile[];
+
+    expect(() => getTSConfig(challengeFiles)).toThrow(
+      'TypeScript challenge must include only one tsconfig.json file'
+    );
+  });
+});

packages/challenge-builder/src/build.ts

@@ -8,6 +8,7 @@ import {
   getPythonTransformers,
   getMultifileJSXTransformers
 } from './transformers.js';
+import { setupTSCompiler } from './typescript-worker-handler.js';
 
 interface Source {
   index: string;
@@ -165,6 +166,39 @@ type BuildResult = {
   error?: unknown;
 };
 
+function hasTS(challengeFiles: ChallengeFile[]) {
+  return challengeFiles.some(
+    challengeFile => challengeFile.ext === 'ts' || challengeFile.ext === 'tsx'
+  );
+}
+
+const isTSConfig = (f: { name: string; ext: string }) =>
+  f.name === 'tsconfig' && f.ext === 'json';
+
+export function getTSConfig(challengeFiles: ChallengeFile[]) {
+  const tsConfigFiles = challengeFiles.filter(isTSConfig);
+
+  if (tsConfigFiles.length > 1) {
+    throw new Error(
+      'TypeScript challenge must include only one tsconfig.json file'
+    );
+  }
+
+  return tsConfigFiles.length === 1 ? tsConfigFiles[0].contents : null;
+}
+
+async function configureTSCompiler(challengeFiles: ChallengeFile[]) {
+  if (hasTS(challengeFiles)) {
+    const tsConfig = getTSConfig(challengeFiles);
+
+    if (tsConfig) {
+      await setupTSCompiler(tsConfig);
+    } else {
+      await setupTSCompiler();
+    }
+  }
+}
+
 // TODO: All the buildXChallenge files have a similar structure, so make that
 // abstraction (function, class, whatever) and then create the various functions
 // out of it.
@@ -182,20 +216,18 @@ async function buildDOMChallenge(
   const hasJsx = challengeFiles.some(
     challengeFile => challengeFile.ext === 'jsx' || challengeFile.ext === 'tsx'
   );
-  const isMultifile = challengeFiles.length > 1;
-
-  const requiresReact16 = required.some(({ src }) =>
-    src?.includes('https://cdnjs.cloudflare.com/ajax/libs/react/16.')
-  );
 
+  await configureTSCompiler(challengeFiles);
+  const sourceFiles = challengeFiles.filter(file => !isTSConfig(file));
+  const isMultifile = sourceFiles.length > 1;
   // I'm reasonably sure this is fine, but we need to migrate transformers to
   // TypeScript to be sure.
   const transformers: ApplyFunctionProps[] = (isMultifile && hasJsx
     ? getMultifileJSXTransformers(options)
     : getTransformers(options)) as unknown as ApplyFunctionProps[];
 
   const pipeLine = composeFunctions(...transformers);
-  const finalFiles = await Promise.all(challengeFiles.map(pipeLine));
+  const finalFiles = await Promise.all(sourceFiles.map(pipeLine));
   const error = finalFiles.find(({ error }) => error)?.error;
   const contents = (await embedFilesInHtml(finalFiles)) as string;
 
@@ -209,6 +241,10 @@ async function buildDOMChallenge(
         contents
       };
 
+  const requiresReact16 = required.some(({ src }) =>
+    src?.includes('https://cdnjs.cloudflare.com/ajax/libs/react/16.')
+  );
+
   return {
     challengeType,
     build: concatHtml(toBuild),
@@ -230,7 +266,9 @@ async function buildJSChallenge(
     ...(getTransformers(options) as unknown as ApplyFunctionProps[])
   );
 
-  const finalFiles = await Promise.all(challengeFiles?.map(pipeLine));
+  await configureTSCompiler(challengeFiles);
+  const sourceFiles = challengeFiles.filter(file => !isTSConfig(file));
+  const finalFiles = await Promise.all(sourceFiles?.map(pipeLine));
   const error = finalFiles.find(({ error }) => error)?.error;
 
   const toBuild = error ? [] : finalFiles;

packages/challenge-builder/src/transformers.js

@@ -18,10 +18,7 @@ import {
 import { version } from '@freecodecamp/browser-scripts/package.json';
 
 import { WorkerExecutor } from './worker-executor';
-import {
-  compileTypeScriptCode,
-  setupTSCompiler
-} from './typescript-worker-handler';
+import { compileTypeScriptCode } from './typescript-worker-handler';
 
 const protectTimeout = 100;
 const testProtectTimeout = 1500;
@@ -148,7 +145,6 @@ const getJSXModuleTranspiler = loopProtectOptions => async challengeFile => {
 
 const getTSTranspiler = loopProtectOptions => async challengeFile => {
   await loadBabel();
-  await setupTSCompiler();
   const babelOptions = getBabelOptions(presetsJS, loopProtectOptions);
   return flow(
     partial(transformHeadTailAndContents, compileTypeScriptCode),
@@ -159,7 +155,6 @@ const getTSTranspiler = loopProtectOptions => async challengeFile => {
 const getTSXModuleTranspiler = loopProtectOptions => async challengeFile => {
   await loadBabel();
   await loadPresetReact();
-  await setupTSCompiler();
   const baseOptions = getBabelOptions(presetsJSX, loopProtectOptions);
   const babelOptions = {
     ...baseOptions,
@@ -379,7 +374,18 @@ function challengeFilesToObject(challengeFiles) {
   const scriptJs = challengeFiles.find(file => file.fileKey === 'scriptjs');
   const indexTs = challengeFiles.find(file => file.fileKey === 'indexts');
   const indexTsx = challengeFiles.find(file => file.fileKey === 'indextsx');
-  return { indexHtml, indexJsx, stylesCss, scriptJs, indexTs, indexTsx };
+  const tsconfigJson = challengeFiles.find(
+    file => file.fileKey === 'tsconfigjson'
+  );
+  return {
+    indexHtml,
+    indexJsx,
+    stylesCss,
+    scriptJs,
+    indexTs,
+    indexTsx,
+    tsconfigJson
+  };
 }
 
 const parseAndTransform = async function (transform, contents) {

packages/challenge-builder/src/typescript-worker-handler.ts

@@ -31,12 +31,10 @@ export function compileTypeScriptCode(code: string): Promise<string> {
   });
 }
 
-export function setupTSCompiler(
-  compilerOptions?: Record<string, unknown>
-): Promise<boolean> {
+export function setupTSCompiler(tsconfig?: string): Promise<boolean> {
   return awaitResponse({
     messenger: getTypeScriptWorker(),
-    message: { type: 'setup', ...(compilerOptions && { compilerOptions }) },
+    message: { type: 'setup', ...(tsconfig && { tsconfig }) },
     onMessage: (data, onSuccess) => {
       if (data.type === 'ready') {
         onSuccess(true);

packages/shared/src/utils/polyvinyl.ts

@@ -1,4 +1,4 @@
-const exts = ['js', 'html', 'css', 'jsx', 'ts', 'tsx', 'py'] as const;
+const exts = ['js', 'html', 'css', 'jsx', 'ts', 'tsx', 'py', 'json'] as const;
 export type Ext = (typeof exts)[number];
 
 export interface IncompleteChallengeFile {