v

.changeset/four-lies-travel.md

@@ -0,0 +1,5 @@
+---
+"basehub": patch
+---
+
+toolbar improvements

.changeset/pre.json

@@ -16,8 +16,10 @@
     "eleven-donuts-yell",
     "fluffy-sloths-admire",
     "forty-bees-wash",
+    "four-lies-travel",
     "good-worms-jam",
     "great-flies-wonder",
+    "hip-terms-tie",
     "khaki-ghosts-call",
     "lovely-carrots-bathe",
     "lucky-eyes-ring",

packages/basehub/CHANGELOG.md

@@ -1,5 +1,12 @@
 # basehub
 
+## 8.0.0-canary.33
+
+### Patch Changes
+
+- toolbar improvements
+- f023e53: fix type
+
 ## 8.0.0-canary.32
 
 ### Patch Changes

packages/basehub/package.json

@@ -2,7 +2,7 @@
   "name": "basehub",
   "description": "A very fast Headless CMS.",
   "author": "JB <[email protected]>",
-  "version": "8.0.0-canary.32",
+  "version": "8.0.0-canary.33",
   "license": "MIT",
   "repository": "basehub-ai/basehub",
   "bugs": "https://github.com/basehub-ai/basehub/issues",

packages/basehub/src/next/toolbar/client-toolbar.tsx

@@ -6,6 +6,7 @@ import { Tooltip } from "./components/tooltip";
 import { DragHandle } from "./components/drag-handle";
 import { BranchSwitcher, LatestBranch } from "./components/branch-swticher";
 import debounce from "lodash.debounce";
+import { usePathname } from "next/navigation";
 import { ResolvedRef } from "../../common-types";
 
 const TOOLBAR_POSITION_STORAGE_KEY = "bshb_toolbar_pos";
@@ -94,6 +95,19 @@ export const ClientToolbar = ({
     [enableDraftMode, displayMessage]
   );
 
+  const triggerDraftModeBound = React.useCallback(() => {
+    const previewToken = bshbPreviewToken ?? seekAndStoreBshbPreviewToken();
+    if (!previewToken) {
+      return displayMessage("Preview token not found");
+    }
+    triggerDraftMode(previewToken);
+  }, [
+    bshbPreviewToken,
+    displayMessage,
+    seekAndStoreBshbPreviewToken,
+    triggerDraftMode,
+  ]);
+
   const [hasAutoEnabledDraftOnce, setHasAutoEnabledDraftOnce] =
     React.useState(false);
 
@@ -156,9 +170,9 @@ export const ClientToolbar = ({
   const setRefWithEvents = React.useCallback(
     (ref: string) => {
       _setRef(ref);
-      window.dispatchEvent(
-        new CustomEvent("__bshb_ref_changed", { detail: { ref } })
-      );
+      // @ts-ignore
+      window.__bshb_ref = ref;
+      window.dispatchEvent(new CustomEvent("__bshb_ref_changed"));
       previewRefCookieManager.set(ref);
       setIsDefaultRefSelected(ref === resolvedRef.ref);
     },
@@ -202,20 +216,19 @@ export const ClientToolbar = ({
     }
   }, [isDefaultRefSelected, isLoadingRef, resolvedRef.ref, setRefWithEvents]);
 
-    // human revalidate pending tags
-    const lastHumanRevalidatedRef = React.useRef<string | null>(null);
-    React.useEffect(() => {
-      if (!bshbPreviewToken) return;
-      if (!ref) return;
-      if (isForcedDraft) return;
-      if (lastHumanRevalidatedRef.current === ref) return;
-      lastHumanRevalidatedRef.current = ref;
-
-      humanRevalidatePendingTags({ bshbPreviewToken, ref }).catch(() => {
-        // ignore
-      });
-    }, [bshbPreviewToken, humanRevalidatePendingTags, ref, isForcedDraft]);
-
+  // human revalidate pending tags
+  const lastHumanRevalidatedRef = React.useRef<string | null>(null);
+  React.useEffect(() => {
+    if (!bshbPreviewToken) return;
+    if (!ref) return;
+    if (isForcedDraft) return;
+    if (lastHumanRevalidatedRef.current === ref) return;
+    lastHumanRevalidatedRef.current = ref;
+
+    humanRevalidatePendingTags({ bshbPreviewToken, ref }).catch(() => {
+      // ignore
+    });
+  }, [bshbPreviewToken, humanRevalidatePendingTags, ref, isForcedDraft]);
 
   /** Position tooltip when message changes. */
   React.useLayoutEffect(() => {
@@ -353,6 +366,11 @@ export const ClientToolbar = ({
             }}
             getAndSetLatestBranches={getAndSetLatestBranches}
           />
+          <AutoEnterDraftModeOnPathChangeIfRefIsNotDefault
+            ref={ref}
+            resolvedRef={resolvedRef}
+            triggerDraftMode={triggerDraftModeBound}
+          />
 
           {/* draft mode button */}
           <Tooltip
@@ -400,6 +418,36 @@ export const ClientToolbar = ({
   );
 };
 
+const AutoEnterDraftModeOnPathChangeIfRefIsNotDefault = ({
+  ref,
+  resolvedRef,
+  triggerDraftMode,
+}: {
+  ref: string;
+  resolvedRef: ResolvedRef;
+  triggerDraftMode: () => void;
+}) => {
+  const pathname = usePathname();
+  const [initialPathname, setInitialPathname] = React.useState(pathname);
+
+  React.useEffect(() => {
+    if (initialPathname) return;
+    setInitialPathname(pathname);
+  }, [pathname, initialPathname]);
+
+  React.useEffect(() => {
+    if (initialPathname === pathname) {
+      // ignore the first render/pathname
+      return;
+    }
+    if (ref !== resolvedRef.ref) {
+      triggerDraftMode();
+    }
+  }, [ref, resolvedRef.ref, triggerDraftMode, pathname, initialPathname]);
+
+  return null;
+};
+
 const EyeDashedIcon = () => {
   return (
     <svg

packages/basehub/src/react/pump/client-pump.tsx

@@ -311,13 +311,15 @@ export const ClientPump = <Queries extends PumpQuery[]>({
    * Subscribe to ref changes
    */
   React.useEffect(() => {
-    function handleRefChange(e: Event) {
-      if (e instanceof CustomEvent === false) return;
-      const previewRef = e.detail.ref;
-      if (!previewRef) return;
+    function handleRefChange() {
+      const previewRef =
+        // @ts-ignore
+        window.__bshb_ref;
+      if (!previewRef || typeof previewRef !== "string") return;
       setPreviewRef(previewRef);
     }
 
+    handleRefChange();
     window.addEventListener("__bshb_ref_changed", handleRefChange);
     return () => {
       window.removeEventListener("__bshb_ref_changed", handleRefChange);

playground/CHANGELOG.md

@@ -1,5 +1,13 @@
 # playground
 
+## 0.0.164-canary.33
+
+### Patch Changes
+
+- Updated dependencies
+- Updated dependencies [f023e53]
+  - [email protected]
+
 ## 0.0.164-canary.32
 
 ### Patch Changes

playground/package.json

@@ -1,7 +1,7 @@
 {
   "name": "playground",
   "private": true,
-  "version": "0.0.164-canary.32",
+  "version": "0.0.164-canary.33",
   "scripts": {
     "dev": "basehub dev & next dev --port 3003",
     "build": "basehub && next build",