Fix hook pattern matching for custom hooks
Joe Savona committed
Feb 7, 2024 at 17:34 UTC
f0cffef0a22f8c1b78d656001af6b12432821f7c
3 files changed
+45
-20
compiler/packages/babel-plugin-react-forget/src/HIR/Environment.ts
+1
-1
@@ -476,7 +476,7 @@ export class Environment {
476
let resolvedGlobal: Global | null = this.#globals.get(resolvedName) ?? null;
477
if (resolvedGlobal === null) {
478
// Hack, since we don't track module level declarations and imports
479
- if (isHookName(name)) {
479
+ if (isHookName(resolvedName)) {
480
return this.#getCustomHookType();
481
} else {
482
log(() => `Undefined global '${name}'`);
compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/hooks-with-prefix.expect.md
+33
-16
@@ -2,20 +2,28 @@
2
## Input
3
4
```javascript
5
-// @hookPattern:"React\$(\w+)"
5
+// @hookPattern:".*\b(use[^$]+)$"
6
7
import * as React from "react";
8
-import { makeArray } from "shared-runtime";
8
+import { makeArray, useHook } from "shared-runtime";
9
10
const React$useState = React.useState;
11
const React$useMemo = React.useMemo;
12
+const Internal$Reassigned$useHook = useHook;
13
14
function Component() {
15
const [state, setState] = React$useState(0);
16
+ const object = Internal$Reassigned$useHook();
17
+ const json = JSON.stringify(object);
18
const doubledArray = React$useMemo(() => {
19
return makeArray(state);
20
}, [state]);
18
- return <div>{doubledArray.join("")}</div>;
21
+ return (
22
+ <div>
23
+ {doubledArray.join("")}
24
+ {json}
25
+ </div>
26
+ );
27
}
28
29
export const FIXTURE_ENTRYPOINT = {
@@ -28,38 +36,47 @@ export const FIXTURE_ENTRYPOINT = {
36
## Code
37
38
```javascript
31
-import { unstable_useMemoCache as useMemoCache } from "react"; // @hookPattern:"React\$(\w+)"
39
+import { unstable_useMemoCache as useMemoCache } from "react"; // @hookPattern:".*\b(use[^$]+)$"
40
41
import * as React from "react";
34
-import { makeArray } from "shared-runtime";
42
+import { makeArray, useHook } from "shared-runtime";
43
44
const React$useState = React.useState;
45
const React$useMemo = React.useMemo;
46
+const Internal$Reassigned$useHook = useHook;
47
48
function Component() {
40
- const $ = useMemoCache(5);
49
+ const $ = useMemoCache(6);
50
const [state] = React$useState(0);
42
- let t15;
51
+ const object = Internal$Reassigned$useHook();
52
+ const json = JSON.stringify(object);
53
+ let t25;
54
let t0;
55
if ($[0] !== state) {
45
- t15 = makeArray(state);
46
- const doubledArray = t15;
56
+ t25 = makeArray(state);
57
+ const doubledArray = t25;
58
59
t0 = doubledArray.join("");
60
$[0] = state;
61
$[1] = t0;
51
- $[2] = t15;
62
+ $[2] = t25;
63
} else {
64
t0 = $[1];
54
- t15 = $[2];
65
+ t25 = $[2];
66
}
67
let t1;
57
- if ($[3] !== t0) {
58
- t1 = <div>{t0}</div>;
68
+ if ($[3] !== t0 || $[4] !== json) {
69
+ t1 = (
70
+ <div>
71
+ {t0}
72
+ {json}
73
+ </div>
74
+ );
75
$[3] = t0;
60
- $[4] = t1;
76
+ $[4] = json;
77
+ $[5] = t1;
78
} else {
62
- t1 = $[4];
79
+ t1 = $[5];
80
}
81
return t1;
82
}
@@ -72,4 +89,4 @@ export const FIXTURE_ENTRYPOINT = {
89
```
90
91
### Eval output
75
-(kind: ok) <div>0</div>
\ No newline at end of file
92
+(kind: ok) <div>0{"a":0,"b":"value1","c":true}</div>
\ No newline at end of file
compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/hooks-with-prefix.js
+11
-3
@@ -1,17 +1,25 @@
1
-// @hookPattern:"React\$(\w+)"
1
+// @hookPattern:".*\b(use[^$]+)$"
2
3
import * as React from "react";
4
-import { makeArray } from "shared-runtime";
4
+import { makeArray, useHook } from "shared-runtime";
5
6
const React$useState = React.useState;
7
const React$useMemo = React.useMemo;
8
+const Internal$Reassigned$useHook = useHook;
9
10
function Component() {
11
const [state, setState] = React$useState(0);
12
+ const object = Internal$Reassigned$useHook();
13
+ const json = JSON.stringify(object);
14
const doubledArray = React$useMemo(() => {
15
return makeArray(state);
16
}, [state]);
14
- return <div>{doubledArray.join("")}</div>;
17
+ return (
18
+ <div>
19
+ {doubledArray.join("")}
20
+ {json}
21
+ </div>
22
+ );
23
}
24
25
export const FIXTURE_ENTRYPOINT = {