diff --git a/compiler/apps/playground/__tests__/e2e/page.spec.ts b/compiler/apps/playground/__tests__/e2e/page.spec.ts index 3bb6637f95419..bc93352a0992a 100644 --- a/compiler/apps/playground/__tests__/e2e/page.spec.ts +++ b/compiler/apps/playground/__tests__/e2e/page.spec.ts @@ -5,8 +5,8 @@ * LICENSE file in the root directory of this source tree. */ -import { expect, test } from "@playwright/test"; -import { encodeStore, type Store } from "../../lib/stores"; +import {expect, test} from '@playwright/test'; +import {encodeStore, type Store} from '../../lib/stores'; const STORE: Store = { source: `export default function TestComponent({ x }) { @@ -17,33 +17,33 @@ const STORE: Store = { const HASH = encodeStore(STORE); function concat(data: Array): string { - return data.join(""); + return data.join(''); } -test("editor should compile successfully", async ({ page }) => { - await page.goto(`/#${HASH}`, { waitUntil: "networkidle" }); +test('editor should compile successfully', async ({page}) => { + await page.goto(`/#${HASH}`, {waitUntil: 'networkidle'}); await page.screenshot({ fullPage: true, - path: "test-results/00-on-networkidle.png", + path: 'test-results/00-on-networkidle.png', }); // User input from hash compiles await page.screenshot({ fullPage: true, - path: "test-results/01-show-js-before.png", + path: 'test-results/01-show-js-before.png', }); const userInput = - (await page.locator(".monaco-editor").nth(2).allInnerTexts()) ?? []; - expect(concat(userInput)).toMatchSnapshot("user-input.txt"); + (await page.locator('.monaco-editor').nth(2).allInnerTexts()) ?? []; + expect(concat(userInput)).toMatchSnapshot('user-input.txt'); // Reset button works - page.on("dialog", (dialog) => dialog.accept()); - await page.getByRole("button", { name: "Reset" }).click(); + page.on('dialog', dialog => dialog.accept()); + await page.getByRole('button', {name: 'Reset'}).click(); await page.screenshot({ fullPage: true, - path: "test-results/02-show-js-after.png", + path: 'test-results/02-show-js-after.png', }); const defaultInput = - (await page.locator(".monaco-editor").nth(2).allInnerTexts()) ?? []; - expect(concat(defaultInput)).toMatchSnapshot("default-input.txt"); + (await page.locator('.monaco-editor').nth(2).allInnerTexts()) ?? []; + expect(concat(defaultInput)).toMatchSnapshot('default-input.txt'); }); diff --git a/compiler/apps/playground/app/index.tsx b/compiler/apps/playground/app/index.tsx index 75411cd36ef8d..3bbf2e9b5558c 100644 --- a/compiler/apps/playground/app/index.tsx +++ b/compiler/apps/playground/app/index.tsx @@ -5,25 +5,24 @@ * LICENSE file in the root directory of this source tree. */ -import type { NextPage } from "next"; -import Head from "next/head"; -import { SnackbarProvider } from "notistack"; -import { Editor, Header, StoreProvider } from "../components"; -import MessageSnackbar from "../components/Message"; +import type {NextPage} from 'next'; +import Head from 'next/head'; +import {SnackbarProvider} from 'notistack'; +import {Editor, Header, StoreProvider} from '../components'; +import MessageSnackbar from '../components/Message'; const Home: NextPage = () => { return (
- {process.env.NODE_ENV === "development" - ? "[DEV] React Compiler Playground" - : "React Compiler Playground"} + {process.env.NODE_ENV === 'development' + ? '[DEV] React Compiler Playground' + : 'React Compiler Playground'} + content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> { + Components={{message: MessageSnackbar}}>
diff --git a/compiler/apps/playground/app/layout.tsx b/compiler/apps/playground/app/layout.tsx index be0d04e932d90..3e888ae955a89 100644 --- a/compiler/apps/playground/app/layout.tsx +++ b/compiler/apps/playground/app/layout.tsx @@ -5,26 +5,21 @@ * LICENSE file in the root directory of this source tree. */ -import "../styles/globals.css"; +import '../styles/globals.css'; -export default function RootLayout({ - children, -}: { - children: React.ReactNode; -}) { - "use no memo"; +export default function RootLayout({children}: {children: React.ReactNode}) { + 'use no memo'; return ( - {process.env.NODE_ENV === "development" - ? "[DEV] React Compiler Playground" - : "React Compiler Playground"} + {process.env.NODE_ENV === 'development' + ? '[DEV] React Compiler Playground' + : 'React Compiler Playground'} + content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> + Components={{message: MessageSnackbar}}>
diff --git a/compiler/apps/playground/babel.config.js b/compiler/apps/playground/babel.config.js index 900b52dd3028c..0edf2e9b72d70 100644 --- a/compiler/apps/playground/babel.config.js +++ b/compiler/apps/playground/babel.config.js @@ -8,12 +8,12 @@ module.exports = function (api) { api.cache(true); return { - presets: ["next/babel"], + presets: ['next/babel'], plugins: [ [ - "babel-plugin-react-compiler", + 'babel-plugin-react-compiler', { - runtimeModule: "react-compiler-runtime", + runtimeModule: 'react-compiler-runtime', }, ], ], diff --git a/compiler/apps/playground/colors.js b/compiler/apps/playground/colors.js index 7259e1f32bc8f..bd5f1426f5ed7 100644 --- a/compiler/apps/playground/colors.js +++ b/compiler/apps/playground/colors.js @@ -11,86 +11,86 @@ module.exports = { // Text colors - primary: "#23272F", // gray-90 - "primary-dark": "#F6F7F9", // gray-5 - secondary: "#404756", // gray-70 - "secondary-dark": "#EBECF0", // gray-10 - link: "#087EA4", // blue-50 - "link-dark": "#149ECA", // blue-40 - syntax: "#EBECF0", // gray-10 - wash: "#FFFFFF", - "wash-dark": "#23272F", // gray-90 - card: "#F6F7F9", // gray-05 - "card-dark": "#343A46", // gray-80 - highlight: "#E6F7FF", // blue-10 - "highlight-dark": "rgba(88,175,223,.1)", - border: "#EBECF0", // gray-10 - "border-dark": "#343A46", // gray-80 - "secondary-button": "#EBECF0", // gray-10 - "secondary-button-dark": "#404756", // gray-70 + primary: '#23272F', // gray-90 + 'primary-dark': '#F6F7F9', // gray-5 + secondary: '#404756', // gray-70 + 'secondary-dark': '#EBECF0', // gray-10 + link: '#087EA4', // blue-50 + 'link-dark': '#149ECA', // blue-40 + syntax: '#EBECF0', // gray-10 + wash: '#FFFFFF', + 'wash-dark': '#23272F', // gray-90 + card: '#F6F7F9', // gray-05 + 'card-dark': '#343A46', // gray-80 + highlight: '#E6F7FF', // blue-10 + 'highlight-dark': 'rgba(88,175,223,.1)', + border: '#EBECF0', // gray-10 + 'border-dark': '#343A46', // gray-80 + 'secondary-button': '#EBECF0', // gray-10 + 'secondary-button-dark': '#404756', // gray-70 // Gray - "gray-95": "#16181D", - "gray-90": "#23272F", - "gray-80": "#343A46", - "gray-70": "#404756", - "gray-60": "#4E5769", - "gray-50": "#5E687E", // unused - "gray-40": "#78839B", - "gray-30": "#99A1B3", - "gray-20": "#BCC1CD", - "gray-10": "#EBECF0", - "gray-5": "#F6F7F9", + 'gray-95': '#16181D', + 'gray-90': '#23272F', + 'gray-80': '#343A46', + 'gray-70': '#404756', + 'gray-60': '#4E5769', + 'gray-50': '#5E687E', // unused + 'gray-40': '#78839B', + 'gray-30': '#99A1B3', + 'gray-20': '#BCC1CD', + 'gray-10': '#EBECF0', + 'gray-5': '#F6F7F9', // Blue - "blue-60": "#045975", - "blue-50": "#087EA4", - "blue-40": "#149ECA", // Brand Blue - "blue-30": "#58C4DC", // unused - "blue-20": "#ABE2ED", - "blue-10": "#E6F7FF", // todo: doesn't match illustrations - "blue-5": "#E6F6FA", + 'blue-60': '#045975', + 'blue-50': '#087EA4', + 'blue-40': '#149ECA', // Brand Blue + 'blue-30': '#58C4DC', // unused + 'blue-20': '#ABE2ED', + 'blue-10': '#E6F7FF', // todo: doesn't match illustrations + 'blue-5': '#E6F6FA', // Yellow - "yellow-60": "#B65700", - "yellow-50": "#C76A15", - "yellow-40": "#DB7D27", // unused - "yellow-30": "#FABD62", // unused - "yellow-20": "#FCDEB0", // unused - "yellow-10": "#FDE7C7", - "yellow-5": "#FEF5E7", + 'yellow-60': '#B65700', + 'yellow-50': '#C76A15', + 'yellow-40': '#DB7D27', // unused + 'yellow-30': '#FABD62', // unused + 'yellow-20': '#FCDEB0', // unused + 'yellow-10': '#FDE7C7', + 'yellow-5': '#FEF5E7', // Purple - "purple-60": "#2B3491", // unused - "purple-50": "#575FB7", - "purple-40": "#6B75DB", - "purple-30": "#8891EC", - "purple-20": "#C3C8F5", // unused - "purple-10": "#E7E9FB", - "purple-5": "#F3F4FD", + 'purple-60': '#2B3491', // unused + 'purple-50': '#575FB7', + 'purple-40': '#6B75DB', + 'purple-30': '#8891EC', + 'purple-20': '#C3C8F5', // unused + 'purple-10': '#E7E9FB', + 'purple-5': '#F3F4FD', // Green - "green-60": "#2B6E62", - "green-50": "#388F7F", - "green-40": "#44AC99", - "green-30": "#7FCCBF", - "green-20": "#ABDED5", - "green-10": "#E5F5F2", - "green-5": "#F4FBF9", + 'green-60': '#2B6E62', + 'green-50': '#388F7F', + 'green-40': '#44AC99', + 'green-30': '#7FCCBF', + 'green-20': '#ABDED5', + 'green-10': '#E5F5F2', + 'green-5': '#F4FBF9', // RED - "red-60": "#712D28", - "red-50": "#A6423A", // unused - "red-40": "#C1554D", - "red-30": "#D07D77", - "red-20": "#E5B7B3", // unused - "red-10": "#F2DBD9", // unused - "red-5": "#FAF1F0", + 'red-60': '#712D28', + 'red-50': '#A6423A', // unused + 'red-40': '#C1554D', + 'red-30': '#D07D77', + 'red-20': '#E5B7B3', // unused + 'red-10': '#F2DBD9', // unused + 'red-5': '#FAF1F0', // MISC - "code-block": "#99a1b30f", // gray-30 @ 6% - "gradient-blue": "#58C4DC", // Only used for the landing gradient for now. + 'code-block': '#99a1b30f', // gray-30 @ 6% + 'gradient-blue': '#58C4DC', // Only used for the landing gradient for now. github: { - highlight: "#fffbdd", + highlight: '#fffbdd', }, }; diff --git a/compiler/apps/playground/components/Editor/EditorImpl.tsx b/compiler/apps/playground/components/Editor/EditorImpl.tsx index 312492b48c3c1..9fe9be08d0ec9 100644 --- a/compiler/apps/playground/components/Editor/EditorImpl.tsx +++ b/compiler/apps/playground/components/Editor/EditorImpl.tsx @@ -5,10 +5,10 @@ * LICENSE file in the root directory of this source tree. */ -import { parse as babelParse, ParserPlugin } from "@babel/parser"; -import * as HermesParser from "hermes-parser"; -import traverse, { NodePath } from "@babel/traverse"; -import * as t from "@babel/types"; +import {parse as babelParse, ParserPlugin} from '@babel/parser'; +import * as HermesParser from 'hermes-parser'; +import traverse, {NodePath} from '@babel/traverse'; +import * as t from '@babel/types'; import { CompilerError, CompilerErrorDetail, @@ -20,49 +20,49 @@ import { run, ValueKind, type Hook, -} from "babel-plugin-react-compiler/src"; -import { type ReactFunctionType } from "babel-plugin-react-compiler/src/HIR/Environment"; -import clsx from "clsx"; -import invariant from "invariant"; -import { useSnackbar } from "notistack"; -import { useDeferredValue, useMemo } from "react"; -import { useMountEffect } from "../../hooks"; -import { defaultStore } from "../../lib/defaultStore"; +} from 'babel-plugin-react-compiler/src'; +import {type ReactFunctionType} from 'babel-plugin-react-compiler/src/HIR/Environment'; +import clsx from 'clsx'; +import invariant from 'invariant'; +import {useSnackbar} from 'notistack'; +import {useDeferredValue, useMemo} from 'react'; +import {useMountEffect} from '../../hooks'; +import {defaultStore} from '../../lib/defaultStore'; import { createMessage, initStoreFromUrlOrLocalStorage, MessageLevel, MessageSource, type Store, -} from "../../lib/stores"; -import { useStore, useStoreDispatch } from "../StoreContext"; -import Input from "./Input"; +} from '../../lib/stores'; +import {useStore, useStoreDispatch} from '../StoreContext'; +import Input from './Input'; import { CompilerOutput, default as Output, PrintedCompilerPipelineValue, -} from "./Output"; +} from './Output'; -function parseInput(input: string, language: "flow" | "typescript") { +function parseInput(input: string, language: 'flow' | 'typescript') { // Extract the first line to quickly check for custom test directives - if (language === "flow") { + if (language === 'flow') { return HermesParser.parse(input, { babel: true, - flow: "all", - sourceType: "module", + flow: 'all', + sourceType: 'module', enableExperimentalComponentSyntax: true, }); } else { return babelParse(input, { - plugins: ["typescript", "jsx"], - sourceType: "module", + plugins: ['typescript', 'jsx'], + sourceType: 'module', }); } } function parseFunctions( source: string, - language: "flow" | "typescript" + language: 'flow' | 'typescript', ): Array< NodePath< t.FunctionDeclaration | t.ArrowFunctionExpression | t.FunctionExpression @@ -103,7 +103,7 @@ function parseFunctions( const COMMON_HOOKS: Array<[string, Hook]> = [ [ - "useFragment", + 'useFragment', { valueKind: ValueKind.Frozen, effectKind: Effect.Freeze, @@ -112,7 +112,7 @@ const COMMON_HOOKS: Array<[string, Hook]> = [ }, ], [ - "usePaginationFragment", + 'usePaginationFragment', { valueKind: ValueKind.Frozen, effectKind: Effect.Freeze, @@ -121,7 +121,7 @@ const COMMON_HOOKS: Array<[string, Hook]> = [ }, ], [ - "useRefetchableFragment", + 'useRefetchableFragment', { valueKind: ValueKind.Frozen, effectKind: Effect.Freeze, @@ -130,7 +130,7 @@ const COMMON_HOOKS: Array<[string, Hook]> = [ }, ], [ - "useLazyLoadQuery", + 'useLazyLoadQuery', { valueKind: ValueKind.Frozen, effectKind: Effect.Freeze, @@ -139,7 +139,7 @@ const COMMON_HOOKS: Array<[string, Hook]> = [ }, ], [ - "usePreloadedQuery", + 'usePreloadedQuery', { valueKind: ValueKind.Frozen, effectKind: Effect.Freeze, @@ -154,22 +154,22 @@ function isHookName(s: string): boolean { } function getReactFunctionType( - id: NodePath + id: NodePath, ): ReactFunctionType { if (id && id.node && id.isIdentifier()) { if (isHookName(id.node.name)) { - return "Hook"; + return 'Hook'; } const isPascalCaseNameSpace = /^[A-Z].*/; if (isPascalCaseNameSpace.test(id.node.name)) { - return "Component"; + return 'Component'; } } - return "Other"; + return 'Other'; } -function compile(source: string): [CompilerOutput, "flow" | "typescript"] { +function compile(source: string): [CompilerOutput, 'flow' | 'typescript'] { const results = new Map(); const error = new CompilerError(); const upsert = (result: PrintedCompilerPipelineValue) => { @@ -180,15 +180,15 @@ function compile(source: string): [CompilerOutput, "flow" | "typescript"] { results.set(result.name, [result]); } }; - let language: "flow" | "typescript"; + let language: 'flow' | 'typescript'; if (source.match(/\@flow/)) { - language = "flow"; + language = 'flow'; } else { - language = "typescript"; + language = 'typescript'; } try { // Extract the first line to quickly check for custom test directives - const pragma = source.substring(0, source.indexOf("\n")); + const pragma = source.substring(0, source.indexOf('\n')); const config = parseConfigPragma(pragma); for (const fn of parseFunctions(source, language)) { @@ -197,16 +197,16 @@ function compile(source: string): [CompilerOutput, "flow" | "typescript"] { new CompilerErrorDetail({ reason: `Unexpected function type ${fn.node.type}`, description: - "Playground only supports parsing function declarations", + 'Playground only supports parsing function declarations', severity: ErrorSeverity.Todo, loc: fn.node.loc ?? null, suggestions: null, - }) + }), ); continue; } - const id = fn.get("id"); + const id = fn.get('id'); for (const result of run( fn, { @@ -214,20 +214,20 @@ function compile(source: string): [CompilerOutput, "flow" | "typescript"] { customHooks: new Map([...COMMON_HOOKS]), }, getReactFunctionType(id), - "_c", + '_c', + null, null, null, - null )) { const fnName = fn.node.id?.name ?? null; switch (result.kind) { - case "ast": { + case 'ast': { upsert({ - kind: "ast", + kind: 'ast', fnName, name: result.name, value: { - type: "FunctionDeclaration", + type: 'FunctionDeclaration', id: result.value.id, async: result.value.async, generator: result.value.generator, @@ -237,27 +237,27 @@ function compile(source: string): [CompilerOutput, "flow" | "typescript"] { }); break; } - case "hir": { + case 'hir': { upsert({ - kind: "hir", + kind: 'hir', fnName, name: result.name, value: printHIR(result.value.body), }); break; } - case "reactive": { + case 'reactive': { upsert({ - kind: "reactive", + kind: 'reactive', fnName, name: result.name, value: printReactiveFunction(result.value), }); break; } - case "debug": { + case 'debug': { upsert({ - kind: "debug", + kind: 'debug', fnName, name: result.name, value: result.value, @@ -286,24 +286,24 @@ function compile(source: string): [CompilerOutput, "flow" | "typescript"] { reason: `Unexpected failure when transforming input! ${err}`, loc: null, suggestions: null, - }) + }), ); } } if (error.hasErrors()) { - return [{ kind: "err", results, error: error }, language]; + return [{kind: 'err', results, error: error}, language]; } - return [{ kind: "ok", results }, language]; + return [{kind: 'ok', results}, language]; } export default function Editor() { const store = useStore(); const deferredStore = useDeferredValue(store); const dispatchStore = useStoreDispatch(); - const { enqueueSnackbar } = useSnackbar(); + const {enqueueSnackbar} = useSnackbar(); const [compilerOutput, language] = useMemo( () => compile(deferredStore.source), - [deferredStore.source] + [deferredStore.source], ); useMountEffect(() => { @@ -311,35 +311,35 @@ export default function Editor() { try { mountStore = initStoreFromUrlOrLocalStorage(); } catch (e) { - invariant(e instanceof Error, "Only Error may be caught."); + invariant(e instanceof Error, 'Only Error may be caught.'); enqueueSnackbar(e.message, { - variant: "message", + variant: 'message', ...createMessage( - "Bad URL - fell back to the default Playground.", + 'Bad URL - fell back to the default Playground.', MessageLevel.Info, - MessageSource.Playground + MessageSource.Playground, ), }); mountStore = defaultStore; } dispatchStore({ - type: "setStore", - payload: { store: mountStore }, + type: 'setStore', + payload: {store: mountStore}, }); }); return ( <>
-
+
-
+
diff --git a/compiler/apps/playground/components/Editor/Input.tsx b/compiler/apps/playground/components/Editor/Input.tsx index 219f13ba239f8..c2ce8efc70d3f 100644 --- a/compiler/apps/playground/components/Editor/Input.tsx +++ b/compiler/apps/playground/components/Editor/Input.tsx @@ -5,28 +5,28 @@ * LICENSE file in the root directory of this source tree. */ -import MonacoEditor, { loader, type Monaco } from "@monaco-editor/react"; -import { CompilerErrorDetail } from "babel-plugin-react-compiler/src"; -import invariant from "invariant"; -import type { editor } from "monaco-editor"; -import * as monaco from "monaco-editor"; -import { Resizable } from "re-resizable"; -import { useEffect, useState } from "react"; -import { renderReactCompilerMarkers } from "../../lib/reactCompilerMonacoDiagnostics"; -import { useStore, useStoreDispatch } from "../StoreContext"; -import { monacoOptions } from "./monacoOptions"; +import MonacoEditor, {loader, type Monaco} from '@monaco-editor/react'; +import {CompilerErrorDetail} from 'babel-plugin-react-compiler/src'; +import invariant from 'invariant'; +import type {editor} from 'monaco-editor'; +import * as monaco from 'monaco-editor'; +import {Resizable} from 're-resizable'; +import {useEffect, useState} from 'react'; +import {renderReactCompilerMarkers} from '../../lib/reactCompilerMonacoDiagnostics'; +import {useStore, useStoreDispatch} from '../StoreContext'; +import {monacoOptions} from './monacoOptions'; // TODO: Make TS recognize .d.ts files, in addition to loading them with webpack. // @ts-ignore -import React$Types from "../../node_modules/@types/react/index.d.ts"; +import React$Types from '../../node_modules/@types/react/index.d.ts'; -loader.config({ monaco }); +loader.config({monaco}); type Props = { errors: CompilerErrorDetail[]; - language: "flow" | "typescript"; + language: 'flow' | 'typescript'; }; -export default function Input({ errors, language }: Props) { +export default function Input({errors, language}: Props) { const [monaco, setMonaco] = useState(null); const store = useStore(); const dispatchStore = useStoreDispatch(); @@ -36,11 +36,11 @@ export default function Input({ errors, language }: Props) { if (!monaco) return; const uri = monaco.Uri.parse(`file:///index.js`); const model = monaco.editor.getModel(uri); - invariant(model, "Model must exist for the selected input file."); - renderReactCompilerMarkers({ monaco, model, details: errors }); + invariant(model, 'Model must exist for the selected input file.'); + renderReactCompilerMarkers({monaco, model, details: errors}); // N.B. that `tabSize` is a model property, not an editor property. // So, the tab size has to be set per model. - model.updateOptions({ tabSize: 2 }); + model.updateOptions({tabSize: 2}); }, [monaco, errors]); const flowDiagnosticDisable = [ @@ -64,11 +64,11 @@ export default function Input({ errors, language }: Props) { 8011, 8012, 8013, - ...(language === "flow" ? flowDiagnosticDisable : []), + ...(language === 'flow' ? flowDiagnosticDisable : []), ], noSemanticValidation: true, // Monaco can't validate Flow component syntax - noSyntaxValidation: language === "flow", + noSyntaxValidation: language === 'flow', }); }, [monaco, language]); @@ -76,7 +76,7 @@ export default function Input({ errors, language }: Props) { if (!value) return; dispatchStore({ - type: "updateFile", + type: 'updateFile', payload: { source: value, }, @@ -91,11 +91,11 @@ export default function Input({ errors, language }: Props) { target: monaco.languages.typescript.ScriptTarget.ES2015, moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs, jsx: monaco.languages.typescript.JsxEmit.Preserve, - typeRoots: ["node_modules/@types"], + typeRoots: ['node_modules/@types'], allowSyntheticDefaultImports: true, }; monaco.languages.typescript.javascriptDefaults.setCompilerOptions( - tscOptions + tscOptions, ); monaco.languages.typescript.typescriptDefaults.setCompilerOptions({ ...tscOptions, @@ -106,7 +106,7 @@ export default function Input({ errors, language }: Props) { // Add React type declarations to Monaco const reactLib = [ React$Types, - "file:///node_modules/@types/react/index.d.ts", + 'file:///node_modules/@types/react/index.d.ts', ] as [any, string]; monaco.languages.typescript.javascriptDefaults.addExtraLib(...reactLib); monaco.languages.typescript.typescriptDefaults.addExtraLib(...reactLib); @@ -124,17 +124,16 @@ export default function Input({ errors, language }: Props) {
+ className="!h-[calc(100vh_-_3.5rem)]"> } + | {kind: 'ok'; results: Map} | { - kind: "err"; + kind: 'err'; results: Map; error: CompilerError; }; @@ -63,7 +63,7 @@ async function tabify(source: string, compilerOutput: CompilerOutput) { for (const [passName, results] of compilerOutput.results) { for (const result of results) { switch (result.kind) { - case "hir": { + case 'hir': { const prev = concattedResults.get(result.name); const next = result.value; const identName = `function ${result.fnName}`; @@ -74,7 +74,7 @@ async function tabify(source: string, compilerOutput: CompilerOutput) { } break; } - case "reactive": { + case 'reactive': { const prev = concattedResults.get(passName); const next = result.value; if (prev != null) { @@ -84,30 +84,29 @@ async function tabify(source: string, compilerOutput: CompilerOutput) { } break; } - case "ast": + case 'ast': topLevelFnDecls.push(result.value); break; - case "debug": { + case 'debug': { concattedResults.set(passName, result.value); break; } default: { const _: never = result; - throw new Error("Unexpected result kind"); + throw new Error('Unexpected result kind'); } } } } let lastPassOutput: string | null = null; - let nonDiffPasses = ["HIR", "BuildReactiveFunction", "EnvironmentConfig"]; + let nonDiffPasses = ['HIR', 'BuildReactiveFunction', 'EnvironmentConfig']; for (const [passName, text] of concattedResults) { tabs.set( passName, + showInfoPanel={!nonDiffPasses.includes(passName)}>, ); lastPassOutput = text; } @@ -116,25 +115,24 @@ async function tabify(source: string, compilerOutput: CompilerOutput) { // Make a synthetic Program so we can have a single AST with all the top level // FunctionDeclarations const ast = t.program(topLevelFnDecls); - const { code, sourceMapUrl } = await codegen(ast, source); + const {code, sourceMapUrl} = await codegen(ast, source); reorderedTabs.set( - "JS", + 'JS', + showInfoPanel={false}>, ); if (sourceMapUrl) { reorderedTabs.set( - "SourceMap", + 'SourceMap', <>