@ops-ai/react-router-toggly 1.2.1 → 1.5.2

package/CHANGELOG.md

@@ -1,5 +1,59 @@
+## 1.5.2
+
+2026-11-08
+
+### Fixed
+- The browser client unwraps `evaluated-signed` `{ defs }` envelopes before
+  storing flags. A bare flag map still works. Previously the signed envelope
+  was stored as the flag map, so flag keys never matched [OPS-2064].
+
+### Changed
+- `engines.node` floor raised from `>=18` to `>=22` (Node 18 and 20 are EOL).
+- CI unit matrix is Node 22 / 24 / 26; packed RR7 and RR8 hosts run on Node 24.
+- Packed hosts pin React Router 7.18.5 + React 18 and React Router 8.5.1 + React 19.3.1.
+- Non-breaking dependency bumps within existing major ranges (`typescript` 5.9,
+  `ts-jest`, `@grpc/*`, `@ops-ai/toggly-*` patches/minors, `ws`).
+
+### Tests
+- Added mocked HTTP API-contract evaluation coverage for `definitions-signed`
+  (local server eval) and `evaluated-signed` (browser client) response shapes,
+  including a `{ defs }` envelope and a bare flag map.
+
+## 1.5.1
+
+2026-10-15
+
+### Fixed
+- After `dispose()`, `use()` and `captureCheck()` no longer create an
+  unmanaged reporter or attach leftover lifecycle listeners [OPS-1758].
+
+## 1.5.0
+
+2026-10-11
+
+### Added
+- `use()` for timed feature usage scopes (attempt, duration, errors) via `@ops-ai/toggly-client-telemetry` [OPS-1758].
+
 # Changelog
 
+## [1.4.0] - 2026-10-11
+
+### Added
+- Usage scope metrics on `VariantStats` (`errorCount`, `durationSumMs`,
+  `errorDurationSumMs`) and batcher APIs `recordUsageError`, `recordUsageDuration`,
+  `recordUsageScopeOutcome` (proto fields 5–7).
+
+## [1.3.1] - 2026-10-11
+
+### Fixed
+- Only call `useRouteLoaderData` when `routeId` is set and use `useInRouterContext` so SSR and non-data-router apps hydrate from `fallbackContext` / `TogglyScript` without invoking data-router hooks [OPS-1756].
+
+## [1.3.0] - 2026-10-04
+
+### Added
+- Server export of `createSegmentMembershipClient` for Backend-key targeting-list updates.
+
+
 ## [1.2.1] - 2026-09-27
 
 ### Fixed

package/README.md

