fix(plugin-basic-ui): support Core and React 1.x (FEP-3032)

.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.

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"
   },

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<HTMLDivElement, AppBarProps>(
     },
     ref,
   ) => {
-    const actions = useFlow();
+    const pop = usePop();
     const activity = useNullableActivity();
     const activityDataAttributes = useActivityDataAttributes();
 
@@ -139,7 +139,7 @@ const AppBar = forwardRef<HTMLDivElement, AppBarProps>(
       }
 
       if (!e.defaultPrevented) {
-        actions.pop();
+        pop();
       }
     };
 

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<AppScreenProps> = ({
   const activityDataAttributes = useActivityDataAttributes();
   const mounted = useMounted();
 
-  const { pop } = useFlow();
+  const pop = usePop();
 
   const appScreenRef = useRef<HTMLDivElement>(null);
   const dimRef = useRef<HTMLDivElement>(null);

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<BottomSheetProps> = ({
   className,
 }) => {
   const activity = useNullableActivity();
-  const { pop } = useFlow();
+  const pop = usePop();
 
   const containerRef = useRef<HTMLDivElement>(null);
   const dimRef = useRef<HTMLDivElement>(null);

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<ModalProps> = ({
   className,
 }) => {
   const activity = useNullableActivity();
-  const { pop } = useFlow();
+  const pop = usePop();
 
   const containerRef = useRef<HTMLDivElement>(null);
   const paperRef = useRef<HTMLDivElement>(null);

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;
+}

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"
   },

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