diff --git a/client/src/templates/Challenges/classic/editor.tsx b/client/src/templates/Challenges/classic/editor.tsx index 9d55cef3993..a38f47defd0 100644 --- a/client/src/templates/Challenges/classic/editor.tsx +++ b/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' }; diff --git a/client/src/templates/Challenges/classic/multifile-editor.tsx b/client/src/templates/Challenges/classic/multifile-editor.tsx index 842c7c9066c..b0046260ffc 100644 --- a/client/src/templates/Challenges/classic/multifile-editor.tsx +++ b/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) { diff --git a/client/utils/__fixtures__/challenges.ts b/client/utils/__fixtures__/challenges.ts index 3cce8f42b7d..2fc75a36887 100644 --- a/client/utils/__fixtures__/challenges.ts +++ b/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', diff --git a/client/utils/sort-challengefiles.js b/client/utils/sort-challengefiles.js index 25d71c15f96..c738abf7fb6 100644 --- a/client/utils/sort-challengefiles.js +++ b/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; diff --git a/client/utils/sort-challengefiles.test.js b/client/utils/sort-challengefiles.test.js index 9c717ff739f..72087f5c8dd 100644 --- a/client/utils/sort-challengefiles.test.js +++ b/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); }); }); diff --git a/tools/challenge-parser/parser/plugins/utils/get-file-visitor.js b/tools/challenge-parser/parser/plugins/utils/get-file-visitor.js index f8f104b9c0e..d29afd4228c 100644 --- a/tools/challenge-parser/parser/plugins/utils/get-file-visitor.js +++ b/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' };