@@ -64,7 +64,7 @@ npm install @ops-ai/react-router-toggly react-router react react-dom
 ```
 
 Peers: `react-router ^7 || ^8`, `react` / `react-dom ^18 || ^19`. Optional:
-`@react-router/node`. Requires Node `>=18`.
+`@react-router/node`. Requires Node `>=22`.
 
 ## Quick start
 

package/dist/client.cjs

@@ -84,6 +84,13 @@ function buildDefinitionsUrl(config, context) {
 function parseVariantDefsPayload(parsed) {
   return togglySignedDefs.asVariantDefsRecord(togglySignedDefs.unwrapDefsPayload(parsed));
 }
+function parseEvaluatedFlagsPayload(parsed) {
+  const body = togglySignedDefs.unwrapDefsPayload(parsed);
+  if (!body || typeof body !== "object" || Array.isArray(body)) {
+    return {};
+  }
+  return body;
+}
 function variantDefsToFlags(defs) {
   const out = {};
   for (const key of Object.keys(defs)) {
@@ -186,6 +193,7 @@ function createBrowserTelemetry(config) {
     }
   };
   const getReporter = () => {
+    if (disposed) return void 0;
     if (!reporter) {
       reporter = togglyClientTelemetry.createTelemetryReporter({
         appKey: config.appKey,
@@ -207,6 +215,7 @@ function createBrowserTelemetry(config) {
   };
   function replay(entry) {
     const target = getReporter();
+    if (!target) return;
     target.setContext(entry.context);
     if (entry.kind === "feature") {
       const methods = ["recordCheck", "recordUsage", "recordView"];
@@ -274,6 +283,28 @@ function createBrowserTelemetry(config) {
   }
   const api = {
     recordUsage: (key, variant = "enabled") => feature(key, variant, 1),
+    use: (key, fn, variant = "enabled") => {
+      if (!usage || disposed) {
+        return togglyClientTelemetry.runFeatureUsageScope(
+          { recordAttempt: () => {
+          }, recordSuccessDuration: () => {
+          }, recordFailure: () => {
+          } },
+          fn
+        );
+      }
+      const target = getReporter();
+      if (!target) {
+        return togglyClientTelemetry.runFeatureUsageScope(
+          { recordAttempt: () => {
+          }, recordSuccessDuration: () => {
+          }, recordFailure: () => {
+          } },
+          fn
+        );
+      }
+      return target.use(key, fn, variant);
+    },
     recordView: (key, variant = "enabled") => feature(key, variant, 2),
     incrementCounter: (key, value = 1) => event({ partition, context, key, kind: "counter", values: [value] }),
     setGauge: (key, value) => event({ partition, context, key, kind: "gauge", values: [value] }),
@@ -293,7 +324,10 @@ function createBrowserTelemetry(config) {
       if (disposed || !usage) return () => {
       };
       if (active) {
-        const record = getReporter().captureCheck();
+        const target = getReporter();
+        if (!target) return () => {
+        };
+        const record = target.captureCheck();
         return (key, result) => record(key, checkVariantLabel(result));
       }
       const attribution = context;
@@ -320,7 +354,7 @@ function createBrowserTelemetry(config) {
 
 // src/client/sdk-identity.ts
 var SDK_ID = "react-router";
-var SDK_VERSION = "1.2.1";
+var SDK_VERSION = "1.5.0";
 function appendSdkQueryParams(params) {
   params.set("sdk", SDK_ID);
   params.set("sdkVersion", SDK_VERSION);
@@ -520,7 +554,7 @@ function TogglyProviderOwner({
           return newFlags2;
         }
         variantsRef.current = null;
-        const newFlags = payload && typeof payload === "object" ? payload : {};
+        const newFlags = parseEvaluatedFlagsPayload(payload);
         logger.debug(`Fetched ${Object.keys(newFlags).length} flags.`);
         return newFlags;
       } catch (error) {
@@ -1053,32 +1087,97 @@ function FeatureGate({
   const enabled = useFeatureGate(featureKeys, requirement, negate, context, contextKind);
   return enabled ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children }) : null;
 }
-function RouterTogglyProvider({
+function resolveServerContext(data, fallbackContext) {
+  const serverContext = data?.[TOGGLY_LOADER_KEY];
+  return serverContext ?? fallbackContext;
+}
+function buildMergedConfig(config, serverContext) {
+  return config ?? (serverContext ? {
+    appKey: serverContext.appKey,
+    environment: serverContext.environment
+  } : void 0);
+}
+function RouterTogglyProviderInner({
+  children,
+  serverContext,
+  config,
+  ...props
+}) {
+  const mergedConfig = buildMergedConfig(config, serverContext);
+  return /* @__PURE__ */ jsxRuntime.jsx(TogglyProvider, { serverContext, config: mergedConfig, ...props, children });
+}
+function RouterTogglyProviderWithData({
+  children,
+  data,
+  fallbackContext,
+  config,
+  ...props
+}) {
+  const serverContext = resolveServerContext(data, fallbackContext);
+  return /* @__PURE__ */ jsxRuntime.jsx(RouterTogglyProviderInner, { serverContext, config, ...props, children });
+}
+function RouterTogglyProviderFromRoute({
   children,
   routeId,
   fallbackContext,
   config,
   ...props
 }) {
-  const routeData = reactRouter.useRouteLoaderData(routeId ?? "");
+  const routeData = reactRouter.useRouteLoaderData(routeId);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    RouterTogglyProviderWithData,
+    {
+      data: routeData,
+      fallbackContext,
+      config,
+      ...props,
+      children
+    }
+  );
+}
+function RouterTogglyProviderFromLoader({
+  children,
+  fallbackContext,
+  config,
+  ...props
+}) {
   const loaderData = reactRouter.useLoaderData();
-  const data = routeId ? routeData : loaderData;
-  const serverContext = data?.[TOGGLY_LOADER_KEY];
-  const resolvedServerContext = serverContext ?? fallbackContext;
-  const mergedConfig = config ?? (resolvedServerContext ? {
-    appKey: resolvedServerContext.appKey,
-    environment: resolvedServerContext.environment
-  } : void 0);
   return /* @__PURE__ */ jsxRuntime.jsx(
-    TogglyProvider,
+    RouterTogglyProviderWithData,
     {
-      serverContext: resolvedServerContext,
-      config: mergedConfig,
+      data: loaderData,
+      fallbackContext,
+      config,
       ...props,
       children
     }
   );
 }
+function RouterTogglyProviderStatic({
+  children,
+  fallbackContext,
+  config,
+  ...props
+}) {
+  const serverContext = fallbackContext ?? getWindowTogglyData();
+  return /* @__PURE__ */ jsxRuntime.jsx(RouterTogglyProviderInner, { serverContext, config, ...props, children });
+}
+function RouterTogglyProvider({
+  children,
+  routeId,
+  fallbackContext,
+  config,
+  ...props
+}) {
+  const inRouter = reactRouter.useInRouterContext();
+  if (routeId && inRouter) {
+    return /* @__PURE__ */ jsxRuntime.jsx(RouterTogglyProviderFromRoute, { routeId, fallbackContext, config, ...props, children });
+  }
+  if (inRouter) {
+    return /* @__PURE__ */ jsxRuntime.jsx(RouterTogglyProviderFromLoader, { fallbackContext, config, ...props, children });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(RouterTogglyProviderStatic, { fallbackContext, config, ...props, children });
+}
 function useTogglyLoaderData() {
   const loaderData = reactRouter.useLoaderData();
   return {