[sprout][QoL] remove isComponent annotation
--- quality of life improvement as this seemed to be confusing (oops, and thanks for the feedback!) We don't *really* need static annotations for whether a function returns jsx (e.g. should be rendered as a React element) or not (e.g. should be wrapped in a wrapper component. This PR adds check for returned jsx objects at runtime --- Tested by running diffing the output of `yarn sprout --verbose` between this PR and base.
Mofei Zhang committed
Aug 29, 2023 at 17:00 UTC
7930a213d27a075491db40c97395d91e1b4bc805
4 files changed
+15
-19
compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/useMemo-multiple-if-else.expect.md
-2
@@ -22,7 +22,6 @@ function Component(props) {
22
export const FIXTURE_ENTRYPOINT = {
23
fn: Component,
24
params: [{ a: 1, b: 2, cond2: false }],
25
- isComponent: true,
25
};
26
27
```
@@ -65,7 +64,6 @@ function Component(props) {
64
export const FIXTURE_ENTRYPOINT = {
65
fn: Component,
66
params: [{ a: 1, b: 2, cond2: false }],
68
- isComponent: true,
67
};
68
69
```
compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/useMemo-multiple-if-else.js
-1
@@ -18,5 +18,4 @@ function Component(props) {
18
export const FIXTURE_ENTRYPOINT = {
19
fn: Component,
20
params: [{ a: 1, b: 2, cond2: false }],
21
- isComponent: true,
21
};
compiler/packages/sprout/README.md
-5
@@ -52,10 +52,6 @@ type FixtureEntrypoint<T> = {
52
// (if `fn` is a react component, this should be an array
53
// with exactly one element -- props)
54
params: Array<T>,
55
- // True if fn returns jsx.
56
- // False if fn returns non-jsx values that can be serialized.
57
- // (e.g. regular objects, sets, maps)
58
- isComponent: boolean,
55
}
56
```
57
@@ -68,7 +64,6 @@ function MyComponent(props) {
64
export const FIXTURE_ENTRYPOINT = {
65
fn: MyComponent,
66
params: [{a: "hello ", b: "world"}],
71
- isComponent: true,
67
};
68
```
69
compiler/packages/sprout/src/runner-evaluator.ts
+15
-11
@@ -34,8 +34,14 @@ const PLACEHOLDER_VALUE = Symbol();
34
params: Array<any>;
35
}) {
36
const result = props.fn(...props.params);
37
-
38
- return toJSON(result);
37
+ // Hacky solution to determine whether the fixture returned jsx (which
38
+ // needs to passed through to React's runtime as-is) or a non-jsx value
39
+ // (which should be converted to a string).
40
+ if (typeof result === "object" && result != null && "$$typeof" in result) {
41
+ return result;
42
+ } else {
43
+ return toJSON(result);
44
+ }
45
};
46
47
function validateEntrypoint(entrypoint: object) {
@@ -43,14 +49,13 @@ function validateEntrypoint(entrypoint: object) {
49
return "missing `params` property";
50
} else if (!Array.isArray(entrypoint.params)) {
51
return "unexpected type for `params` property";
46
- } else if (!(`isComponent` in entrypoint)) {
47
- return "missing `isComponent` property";
48
- } else if (typeof entrypoint.isComponent !== "boolean") {
49
- return "unexpected type for `isComponent` property";
50
- } else if (!(`fn` in entrypoint)) {
52
+ } else if (!(`fn` in entrypoint) || entrypoint == null) {
53
return "missing `fn` property";
52
- } else if (!entrypoint.isComponent && typeof entrypoint.fn !== "function") {
53
- return "expected `fn` property to be a function";
54
+ } else if (
55
+ typeof entrypoint.fn !== "function" &&
56
+ typeof entrypoint.fn !== "object"
57
+ ) {
58
+ return "expected `fn` property to be a function or React object";
59
} else {
60
return null;
61
}
@@ -82,7 +87,6 @@ export function doEval(source: string): EvaluatorResult {
87
FIXTURE_ENTRYPOINT: {
88
fn: globalThis.placeholderFn,
89
params: [],
85
- isComponent: false,
90
},
91
};
92
let reachedInvoke = false;
@@ -106,7 +110,7 @@ export function doEval(source: string): EvaluatorResult {
110
};
111
}
112
109
- if (exports.FIXTURE_ENTRYPOINT.isComponent) {
113
+ if (typeof exports.FIXTURE_ENTRYPOINT.fn === 'object') {
114
// try to run fixture as a react component
115
const result = render(
116
React.createElement(