From 702e1be96eeb721ae1df0c98b6e6c3af1bf0e429 Mon Sep 17 00:00:00 2001 From: Joe Savona Date: Mon, 17 Jun 2024 08:27:03 -0700 Subject: [PATCH] Update name to `useFormStatus` --- .../src/HIR/Globals.ts | 8 +++--- .../src/HIR/HIR.ts | 12 +++++---- .../src/HIR/ObjectShape.ts | 10 +++---- ...patch-considered-as-non-reactive.expect.md | 16 ++++-------- ...patch-considered-as-non-reactive.expect.md | 26 +++++++------------ ...ate-dispatch-considered-as-non-reactive.js | 4 +-- 6 files changed, 33 insertions(+), 43 deletions(-) diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/Globals.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/Globals.ts index 6a195ca6fd00e..0500844cb32b0 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/HIR/Globals.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/Globals.ts @@ -11,7 +11,7 @@ import { BuiltInArrayId, BuiltInUseActionStateId, BuiltInUseEffectHookId, - BuiltInUseFormStateId, + BuiltInUseFormStatusId, BuiltInUseInsertionEffectHookId, BuiltInUseLayoutEffectHookId, BuiltInUseOperatorId, @@ -281,13 +281,13 @@ const REACT_APIS: Array<[string, BuiltInType]> = [ }), ], [ - "useFormState", + "useFormStatus", addHook(DEFAULT_SHAPES, { positionalParams: [], restParam: Effect.Freeze, - returnType: { kind: "Object", shapeId: BuiltInUseFormStateId }, + returnType: { kind: "Object", shapeId: BuiltInUseFormStatusId }, calleeEffect: Effect.Read, - hookKind: "useFormState", + hookKind: "useFormStatus", returnValueKind: ValueKind.Frozen, returnValueReason: ValueReason.State, }), diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/HIR.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/HIR.ts index 0460af7561aba..f4c7a00ca334e 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/HIR/HIR.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/HIR.ts @@ -1555,13 +1555,15 @@ export function isSetActionStateType(id: Identifier): boolean { ); } -export function isUseFormStateType(id: Identifier): boolean { - return id.type.kind === "Object" && id.type.shapeId === "BuiltInUseFormState"; +export function isUseFormStatusType(id: Identifier): boolean { + return ( + id.type.kind === "Object" && id.type.shapeId === "BuiltInUseFormStatus" + ); } -export function isSetFormStateType(id: Identifier): boolean { +export function isSetFormStatusType(id: Identifier): boolean { return ( - id.type.kind === "Function" && id.type.shapeId === "BuiltInSetFormState" + id.type.kind === "Function" && id.type.shapeId === "BuiltInSetFormStatus" ); } @@ -1577,7 +1579,7 @@ export function isStableType(id: Identifier): boolean { return ( isSetStateType(id) || isSetActionStateType(id) || - isSetFormStateType(id) || + isSetFormStatusType(id) || isDispatcherType(id) ); } diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/ObjectShape.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/ObjectShape.ts index a0c8f74043e50..09d54a71e814f 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/HIR/ObjectShape.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/ObjectShape.ts @@ -119,7 +119,7 @@ export type HookKind = | "useContext" | "useState" | "useActionState" - | "useFormState" + | "useFormStatus" | "useReducer" | "useRef" | "useEffect" @@ -199,8 +199,8 @@ export const BuiltInUseStateId = "BuiltInUseState"; export const BuiltInSetStateId = "BuiltInSetState"; export const BuiltInUseActionStateId = "BuiltInUseActionState"; export const BuiltInSetActionStateId = "BuiltInSetActionState"; -export const BuiltInUseFormStateId = "BuiltInUseFormState"; -export const BuiltInSetFormStateId = "BuiltInSetFormState"; +export const BuiltInUseFormStatusId = "BuiltInUseFormStatus"; +export const BuiltInSetFormStatusId = "BuiltInSetFormStatus"; export const BuiltInUseRefId = "BuiltInUseRefId"; export const BuiltInRefValueId = "BuiltInRefValue"; export const BuiltInMixedReadonlyId = "BuiltInMixedReadonly"; @@ -421,7 +421,7 @@ addObject(BUILTIN_SHAPES, BuiltInUseActionStateId, [ ], ]); -addObject(BUILTIN_SHAPES, BuiltInUseFormStateId, [ +addObject(BUILTIN_SHAPES, BuiltInUseFormStatusId, [ ["0", { kind: "Poly" }], [ "1", @@ -435,7 +435,7 @@ addObject(BUILTIN_SHAPES, BuiltInUseFormStateId, [ calleeEffect: Effect.Read, returnValueKind: ValueKind.Primitive, }, - BuiltInSetFormStateId + BuiltInSetFormStatusId ), ], ]); diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useActionState-dispatch-considered-as-non-reactive.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useActionState-dispatch-considered-as-non-reactive.expect.md index c0366e605d7ea..edec816cb932f 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useActionState-dispatch-considered-as-non-reactive.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useActionState-dispatch-considered-as-non-reactive.expect.md @@ -28,26 +28,20 @@ import { c as _c } from "react/compiler-runtime"; import { useActionState } from "react"; function Component() { - const $ = _c(2); + const $ = _c(1); const [actionState, dispatchAction] = useActionState(); let t0; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { - t0 = () => { + const onSubmitAction = () => { dispatchAction(); }; + + t0 = ; $[0] = t0; } else { t0 = $[0]; } - const onSubmitAction = t0; - let t1; - if ($[1] === Symbol.for("react.memo_cache_sentinel")) { - t1 = ; - $[1] = t1; - } else { - t1 = $[1]; - } - return t1; + return t0; } function Foo() {} diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useFormState-dispatch-considered-as-non-reactive.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useFormState-dispatch-considered-as-non-reactive.expect.md index bd6ad05eeb568..ad07ec95800a0 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useFormState-dispatch-considered-as-non-reactive.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useFormState-dispatch-considered-as-non-reactive.expect.md @@ -2,10 +2,10 @@ ## Input ```javascript -import { useFormState } from "react-dom"; +import { useFormStatus } from "react-dom"; function Component() { - const [formState, dispatchForm] = useFormState(); + const [formState, dispatchForm] = useFormStatus(); const onSubmitForm = () => { dispatchForm(); }; @@ -25,29 +25,23 @@ export const FIXTURE_ENTRYPOINT = { ```javascript import { c as _c } from "react/compiler-runtime"; -import { useFormState } from "react-dom"; +import { useFormStatus } from "react-dom"; function Component() { - const $ = _c(2); - const [formState, dispatchForm] = useFormState(); + const $ = _c(1); + const [formState, dispatchForm] = useFormStatus(); let t0; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { - t0 = () => { + const onSubmitForm = () => { dispatchForm(); }; + + t0 = ; $[0] = t0; } else { t0 = $[0]; } - const onSubmitForm = t0; - let t1; - if ($[1] === Symbol.for("react.memo_cache_sentinel")) { - t1 = ; - $[1] = t1; - } else { - t1 = $[1]; - } - return t1; + return t0; } function Foo() {} @@ -60,4 +54,4 @@ export const FIXTURE_ENTRYPOINT = { ``` ### Eval output -(kind: ok) \ No newline at end of file +(kind: exception) object is not iterable (cannot read property Symbol(Symbol.iterator)) \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useFormState-dispatch-considered-as-non-reactive.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useFormState-dispatch-considered-as-non-reactive.js index f58903e7a54a3..b1f3037bf8270 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useFormState-dispatch-considered-as-non-reactive.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useFormState-dispatch-considered-as-non-reactive.js @@ -1,7 +1,7 @@ -import { useFormState } from "react-dom"; +import { useFormStatus } from "react-dom"; function Component() { - const [formState, dispatchForm] = useFormState(); + const [formState, dispatchForm] = useFormStatus(); const onSubmitForm = () => { dispatchForm(); };