{"patch":"diff --git a\/compiler\/forget\/packages\/playground\/components\/Editor\/Input.tsx b\/compiler\/forget\/packages\/playground\/components\/Editor\/Input.tsx\nindex 09ddf00579..96fe726005 100644\n--- a\/compiler\/forget\/packages\/playground\/components\/Editor\/Input.tsx\n+++ b\/compiler\/forget\/packages\/playground\/components\/Editor\/Input.tsx\n@@ -8,9 +8,7 @@ import invariant from \"invariant\";\n import type { editor } from \"monaco-editor\";\n import { useEffect, useState } from \"react\";\n import { renderForgetMarkers } from \"..\/..\/lib\/forgetMonacoDiagnostics\";\n-import { createInputFile, getSelectedFile } from \"..\/..\/lib\/stores\";\n import { useStore, useStoreDispatch } from \"..\/StoreContext\";\n-import InputTabSelector from \".\/InputTabSelector\";\n import { monacoOptions } from \".\/monacoOptions\";\n \/\/ TODO: Make TS recognize .d.ts files, in addition to loading them with webpack.\n \/\/ @ts-ignore\n@@ -20,37 +18,25 @@ export default function Input({ diagnostics }: { diagnostics: Diagnostic[] }) {\n const [monaco, setMonaco] = useState(null);\n const store = useStore();\n const dispatchStore = useStoreDispatch();\n- const selectedFile = getSelectedFile(store);\n \n useEffect(() => {\n if (!monaco) return;\n- const uri = monaco.Uri.parse(`file:\/\/\/${selectedFile.id}`);\n+ const uri = monaco.Uri.parse(`file:\/\/\/index.js`);\n const model = monaco.editor.getModel(uri);\n invariant(model, \"Model must exist for the selected input file.\");\n renderForgetMarkers({ monaco, model, diagnostics });\n- }, [diagnostics, monaco, selectedFile.id]);\n+ }, [diagnostics, monaco]);\n \n \/\/ Set tab width to 2 spaces for the selected input file.\n useEffect(() => {\n if (!monaco) return;\n- const uri = monaco.Uri.parse(`file:\/\/\/${selectedFile.id}`);\n+ const uri = monaco.Uri.parse(`file:\/\/\/index.js`);\n const model = monaco.editor.getModel(uri);\n invariant(model, \"Model must exist for the selected input file.\");\n \/\/ N.B. that `tabSize` is a model property, not an editor property.\n \/\/ So, the tab size has to be set per model.\n model.updateOptions({ tabSize: 2 });\n- }, [monaco, selectedFile.id]);\n-\n- useEffect(() => {\n- if (!monaco) return;\n- \/\/ Let Monaco Editor know of the input files so that its language\n- \/\/ service can correctly resolve import statements.\n- store.files.forEach((file) => {\n- const lib = [file.content, `file:\/\/\/${file.id}`] as const;\n- monaco.languages.typescript.javascriptDefaults.addExtraLib(...lib);\n- monaco.languages.typescript.typescriptDefaults.addExtraLib(...lib);\n- });\n- }, [monaco, store.files]);\n+ }, [monaco]);\n \n const handleChange = (value: string | undefined) => {\n if (!value) return;\n@@ -58,7 +44,7 @@ export default function Input({ diagnostics }: { diagnostics: Diagnostic[] }) {\n dispatchStore({\n type: \"updateFile\",\n payload: {\n- file: createInputFile(store.selectedFileId, value),\n+ source: value,\n },\n });\n };\n@@ -113,21 +99,16 @@ export default function Input({ diagnostics }: { diagnostics: Diagnostic[] }) {\n \n return (\n

\n- \n {\/* Restrict MonacoEditor's height, since the config autoLayout:true\n will grow the editor to fit within parent element *\/}\n

\n ) => void;\n- onSubmit: (oldTabId: string, newTabId: string) => void;\n- onDelete: (tabId: string) => void;\n- onSwitchTab: (tabId: string) => void;\n-}) {\n- const [newTabId, setNewTabId] = useState(tabId);\n- const tabIdWidth = `${newTabId.length}ch`;\n- const [isEditing, setIsEditing] = useState(autoFocus);\n- const tabRef = useRef(null);\n-\n- useEffect(() => {\n- onMountEffect(tabId, tabRef);\n- }, [tabId, onMountEffect]);\n-\n- return (\n- {\n- onSwitchTab(tabId);\n- }}\n- >\n- {isEditing ? (\n- {\n- e.preventDefault();\n- onSubmit(tabId, newTabId);\n- }}\n- >\n- setNewTabId(e.target.value)}\n- onBlur={(e) => {\n- \/\/ Stop if clicking on delete button.\n- if (e.relatedTarget && e.relatedTarget.id === \"delete-button\")\n- return;\n- setIsEditing(false);\n- onSubmit(tabId, newTabId);\n- }}\n- \/>\n- <\/form>\n- ) : (\n- {\n- if (allowEdit) setIsEditing(true);\n- }}\n- >\n- {tabId}\n- <\/div>\n- )}\n- {isDeletable ? (\n- {\n- e.stopPropagation();\n- onDelete(tabId);\n- }}\n- >\n- \n- <\/button>\n- ) : null}\n- <\/div>\n- );\n-}\ndiff --git a\/compiler\/forget\/packages\/playground\/components\/Editor\/InputTabSelector.tsx b\/compiler\/forget\/packages\/playground\/components\/Editor\/InputTabSelector.tsx\ndeleted file mode 100644\nindex 531a2de6b5..0000000000\n--- a\/compiler\/forget\/packages\/playground\/components\/Editor\/InputTabSelector.tsx\n+++ \/dev\/null\n@@ -1,203 +0,0 @@\n-\/*\n- * Copyright (c) Facebook, Inc. and its affiliates.\n- *\/\n-\n-import { PlusIcon } from \"@heroicons\/react\/solid\";\n-import invariant from \"invariant\";\n-import { useSnackbar } from \"notistack\";\n-import { useState, type RefObject } from \"react\";\n-import {\n- checkInputFile,\n- createInputFile,\n- createMessage,\n- MessageLevel,\n- MessageSource,\n- type Store,\n-} from \"..\/..\/lib\/stores\";\n-import { useStore, useStoreDispatch } from \"..\/StoreContext\";\n-import InputTab from \".\/InputTab\";\n-\n-export default function InputTabSelector() {\n- const store = useStore();\n- const dispatchStore = useStoreDispatch();\n- const [isCreating, setIsCreating] = useState(false);\n- const tabIds = isCreating\n- ? [...store.files.map((f) => f.id), generateUniqueFileId(store.files)]\n- : store.files.map((f) => f.id);\n- const { enqueueSnackbar } = useSnackbar();\n-\n- const handleMountEffect = (\n- tabId: string,\n- tabRef: RefObject\n- ) => {\n- const isPendingCreation = isCreating && tabIds[tabIds.length - 1] === tabId;\n- if (isPendingCreation || store.selectedFileId === tabId) {\n- \/\/ Scroll new or selected tab into view when loading the page, switching tabs,\n- \/\/ and adding new tabs.\n- tabRef.current?.scrollIntoView({\n- block: \"nearest\",\n- inline: \"start\",\n- behavior: \"smooth\",\n- });\n- }\n- };\n-\n- \/\/ Create a new tab.\n- const handleAddTab = (_oldTabId: string, newTabId: string) => {\n- try {\n- const newTab = createInputFile(newTabId, \"\");\n- checkInputFile(newTab, undefined, store);\n-\n- dispatchStore({\n- type: \"addFile\",\n- payload: { file: newTab },\n- });\n- setIsCreating(false);\n- } catch (e) {\n- if (e instanceof Error) {\n- enqueueSnackbar(e.message, {\n- variant: \"message\",\n- ...createMessage(\n- e.message,\n- MessageLevel.Error,\n- MessageSource.Playground\n- ),\n- });\n- }\n- }\n- };\n-\n- \/\/ Update ID of an existing tab.\n- const handleUpdateId = (oldTabId: string, newTabId: string) => {\n- if (newTabId === oldTabId) return;\n- const oldTab = store.files.find((f) => f.id === oldTabId);\n- invariant(oldTab, \"Tab being updated must exist.\");\n-\n- try {\n- const newTab = createInputFile(newTabId, oldTab.content);\n- checkInputFile(newTab, oldTab, store);\n-\n- dispatchStore({\n- type: \"updateFile\",\n- payload: { oldFileId: oldTabId, file: newTab },\n- });\n- } catch (e) {\n- if (e instanceof Error) {\n- enqueueSnackbar(e.message, {\n- variant: \"message\",\n- ...createMessage(\n- e.message,\n- MessageLevel.Error,\n- MessageSource.Playground\n- ),\n- });\n- }\n- }\n- };\n-\n- const handleDeleteTab = (tabId: string) => {\n- \/\/ Tab being created.\n- if (isCreating) {\n- setIsCreating(false);\n- }\n- \/\/ Existing tabs.\n- else {\n- const ok = confirm(`Are you sure you want to delete ${tabId}?`);\n- if (!ok) return;\n-\n- dispatchStore({\n- type: \"deleteFile\",\n- payload: { fileId: tabId },\n- });\n- }\n- };\n-\n- const handleSwitchTab = (tabId: string) => {\n- const isPendingCreation = isCreating && tabIds[tabIds.length - 1] === tabId;\n- if (!isPendingCreation) {\n- dispatchStore({\n- type: \"switchInputTab\",\n- payload: { selectedFileId: tabId },\n- });\n- }\n- };\n-\n- return (\n-

\n-

\n- {tabIds.map((tabId, index) => {\n- \/\/ Hide _app.js on UI.\n- if (tabId === \"_app.js\") return;\n-\n- const isSelected = store.selectedFileId === tabId;\n- const isPendingCreation = isCreating && index === tabIds.length - 1;\n- const isIndexTab = index === 1;\n- const isDeletable = !isIndexTab || isPendingCreation;\n- const shouldDivide = index < tabIds.length - 1;\n-\n- return (\n- \n- \n- {shouldDivide && (\n-

\n- )}\n- <\/div>\n- );\n- })}\n- <\/div>\n- setIsCreating(true)}\n- >\n- \n- <\/button>\n-

\n- <\/div>\n- );\n-}\n-\n-\/**\n- * Generate a file ID different from those of exsiting @param inputFiles.\n- *\/\n-function generateUniqueFileId(inputFiles: Store[\"files\"]) {\n- let name = \"Component\";\n- const ext = \"js\";\n-\n- let i = 0;\n- while (true) {\n- if (inputFiles.find((f) => f.id === `${name}.${ext}`)) {\n- name = `Component${++i}`;\n- } else {\n- break;\n- }\n- }\n-\n- return `${name}.${ext}`;\n-}\ndiff --git a\/compiler\/forget\/packages\/playground\/components\/Editor\/Output.tsx b\/compiler\/forget\/packages\/playground\/components\/Editor\/Output.tsx\nindex efc8125eeb..c41d0e3e84 100644\n--- a\/compiler\/forget\/packages\/playground\/components\/Editor\/Output.tsx\n+++ b\/compiler\/forget\/packages\/playground\/components\/Editor\/Output.tsx\n@@ -15,9 +15,8 @@ import {\n } from \"babel-plugin-react-forget\";\n import { memo, useEffect, useMemo } from \"react\";\n import compile from \"..\/..\/lib\/compilerDriver\";\n-import { getSelectedFile, type Store } from \"..\/..\/lib\/stores\";\n+import type { Store } from \"..\/..\/lib\/stores\";\n import GraphView from \"..\/GraphView\";\n-import Preview from \"..\/Preview\";\n import { monacoOptions } from \".\/monacoOptions\";\n import HIRTabContent from \".\/HIRTabContent\";\n \n@@ -32,7 +31,7 @@ type Props = {\n \n function Output({ store, updateDiagnostics }: Props) {\n const { outputs, diagnostics } = useMemo(\n- () => compile(getSelectedFile(store), store.compilerFlags),\n+ () => compile(store.source, store.compilerFlags),\n [store]\n );\n useEffect(() => {\n@@ -42,7 +41,6 @@ function Output({ store, updateDiagnostics }: Props) {\n ,\n IR: ,\n HIR: ,\n CFG: ,\ndiff --git a\/compiler\/forget\/packages\/playground\/components\/Preview.tsx b\/compiler\/forget\/packages\/playground\/components\/Preview.tsx\ndeleted file mode 100644\nindex 0d502e28c4..0000000000\n--- a\/compiler\/forget\/packages\/playground\/components\/Preview.tsx\n+++ \/dev\/null\n@@ -1,137 +0,0 @@\n-\/*\n- * Copyright (c) Facebook, Inc. and its affiliates.\n- *\/\n-\n-import LightBulbIcon from \"@heroicons\/react\/solid\/LightBulbIcon\";\n-import { FormControlLabel, Switch } from \"@mui\/material\";\n-import clsx from \"clsx\";\n-import invariant from \"invariant\";\n-import { useEffect, useRef, useState } from \"react\";\n-import { useMountEffect } from \"..\/hooks\";\n-import { bundle, BundleResult, defaultBundleRes } from \"..\/lib\/moduleBundler\";\n-import { Store } from \"..\/lib\/stores\";\n-\n-const srcDoc = `\n-\n-\n- \n- \n- \n- \n-

dillon1000/react

Files changed