@samitouri / QOS-React-1 / commits / ab0f698585

More tests for fbt whitespace handling

I experimented with more variations but prettier collapses most of them: any run of consecutive whitespace within a jsxtext node will get collapsed into a single space, for example. So the main difference in practice is whether a jsxtext node (preceding a value) has a trailing space/newline or not: ``` Text <fbt:param /> Text // vs Text<fbt:param />Text ``` which we now have tests for.

Joe Savona committed Nov 10, 2023 at 11:21 UTC ab0f6985852219ec5e708b694f5da44e96c3c4c7
8 files changed +280
compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/fbt/fbt-no-whitespace-btw-text-and-param.expect.md new
+54
@@ -0,0 +1,54 @@
1 +
2 +## Input
3 +
4 +```javascript
5 +import fbt from "fbt";
6 +
7 +const _ = fbt;
8 +function Component({ value }: { value: string }) {
9 + return (
10 + <fbt desc="descdesc">
11 + Before text<fbt:param name="paramName">{value}</fbt:param>After text
12 + </fbt>
13 + );
14 +}
15 +
16 +export const FIXTURE_ENTRYPOINT = {
17 + fn: Component,
18 + params: [{ value: "hello world" }],
19 +};
20 +
21 +```
22 +
23 +## Code
24 +
25 +```javascript
26 +import { unstable_useMemoCache as useMemoCache } from "react";
27 +import fbt from "fbt";
28 +
29 +const _ = fbt;
30 +function Component(t12) {
31 + const $ = useMemoCache(2);
32 + const { value } = t12;
33 + let t0;
34 + if ($[0] !== value) {
35 + t0 = fbt._(
36 + "Before text{paramName}After text",
37 + [fbt._param("paramName", value)],
38 + { hk: "aKEGX" }
39 + );
40 + $[0] = value;
41 + $[1] = t0;
42 + } else {
43 + t0 = $[1];
44 + }
45 + return t0;
46 +}
47 +
48 +export const FIXTURE_ENTRYPOINT = {
49 + fn: Component,
50 + params: [{ value: "hello world" }],
51 +};
52 +
53 +```
54 +
\ No newline at end of file
compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/fbt/fbt-no-whitespace-btw-text-and-param.tsx new
+15
@@ -0,0 +1,15 @@
1 +import fbt from "fbt";
2 +
3 +const _ = fbt;
4 +function Component({ value }: { value: string }) {
5 + return (
6 + <fbt desc="descdesc">
7 + Before text<fbt:param name="paramName">{value}</fbt:param>After text
8 + </fbt>
9 + );
10 +}
11 +
12 +export const FIXTURE_ENTRYPOINT = {
13 + fn: Component,
14 + params: [{ value: "hello world" }],
15 +};
compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/fbt/fbt-single-space-btw-param-and-text.expect.md new
+54
@@ -0,0 +1,54 @@
1 +
2 +## Input
3 +
4 +```javascript
5 +import fbt from "fbt";
6 +
7 +const _ = fbt;
8 +function Component({ value }: { value: string }) {
9 + return (
10 + <fbt desc="descdesc">
11 + Before text <fbt:param name="paramName">{value}</fbt:param> after text
12 + </fbt>
13 + );
14 +}
15 +
16 +export const FIXTURE_ENTRYPOINT = {
17 + fn: Component,
18 + params: [{ value: "hello world" }],
19 +};
20 +
21 +```
22 +
23 +## Code
24 +
25 +```javascript
26 +import { unstable_useMemoCache as useMemoCache } from "react";
27 +import fbt from "fbt";
28 +
29 +const _ = fbt;
30 +function Component(t12) {
31 + const $ = useMemoCache(2);
32 + const { value } = t12;
33 + let t0;
34 + if ($[0] !== value) {
35 + t0 = fbt._(
36 + "Before text {paramName} after text",
37 + [fbt._param("paramName", value)],
38 + { hk: "26pxNm" }
39 + );
40 + $[0] = value;
41 + $[1] = t0;
42 + } else {
43 + t0 = $[1];
44 + }
45 + return t0;
46 +}
47 +
48 +export const FIXTURE_ENTRYPOINT = {
49 + fn: Component,
50 + params: [{ value: "hello world" }],
51 +};
52 +
53 +```
54 +
\ No newline at end of file
compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/fbt/fbt-single-space-btw-param-and-text.tsx new
+15
@@ -0,0 +1,15 @@
1 +import fbt from "fbt";
2 +
3 +const _ = fbt;
4 +function Component({ value }: { value: string }) {
5 + return (
6 + <fbt desc="descdesc">
7 + Before text <fbt:param name="paramName">{value}</fbt:param> after text
8 + </fbt>
9 + );
10 +}
11 +
12 +export const FIXTURE_ENTRYPOINT = {
13 + fn: Component,
14 + params: [{ value: "hello world" }],
15 +};
compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/fbt/fbt-whitespace-around-param-value.expect.md new
+54
@@ -0,0 +1,54 @@
1 +
2 +## Input
3 +
4 +```javascript
5 +import fbt from "fbt";
6 +
7 +const _ = fbt;
8 +function Component({ value }: { value: string }) {
9 + return (
10 + <fbt desc="descdesc">
11 + Before text <fbt:param name="paramName"> {value} </fbt:param> after text
12 + </fbt>
13 + );
14 +}
15 +
16 +export const FIXTURE_ENTRYPOINT = {
17 + fn: Component,
18 + params: [{ value: "hello world" }],
19 +};
20 +
21 +```
22 +
23 +## Code
24 +
25 +```javascript
26 +import { unstable_useMemoCache as useMemoCache } from "react";
27 +import fbt from "fbt";
28 +
29 +const _ = fbt;
30 +function Component(t14) {
31 + const $ = useMemoCache(2);
32 + const { value } = t14;
33 + let t0;
34 + if ($[0] !== value) {
35 + t0 = fbt._(
36 + "Before text {paramName} after text",
37 + [fbt._param("paramName", value)],
38 + { hk: "26pxNm" }
39 + );
40 + $[0] = value;
41 + $[1] = t0;
42 + } else {
43 + t0 = $[1];
44 + }
45 + return t0;
46 +}
47 +
48 +export const FIXTURE_ENTRYPOINT = {
49 + fn: Component,
50 + params: [{ value: "hello world" }],
51 +};
52 +
53 +```
54 +
\ No newline at end of file
compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/fbt/fbt-whitespace-around-param-value.tsx new
+15
@@ -0,0 +1,15 @@
1 +import fbt from "fbt";
2 +
3 +const _ = fbt;
4 +function Component({ value }: { value: string }) {
5 + return (
6 + <fbt desc="descdesc">
7 + Before text <fbt:param name="paramName"> {value} </fbt:param> after text
8 + </fbt>
9 + );
10 +}
11 +
12 +export const FIXTURE_ENTRYPOINT = {
13 + fn: Component,
14 + params: [{ value: "hello world" }],
15 +};
compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/fbt/fbt-whitespace-within-text.expect.md new
+56
@@ -0,0 +1,56 @@
1 +
2 +## Input
3 +
4 +```javascript
5 +import fbt from "fbt";
6 +
7 +const _ = fbt;
8 +function Component({ value }: { value: string }) {
9 + return (
10 + <fbt desc="descdesc">
11 + Before text <fbt:param name="paramName">{value}</fbt:param> after text
12 + more text and more and more and more and more and more and more and more
13 + and more and blah blah blah blah
14 + </fbt>
15 + );
16 +}
17 +
18 +export const FIXTURE_ENTRYPOINT = {
19 + fn: Component,
20 + params: [{ value: "hello world" }],
21 +};
22 +
23 +```
24 +
25 +## Code
26 +
27 +```javascript
28 +import { unstable_useMemoCache as useMemoCache } from "react";
29 +import fbt from "fbt";
30 +
31 +const _ = fbt;
32 +function Component(t12) {
33 + const $ = useMemoCache(2);
34 + const { value } = t12;
35 + let t0;
36 + if ($[0] !== value) {
37 + t0 = fbt._(
38 + "Before text {paramName} after text more text and more and more and more and more and more and more and more and more and blah blah blah blah",
39 + [fbt._param("paramName", value)],
40 + { hk: "24ZPpO" }
41 + );
42 + $[0] = value;
43 + $[1] = t0;
44 + } else {
45 + t0 = $[1];
46 + }
47 + return t0;
48 +}
49 +
50 +export const FIXTURE_ENTRYPOINT = {
51 + fn: Component,
52 + params: [{ value: "hello world" }],
53 +};
54 +
55 +```
56 +
\ No newline at end of file
compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/fbt/fbt-whitespace-within-text.tsx new
+17
@@ -0,0 +1,17 @@
1 +import fbt from "fbt";
2 +
3 +const _ = fbt;
4 +function Component({ value }: { value: string }) {
5 + return (
6 + <fbt desc="descdesc">
7 + Before text <fbt:param name="paramName">{value}</fbt:param> after text
8 + more text and more and more and more and more and more and more and more
9 + and more and blah blah blah blah
10 + </fbt>
11 + );
12 +}
13 +
14 +export const FIXTURE_ENTRYPOINT = {
15 + fn: Component,
16 + params: [{ value: "hello world" }],
17 +};