@flareapp/react 2.6.0 → 2.8.0

package/dist/tanstack-router.mjs

@@ -0,0 +1,86 @@
+import { instrumentOnce, insulate, registerNavigationSource, resolveHref, routeName } from "@flareapp/js/browser";
+
+//#region src/tanstack-router.ts
+/**
+* How long a held navigation root waits for `onResolved` before settling itself. Exported so the suite
+* drives it instead of hardcoding the number; not part of the supported surface.
+*/
+const STALE_NAVIGATION_TIMEOUT_MS = 5e3;
+/**
+* Trace a TanStack Router instance: name the `browser_pageload` root from the
+* initial route and open a parameterized `browser_navigation` root per route
+* change. Returns a cleanup that unsubscribes and unregisters. Safe to call
+* before or after tracing is enabled; no-ops when tracing is off. Calling it
+* twice on the same router replaces the first instrumentation rather than
+* stacking a second set of subscriptions.
+*/
+function traceTanStackRouter(router) {
+	if (typeof router?.subscribe !== "function") return () => {};
+	return instrumentOnce(router, (track) => install(router, track));
+}
+function install(router, track) {
+	const nav = registerNavigationSource();
+	track(() => nav.unregister());
+	function hrefOf(loc) {
+		return resolveHref(() => loc.publicHref ?? loc.href, loc.pathname);
+	}
+	function routeNameFor(loc) {
+		return routeName(() => {
+			const matches = router.matchRoutes(loc.pathname, loc.search, {
+				preload: false,
+				throwOnError: false
+			});
+			if (!matches.some((m) => m.routeId !== "__root__")) return;
+			const last = matches[matches.length - 1];
+			return last?.fullPath || last?.routeId;
+		}, loc.pathname, hrefOf(loc));
+	}
+	try {
+		nav.setActiveRouteName(routeNameFor(router.state.location));
+	} catch {}
+	let inFlight = false;
+	let destination = null;
+	let staleTimer = null;
+	function clearStaleTimer() {
+		if (staleTimer !== null) {
+			clearTimeout(staleTimer);
+			staleTimer = null;
+		}
+	}
+	function settle(location) {
+		clearStaleTimer();
+		inFlight = false;
+		destination = null;
+		nav.settleNavigation(routeNameFor(location));
+	}
+	track(clearStaleTimer);
+	track(router.subscribe("onBeforeLoad", insulate((event) => {
+		if (event.fromLocation === void 0) return;
+		if (event.hrefChanged === false) return;
+		if (event.toLocation.state === event.fromLocation.state) return;
+		if (!inFlight) {
+			inFlight = true;
+			nav.startNavigation({
+				path: event.toLocation.pathname,
+				hold: true
+			});
+		}
+		destination = event.toLocation;
+		nav.setActiveRouteName(routeNameFor(event.toLocation));
+		clearStaleTimer();
+		staleTimer = setTimeout(insulate(() => {
+			staleTimer = null;
+			if (destination) settle(destination);
+		}), STALE_NAVIGATION_TIMEOUT_MS);
+	})));
+	track(router.subscribe("onResolved", insulate((event) => {
+		if (event.fromLocation === void 0) {
+			nav.setActiveRouteName(routeNameFor(event.toLocation));
+			return;
+		}
+		if (inFlight) settle(event.toLocation);
+	})));
+}
+
+//#endregion
+export { STALE_NAVIGATION_TIMEOUT_MS, traceTanStackRouter };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@flareapp/react",
-    "version": "2.6.0",
+    "version": "2.8.0",
     "description": "React client for flareapp.io",
     "homepage": "https://flareapp.io",
     "bugs": "https://github.com/spatie/flare-client-js/issues",
@@ -51,22 +51,53 @@
                 "types": "./dist/inject.d.cts",
                 "default": "./dist/inject.cjs"
             }
+        },
+        "./tanstack-router": {
+            "import": {
+                "types": "./dist/tanstack-router.d.mts",
+                "default": "./dist/tanstack-router.mjs"
+            },
+            "require": {
+                "types": "./dist/tanstack-router.d.cts",
+                "default": "./dist/tanstack-router.cjs"
+            }
+        },
+        "./react-router": {
+            "import": {
+                "types": "./dist/react-router.d.mts",
+                "default": "./dist/react-router.mjs"
+            },
+            "require": {
+                "types": "./dist/react-router.d.cts",
+                "default": "./dist/react-router.cjs"
+            }
+        },
+        "./profiler": {
+            "import": {
+                "types": "./dist/profiler.d.mts",
+                "default": "./dist/profiler.mjs"
+            },
+            "require": {
+                "types": "./dist/profiler.d.cts",
+                "default": "./dist/profiler.cjs"
+            }
         }
     },
     "scripts": {
         "prepublishOnly": "npm run build",
-        "build": "tsdown src/index.ts src/inject.ts --format cjs,esm --dts --env.PACKAGE_VERSION=$(node -p \"require('./package.json').version\") --clean",
+        "build": "tsdown src/index.ts src/inject.ts src/tanstack-router.ts src/react-router.ts src/profiler.ts --format cjs,esm --dts --env.PACKAGE_VERSION=$(node -p \"require('./package.json').version\") --clean",
         "test": "vitest run",
         "typescript": "tsc --noEmit",
         "verify:inject": "node scripts/verify-inject-no-root.mjs",
         "release": "release-it"
     },
     "dependencies": {
-        "@flareapp/core": "2.6.0"
+        "@flareapp/core": "2.8.0"
     },
     "devDependencies": {
         "@flareapp/electron": "file:../electron",
         "@flareapp/js": "file:../js",
+        "@flareapp/test-helpers": "*",
         "@testing-library/jest-dom": "^6.9.1",
         "@testing-library/react": "^16.0.0",
         "@types/react": "^19.0.0",
@@ -74,13 +105,24 @@
         "jsdom": "^26.1.0",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
+        "react-router": "^7.6.0",
         "tsdown": "^0.20.3",
         "typescript": "^5.7.0",
         "vitest": "^4.0.0"
     },
     "peerDependencies": {
-        "@flareapp/js": "^2.6.0",
-        "react": "^16.0.0||^17.0.0||^18.0.0||^19.0.0"
+        "@flareapp/js": "^2.8.0",
+        "@tanstack/react-router": ">=1.64.0 <2",
+        "react": "^16.0.0||^17.0.0||^18.0.0||^19.0.0",
+        "react-router": ">=7.0.0 <8"
+    },
+    "peerDependenciesMeta": {
+        "@tanstack/react-router": {
+            "optional": true
+        },
+        "react-router": {
+            "optional": true
+        }
     },
     "publishConfig": {
         "access": "public"