From 38df1a53c18d750f77f2da771c6b2a26fe52ef97 Mon Sep 17 00:00:00 2001 From: ENvironmentSet Date: Mon, 12 Oct 2026 16:29:12 +0900 Subject: [PATCH 1/2] fix(plugin-basic-ui): support Core and React 1.x (FEP-3032) --- .changeset/quiet-spoons-wink.md | 8 ++++++++ extensions/plugin-basic-ui/package.json | 4 ++-- .../plugin-basic-ui/src/components/AppBar.tsx | 2 +- .../plugin-basic-ui/src/components/AppScreen.tsx | 2 +- .../plugin-basic-ui/src/components/BottomSheet.tsx | 2 +- extensions/plugin-basic-ui/src/components/Modal.tsx | 2 +- extensions/plugin-basic-ui/src/useFlow.ts | 13 +++++++++++++ extensions/react-ui-core/package.json | 4 ++-- yarn.lock | 8 ++++---- 9 files changed, 33 insertions(+), 12 deletions(-) create mode 100644 .changeset/quiet-spoons-wink.md create mode 100644 extensions/plugin-basic-ui/src/useFlow.ts diff --git a/.changeset/quiet-spoons-wink.md b/.changeset/quiet-spoons-wink.md new file mode 100644 index 000000000..172f2777c --- /dev/null +++ b/.changeset/quiet-spoons-wink.md @@ -0,0 +1,8 @@ +--- +"@stackflow/plugin-basic-ui": patch +"@stackflow/react-ui-core": patch +--- + +Support Core 1.x from 1.1.0 and Stackflow React 1.x from 1.3.2 in Basic UI and its React UI Core dependency, while retaining Core 2.x/3.x and Stackflow React 2.x support. + +Use the legacy global navigation hook on Stackflow React 1.x so AppScreen, AppBar, Modal, and BottomSheet can pop activities on both supported React integration versions. diff --git a/extensions/plugin-basic-ui/package.json b/extensions/plugin-basic-ui/package.json index a3e5e0781..629a66456 100644 --- a/extensions/plugin-basic-ui/package.json +++ b/extensions/plugin-basic-ui/package.json @@ -50,8 +50,8 @@ "typescript": "^5.5.3" }, "peerDependencies": { - "@stackflow/core": "^2.0.0 || ^3.0.0", - "@stackflow/react": "^2.0.0", + "@stackflow/core": "^1.1.0 || ^2.0.0 || ^3.0.0", + "@stackflow/react": "^1.3.2 || ^2.0.0", "@types/react": ">=16.8.0", "react": ">=16.8.0" }, diff --git a/extensions/plugin-basic-ui/src/components/AppBar.tsx b/extensions/plugin-basic-ui/src/components/AppBar.tsx index 3e8cc3d3d..89403518b 100644 --- a/extensions/plugin-basic-ui/src/components/AppBar.tsx +++ b/extensions/plugin-basic-ui/src/components/AppBar.tsx @@ -1,4 +1,3 @@ -import { useFlow } from "@stackflow/react"; import { useActivityDataAttributes, useAppBarTitleMaxWidth, @@ -12,6 +11,7 @@ import { IconBack, IconClose } from "../assets"; import { useGlobalOptions } from "../basicUIPlugin"; import type { GlobalVars } from "../basicUIPlugin.css"; import { globalVars } from "../basicUIPlugin.css"; +import { useFlow } from "../useFlow"; import { compactMap } from "../utils"; import * as css from "./AppBar.css"; import * as appScreenCss from "./AppScreen.css"; diff --git a/extensions/plugin-basic-ui/src/components/AppScreen.tsx b/extensions/plugin-basic-ui/src/components/AppScreen.tsx index 8fdfec6df..1674b2805 100644 --- a/extensions/plugin-basic-ui/src/components/AppScreen.tsx +++ b/extensions/plugin-basic-ui/src/components/AppScreen.tsx @@ -1,4 +1,3 @@ -import { useFlow, useStack } from "@stackflow/react"; import { useActivityDataAttributes, useLazy, @@ -16,6 +15,7 @@ import { createContext, useContext, useMemo, useRef } from "react"; import { useGlobalOptions } from "../basicUIPlugin"; import type { GlobalVars } from "../basicUIPlugin.css"; import { globalVars } from "../basicUIPlugin.css"; +import { useFlow } from "../useFlow"; import type { PropOf } from "../utils"; import { compactMap } from "../utils"; import AppBar from "./AppBar"; diff --git a/extensions/plugin-basic-ui/src/components/BottomSheet.tsx b/extensions/plugin-basic-ui/src/components/BottomSheet.tsx index 292d75a4f..24d29bca4 100644 --- a/extensions/plugin-basic-ui/src/components/BottomSheet.tsx +++ b/extensions/plugin-basic-ui/src/components/BottomSheet.tsx @@ -1,4 +1,3 @@ -import { useFlow } from "@stackflow/react"; import { useLazy, useNullableActivity, @@ -11,6 +10,7 @@ import clsx from "clsx"; import { useRef } from "react"; import type { GlobalVars } from "../basicUIPlugin.css"; import { globalVars } from "../basicUIPlugin.css"; +import { useFlow } from "../useFlow"; import { compactMap } from "../utils"; import * as css from "./BottomSheet.css"; diff --git a/extensions/plugin-basic-ui/src/components/Modal.tsx b/extensions/plugin-basic-ui/src/components/Modal.tsx index c58dd5422..fcdddfcc5 100644 --- a/extensions/plugin-basic-ui/src/components/Modal.tsx +++ b/extensions/plugin-basic-ui/src/components/Modal.tsx @@ -1,4 +1,3 @@ -import { useFlow } from "@stackflow/react"; import { useLazy, useNullableActivity, @@ -11,6 +10,7 @@ import clsx from "clsx"; import { useRef } from "react"; import type { GlobalVars } from "../basicUIPlugin.css"; import { globalVars } from "../basicUIPlugin.css"; +import { useFlow } from "../useFlow"; import { compactMap } from "../utils"; import * as css from "./Modal.css"; diff --git a/extensions/plugin-basic-ui/src/useFlow.ts b/extensions/plugin-basic-ui/src/useFlow.ts new file mode 100644 index 000000000..dccc14765 --- /dev/null +++ b/extensions/plugin-basic-ui/src/useFlow.ts @@ -0,0 +1,13 @@ +import * as StackflowReact from "@stackflow/react"; + +type NavigationHook = () => { + pop(): void; +}; + +const navigationHooks = StackflowReact as unknown as { + useFlow?: NavigationHook; + useActions: NavigationHook; +}; + +// Stackflow React 1.x exposes the global navigation hook as useActions. +export const useFlow = navigationHooks.useFlow ?? navigationHooks.useActions; diff --git a/extensions/react-ui-core/package.json b/extensions/react-ui-core/package.json index 115c12df9..24f99fadc 100644 --- a/extensions/react-ui-core/package.json +++ b/extensions/react-ui-core/package.json @@ -42,8 +42,8 @@ "typescript": "^5.5.3" }, "peerDependencies": { - "@stackflow/core": "^2.0.0 || ^3.0.0", - "@stackflow/react": "^2.0.0", + "@stackflow/core": "^1.1.0 || ^2.0.0 || ^3.0.0", + "@stackflow/react": "^1.3.2 || ^2.0.0", "@types/react": ">=16.8.0", "react": ">=16.8.0" }, diff --git a/yarn.lock b/yarn.lock index 3bac4d7d7..9977502df 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5799,8 +5799,8 @@ __metadata: rimraf: "npm:^3.0.2" typescript: "npm:^5.5.3" peerDependencies: - "@stackflow/core": ^2.0.0 || ^3.0.0 - "@stackflow/react": ^2.0.0 + "@stackflow/core": ^1.1.0 || ^2.0.0 || ^3.0.0 + "@stackflow/react": ^1.3.2 || ^2.0.0 "@types/react": ">=16.8.0" react: ">=16.8.0" languageName: unknown @@ -6062,8 +6062,8 @@ __metadata: rimraf: "npm:^3.0.2" typescript: "npm:^5.5.3" peerDependencies: - "@stackflow/core": ^2.0.0 || ^3.0.0 - "@stackflow/react": ^2.0.0 + "@stackflow/core": ^1.1.0 || ^2.0.0 || ^3.0.0 + "@stackflow/react": ^1.3.2 || ^2.0.0 "@types/react": ">=16.8.0" react: ">=16.8.0" languageName: unknown From ee677d66251ab5c0e144338714a57b1af1a0bd89 Mon Sep 17 00:00:00 2001 From: ENvironmentSet Date: Mon, 12 Oct 2026 22:52:20 +0900 Subject: [PATCH 2/2] fix(plugin-basic-ui): include legacy canaries and expose usePop (FEP-3032) --- .changeset/quiet-spoons-wink.md | 2 +- extensions/plugin-basic-ui/package.json | 4 ++-- extensions/plugin-basic-ui/src/components/AppBar.tsx | 6 +++--- extensions/plugin-basic-ui/src/components/AppScreen.tsx | 4 ++-- extensions/plugin-basic-ui/src/components/BottomSheet.tsx | 4 ++-- extensions/plugin-basic-ui/src/components/Modal.tsx | 4 ++-- extensions/plugin-basic-ui/src/{useFlow.ts => usePop.ts} | 5 ++++- extensions/react-ui-core/package.json | 4 ++-- yarn.lock | 8 ++++---- 9 files changed, 22 insertions(+), 19 deletions(-) rename extensions/plugin-basic-ui/src/{useFlow.ts => usePop.ts} (67%) diff --git a/.changeset/quiet-spoons-wink.md b/.changeset/quiet-spoons-wink.md index 172f2777c..cdabce174 100644 --- a/.changeset/quiet-spoons-wink.md +++ b/.changeset/quiet-spoons-wink.md @@ -3,6 +3,6 @@ "@stackflow/react-ui-core": patch --- -Support Core 1.x from 1.1.0 and Stackflow React 1.x from 1.3.2 in Basic UI and its React UI Core dependency, while retaining Core 2.x/3.x and Stackflow React 2.x support. +Support Core 1.x from 1.1.0-canary.0 and Stackflow React 1.x from 1.3.2-canary.0 in Basic UI and its React UI Core dependency, while retaining Core 2.x/3.x and Stackflow React 2.x support. Use the legacy global navigation hook on Stackflow React 1.x so AppScreen, AppBar, Modal, and BottomSheet can pop activities on both supported React integration versions. diff --git a/extensions/plugin-basic-ui/package.json b/extensions/plugin-basic-ui/package.json index 629a66456..367ca4387 100644 --- a/extensions/plugin-basic-ui/package.json +++ b/extensions/plugin-basic-ui/package.json @@ -50,8 +50,8 @@ "typescript": "^5.5.3" }, "peerDependencies": { - "@stackflow/core": "^1.1.0 || ^2.0.0 || ^3.0.0", - "@stackflow/react": "^1.3.2 || ^2.0.0", + "@stackflow/core": "^1.1.0-canary.0 || ^2.0.0 || ^3.0.0", + "@stackflow/react": "^1.3.2-canary.0 || ^2.0.0", "@types/react": ">=16.8.0", "react": ">=16.8.0" }, diff --git a/extensions/plugin-basic-ui/src/components/AppBar.tsx b/extensions/plugin-basic-ui/src/components/AppBar.tsx index 89403518b..cccbdef3a 100644 --- a/extensions/plugin-basic-ui/src/components/AppBar.tsx +++ b/extensions/plugin-basic-ui/src/components/AppBar.tsx @@ -11,7 +11,7 @@ import { IconBack, IconClose } from "../assets"; import { useGlobalOptions } from "../basicUIPlugin"; import type { GlobalVars } from "../basicUIPlugin.css"; import { globalVars } from "../basicUIPlugin.css"; -import { useFlow } from "../useFlow"; +import { usePop } from "../usePop"; import { compactMap } from "../utils"; import * as css from "./AppBar.css"; import * as appScreenCss from "./AppScreen.css"; @@ -108,7 +108,7 @@ const AppBar = forwardRef( }, ref, ) => { - const actions = useFlow(); + const pop = usePop(); const activity = useNullableActivity(); const activityDataAttributes = useActivityDataAttributes(); @@ -139,7 +139,7 @@ const AppBar = forwardRef( } if (!e.defaultPrevented) { - actions.pop(); + pop(); } }; diff --git a/extensions/plugin-basic-ui/src/components/AppScreen.tsx b/extensions/plugin-basic-ui/src/components/AppScreen.tsx index 1674b2805..330015a6f 100644 --- a/extensions/plugin-basic-ui/src/components/AppScreen.tsx +++ b/extensions/plugin-basic-ui/src/components/AppScreen.tsx @@ -15,7 +15,7 @@ import { createContext, useContext, useMemo, useRef } from "react"; import { useGlobalOptions } from "../basicUIPlugin"; import type { GlobalVars } from "../basicUIPlugin.css"; import { globalVars } from "../basicUIPlugin.css"; -import { useFlow } from "../useFlow"; +import { usePop } from "../usePop"; import type { PropOf } from "../utils"; import { compactMap } from "../utils"; import AppBar from "./AppBar"; @@ -68,7 +68,7 @@ const AppScreen: React.FC = ({ const activityDataAttributes = useActivityDataAttributes(); const mounted = useMounted(); - const { pop } = useFlow(); + const pop = usePop(); const appScreenRef = useRef(null); const dimRef = useRef(null); diff --git a/extensions/plugin-basic-ui/src/components/BottomSheet.tsx b/extensions/plugin-basic-ui/src/components/BottomSheet.tsx index 24d29bca4..a959e5a92 100644 --- a/extensions/plugin-basic-ui/src/components/BottomSheet.tsx +++ b/extensions/plugin-basic-ui/src/components/BottomSheet.tsx @@ -10,7 +10,7 @@ import clsx from "clsx"; import { useRef } from "react"; import type { GlobalVars } from "../basicUIPlugin.css"; import { globalVars } from "../basicUIPlugin.css"; -import { useFlow } from "../useFlow"; +import { usePop } from "../usePop"; import { compactMap } from "../utils"; import * as css from "./BottomSheet.css"; @@ -34,7 +34,7 @@ const BottomSheet: React.FC = ({ className, }) => { const activity = useNullableActivity(); - const { pop } = useFlow(); + const pop = usePop(); const containerRef = useRef(null); const dimRef = useRef(null); diff --git a/extensions/plugin-basic-ui/src/components/Modal.tsx b/extensions/plugin-basic-ui/src/components/Modal.tsx index fcdddfcc5..70bacad46 100644 --- a/extensions/plugin-basic-ui/src/components/Modal.tsx +++ b/extensions/plugin-basic-ui/src/components/Modal.tsx @@ -10,7 +10,7 @@ import clsx from "clsx"; import { useRef } from "react"; import type { GlobalVars } from "../basicUIPlugin.css"; import { globalVars } from "../basicUIPlugin.css"; -import { useFlow } from "../useFlow"; +import { usePop } from "../usePop"; import { compactMap } from "../utils"; import * as css from "./Modal.css"; @@ -33,7 +33,7 @@ const Modal: React.FC = ({ className, }) => { const activity = useNullableActivity(); - const { pop } = useFlow(); + const pop = usePop(); const containerRef = useRef(null); const paperRef = useRef(null); diff --git a/extensions/plugin-basic-ui/src/useFlow.ts b/extensions/plugin-basic-ui/src/usePop.ts similarity index 67% rename from extensions/plugin-basic-ui/src/useFlow.ts rename to extensions/plugin-basic-ui/src/usePop.ts index dccc14765..ad9123307 100644 --- a/extensions/plugin-basic-ui/src/useFlow.ts +++ b/extensions/plugin-basic-ui/src/usePop.ts @@ -10,4 +10,7 @@ const navigationHooks = StackflowReact as unknown as { }; // Stackflow React 1.x exposes the global navigation hook as useActions. -export const useFlow = navigationHooks.useFlow ?? navigationHooks.useActions; +export function usePop() { + const useNavigation = navigationHooks.useFlow ?? navigationHooks.useActions; + return useNavigation().pop; +} diff --git a/extensions/react-ui-core/package.json b/extensions/react-ui-core/package.json index 24f99fadc..e4a128968 100644 --- a/extensions/react-ui-core/package.json +++ b/extensions/react-ui-core/package.json @@ -42,8 +42,8 @@ "typescript": "^5.5.3" }, "peerDependencies": { - "@stackflow/core": "^1.1.0 || ^2.0.0 || ^3.0.0", - "@stackflow/react": "^1.3.2 || ^2.0.0", + "@stackflow/core": "^1.1.0-canary.0 || ^2.0.0 || ^3.0.0", + "@stackflow/react": "^1.3.2-canary.0 || ^2.0.0", "@types/react": ">=16.8.0", "react": ">=16.8.0" }, diff --git a/yarn.lock b/yarn.lock index 9977502df..deefadbf5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5799,8 +5799,8 @@ __metadata: rimraf: "npm:^3.0.2" typescript: "npm:^5.5.3" peerDependencies: - "@stackflow/core": ^1.1.0 || ^2.0.0 || ^3.0.0 - "@stackflow/react": ^1.3.2 || ^2.0.0 + "@stackflow/core": ^1.1.0-canary.0 || ^2.0.0 || ^3.0.0 + "@stackflow/react": ^1.3.2-canary.0 || ^2.0.0 "@types/react": ">=16.8.0" react: ">=16.8.0" languageName: unknown @@ -6062,8 +6062,8 @@ __metadata: rimraf: "npm:^3.0.2" typescript: "npm:^5.5.3" peerDependencies: - "@stackflow/core": ^1.1.0 || ^2.0.0 || ^3.0.0 - "@stackflow/react": ^1.3.2 || ^2.0.0 + "@stackflow/core": ^1.1.0-canary.0 || ^2.0.0 || ^3.0.0 + "@stackflow/react": ^1.3.2-canary.0 || ^2.0.0 "@types/react": ">=16.8.0" react: ">=16.8.0" languageName: unknown