[repro] Repro for fbt preserve whitespace bug
Current sprout output (if you remove the line in `SproutTodoFilter`): ``` Failures: FAIL: bug-fbt-preserve-whitespace Difference in forget and non-forget results. Expected result: { "kind": "ok", "value": "Before text hello world", "logs": [] } Found: { "kind": "ok", "value": "Before texthello world", "logs": [] } ``` `fbt` transforms run before jsx ones, so our lowering should also account for [fbt's whitespace rules](https://github.com/facebook/fbt/blob/main/packages/babel-plugin-fbt/src/fbt-nodes/FbtImplicitParamNode.js#L230-L233) in `BuildHIR:trimJsxText`.
Mofei Zhang committed
Nov 9, 2023 at 18:55 UTC
6c327b0f3ed7be5c39f36730b9b1e885ced4561c
5 files changed
+188
compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/bug-fbt-preserve-whitespace.expect.md
new
+65
@@ -0,0 +1,65 @@
1
+
2
+## Input
3
+
4
+```javascript
5
+import fbt from "fbt";
6
+/**
7
+ * TODO: remove this from SproutTodoFilter when fixed.
8
+ */
9
+
10
+function Component({ value }: { value: string }) {
11
+ return (
12
+ <fbt desc="descdesc">
13
+ Before text
14
+ <fbt:param name="paramName">{value}</fbt:param>
15
+ </fbt>
16
+ );
17
+}
18
+
19
+export const FIXTURE_ENTRYPOINT = {
20
+ fn: Component,
21
+ params: [{ value: "hello world" }],
22
+};
23
+
24
+```
25
+
26
+## Code
27
+
28
+```javascript
29
+import { unstable_useMemoCache as useMemoCache } from "react";
30
+import fbt from "fbt";
31
+/**
32
+ * TODO: remove this from SproutTodoFilter when fixed.
33
+ */
34
+
35
+function Component(t11) {
36
+ const $ = useMemoCache(2);
37
+ const { value } = t11;
38
+ let t0;
39
+ if ($[0] !== value) {
40
+ t0 = fbt._(
41
+ "Before text{paramName}",
42
+ [
43
+ fbt._param(
44
+ "paramName",
45
+
46
+ value
47
+ ),
48
+ ],
49
+ { hk: "3DIRxJ" }
50
+ );
51
+ $[0] = value;
52
+ $[1] = t0;
53
+ } else {
54
+ t0 = $[1];
55
+ }
56
+ return t0;
57
+}
58
+
59
+export const FIXTURE_ENTRYPOINT = {
60
+ fn: Component,
61
+ params: [{ value: "hello world" }],
62
+};
63
+
64
+```
65
+
\ No newline at end of file
compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/bug-fbt-preserve-whitespace.tsx
new
+18
@@ -0,0 +1,18 @@
1
+import fbt from "fbt";
2
+/**
3
+ * TODO: remove this from SproutTodoFilter when fixed.
4
+ */
5
+
6
+function Component({ value }: { value: string }) {
7
+ return (
8
+ <fbt desc="descdesc">
9
+ Before text
10
+ <fbt:param name="paramName">{value}</fbt:param>
11
+ </fbt>
12
+ );
13
+}
14
+
15
+export const FIXTURE_ENTRYPOINT = {
16
+ fn: Component,
17
+ params: [{ value: "hello world" }],
18
+};
compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/jsx-preserve-whitespace.expect.md
new
+80
@@ -0,0 +1,80 @@
1
+
2
+## Input
3
+
4
+```javascript
5
+import { StaticText1 } from "shared-runtime";
6
+
7
+function Component() {
8
+ return (
9
+ <div>
10
+ Before text
11
+ <StaticText1 />
12
+ Middle text
13
+ <StaticText1>
14
+ Inner before text
15
+ <StaticText1 />
16
+ Inner middle text
17
+ <StaticText1 />
18
+ Inner after text
19
+ </StaticText1>
20
+ After text
21
+ </div>
22
+ );
23
+}
24
+
25
+export const FIXTURE_ENTRYPOINT = {
26
+ fn: Component,
27
+ params: [],
28
+};
29
+
30
+```
31
+
32
+## Code
33
+
34
+```javascript
35
+import { unstable_useMemoCache as useMemoCache } from "react";
36
+import { StaticText1 } from "shared-runtime";
37
+
38
+function Component() {
39
+ const $ = useMemoCache(3);
40
+ let t0;
41
+ if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
42
+ t0 = <StaticText1 />;
43
+ $[0] = t0;
44
+ } else {
45
+ t0 = $[0];
46
+ }
47
+ let t1;
48
+ if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
49
+ t1 = <StaticText1 />;
50
+ $[1] = t1;
51
+ } else {
52
+ t1 = $[1];
53
+ }
54
+ let t2;
55
+ if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
56
+ t2 = (
57
+ <div>
58
+ Before text{t0}Middle text
59
+ <StaticText1>
60
+ Inner before text{t1}Inner middle text
61
+ <StaticText1 />
62
+ Inner after text
63
+ </StaticText1>
64
+ After text
65
+ </div>
66
+ );
67
+ $[2] = t2;
68
+ } else {
69
+ t2 = $[2];
70
+ }
71
+ return t2;
72
+}
73
+
74
+export const FIXTURE_ENTRYPOINT = {
75
+ fn: Component,
76
+ params: [],
77
+};
78
+
79
+```
80
+
\ No newline at end of file
compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/jsx-preserve-whitespace.tsx
new
+24
@@ -0,0 +1,24 @@
1
+import { StaticText1 } from "shared-runtime";
2
+
3
+function Component() {
4
+ return (
5
+ <div>
6
+ Before text
7
+ <StaticText1 />
8
+ Middle text
9
+ <StaticText1>
10
+ Inner before text
11
+ <StaticText1 />
12
+ Inner middle text
13
+ <StaticText1 />
14
+ Inner after text
15
+ </StaticText1>
16
+ After text
17
+ </div>
18
+ );
19
+}
20
+
21
+export const FIXTURE_ENTRYPOINT = {
22
+ fn: Component,
23
+ params: [],
24
+};
compiler/packages/sprout/src/SproutTodoFilter.ts
+1
@@ -469,6 +469,7 @@ const skipFilter = new Set([
469
470
// Bug in Forget output
471
"todo-rename-source-variables",
472
+ "bug-fbt-preserve-whitespace",
473
474
// Tested e2e in forget-feedback repo
475
"userspace-use-memo-cache",