diff --git a/.changeset/quiet-spoons-wink.md b/.changeset/quiet-spoons-wink.md new file mode 100644 index 000000000..cdabce174 --- /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-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 a3e5e0781..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": "^2.0.0 || ^3.0.0", - "@stackflow/react": "^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 3e8cc3d3d..cccbdef3a 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 { 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 8fdfec6df..330015a6f 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 { 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 292d75a4f..a959e5a92 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 { 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 c58dd5422..70bacad46 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 { 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/usePop.ts b/extensions/plugin-basic-ui/src/usePop.ts new file mode 100644 index 000000000..ad9123307 --- /dev/null +++ b/extensions/plugin-basic-ui/src/usePop.ts @@ -0,0 +1,16 @@ +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 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 115c12df9..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": "^2.0.0 || ^3.0.0", - "@stackflow/react": "^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 3bac4d7d7..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": ^2.0.0 || ^3.0.0 - "@stackflow/react": ^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": ^2.0.0 || ^3.0.0 - "@stackflow/react": ^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