[compiler:playground] Resizable tabs (#29133)
## Summary Every tab wraps the text around but there is no way to resize it. It was also hard to use the source map tab. It doesn't occupy the full height nor is the tab resizable. So I made all the tabs resizable. > Also, > * make the source map tab occupy full height > * make it a teeny tiny bit easier to work with the compiler playground (especially source map) ## How did you test this change? https://github.com/facebook/react/assets/91976421/cdec30e8-cadb-4958-8786-31c54ea83bd6 Signed-off-by: abizek <abishekilango@protonmail.com>
Abishek Ilango committed
May 18, 2024 at 01:01 UTC
541e3c516d22cd095c4205fdb87328f6532de5fc
6 files changed
+19
-8
compiler/apps/playground/components/Editor/EditorImpl.tsx
-1
@@ -320,7 +320,6 @@ export default function Editor() {
320
<>
321
<div className="relative flex basis top-14">
322
<div
323
- style={{ minWidth: 650 }}
323
className={clsx("relative sm:basis-1/4")}
324
>
325
<Input
compiler/apps/playground/components/Editor/Input.tsx
+9
-4
@@ -10,6 +10,7 @@ import { CompilerErrorDetail } from "babel-plugin-react-compiler/src";
10
import invariant from "invariant";
11
import type { editor } from "monaco-editor";
12
import * as monaco from "monaco-editor";
13
+import { Resizable } from "re-resizable";
14
import { useEffect, useState } from "react";
15
import { renderReactCompilerMarkers } from "../../lib/reactCompilerMonacoDiagnostics";
16
import { useStore, useStoreDispatch } from "../StoreContext";
@@ -102,9 +103,13 @@ export default function Input({ errors }: Props) {
103
104
return (
105
<div className="relative flex flex-col flex-none border-r border-gray-200">
105
- {/* Restrict MonacoEditor's height, since the config autoLayout:true
106
- will grow the editor to fit within parent element */}
107
- <div className="w-full" style={{ height: "calc(100vh - 3.5rem)" }}>
106
+ <Resizable
107
+ minWidth={650}
108
+ enable={{ right: true }}
109
+ // Restrict MonacoEditor's height, since the config autoLayout:true
110
+ // will grow the editor to fit within parent element
111
+ className="!h-[calc(100vh_-_3.5rem)]"
112
+ >
113
<MonacoEditor
114
path={"index.js"}
115
// .js and .jsx files are specified to be TS so that Monaco can actually
@@ -116,7 +121,7 @@ export default function Input({ errors }: Props) {
121
onChange={handleChange}
122
options={monacoOptions}
123
/>
119
- </div>
124
+ </Resizable>
125
</div>
126
);
127
}
compiler/apps/playground/components/Editor/Output.tsx
+1
-1
@@ -130,7 +130,7 @@ async function tabify(source: string, compilerOutput: CompilerOutput) {
130
<>
131
<iframe
132
src={sourceMapUrl}
133
- className="w-full h-96"
133
+ className="w-full h-monaco_small sm:h-monaco"
134
title="Generated Code"
135
/>
136
</>,
compiler/apps/playground/components/TabbedWindow.tsx
+3
-2
@@ -5,6 +5,7 @@
5
* LICENSE file in the root directory of this source tree.
6
*/
7
8
+import { Resizable } from "re-resizable";
9
import React, { useCallback } from "react";
10
11
type TabsRecord = Map<string, React.ReactNode>;
@@ -68,7 +69,7 @@ function TabbedWindowItem({
69
return (
70
<div key={name} className="flex flex-row">
71
{isShow ? (
71
- <div className="border-r" style={{ minWidth: 550, overflow: "hidden" }}>
72
+ <Resizable className="border-r" minWidth={550} enable={{ right: true }}>
73
<h2
74
title="Minimize tab"
75
aria-label="Minimize tab"
@@ -78,7 +79,7 @@ function TabbedWindowItem({
79
- {name}
80
</h2>
81
{tabs.get(name) ?? <div>No output for {name}</div>}
81
- </div>
82
+ </Resizable>
83
) : (
84
<div className="relative items-center h-full px-1 py-6 align-middle border-r border-grey-200">
85
<button
compiler/apps/playground/package.json
+1
@@ -33,6 +33,7 @@
33
"notistack": "^3.0.0-alpha.7",
34
"prettier": "3.0.3",
35
"pretty-format": "^29.3.1",
36
+ "re-resizable": "^6.9.16",
37
"react": "18.2.0",
38
"react-dom": "18.2.0",
39
"react-compiler-runtime": "*"
compiler/yarn.lock
+5
@@ -8427,6 +8427,11 @@ randombytes@^2.1.0:
8427
dependencies:
8428
safe-buffer "^5.1.0"
8429
8430
+re-resizable@^6.9.16:
8431
+ version "6.9.16"
8432
+ resolved "https://registry.yarnpkg.com/re-resizable/-/re-resizable-6.9.16.tgz#d040a3ba9ccb25a3cc85b7622d4eafdee48cf2c2"
8433
+ integrity sha512-D9+ofwgPQRC6PL6cwavCZO9MUR8TKKxV1nHjbutSdNaFHK9v5k8m6DcESMXrw1+mRJn7fBHJRhZpa7EQ1ZWEEA==
8434
+
8435
react-dom@18.2.0:
8436
version "18.2.0"
8437
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"