feat: allow TS to be used in challenges (#56159)

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

@@ -191,6 +191,7 @@ const modeMap = {
   html: 'html',
   js: 'javascript',
   jsx: 'javascript',
+  ts: 'typescript',
   py: 'python',
   python: 'python'
 };

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

@@ -22,6 +22,7 @@ export type VisibleEditors = {
   indexjsx?: boolean;
   stylescss?: boolean;
   scriptjs?: boolean;
+  indexts?: boolean;
   mainpy?: boolean;
 };
 type MultifileEditorProps = Pick<
@@ -78,7 +79,14 @@ const MultifileEditor = (props: MultifileEditorProps) => {
     isUsingKeyboardInTablist,
     resizeProps,
     title,
-    visibleEditors: { stylescss, indexhtml, scriptjs, indexjsx, mainpy },
+    visibleEditors: {
+      stylescss,
+      indexhtml,
+      scriptjs,
+      indexts,
+      indexjsx,
+      mainpy
+    },
     usesMultifileEditor,
     showProjectPreview
   } = props;
@@ -103,6 +111,7 @@ const MultifileEditor = (props: MultifileEditorProps) => {
   if (stylescss) editorKeys.push('stylescss');
   if (scriptjs) editorKeys.push('scriptjs');
   if (mainpy) editorKeys.push('mainpy');
+  if (indexts) editorKeys.push('indexts');
 
   const editorAndSplitterKeys = editorKeys.reduce((acc: string[] | [], key) => {
     if (acc.length === 0) {

client/utils/__fixtures__/challenges.ts

@@ -1,6 +1,20 @@
 import { ChallengeFile } from "../../src/redux/prop-types";
 
 export const challengeFiles: ChallengeFile[] = [
+  {
+    id: '0',
+    contents: 'some ts',
+    error: null,
+    ext: 'ts',
+    head: '',
+    history: ['index.ts'],
+    fileKey: 'indexts',
+    name: 'index',
+    seed: 'some ts',
+    tail: '',
+    editableRegionBoundaries: [],
+    usesMultifileEditor: true,
+  },
   {
     id: '1',
     contents: 'some css',

client/utils/sort-challengefiles.js

@@ -9,6 +9,8 @@ exports.sortChallengeFiles = function sortChallengeFiles(challengeFiles) {
     if (b.history[0] === 'index.jsx') return 1;
     if (a.history[0] === 'script.js') return -1;
     if (b.history[0] === 'script.js') return 1;
+    if (a.history[0] === 'index.ts') return -1;
+    if (b.history[0] === 'index.ts') return 1;
     return 0;
   });
   return xs;

client/utils/sort-challengefiles.test.js

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

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

@@ -8,9 +8,10 @@ const keyToSection = {
   head: 'before-user-code',
   tail: 'after-user-code'
 };
-const supportedLanguages = ['js', 'css', 'html', 'jsx', 'py'];
+const supportedLanguages = ['js', 'css', 'html', 'jsx', 'py', 'ts'];
 const longToShortLanguages = {
   javascript: 'js',
+  typescript: 'ts',
   python: 'py'
 };