feat(plugin-basic-ui): add data-attrs

extensions/plugin-basic-ui/src/components/AppBar.tsx

@@ -1,17 +1,16 @@
 import { useActions } from "@stackflow/react";
-import { assignInlineVars } from "@vanilla-extract/dynamic";
-import { forwardRef, useRef } from "react";
-
 import {
   useAppBarTitleMaxWidth,
+  useMounted,
   useNullableActivity,
 } from "@stackflow/react-ui-core";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import { forwardRef, useRef } from "react";
 import { IconBack, IconClose } from "../assets";
 import { useGlobalOptions } from "../basicUIPlugin";
 import type { GlobalVars } from "../basicUIPlugin.css";
 import { globalVars } from "../basicUIPlugin.css";
-
-import { compactMap } from "../utils";
+import { activityDataAttributes, compactMap } from "../utils";
 import * as css from "./AppBar.css";
 import * as appScreenCss from "./AppScreen.css";
 
@@ -90,6 +89,8 @@ const AppBar = forwardRef<HTMLDivElement, AppBarProps>(
     const actions = useActions();
     const activity = useNullableActivity();
 
+    const mounted = useMounted();
+
     const globalOptions = useGlobalOptions();
     const globalCloseButton = globalOptions.appBar?.closeButton;
     const globalBackButton = globalOptions.appBar?.backButton;
@@ -299,6 +300,8 @@ const AppBar = forwardRef<HTMLDivElement, AppBarProps>(
             [appScreenCss.vars.appBar.center.mainWidth]: `${maxWidth}px`,
           }),
         )}
+        data-stackflow-component-name="AppScreen--appBar"
+        {...activityDataAttributes({ activity, mounted })}
       >
         <div className={css.safeArea} />
         <div className={css.container}>

extensions/plugin-basic-ui/src/components/AppScreen.tsx

@@ -14,7 +14,7 @@ import { useGlobalOptions } from "../basicUIPlugin";
 import type { GlobalVars } from "../basicUIPlugin.css";
 import { globalVars } from "../basicUIPlugin.css";
 import type { PropOf } from "../utils";
-import { compactMap } from "../utils";
+import { activityDataAttributes, compactMap } from "../utils";
 import AppBar from "./AppBar";
 import * as css from "./AppScreen.css";
 
@@ -238,13 +238,15 @@ const AppScreen: React.FC<AppScreenProps> = ({
           }),
         )}
         data-stackflow-component-name="AppScreen"
-        data-stackflow-activity-id={mounted ? activity?.id : undefined}
-        data-stackflow-activity-is-active={
-          mounted ? activity?.isActive : undefined
-        }
+        {...activityDataAttributes({ activity, mounted })}
       >
         {activityEnterStyle !== "slideInLeft" && (
-          <div className={css.dim} ref={dimRef} />
+          <div
+            ref={dimRef}
+            className={css.dim}
+            data-stackflow-component-name="AppScreen--dim"
+            {...activityDataAttributes({ activity, mounted })}
+          />
         )}
         {appBar && (
           <AppBar
@@ -257,19 +259,26 @@ const AppScreen: React.FC<AppScreenProps> = ({
         )}
         <div
           key={activity?.id}
+          ref={paperRef}
           className={css.paper({
             hasAppBar,
             modalPresentationStyle,
             activityEnterStyle,
           })}
-          ref={paperRef}
+          data-stackflow-component-name="AppScreen--paper"
+          {...activityDataAttributes({ activity, mounted })}
         >
           {children}
         </div>
         {!activity?.isRoot &&
           globalOptions.theme === "cupertino" &&
           !isSwipeBackPrevented && (
-            <div className={css.edge({ hasAppBar })} ref={edgeRef} />
+            <div
+              ref={edgeRef}
+              className={css.edge({ hasAppBar })}
+              data-stackflow-component-name="AppScreen--edge"
+              {...activityDataAttributes({ activity, mounted })}
+            />
           )}
       </div>
     </Context.Provider>

extensions/plugin-basic-ui/src/utils/activityDataAttributes.ts

@@ -0,0 +1,19 @@
+import type { Activity } from "@stackflow/core";
+
+export function activityDataAttributes({
+  activity,
+  mounted,
+}: { activity?: Activity | null; mounted?: boolean }) {
+  return {
+    /**
+     * should be rendered in client-side only to avoid hydration mismatch warning
+     */
+    ...(mounted
+      ? {
+          "data-stackflow-activity-id": activity?.id,
+          "data-stackflow-activity-is-active": activity?.isActive,
+          "data-stackflow-activity-transition-state": activity?.transitionState,
+        }
+      : null),
+  };
+}

extensions/plugin-basic-ui/src/utils/index.ts

@@ -1,3 +1,4 @@
+export * from "./activityDataAttributes";
 export * from "./compact";
 export * from "./compactMap";
 export * from "./isBrowser";