fix: index.css/js to styles/script (#44356)

* fix: replace index with script/styles as needed

* fix: remove redundant fileKey

It's overwritten by createPoly, so the parser does not need to create it

* fix: curriculum test suite

* Update client/src/templates/Challenges/classic/MultifileEditor.js

Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>

Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>
This commit is contained in:
Oliver Eyton-Williams
2021-12-03 21:32:29 +01:00
committed by GitHub
parent 7a5e805769
commit f613a1e5fd
14 changed files with 115 additions and 157 deletions

View File

@ -297,7 +297,7 @@ export type CompletedChallenge = {
};
export type Ext = 'js' | 'html' | 'css' | 'jsx';
export type FileKey = 'indexjs' | 'indexhtml' | 'indexcss';
export type FileKey = 'scriptjs' | 'indexhtml' | 'stylescss';
export type ChallengeMeta = {
block: string;

View File

@ -40,14 +40,13 @@ const propTypes = {
saveEditorContent: PropTypes.func.isRequired,
setEditorFocusability: PropTypes.func,
theme: PropTypes.string,
// TODO: is this used?
title: PropTypes.string,
updateFile: PropTypes.func.isRequired,
usesMultifileEditor: PropTypes.bool,
visibleEditors: PropTypes.shape({
indexjs: PropTypes.bool,
scriptjs: PropTypes.bool,
indexjsx: PropTypes.bool,
indexcss: PropTypes.bool,
stylescss: PropTypes.bool,
indexhtml: PropTypes.bool
})
};
@ -83,7 +82,7 @@ const MultifileEditor = props => {
theme,
resizeProps,
title,
visibleEditors: { indexcss, indexhtml, indexjs, indexjsx },
visibleEditors: { stylescss, indexhtml, scriptjs, indexjsx },
usesMultifileEditor
} = props;
const editorTheme = theme === 'night' ? 'vs-dark-custom' : 'vs-custom';
@ -105,8 +104,8 @@ const MultifileEditor = props => {
if (indexjsx) editorKeys.push('indexjsx');
if (indexhtml) editorKeys.push('indexhtml');
if (indexcss) editorKeys.push('indexcss');
if (indexjs) editorKeys.push('indexjs');
if (stylescss) editorKeys.push('stylescss');
if (scriptjs) editorKeys.push('scriptjs');
const editorAndSplitterKeys = editorKeys.reduce((acc, key) => {
if (acc.length === 0) {

View File

@ -227,11 +227,11 @@ const transformIncludes = async function (fileP) {
div.querySelector('script[src="./script.js"]');
const importedFiles = [];
if (link) {
importedFiles.push('index.css');
importedFiles.push('styles.css');
link.remove();
}
if (script) {
importedFiles.push('index.js');
importedFiles.push('script.js');
script.remove();
}

View File

@ -51,17 +51,10 @@ const composeFunctions = (...fns) =>
fns.map(applyFunction).reduce((f, g) => x => f(x).then(g));
function buildSourceMap(challengeFiles) {
// TODO: concatenating the source/contents is a quick hack for multi-file
// editing. It is used because all the files (js, html and css) end up with
// the same name 'index'. This made the last file the only file to appear in
// sources.
// A better solution is to store and handle them separately. Perhaps never
// setting the name to 'index'. Use 'contents' instead?
// TODO: is file.source ever defined?
// TODO: rename sources.index to sources.contents.
const source = challengeFiles.reduce(
(sources, challengeFile) => {
sources[challengeFile.name] +=
challengeFile.source || challengeFile.contents;
sources.index += challengeFile.source || challengeFile.contents;
sources.editableContents += challengeFile.editableContents || '';
return sources;
},

View File

@ -459,7 +459,9 @@ ${inspect(commentMap)}
challengeFile.editableContents = getLines(
challengeFile.contents,
challenge.challengeFiles.find(
x => x.fileKey === challengeFile.fileKey
x =>
x.ext === challengeFile.ext &&
x.name === challengeFile.name
).editableRegionBoundaries
);
});
@ -523,7 +525,7 @@ async function createTestRunner(
const challengeFiles = cloneDeep(challenge.challengeFiles);
solutionFiles.forEach(solutionFile => {
const challengeFile = challengeFiles.find(
x => x.fileKey === solutionFile.fileKey
x => x.ext === solutionFile.ext && x.name === solutionFile.name
);
challengeFile.contents = solutionFile.contents;
challengeFile.editableContents = solutionFile.editableContents;

View File

@ -60,7 +60,6 @@ Object {
</html>",
"editableRegionBoundaries": Array [],
"ext": "html",
"fileKey": "indexhtml",
"head": "",
"id": "",
"name": "index",
@ -72,10 +71,9 @@ Object {
}",
"editableRegionBoundaries": Array [],
"ext": "css",
"fileKey": "indexcss",
"head": "",
"id": "",
"name": "index",
"name": "styles",
"tail": "",
},
Object {
@ -86,10 +84,9 @@ for (let index = 0; index < array.length; index++) {
}",
"editableRegionBoundaries": Array [],
"ext": "js",
"fileKey": "indexjs",
"head": "",
"id": "custom-name",
"name": "index",
"name": "script",
"tail": "",
},
],
@ -129,7 +126,6 @@ Object {
</html>",
"editableRegionBoundaries": Array [],
"ext": "html",
"fileKey": "indexhtml",
"head": "",
"id": "",
"name": "index",
@ -141,20 +137,18 @@ Object {
}",
"editableRegionBoundaries": Array [],
"ext": "css",
"fileKey": "indexcss",
"head": "",
"id": "",
"name": "index",
"name": "styles",
"tail": "",
},
Object {
"contents": "var x = 'y';",
"editableRegionBoundaries": Array [],
"ext": "js",
"fileKey": "indexjs",
"head": "",
"id": "",
"name": "index",
"name": "script",
"tail": "",
},
],
@ -222,7 +216,6 @@ Object {
23,
],
"ext": "html",
"fileKey": "indexhtml",
"head": "",
"id": "html-key",
"name": "index",
@ -246,20 +239,18 @@ a {
9,
],
"ext": "css",
"fileKey": "indexcss",
"head": "",
"id": "",
"name": "index",
"name": "styles",
"tail": "",
},
Object {
"contents": "var x = 'y';",
"editableRegionBoundaries": Array [],
"ext": "js",
"fileKey": "indexjs",
"head": " // this runs before the user's code is evaluated.",
"id": "final-key",
"name": "index",
"name": "script",
"tail": "",
},
],
@ -307,7 +298,6 @@ a {
</body>
</html>",
"ext": "html",
"fileKey": "indexhtml",
"head": "",
"id": "html-key",
"name": "index",
@ -327,19 +317,17 @@ a {
color: green;
}",
"ext": "css",
"fileKey": "indexcss",
"head": "",
"id": "",
"name": "index",
"name": "styles",
"tail": "",
},
Object {
"contents": "var x = 'y';",
"ext": "js",
"fileKey": "indexjs",
"head": "",
"id": "final-key",
"name": "index",
"name": "script",
"tail": "",
},
],
@ -393,7 +381,6 @@ Object {
</html>",
"editableRegionBoundaries": Array [],
"ext": "html",
"fileKey": "indexhtml",
"head": "",
"id": "",
"name": "index",
@ -405,20 +392,18 @@ Object {
}",
"editableRegionBoundaries": Array [],
"ext": "css",
"fileKey": "indexcss",
"head": "",
"id": "",
"name": "index",
"name": "styles",
"tail": "",
},
Object {
"contents": "var x = 'y';",
"editableRegionBoundaries": Array [],
"ext": "js",
"fileKey": "indexjs",
"head": "",
"id": "",
"name": "index",
"name": "script",
"tail": "",
},
],
@ -440,7 +425,6 @@ Object {
</body>
</html>",
"ext": "html",
"fileKey": "indexhtml",
"head": "",
"id": "html-key",
"name": "index",
@ -451,20 +435,18 @@ Object {
background: white;
}",
"ext": "css",
"fileKey": "indexcss",
"head": "",
"id": "",
"name": "index",
"name": "styles",
"tail": "",
},
Object {
"contents": "var x = 'y';
\`\`",
"ext": "js",
"fileKey": "indexjs",
"head": "",
"id": "",
"name": "index",
"name": "script",
"tail": "",
},
],
@ -499,7 +481,6 @@ Object {
</html>",
"editableRegionBoundaries": Array [],
"ext": "html",
"fileKey": "indexhtml",
"head": "",
"id": "",
"name": "index",
@ -511,20 +492,18 @@ Object {
}",
"editableRegionBoundaries": Array [],
"ext": "css",
"fileKey": "indexcss",
"head": "",
"id": "",
"name": "index",
"name": "styles",
"tail": "",
},
Object {
"contents": "var x = 'y';",
"editableRegionBoundaries": Array [],
"ext": "js",
"fileKey": "indexjs",
"head": "",
"id": "",
"name": "index",
"name": "script",
"tail": "",
},
],
@ -565,7 +544,6 @@ Object {
</html>",
"editableRegionBoundaries": Array [],
"ext": "html",
"fileKey": "indexhtml",
"head": "",
"id": "",
"name": "index",
@ -577,20 +555,18 @@ Object {
}",
"editableRegionBoundaries": Array [],
"ext": "css",
"fileKey": "indexcss",
"head": "",
"id": "",
"name": "index",
"name": "styles",
"tail": "",
},
Object {
"contents": "var x = 'y';",
"editableRegionBoundaries": Array [],
"ext": "js",
"fileKey": "indexjs",
"head": "",
"id": "",
"name": "index",
"name": "script",
"tail": "",
},
],
@ -626,7 +602,6 @@ Object {
</body>
</html>",
"ext": "html",
"fileKey": "indexhtml",
"head": "",
"id": "html-key",
"name": "index",
@ -637,20 +612,18 @@ Object {
background: white;
}",
"ext": "css",
"fileKey": "indexcss",
"head": "",
"id": "",
"name": "index",
"name": "styles",
"tail": "",
},
Object {
"contents": "var x = 'y';
\`\`",
"ext": "js",
"fileKey": "indexjs",
"head": "",
"id": "",
"name": "index",
"name": "script",
"tail": "",
},
],

View File

@ -10,7 +10,6 @@ Object {
</html>",
"editableRegionBoundaries": Array [],
"ext": "html",
"fileKey": "indexhtml",
"head": "",
"id": "",
"name": "index",
@ -22,20 +21,18 @@ Object {
}",
"editableRegionBoundaries": Array [],
"ext": "css",
"fileKey": "indexcss",
"head": "",
"id": "",
"name": "index",
"name": "styles",
"tail": "",
},
Object {
"contents": "var x = 'y';",
"editableRegionBoundaries": Array [],
"ext": "js",
"fileKey": "indexjs",
"head": "",
"id": "",
"name": "index",
"name": "script",
"tail": "",
},
],

View File

@ -10,7 +10,6 @@ Object {
</body>
</html>",
"ext": "html",
"fileKey": "indexhtml",
"head": "",
"id": "html-key",
"name": "index",
@ -21,20 +20,18 @@ Object {
background: white;
}",
"ext": "css",
"fileKey": "indexcss",
"head": "",
"id": "",
"name": "index",
"name": "styles",
"tail": "",
},
Object {
"contents": "var x = 'y';
\`\`",
"ext": "js",
"fileKey": "indexjs",
"head": "",
"id": "",
"name": "index",
"name": "script",
"tail": "",
},
],

View File

@ -2,7 +2,6 @@ const { isEmpty } = require('lodash');
const { root } = require('mdast-builder');
const visitChildren = require('unist-util-visit-children');
const getAllBetween = require('./utils/between-headings');
// const visit = require('unist-util-visit');
const { getFileVisitor } = require('./utils/get-file-visitor');
const editableRegionMarker = '--fcc-editable-region--';

View File

@ -42,15 +42,13 @@ describe('add-seed plugin', () => {
});
it('adds test objects to the challengeFiles array following a schema', () => {
expect.assertions(17);
expect.assertions(15);
plugin(simpleAST, file);
const {
data: { challengeFiles }
} = file;
const testObject = challengeFiles.find(x => x.fileKey === 'indexjs');
expect(Object.keys(testObject).length).toEqual(8);
expect(testObject).toHaveProperty('fileKey');
expect(typeof testObject['fileKey']).toBe('string');
const testObject = challengeFiles.find(x => x.ext === 'js');
expect(Object.keys(testObject).length).toEqual(7);
expect(testObject).toHaveProperty('ext');
expect(typeof testObject['ext']).toBe('string');
expect(testObject).toHaveProperty('name');
@ -73,16 +71,16 @@ describe('add-seed plugin', () => {
const {
data: { challengeFiles }
} = file;
const indexjs = challengeFiles.find(x => x.fileKey === 'indexjs');
const indexhtml = challengeFiles.find(x => x.fileKey === 'indexhtml');
const indexcss = challengeFiles.find(x => x.fileKey === 'indexcss');
const scriptjs = challengeFiles.find(x => x.ext === 'js');
const indexhtml = challengeFiles.find(x => x.ext === 'html');
const stylescss = challengeFiles.find(x => x.ext === 'css');
expect(indexjs.contents).toBe(`var x = 'y';`);
expect(scriptjs.contents).toBe(`var x = 'y';`);
expect(indexhtml.contents).toBe(`<html>
<body>
</body>
</html>`);
expect(indexcss.contents).toBe(`body {
expect(stylescss.contents).toBe(`body {
background: green;
}`);
});
@ -93,10 +91,10 @@ describe('add-seed plugin', () => {
const {
data: { challengeFiles }
} = file;
const indexcss = challengeFiles.find(x => x.fileKey === 'indexcss');
const stylescss = challengeFiles.find(x => x.ext === 'css');
expect(indexcss.contents).not.toMatch('--fcc-editable-region--');
expect(indexcss.editableRegionBoundaries).toEqual([1, 4]);
expect(stylescss.contents).not.toMatch('--fcc-editable-region--');
expect(stylescss.editableRegionBoundaries).toEqual([1, 4]);
});
// TODO: can we reuse 'name'? It's always 'index', I think, which suggests
@ -107,13 +105,13 @@ describe('add-seed plugin', () => {
const {
data: { challengeFiles }
} = file;
const indexjs = challengeFiles.find(x => x.fileKey === 'indexjs');
const indexhtml = challengeFiles.find(x => x.fileKey === 'indexhtml');
const indexcss = challengeFiles.find(x => x.fileKey === 'indexcss');
const scriptjs = challengeFiles.find(x => x.ext === 'js');
const indexhtml = challengeFiles.find(x => x.ext === 'html');
const stylescss = challengeFiles.find(x => x.ext === 'css');
expect(indexhtml.id).toBe('');
expect(indexcss.id).toBe('key-for-css');
expect(indexjs.id).toBe('key-for-js');
expect(stylescss.id).toBe('key-for-css');
expect(scriptjs.id).toBe('key-for-js');
});
it('throws if an id is anywhere except directly before a code node', () => {
@ -140,13 +138,13 @@ describe('add-seed plugin', () => {
const {
data: { challengeFiles }
} = file;
const indexjs = challengeFiles.find(x => x.fileKey === 'indexjs');
const indexhtml = challengeFiles.find(x => x.fileKey === 'indexhtml');
const indexcss = challengeFiles.find(x => x.fileKey === 'indexcss');
const scriptjs = challengeFiles.find(x => x.ext === 'js');
const indexhtml = challengeFiles.find(x => x.ext === 'html');
const stylescss = challengeFiles.find(x => x.ext === 'css');
expect(indexjs.head).toBe('');
expect(scriptjs.head).toBe('');
expect(indexhtml.head).toBe(`<!-- comment -->`);
expect(indexcss.head).toBe(`body {
expect(stylescss.head).toBe(`body {
etc: ''
}`);
});
@ -157,15 +155,15 @@ describe('add-seed plugin', () => {
const {
data: { challengeFiles }
} = file;
const indexjs = challengeFiles.find(x => x.fileKey === 'indexjs');
const indexhtml = challengeFiles.find(x => x.fileKey === 'indexhtml');
const indexcss = challengeFiles.find(x => x.fileKey === 'indexcss');
const scriptjs = challengeFiles.find(x => x.ext === 'js');
const indexhtml = challengeFiles.find(x => x.ext === 'html');
const stylescss = challengeFiles.find(x => x.ext === 'css');
expect(indexjs.tail).toBe(`function teardown(params) {
expect(scriptjs.tail).toBe(`function teardown(params) {
// after
}`);
expect(indexhtml.tail).toBe('');
expect(indexcss.tail).toBe(`body {
expect(stylescss.tail).toBe(`body {
background: blue;
}`);
});
@ -194,16 +192,16 @@ describe('add-seed plugin', () => {
const {
data: { challengeFiles }
} = file;
const indexjs = challengeFiles.find(x => x.fileKey === 'indexjs');
const indexhtml = challengeFiles.find(x => x.fileKey === 'indexhtml');
const indexcss = challengeFiles.find(x => x.fileKey === 'indexcss');
const scriptjs = challengeFiles.find(x => x.ext === 'js');
const indexhtml = challengeFiles.find(x => x.ext === 'html');
const stylescss = challengeFiles.find(x => x.ext === 'css');
expect(indexjs.head).toBe('');
expect(indexjs.tail).toBe('function teardown(params) {\n // after\n}');
expect(scriptjs.head).toBe('');
expect(scriptjs.tail).toBe('function teardown(params) {\n // after\n}');
expect(indexhtml.head).toBe('');
expect(indexhtml.tail).toBe('');
expect(indexcss.head).toBe('');
expect(indexcss.tail).toBe('body {\n background: blue;\n}');
expect(stylescss.head).toBe('');
expect(stylescss.tail).toBe('body {\n background: blue;\n}');
});
it('quietly ignores empty after sections', () => {
@ -212,16 +210,16 @@ describe('add-seed plugin', () => {
const {
data: { challengeFiles }
} = file;
const indexjs = challengeFiles.find(x => x.fileKey === 'indexjs');
const indexhtml = challengeFiles.find(x => x.fileKey === 'indexhtml');
const indexcss = challengeFiles.find(x => x.fileKey === 'indexcss');
const scriptjs = challengeFiles.find(x => x.ext === 'js');
const indexhtml = challengeFiles.find(x => x.ext === 'html');
const stylescss = challengeFiles.find(x => x.ext === 'css');
expect(indexjs.head).toBe('');
expect(indexjs.tail).toBe('');
expect(scriptjs.head).toBe('');
expect(scriptjs.tail).toBe('');
expect(indexhtml.head).toBe('<!-- comment -->');
expect(indexhtml.tail).toBe('');
expect(indexcss.head).toBe("body {\n etc: ''\n}");
expect(indexcss.tail).toBe('');
expect(stylescss.head).toBe("body {\n etc: ''\n}");
expect(stylescss.tail).toBe('');
});
it('throws an error (with line number) if 2 markers appear on 1 line', () => {
@ -239,12 +237,12 @@ describe('add-seed plugin', () => {
});
it('handles jsx', () => {
expect.assertions(4);
expect.assertions(3);
plugin(jsxSeedAST, file);
const {
data: { challengeFiles }
} = file;
const indexjsx = challengeFiles.find(x => x.fileKey === 'indexjsx');
const indexjsx = challengeFiles.find(x => x.ext === 'jsx');
expect(indexjsx.head).toBe(`function setup() {}`);
expect(indexjsx.tail).toBe(`function teardown(params) {
@ -256,7 +254,6 @@ describe('add-seed plugin', () => {
const Button = () => {
return <button> {/* another comment! */} text </button>;
};`);
expect(indexjsx.fileKey).toBe(`indexjsx`);
});
it('combines all the code of a specific language into a single file', () => {

View File

@ -34,17 +34,13 @@ describe('add solution plugin', () => {
});
it('adds solution objects to the challengeFiles array following a schema', () => {
expect.assertions(15);
expect.assertions(13);
plugin(mockAST, file);
const {
data: { solutions }
} = file;
const testObject = solutions[0].find(
solution => solution.fileKey === 'indexjs'
);
expect(Object.keys(testObject).length).toEqual(7);
expect(testObject).toHaveProperty('fileKey');
expect(typeof testObject['fileKey']).toBe('string');
const testObject = solutions[0].find(solution => solution.ext === 'js');
expect(Object.keys(testObject).length).toEqual(6);
expect(testObject).toHaveProperty('ext');
expect(typeof testObject['ext']).toBe('string');
expect(testObject).toHaveProperty('name');
@ -66,24 +62,22 @@ describe('add solution plugin', () => {
data: { solutions }
} = file;
expect(solutions.length).toBe(3);
expect(
solutions[0].find(solution => solution.fileKey === 'indexjs').contents
).toBe("var x = 'y';");
expect(
solutions[1].find(solution => solution.fileKey === 'indexhtml').contents
).toBe(`<html>
expect(solutions[0].find(solution => solution.ext === 'js').contents).toBe(
"var x = 'y';"
);
expect(solutions[1].find(solution => solution.ext === 'html').contents)
.toBe(`<html>
<body>
solution number two
</body>
</html>`);
expect(
solutions[1].find(solution => solution.fileKey === 'indexcss').contents
).toBe(`body {
expect(solutions[1].find(solution => solution.ext === 'css').contents)
.toBe(`body {
background: white;
}`);
expect(
solutions[2].find(solution => solution.fileKey === 'indexjs').contents
).toBe("var x = 'y3';");
expect(solutions[2].find(solution => solution.ext === 'js').contents).toBe(
"var x = 'y3';"
);
});
it('should reject solutions with editable region markers', () => {

View File

@ -12,9 +12,8 @@ const supportedLanguages = ['js', 'css', 'html', 'jsx', 'py'];
function defaultFile(lang, id) {
return {
fileKey: `index${lang}`,
ext: lang,
name: 'index',
name: getFilenames(lang),
contents: '',
head: '',
tail: '',
@ -22,6 +21,14 @@ function defaultFile(lang, id) {
};
}
function getFilenames(lang) {
const langToFilename = {
js: 'script',
css: 'styles'
};
return langToFilename[lang] ?? 'index';
}
function getFileVisitor(seeds, seedKey, validate) {
return (node, index, parent) => {
if (is(node, 'root')) return;
@ -43,21 +50,21 @@ function codeToData(node, seeds, seedKey, validate) {
Please use one of js, css, html, jsx or py
`);
const fileKey = `index${lang}`;
const id = seeds[fileKey] ? seeds[fileKey].id : '';
const fileId = `index${lang}`;
const id = seeds[fileId] ? seeds[fileId].id : '';
// the contents will be missing if there is an id preceding this code
// block.
if (!seeds[fileKey]) {
seeds[fileKey] = defaultFile(lang, id);
if (!seeds[fileId]) {
seeds[fileId] = defaultFile(lang, id);
}
if (isEmpty(node.value) && seedKey !== 'contents') {
const section = keyToSection[seedKey];
throw Error(`Empty code block in --${section}-- section`);
}
seeds[fileKey][seedKey] = isEmpty(seeds[fileKey][seedKey])
seeds[fileId][seedKey] = isEmpty(seeds[fileId][seedKey])
? node.value
: seeds[fileKey][seedKey] + '\n' + node.value;
: seeds[fileId][seedKey] + '\n' + node.value;
}
function idToData(node, index, parent, seeds) {

View File

@ -4,10 +4,10 @@ exports.challengeFiles = [
error: null,
ext: 'css',
head: '',
history: ['index.css'],
fileKey: 'indexcss',
name: 'index',
path: 'index.css',
history: ['styles.css'],
fileKey: 'stylescss',
name: 'styles',
path: 'styles.css',
seed: 'some css',
tail: ''
},
@ -28,10 +28,10 @@ exports.challengeFiles = [
error: null,
ext: 'js',
head: '',
history: ['index.js'],
fileKey: 'indexjs',
name: 'index',
path: 'index.js',
history: ['script.js'],
fileKey: 'scriptjs',
name: 'script',
path: 'script.js',
seed: 'some js',
tail: ''
},

View File

@ -17,7 +17,7 @@ describe('sort-files', () => {
it('should sort the objects into html, css, jsx, js order', () => {
const sorted = sortChallengeFiles(challengeFiles);
const sortedKeys = sorted.map(({ fileKey }) => fileKey);
const expected = ['indexhtml', 'indexcss', 'indexjsx', 'indexjs'];
const expected = ['indexhtml', 'stylescss', 'indexjsx', 'scriptjs'];
expect(sortedKeys).toStrictEqual(expected);
});
});