@buoy-gg/route-events 7.0.40 → 7.0.41

package/README.md

@@ -74,3 +74,7 @@ Use a Free or Pro Buoy account. History limits and paid features vary by tool; s
 📚 [Full docs](https://buoy.gg/buoy/latest/docs/tools/routes) · [All Buoy tools](https://github.com/Buoy-gg/buoy)
 
 Proprietary software. © Buoy LLC. [Terms](https://buoy.gg/terms)
+
+## Web support (unreleased)
+
+Browser History API and hash changes feed the shared route history. Register known paths and the framework router adapter for route selection and navigation. The browser build is available in this checkout and has not been published yet. See the [web setup guide](https://buoy.gg/buoy/latest/docs/web-preview) for registration, dependencies, and browser boundaries.

package/lib/commonjs/RouteTracker.web.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RouteTracker = RouteTracker;
+var _react = require("react");
+var _browserRoutes = require("./browserRoutes");
+function RouteTracker() {
+  (0, _react.useEffect)(_browserRoutes.startBrowserRouteCapture, []);
+  return null;
+}

package/lib/commonjs/browserRouteRegistry.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getBrowserRoutePaths = getBrowserRoutePaths;
+exports.getBrowserRoutesUpdatedAt = getBrowserRoutesUpdatedAt;
+exports.registerBrowserRoutes = registerBrowserRoutes;
+const declared = new Map();
+let updatedAt = null;
+function registerBrowserRoutes(paths) {
+  for (const path of paths) declared.set(path, (declared.get(path) ?? 0) + 1);
+  updatedAt = Date.now();
+  let active = true;
+  return () => {
+    if (!active) return;
+    active = false;
+    for (const path of paths) {
+      const count = (declared.get(path) ?? 1) - 1;
+      if (count) declared.set(path, count);else declared.delete(path);
+    }
+    updatedAt = Date.now();
+  };
+}
+function getBrowserRoutePaths() {
+  return [...declared.keys()];
+}
+function getBrowserRoutesUpdatedAt() {
+  return updatedAt;
+}

package/lib/commonjs/browserRoutes.js

@@ -0,0 +1,96 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.startBrowserRouteCapture = startBrowserRouteCapture;
+var _utils = require("@buoy-gg/shared-ui/utils");
+var _RouteObserver = require("./RouteObserver");
+var _routeEventStore = require("./stores/routeEventStore");
+var _navigationStackStore = require("./stores/navigationStackStore");
+let leases = 0;
+let stop;
+function startBrowserRouteCapture() {
+  if (typeof window === 'undefined') return () => {};
+  if (leases++ === 0) {
+    _routeEventStore.routeEventStore.hydrateBootCapture();
+    let previousPathname;
+    let previousTime;
+    let lastHref = '';
+    const visits = [];
+    let cursor = -1;
+    const update = change => {
+      if (change.href === lastHref && change.kind === 'pop') return;
+      if (change.kind === 'replace' && cursor >= 0) visits[cursor] = change.href;else if (change.kind === 'pop') {
+        const index = visits.lastIndexOf(change.href, cursor - 1);
+        const forward = visits.indexOf(change.href, cursor + 1);
+        if (index >= 0) cursor = index;else if (forward >= 0) cursor = forward;else {
+          visits.splice(cursor + 1);
+          visits.push(change.href);
+          cursor++;
+        }
+      } else {
+        visits.splice(cursor + 1);
+        visits.push(change.href);
+        cursor++;
+      }
+      lastHref = change.href;
+      const url = (0, _utils.getBrowserRouteURL)(change.href);
+      const timestamp = Date.now();
+      _RouteObserver.routeObserver.emit({
+        pathname: url.pathname,
+        params: Object.fromEntries(url.searchParams),
+        segments: url.pathname.split('/').filter(Boolean),
+        previousPathname,
+        timestamp,
+        timeSincePrevious: previousTime === undefined ? undefined : timestamp - previousTime
+      });
+      previousPathname = url.pathname;
+      previousTime = timestamp;
+      _navigationStackStore.navigationStackStore.setStack(visits.map((href, index) => {
+        const location = (0, _utils.getBrowserRouteURL)(href);
+        return {
+          key: `browser:${index}`,
+          name: location.pathname,
+          pathname: location.pathname,
+          params: Object.fromEntries(location.searchParams),
+          index,
+          isFocused: index === cursor,
+          canPop: index > 0
+        };
+      }));
+    };
+    const goTo = index => {
+      if (!Number.isInteger(index) || index < 0 || index >= visits.length) throw new Error('That browser history entry is unavailable.');
+      window.history.go(index - cursor);
+    };
+    _navigationStackStore.navigationStackStore.setActions({
+      navigateToIndex: goTo,
+      popToIndex: goTo,
+      goBack: _utils.browserRouter.back,
+      popToTop: () => goTo(0),
+      navigateToRoute: (name, params) => {
+        _utils.browserRouter.push({
+          pathname: name,
+          params: params
+        });
+        return true;
+      }
+    });
+    stop = (0, _utils.subscribeBrowserNavigation)(update);
+    update({
+      href: (0, _utils.getBrowserHref)(),
+      kind: 'initial'
+    });
+  }
+  let released = false;
+  return () => {
+    if (released) return;
+    released = true;
+    if (--leases === 0) {
+      stop?.();
+      stop = undefined;
+      _navigationStackStore.navigationStackStore.setActions(null);
+    }
+  };
+}

package/lib/commonjs/components/ReactNavigationRoutes.web.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ReactNavigationRoutes", {
+  enumerable: true,
+  get: function () {
+    return _RoutesSitemap.RoutesSitemap;
+  }
+});
+var _RoutesSitemap = require("./RoutesSitemap");

package/lib/commonjs/components/RouteEventDetail.js

@@ -40,7 +40,7 @@ function RouteEventDetail({
       style: styles.footer,
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
         style: styles.goButton,
-        onPress: () => onNavigate(event.pathname),
+        onPress: () => onNavigate((0, _routeTemplate.routeHref)(event.pathname, event.params)),
         activeOpacity: 0.8,
         testID: "buoy-routes-detail-go",
         accessibilityRole: "button",

package/lib/commonjs/components/RouteEventItemCompact.js

@@ -137,7 +137,7 @@ const RouteEventItemCompact = exports.RouteEventItemCompact = /*#__PURE__*/(0, _
     if (!onNavigate) return undefined;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
       style: styles.goButton,
-      onPress: () => onNavigate(event.pathname),
+      onPress: () => onNavigate((0, _routeTemplate.routeHref)(event.pathname, event.params)),
       testID: `${testID}-go`,
       accessibilityRole: "button",
       accessibilityLabel: `Go to ${event.pathname}`,

package/lib/commonjs/components/RouteEventsModalWithTabs.js

@@ -18,6 +18,7 @@ var _RoutesSitemap = require("./RoutesSitemap");
 var _ReactNavigationRoutes = require("./ReactNavigationRoutes");
 var _NavigationStack = require("./NavigationStack");
 var _RouteEventsTimeline = require("./RouteEventsTimeline");
+var _routeTemplate = require("../utils/routeTemplate");
 var _jsxRuntime = require("react/jsx-runtime");
 // Resolved once at module load; null when React Navigation is absent
 // (useSafeNavigationContainerRef then yields undefined, so the dispatch
@@ -68,16 +69,23 @@ function findScreenPath(state, screenName) {
  * e.g. ["MainApp", "Settings", "SettingScreen"] becomes:
  * navigate("MainApp", { screen: "Settings", params: { screen: "SettingScreen" } })
  */
-function buildNestedNavigateAction(path) {
+function buildNestedNavigateAction(path, leafParams) {
   if (path.length === 0) return null;
+  const leaf = leafParams && Object.keys(leafParams).length > 0 ? leafParams : undefined;
   if (path.length === 1) {
-    return CommonActions.navigate({
+    return CommonActions.navigate(leaf ? {
+      name: path[0],
+      params: leaf
+    } : {
       name: path[0]
     });
   }
 
   // Build nested params from the end
-  let params = {
+  let params = leaf ? {
+    screen: path[path.length - 1],
+    params: leaf
+  } : {
     screen: path[path.length - 1]
   };
   for (let i = path.length - 2; i >= 1; i--) {
@@ -175,15 +183,21 @@ function RouteEventsModalWithTabs({
       if (hasExpoRouter) {
         router.push(pathname);
       } else if (containerRef) {
-        // On RN CLI, pathname is /<ScreenName> — extract the screen name
-        const screenName = pathname.startsWith("/") ? pathname.slice(1) : pathname;
+        // On RN CLI, pathname is /<ScreenName> — extract the screen name.
+        // A recorded event's href may carry its params as a query string.
+        const {
+          pathname: path,
+          params: routeParams
+        } = (0, _routeTemplate.splitRouteHref)(pathname);
+        const screenName = path.startsWith("/") ? path.slice(1) : path;
+        const hasParams = Object.keys(routeParams).length > 0;
 
         // Walk the state tree to find the nesting path to this screen
         const rootState = containerRef.getRootState?.();
         if (rootState) {
           const path = findScreenPath(rootState, screenName);
           if (path) {
-            const action = buildNestedNavigateAction(path);
+            const action = buildNestedNavigateAction(path, routeParams);
             if (action) {
               containerRef.dispatch(action);
               return;
@@ -192,7 +206,10 @@ function RouteEventsModalWithTabs({
         }
 
         // Fallback: try direct navigation (works for top-level screens)
-        containerRef.dispatch(CommonActions.navigate({
+        containerRef.dispatch(CommonActions.navigate(hasParams ? {
+          name: screenName,
+          params: routeParams
+        } : {
           name: screenName
         }));
       } else {

package/lib/commonjs/expoRouterStore.web.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getExpoRouterStore = getExpoRouterStore;
+exports.getRouteNodeMetadata = getRouteNodeMetadata;
+exports.isExpoRouterStoreSupported = isExpoRouterStoreSupported;
+exports.loadRouteNode = loadRouteNode;
+var _utils = require("@buoy-gg/shared-ui/utils");
+var _browserRouteRegistry = require("./browserRouteRegistry");
+function isExpoRouterStoreSupported() {
+  return typeof window !== 'undefined';
+}
+function loadRouteNode() {
+  if (!isExpoRouterStoreSupported()) return null;
+  const paths = new Set([...(0, _browserRouteRegistry.getBrowserRoutePaths)(), new URL((0, _utils.getBrowserHref)()).pathname]);
+  return {
+    route: '',
+    type: 'layout',
+    contextKey: 'browser',
+    children: [...paths].map(path => ({
+      route: path.replace(/^\//, '') || 'index',
+      type: 'route',
+      contextKey: path,
+      children: [],
+      dynamic: null
+    }))
+  };
+}
+function getExpoRouterStore() {
+  return {
+    routeNode: loadRouteNode(),
+    navigationRef: {
+      isReady: () => typeof window !== 'undefined'
+    }
+  };
+}
+function getRouteNodeMetadata() {
+  return {
+    source: null,
+    lastLoadedAt: (0, _browserRouteRegistry.getBrowserRoutesUpdatedAt)()
+  };
+}

package/lib/commonjs/index.js

@@ -75,6 +75,12 @@ Object.defineProperty(exports, "navigationStackStore", {
     return _navigationStackStore.navigationStackStore;
   }
 });
+Object.defineProperty(exports, "registerBrowserRoutes", {
+  enumerable: true,
+  get: function () {
+    return _browserRouteRegistry.registerBrowserRoutes;
+  }
+});
 Object.defineProperty(exports, "routeEventStore", {
   enumerable: true,
   get: function () {
@@ -144,6 +150,7 @@ Object.defineProperty(exports, "useRouteSitemap", {
 var _preset = require("./preset");
 var _RouteEventsModalWithTabs = require("./components/RouteEventsModalWithTabs");
 var _RouteTracker = require("./RouteTracker");
+var _browserRouteRegistry = require("./browserRouteRegistry");
 var _RoutesSitemap = require("./components/RoutesSitemap");
 var _NavigationStack = require("./components/NavigationStack");
 var _RouteEventItemCompact = require("./components/RouteEventItemCompact");

package/lib/commonjs/useNavigationStack.web.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useNavigationStack = useNavigationStack;
+var _react = require("react");
+var _navigationStackStore = require("./stores/navigationStackStore");
+const empty = [];
+function useNavigationStack() {
+  const stack = (0, _react.useSyncExternalStore)(callback => _navigationStackStore.navigationStackStore.subscribe(callback), () => _navigationStackStore.navigationStackStore.getStack(), () => empty);
+  const focused = stack.find(item => item.isFocused) ?? null;
+  const actions = () => {
+    const current = _navigationStackStore.navigationStackStore.getActions();
+    if (!current) throw new Error('Mount RouteTracker to capture browser navigation.');
+    return current;
+  };
+  return {
+    stack,
+    focusedRoute: focused,
+    stackDepth: stack.length,
+    isAtRoot: !focused || focused.index === 0,
+    isLoaded: stack.length > 0,
+    error: null,
+    refresh: () => {},
+    navigateToIndex: index => actions().navigateToIndex(index),
+    navigateToRoute: (name, params) => actions().navigateToRoute?.(name, params) ?? false,
+    popToIndex: index => actions().popToIndex(index),
+    goBack: () => actions().goBack(),
+    popToTop: () => actions().popToTop()
+  };
+}

package/lib/commonjs/utils/routeTemplate.js

@@ -4,6 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getRouteTemplate = getRouteTemplate;
+exports.routeHref = routeHref;
+exports.splitRouteHref = splitRouteHref;
 /**
  * Infer a route template from a concrete pathname and its segments.
  * Dynamic segments (numeric ids, UUIDs) collapse to `[id]`, so
@@ -25,4 +27,53 @@ function getRouteTemplate(pathname, segments) {
   });
   const template = "/" + templateParts.join("/");
   return template !== pathname ? template : null;
+}
+
+/**
+ * The href that reopens a recorded route: its pathname plus the params that are
+ * not already in the path, as a query string. Expo Router reports dynamic
+ * segment values (`/order/42` → `{ id: "42" }`) and search params (`?menu=1`)
+ * in one `params` object; only the second kind needs to be carried, because the
+ * first is already in the pathname.
+ */
+function routeHref(pathname, params) {
+  if (!params) return pathname;
+  const inPath = new Set(pathname.split("/").filter(Boolean).map(seg => {
+    try {
+      return decodeURIComponent(seg);
+    } catch {
+      return seg;
+    }
+  }));
+  const query = [];
+  for (const [key, raw] of Object.entries(params)) {
+    const values = Array.isArray(raw) ? raw : [raw];
+    // A catch-all segment's values, or one dynamic segment's value.
+    if (values.length > 0 && values.every(v => inPath.has(String(v)))) continue;
+    for (const v of values) query.push(`${encodeURIComponent(key)}=${encodeURIComponent(String(v))}`);
+  }
+  return query.length ? `${pathname}?${query.join("&")}` : pathname;
+}
+
+/** Split an href from {@link routeHref} back into its path and params. */
+function splitRouteHref(href) {
+  const q = href.indexOf("?");
+  if (q < 0) return {
+    pathname: href,
+    params: {}
+  };
+  const params = {};
+  for (const pair of href.slice(q + 1).split("&")) {
+    if (!pair) continue;
+    const [k, v = ""] = pair.split("=");
+    try {
+      params[decodeURIComponent(k)] = decodeURIComponent(v);
+    } catch {
+      params[k] = v;
+    }
+  }
+  return {
+    pathname: href.slice(0, q),
+    params
+  };
 }

package/lib/commonjs/utils/safeReactNavigation.web.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getCommonActions = getCommonActions;
+exports.getStackActions = getStackActions;
+exports.isReactNavigationAvailable = isReactNavigationAvailable;
+exports.useSafeNavigation = useSafeNavigation;
+exports.useSafeNavigationContainerRef = useSafeNavigationContainerRef;
+exports.useSafeNavigationState = useSafeNavigationState;
+var _utils = require("@buoy-gg/shared-ui/utils");
+function useSafeNavigation() {
+  return _utils.browserRouter;
+}
+function useSafeNavigationState(selector) {
+  return selector({
+    routes: [],
+    routeNames: [],
+    index: 0,
+    key: 'browser',
+    type: 'stack'
+  });
+}
+function useSafeNavigationContainerRef() {
+  return undefined;
+}
+function getCommonActions() {
+  return null;
+}
+function getStackActions() {
+  return null;
+}
+function isReactNavigationAvailable() {
+  return false;
+}

package/lib/module/RouteTracker.web.js

@@ -0,0 +1,8 @@
+"use strict";
+
+import { useEffect } from 'react';
+import { startBrowserRouteCapture } from './browserRoutes';
+export function RouteTracker() {
+  useEffect(startBrowserRouteCapture, []);
+  return null;
+}

package/lib/module/browserRouteRegistry.js

@@ -0,0 +1,24 @@
+"use strict";
+
+const declared = new Map();
+let updatedAt = null;
+export function registerBrowserRoutes(paths) {
+  for (const path of paths) declared.set(path, (declared.get(path) ?? 0) + 1);
+  updatedAt = Date.now();
+  let active = true;
+  return () => {
+    if (!active) return;
+    active = false;
+    for (const path of paths) {
+      const count = (declared.get(path) ?? 1) - 1;
+      if (count) declared.set(path, count);else declared.delete(path);
+    }
+    updatedAt = Date.now();
+  };
+}
+export function getBrowserRoutePaths() {
+  return [...declared.keys()];
+}
+export function getBrowserRoutesUpdatedAt() {
+  return updatedAt;
+}

package/lib/module/browserRoutes.js

@@ -0,0 +1,92 @@
+"use strict";
+
+import { browserRouter, getBrowserHref, getBrowserRouteURL, subscribeBrowserNavigation } from '@buoy-gg/shared-ui/utils';
+import { routeObserver } from './RouteObserver';
+import { routeEventStore } from './stores/routeEventStore';
+import { navigationStackStore } from './stores/navigationStackStore';
+let leases = 0;
+let stop;
+export function startBrowserRouteCapture() {
+  if (typeof window === 'undefined') return () => {};
+  if (leases++ === 0) {
+    routeEventStore.hydrateBootCapture();
+    let previousPathname;
+    let previousTime;
+    let lastHref = '';
+    const visits = [];
+    let cursor = -1;
+    const update = change => {
+      if (change.href === lastHref && change.kind === 'pop') return;
+      if (change.kind === 'replace' && cursor >= 0) visits[cursor] = change.href;else if (change.kind === 'pop') {
+        const index = visits.lastIndexOf(change.href, cursor - 1);
+        const forward = visits.indexOf(change.href, cursor + 1);
+        if (index >= 0) cursor = index;else if (forward >= 0) cursor = forward;else {
+          visits.splice(cursor + 1);
+          visits.push(change.href);
+          cursor++;
+        }
+      } else {
+        visits.splice(cursor + 1);
+        visits.push(change.href);
+        cursor++;
+      }
+      lastHref = change.href;
+      const url = getBrowserRouteURL(change.href);
+      const timestamp = Date.now();
+      routeObserver.emit({
+        pathname: url.pathname,
+        params: Object.fromEntries(url.searchParams),
+        segments: url.pathname.split('/').filter(Boolean),
+        previousPathname,
+        timestamp,
+        timeSincePrevious: previousTime === undefined ? undefined : timestamp - previousTime
+      });
+      previousPathname = url.pathname;
+      previousTime = timestamp;
+      navigationStackStore.setStack(visits.map((href, index) => {
+        const location = getBrowserRouteURL(href);
+        return {
+          key: `browser:${index}`,
+          name: location.pathname,
+          pathname: location.pathname,
+          params: Object.fromEntries(location.searchParams),
+          index,
+          isFocused: index === cursor,
+          canPop: index > 0
+        };
+      }));
+    };
+    const goTo = index => {
+      if (!Number.isInteger(index) || index < 0 || index >= visits.length) throw new Error('That browser history entry is unavailable.');
+      window.history.go(index - cursor);
+    };
+    navigationStackStore.setActions({
+      navigateToIndex: goTo,
+      popToIndex: goTo,
+      goBack: browserRouter.back,
+      popToTop: () => goTo(0),
+      navigateToRoute: (name, params) => {
+        browserRouter.push({
+          pathname: name,
+          params: params
+        });
+        return true;
+      }
+    });
+    stop = subscribeBrowserNavigation(update);
+    update({
+      href: getBrowserHref(),
+      kind: 'initial'
+    });
+  }
+  let released = false;
+  return () => {
+    if (released) return;
+    released = true;
+    if (--leases === 0) {
+      stop?.();
+      stop = undefined;
+      navigationStackStore.setActions(null);
+    }
+  };
+}

package/lib/module/components/ReactNavigationRoutes.web.js

@@ -0,0 +1,3 @@
+"use strict";
+
+export { RoutesSitemap as ReactNavigationRoutes } from './RoutesSitemap';

package/lib/module/components/RouteEventDetail.js

@@ -12,7 +12,7 @@
 import { View, Text, StyleSheet, TouchableOpacity, ScrollView } from "react-native";
 import { Navigation, night, monoFont } from "@buoy-gg/shared-ui";
 import { RouteEventExpandedContent } from "./RouteEventExpandedContent";
-import { getRouteTemplate } from "../utils/routeTemplate";
+import { getRouteTemplate, routeHref } from "../utils/routeTemplate";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function RouteEventDetail({
   event,
@@ -36,7 +36,7 @@ export function RouteEventDetail({
       style: styles.footer,
       children: /*#__PURE__*/_jsxs(TouchableOpacity, {
         style: styles.goButton,
-        onPress: () => onNavigate(event.pathname),
+        onPress: () => onNavigate(routeHref(event.pathname, event.params)),
         activeOpacity: 0.8,
         testID: "buoy-routes-detail-go",
         accessibilityRole: "button",

package/lib/module/components/RouteEventItemCompact.js

@@ -10,7 +10,7 @@ import { memo, useMemo } from "react";
 import { Text, TouchableOpacity, StyleSheet } from "react-native";
 import { CompactRow, RelativeTime, buoyColors, night, monoFont } from "@buoy-gg/shared-ui";
 import { RouteEventExpandedContent } from "./RouteEventExpandedContent";
-import { getRouteTemplate } from "../utils/routeTemplate";
+import { getRouteTemplate, routeHref } from "../utils/routeTemplate";
 import { eventRowTestID } from "../utils/testIDs";
 
 // Route type for color coding
@@ -133,7 +133,7 @@ export const RouteEventItemCompact = /*#__PURE__*/memo(function RouteEventItemCo
     if (!onNavigate) return undefined;
     return /*#__PURE__*/_jsx(TouchableOpacity, {
       style: styles.goButton,
-      onPress: () => onNavigate(event.pathname),
+      onPress: () => onNavigate(routeHref(event.pathname, event.params)),
       testID: `${testID}-go`,
       accessibilityRole: "button",
       accessibilityLabel: `Go to ${event.pathname}`,