Add common (Relay) hooks to playground environment
This aligns the playground configuration with our internal compiler configuration to make it easier to repro compilation issues on playground. There is a bug that doesn't repro right now and i suspect it's because of different hooks being configured. Test plan: Before: playground output has no obvious bugs, but is different than internal compilation output where the bug occurs After: playground output matches internal compilation output w the bug
Joe Savona committed
Apr 18, 2023 at 15:29 UTC
746c1dbed581ad128f0ea22b8fe20267391e1c2f
4 files changed
+57
-10
compiler/forget/packages/playground/components/Editor/index.tsx
+54
-1
@@ -9,9 +9,12 @@ import { parse, ParserPlugin } from "@babel/parser";
9
import traverse, { NodePath } from "@babel/traverse";
10
import * as t from "@babel/types";
11
import {
12
+ Effect,
13
+ Hook,
14
printHIR,
15
printReactiveFunction,
16
run,
17
+ ValueKind,
18
} from "babel-plugin-react-forget";
19
import clsx from "clsx";
20
import invariant from "invariant";
@@ -67,6 +70,54 @@ function parseFunctions(
70
return items;
71
}
72
73
+const COMMON_HOOKS: Array<[string, Hook]> = [
74
+ [
75
+ "useFragment",
76
+ {
77
+ name: "useFragment",
78
+ kind: "Custom",
79
+ valueKind: ValueKind.Frozen,
80
+ effectKind: Effect.Freeze,
81
+ },
82
+ ],
83
+ [
84
+ "usePaginationFragment",
85
+ {
86
+ name: "usePaginationFragment",
87
+ kind: "Custom",
88
+ valueKind: ValueKind.Frozen,
89
+ effectKind: Effect.Freeze,
90
+ },
91
+ ],
92
+ [
93
+ "useRefetchableFragment",
94
+ {
95
+ name: "useRefetchableFragment",
96
+ kind: "Custom",
97
+ valueKind: ValueKind.Frozen,
98
+ effectKind: Effect.Freeze,
99
+ },
100
+ ],
101
+ [
102
+ "useLazyLoadQuery",
103
+ {
104
+ name: "useLazyLoadQuery",
105
+ kind: "Custom",
106
+ valueKind: ValueKind.Frozen,
107
+ effectKind: Effect.Freeze,
108
+ },
109
+ ],
110
+ [
111
+ "usePreloadedQuery",
112
+ {
113
+ name: "usePreloadedQuery",
114
+ kind: "Custom",
115
+ valueKind: ValueKind.Frozen,
116
+ effectKind: Effect.Freeze,
117
+ },
118
+ ],
119
+];
120
+
121
function compile(source: string): CompilerOutput {
122
const results = new Map<string, PrintedCompilerPipelineValue[]>();
123
const upsert = (result: PrintedCompilerPipelineValue) => {
@@ -79,7 +130,9 @@ function compile(source: string): CompilerOutput {
130
};
131
try {
132
for (const fn of parseFunctions(source)) {
82
- for (const result of run(fn)) {
133
+ for (const result of run(fn, {
134
+ customHooks: new Map([...COMMON_HOOKS]),
135
+ })) {
136
const fnName = fn.node.id?.name ?? null;
137
switch (result.kind) {
138
case "ast": {
compiler/forget/packages/playground/next-env.d.ts
-7
@@ -1,10 +1,3 @@
1
-/**
2
- * Copyright (c) Meta Platforms, Inc. and affiliates.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- */
7
-
1
/// <reference types="next" />
2
/// <reference types="next/image-types/global" />
3
compiler/forget/src/HIR/index.ts
+1
@@ -15,6 +15,7 @@ export {
15
reversePostorderBlocks,
16
shrink,
17
} from "./HIRBuilder";
18
+export { Hook } from "./Hooks";
19
export { mergeConsecutiveBlocks } from "./MergeConsecutiveBlocks";
20
export { printFunction, printHIR } from "./PrintHIR";
21
export { validateConsistentIdentifiers } from "./ValidateConsistentIdentifiers";
compiler/forget/src/index.ts
+2
-2
@@ -11,8 +11,8 @@ export {
11
CompilerErrorDetail,
12
ErrorSeverity,
13
} from "./CompilerError";
14
-export { compile, CompilerPipelineValue, run } from "./CompilerPipeline";
15
-export { Effect, printHIR, ValueKind } from "./HIR";
14
+export { CompilerPipelineValue, compile, run } from "./CompilerPipeline";
15
+export { Effect, Hook, ValueKind, printHIR } from "./HIR";
16
export { printReactiveFunction } from "./ReactiveScopes";
17
18
declare global {