@samitouri / QOS-React-2 / commits / f4df345420

Improve playground validation, workaround lack of JSX support

ESLint's default parser doesn't support any non-standard syntax, which includes JSX. So when I added the ESLint validation step to the playground, it meant that valid examples containing JSX still reported "invalid output". I tried to use an alternative parser, but I couldn't figure out the right webpack incantations to make `@babel/eslint-parser` or `hermes-eslint` work. I even tried recreating some of their code to avoid problematic imports, no dice. Instead this PR: * No longer uses the `postCodegenValidator` step, and runs the validation on the output after compilation completes. This is better anyway since we can see the output *and* the error messages * Shows rule violations as an "Invalid output" comment * Shows parser errors as a note (mostly to indicate that the validation step couldn't run, there could still be no-use-before-define violations that weren't found) Invalid example: <img width="1502" alt="Screen Shot 2022-10-21 at 9 50 23 AM" src="https://user-images.githubusercontent.com/6425824/197249007-1ec244a0-6dfe-4ec6-a0d0-60302efd86bd.png"> Sample example but with some JSX: <img width="1500" alt="Screen Shot 2022-10-21 at 9 50 39 AM" src="https://user-images.githubusercontent.com/6425824/197249030-e68ba968-4101-47c7-a148-f548f84f375c.png">

Joseph Savona committed Oct 21, 2022 at 11:00 UTC f4df345420e06a6d4607f2a3c7d273d0e492f276
1 file changed +18 -13
compiler/forget/packages/playground/lib/compilerDriver.ts
+18 -13
@@ -69,7 +69,6 @@ export default function compile(
69 const forgetPlaygroundOptions: Partial<CompilerOptions> = {
70 logger: createArrayLogger(forgetLogs),
71 outputKinds: Object.values(OutputKind),
72 - postCodegenValidator: validateNoUseBeforeDefine,
72 stopPass: PassName.Validator,
73 };
74 if (compilerFlags) {
@@ -100,7 +99,24 @@ export default function compile(
99 // assign to global for interactive debugging
100 globalThis.Forget$Context = context;
101 const { outputs } = context;
103 - outputs[OutputKind.JS] = result.code;
102 + let code = result.code;
103 +
104 + const errors: Array<{ ruleId: string; message: string }> =
105 + validateNoUseBeforeDefine(code);
106 + // Filter out parse errors
107 + const noUseBeforeDefineErrors =
108 + errors != null
109 + ? errors.filter((error) => error.ruleId === "no-use-before-define")
110 + : [];
111 + if (noUseBeforeDefineErrors.length !== 0) {
112 + const comments = noUseBeforeDefineErrors
113 + .map((error) => `// - ${error.message}`)
114 + .join("\n");
115 + code = `// !!! INVALID OUTPUT !!!!\n${comments}\n${code}`;
116 + } else if (errors != null && errors.length !== 0) {
117 + code = `// NOTE: Could not validate output, the validator does not yet support JSX\n${code}`;
118 + }
119 + outputs[OutputKind.JS] = code;
120
121 return {
122 outputs,
@@ -109,17 +125,6 @@ export default function compile(
125 } catch (e) {
126 const context = getMostRecentCompilerContext();
127
112 - outputs[OutputKind.JS] = `
113 - function __COMPILATION_FAILED__() {
114 - /**
115 - ${(e as Error).message
116 - .split("\n")
117 - .map((line) => " * " + line)
118 - .join("\n")}
119 - */
120 - }
121 - `;
122 -
128 return {
129 outputs,
130 diagnostics: context.diagnostics,