[compiler][playground] create playground API in pipeline, and allow spaces in pass names
Summary: 1. Minor refactor to provide a stable API for calling the compiler from the playground 2. Allows spaces in pass names without breaking the appearance of the playground by replacing spaces with in pass tabs ghstack-source-id: 12a43ad86c16c0e21f3e6b4086d531cdefd893eb Pull Request resolved: https://github.com/facebook/react/pull/30988
Mike Vitousek committed
Sep 17, 2024 at 11:05 UTC
7b56a542987890f618eeda4e4906fbf1f1df2213
4 files changed
+20
-11
compiler/apps/playground/components/Editor/EditorImpl.tsx
+3
-9
@@ -5,7 +5,7 @@
5
* LICENSE file in the root directory of this source tree.
6
*/
7
8
-import {parse as babelParse, ParserPlugin} from '@babel/parser';
8
+import {parse as babelParse} from '@babel/parser';
9
import * as HermesParser from 'hermes-parser';
10
import traverse, {NodePath} from '@babel/traverse';
11
import * as t from '@babel/types';
@@ -15,10 +15,8 @@ import {
15
Effect,
16
ErrorSeverity,
17
parseConfigPragma,
18
- printHIR,
19
- printReactiveFunction,
20
- run,
18
ValueKind,
19
+ runPlayground,
20
type Hook,
21
} from 'babel-plugin-react-compiler/src';
22
import {type ReactFunctionType} from 'babel-plugin-react-compiler/src/HIR/Environment';
@@ -214,17 +212,13 @@ function compile(source: string): [CompilerOutput, 'flow' | 'typescript'] {
212
213
for (const fn of parseFunctions(source, language)) {
214
const id = withIdentifier(getFunctionIdentifier(fn));
217
- for (const result of run(
215
+ for (const result of runPlayground(
216
fn,
217
{
218
...config,
219
customHooks: new Map([...COMMON_HOOKS]),
220
},
221
getReactFunctionType(id),
224
- '_c',
225
- null,
226
- null,
227
- null,
222
)) {
223
const fnName = id.name;
224
switch (result.kind) {
compiler/apps/playground/components/TabbedWindow.tsx
+5
-2
@@ -69,6 +69,9 @@ function TabbedWindowItem({
69
setTabsOpen(nextState);
70
}, [tabsOpen, name, setTabsOpen]);
71
72
+ // Replace spaces with non-breaking spaces
73
+ const displayName = name.replace(/ /g, '\u00A0');
74
+
75
return (
76
<div key={name} className="flex flex-row">
77
{isShow ? (
@@ -80,7 +83,7 @@ function TabbedWindowItem({
83
className={`p-4 duration-150 ease-in border-b cursor-pointer border-grey-200 ${
84
hasChanged ? 'font-bold' : 'font-light'
85
} text-secondary hover:text-link`}>
83
- - {name}
86
+ - {displayName}
87
</h2>
88
{tabs.get(name) ?? <div>No output for {name}</div>}
89
</Resizable>
@@ -94,7 +97,7 @@ function TabbedWindowItem({
97
className={`flex-grow-0 w-5 transition-colors duration-150 ease-in ${
98
hasChanged ? 'font-bold' : 'font-light'
99
} text-secondary hover:text-link`}>
97
- {name}
100
+ {displayName}
101
</button>
102
</div>
103
)}
compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Pipeline.ts
+11
@@ -554,3 +554,14 @@ export function log(value: CompilerPipelineValue): CompilerPipelineValue {
554
}
555
return value;
556
}
557
+
558
+export function* runPlayground(
559
+ func: NodePath<
560
+ t.FunctionDeclaration | t.ArrowFunctionExpression | t.FunctionExpression
561
+ >,
562
+ config: EnvironmentConfig,
563
+ fnType: ReactFunctionType,
564
+): Generator<CompilerPipelineValue, CodegenFunction> {
565
+ const ast = yield* run(func, config, fnType, '_c', null, null, null);
566
+ return ast;
567
+}
compiler/packages/babel-plugin-react-compiler/src/index.ts
+1
@@ -18,6 +18,7 @@ export {
18
compileProgram,
19
parsePluginOptions,
20
run,
21
+ runPlayground,
22
OPT_OUT_DIRECTIVES,
23
type CompilerPipelineValue,
24
type PluginOptions,