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

package/dist/client.d.cts

@@ -3,6 +3,8 @@ import { EvaluatedDefinitions, TogglyEntityContext } from '@ops-ai/toggly-hooks-
 export { TogglyEntityContext, normalizeEntityContext, registerContext } from '@ops-ai/toggly-hooks-types';
 import * as react from 'react';
 import { ReactNode, ReactElement } from 'react';
+import { FeatureUsageScope } from '@ops-ai/toggly-client-telemetry';
+export { FeatureUsageScope } from '@ops-ai/toggly-client-telemetry';
 
 interface UsageSender {
     sendStats(request: Record<string, unknown>): Promise<unknown>;
@@ -267,6 +269,7 @@ declare const TOGGLY_LOADER_KEY: "__toggly";
 
 interface FrontendTelemetry {
     recordUsage(featureKey: string, variant?: string): void;
+    use: <T>(featureKey: string, fn: (scope: FeatureUsageScope) => Promise<T>, variant?: string) => Promise<T>;
     recordView(featureKey: string, variant?: string): void;
     incrementCounter(metricKey: string, value?: number): void;
     setGauge(metricKey: string, value: number): void;
@@ -569,8 +572,8 @@ declare function FeatureGate({ featureKeys, requirement, negate, children, conte
 /**
  * React Router-specific utilities for Toggly
  */
-type SerializeFrom<T> = T;
 
+type SerializeFrom<T> = T;
 /**
  * Props for RouterTogglyProvider
  */
@@ -593,7 +596,7 @@ interface RouterTogglyProviderProps extends Omit<TogglyProviderProps, 'serverCon
  *   );
  * }
  */
-declare function RouterTogglyProvider({ children, routeId, fallbackContext, config, ...props }: RouterTogglyProviderProps): ReactElement;
+declare function RouterTogglyProvider({ children, routeId, fallbackContext, config, ...props }: Readonly<RouterTogglyProviderProps>): ReactElement;
 /**
  * Hook to get Toggly context from loader data
  */

package/dist/client.d.ts

@@ -3,6 +3,8 @@ import { EvaluatedDefinitions, TogglyEntityContext } from '@ops-ai/toggly-hooks-
 export { TogglyEntityContext, normalizeEntityContext, registerContext } from '@ops-ai/toggly-hooks-types';
 import * as react from 'react';
 import { ReactNode, ReactElement } from 'react';
+import { FeatureUsageScope } from '@ops-ai/toggly-client-telemetry';
+export { FeatureUsageScope } from '@ops-ai/toggly-client-telemetry';
 
 interface UsageSender {
     sendStats(request: Record<string, unknown>): Promise<unknown>;
@@ -267,6 +269,7 @@ declare const TOGGLY_LOADER_KEY: "__toggly";
 
 interface FrontendTelemetry {
     recordUsage(featureKey: string, variant?: string): void;
+    use: <T>(featureKey: string, fn: (scope: FeatureUsageScope) => Promise<T>, variant?: string) => Promise<T>;
     recordView(featureKey: string, variant?: string): void;
     incrementCounter(metricKey: string, value?: number): void;
     setGauge(metricKey: string, value: number): void;
@@ -569,8 +572,8 @@ declare function FeatureGate({ featureKeys, requirement, negate, children, conte
 /**
  * React Router-specific utilities for Toggly
  */
-type SerializeFrom<T> = T;
 
+type SerializeFrom<T> = T;
 /**
  * Props for RouterTogglyProvider
  */
@@ -593,7 +596,7 @@ interface RouterTogglyProviderProps extends Omit<TogglyProviderProps, 'serverCon
  *   );
  * }
  */
-declare function RouterTogglyProvider({ children, routeId, fallbackContext, config, ...props }: RouterTogglyProviderProps): ReactElement;
+declare function RouterTogglyProvider({ children, routeId, fallbackContext, config, ...props }: Readonly<RouterTogglyProviderProps>): ReactElement;
 /**
  * Hook to get Toggly context from loader data
  */

package/dist/client.js

@@ -3,11 +3,11 @@ export { normalizeEntityContext, registerContext } from '@ops-ai/toggly-hooks-ty
 import '@ops-ai/toggly-eval';
 import { asVariantDefsRecord, unwrapDefsPayload } from '@ops-ai/toggly-signed-defs';
 import { createContext, useRef, useMemo, useState, useEffect, useCallback, useContext, useLayoutEffect } from 'react';
-import { createTelemetryReporter } from '@ops-ai/toggly-client-telemetry';
+import { runFeatureUsageScope, createTelemetryReporter } from '@ops-ai/toggly-client-telemetry';
 import { attachBrowserLifecycle } from '@ops-ai/toggly-client-telemetry/browser';
 import { buildFlagGateIndex, applyLocalGate } from '@ops-ai/toggly-local-gates';
 import { jsx, Fragment } from 'react/jsx-runtime';
-import { useRouteLoaderData, useLoaderData } from 'react-router';
+import { useInRouterContext, useLoaderData, useRouteLoaderData } from 'react-router';
 
 // src/core/index.ts
 
@@ -83,6 +83,13 @@ function buildDefinitionsUrl(config, context) {
 function parseVariantDefsPayload(parsed) {
   return asVariantDefsRecord(unwrapDefsPayload(parsed));
 }
+function parseEvaluatedFlagsPayload(parsed) {
+  const body = 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)) {
@@ -185,6 +192,7 @@ function createBrowserTelemetry(config) {
     }
   };
   const getReporter = () => {
+    if (disposed) return void 0;
     if (!reporter) {
       reporter = createTelemetryReporter({
         appKey: config.appKey,
@@ -206,6 +214,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"];
@@ -273,6 +282,28 @@ function createBrowserTelemetry(config) {
   }
   const api = {
     recordUsage: (key, variant = "enabled") => feature(key, variant, 1),
+    use: (key, fn, variant = "enabled") => {
+      if (!usage || disposed) {
+        return runFeatureUsageScope(
+          { recordAttempt: () => {
+          }, recordSuccessDuration: () => {
+          }, recordFailure: () => {
+          } },
+          fn
+        );
+      }
+      const target = getReporter();
+      if (!target) {
+        return 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] }),
@@ -292,7 +323,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;
@@ -319,7 +353,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);
@@ -519,7 +553,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) {
@@ -1052,32 +1086,97 @@ function FeatureGate({
   const enabled = useFeatureGate(featureKeys, requirement, negate, context, contextKind);
   return enabled ? /* @__PURE__ */ jsx(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__ */ jsx(TogglyProvider, { serverContext, config: mergedConfig, ...props, children });
+}
+function RouterTogglyProviderWithData({
+  children,
+  data,
+  fallbackContext,
+  config,
+  ...props
+}) {
+  const serverContext = resolveServerContext(data, fallbackContext);
+  return /* @__PURE__ */ jsx(RouterTogglyProviderInner, { serverContext, config, ...props, children });
+}
+function RouterTogglyProviderFromRoute({
   children,
   routeId,
   fallbackContext,
   config,
   ...props
 }) {
-  const routeData = useRouteLoaderData(routeId ?? "");
+  const routeData = useRouteLoaderData(routeId);
+  return /* @__PURE__ */ jsx(
+    RouterTogglyProviderWithData,
+    {
+      data: routeData,
+      fallbackContext,
+      config,
+      ...props,
+      children
+    }
+  );
+}
+function RouterTogglyProviderFromLoader({
+  children,
+  fallbackContext,
+  config,
+  ...props
+}) {
   const loaderData = 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__ */ 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__ */ jsx(RouterTogglyProviderInner, { serverContext, config, ...props, children });
+}
+function RouterTogglyProvider({
+  children,
+  routeId,
+  fallbackContext,
+  config,
+  ...props
+}) {
+  const inRouter = useInRouterContext();
+  if (routeId && inRouter) {
+    return /* @__PURE__ */ jsx(RouterTogglyProviderFromRoute, { routeId, fallbackContext, config, ...props, children });
+  }
+  if (inRouter) {
+    return /* @__PURE__ */ jsx(RouterTogglyProviderFromLoader, { fallbackContext, config, ...props, children });
+  }
+  return /* @__PURE__ */ jsx(RouterTogglyProviderStatic, { fallbackContext, config, ...props, children });
+}
 function useTogglyLoaderData() {
   const loaderData = useLoaderData();
   return {