Fix syntax error from crashing the playground

Author: ianduvall

compiler/apps/playground/__tests__/e2e/page.spec.ts

@@ -314,6 +314,36 @@ test('disableMemoizationForDebugging flag works as expected', async ({
   expect(output).toMatchSnapshot('disableMemoizationForDebugging-output.txt');
 });
 
+test('error is displayed when source has syntax error', async ({page}) => {
+  const syntaxErrorSource = `function TestComponent(props) {
+  const oops = props.
+  return (
+    <>{oops}</>
+  );
+}`;
+  const store: Store = {
+    source: syntaxErrorSource,
+    config: defaultConfig,
+    showInternals: false,
+  };
+  const hash = encodeStore(store);
+  await page.goto(`/#${hash}`);
+  await page.waitForFunction(isMonacoLoaded);
+  await expandConfigs(page);
+  await page.screenshot({
+    fullPage: true,
+    path: 'test-results/08-source-syntax-error.png',
+  });
+
+  const text =
+    (await page.locator('.monaco-editor-output').allInnerTexts()) ?? [];
+  const output = text.join('');
+
+  expect(output.replace(/\s+/g, ' ')).toContain(
+    'Expected identifier to be defined before being used',
+  );
+});
+
 TEST_CASE_INPUTS.forEach((t, idx) =>
   test(`playground compiles: ${t.name}`, async ({page}) => {
     const store: Store = {

compiler/apps/playground/components/Editor/Input.tsx

@@ -29,6 +29,15 @@ import React$Types from '../../node_modules/@types/react/index.d.ts';
 
 loader.config({monaco});
 
+declare global {
+  interface Window {
+    /**
+     * Set to true once the Monaco editor instance has mounted. Used as an imperative signal for any code that needs to defer until Monaco is available.
+     */
+    __MONACO_LOADED__?: true;
+  }
+}
+
 type Props = {
   errors: Array<CompilerErrorDetail | CompilerDiagnostic>;
   language: 'flow' | 'typescript';

compiler/apps/playground/lib/compilation.ts

@@ -297,7 +297,7 @@ export function compile(
   if (!error.hasErrors() && otherErrors.length !== 0) {
     otherErrors.forEach(e => error.details.push(e));
   }
-  if (error.hasErrors()) {
+  if (error.hasErrors() || !transformOutput) {
     return [{kind: 'err', results, error}, language, baseOpts];
   }
   return [