@ops-ai/react-router-toggly 1.0.1 → 1.2.0

package/dist/client.js

@@ -1,7 +1,10 @@
 import { registerContext, normalizeEntityContext, serializeJsonForInlineScript, resolveEvaluatedDefinition, appendEvaluationContext } from '@ops-ai/toggly-hooks-types';
 export { normalizeEntityContext, registerContext } from '@ops-ai/toggly-hooks-types';
 import '@ops-ai/toggly-eval';
-import { createContext, useMemo, useState, useRef, useCallback, useEffect, useContext } from 'react';
+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 { 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';
@@ -49,12 +52,18 @@ function mergeConfig(config) {
   };
 }
 function buildDefinitionsUrl(config, context) {
-  const { baseUrl, appKey, environment, groups, claims, evaluationMode } = mergeConfig(config);
+  const { baseUrl, appKey, environment, groups, claims, evaluationMode, enableVariants } = mergeConfig(config);
   if (!appKey) {
     throw new Error("appKey is required");
   }
   const mode = evaluationMode ?? "remote";
-  const pathSegment = mode === "local" ? "definitions-signed" : "evaluated-signed";
+  const useVariants = mode !== "local" && enableVariants === true;
+  let pathSegment = "evaluated-signed";
+  if (mode === "local") {
+    pathSegment = "definitions-signed";
+  } else if (useVariants) {
+    pathSegment = "evaluated-variants-signed";
+  }
   const url = new URL(`${baseUrl}/${pathSegment}/${appKey}/${environment}`);
   if (mode === "local") {
     return url.toString();
@@ -67,10 +76,25 @@ function buildDefinitionsUrl(config, context) {
       groups: fromParam?.groups ?? groups,
       claims: fromParam?.claims ?? claims
     },
-    "evaluated"
+    useVariants ? "variants" : "evaluated"
   );
   return url.toString();
 }
+function parseVariantDefsPayload(parsed) {
+  return asVariantDefsRecord(unwrapDefsPayload(parsed));
+}
+function variantDefsToFlags(defs) {
+  const out = {};
+  for (const key of Object.keys(defs)) {
+    out[key] = defs[key]?.enabled === true;
+  }
+  return out;
+}
+function decodeVariantValue(value, isT) {
+  if (value === null || value === void 0) return null;
+  if (isT) return isT(value) ? value : null;
+  return value;
+}
 function isFeatureEnabled(flags, featureKey, defaultValue = false, entityContext) {
   if (!flags || Object.keys(flags).length === 0) {
     return defaultValue;
@@ -135,16 +159,194 @@ var HEADERS = {
   CACHE_CONTROL: "cache-control"
 };
 var TOGGLY_LOADER_KEY = "__toggly";
+function checkVariantLabel(result) {
+  if (typeof result === "string") {
+    return result;
+  }
+  return result ? "enabled" : "disabled";
+}
+function createBrowserTelemetry(config) {
+  const enabled = globalThis.window !== void 0 && typeof document !== "undefined" && !!config.appKey?.trim() && config.enableTelemetry !== false;
+  const usage = enabled && config.enableUsageTracking !== false;
+  const metrics = enabled && config.enableMetrics !== false;
+  let context = { identity: config.identity, instanceId: config.instanceId };
+  let partition = 0;
+  let active = false;
+  let disposed = false;
+  let reporter;
+  let detach;
+  let staged = /* @__PURE__ */ new Map();
+  let diagnostics = 0;
+  const diagnostic = () => {
+    if (diagnostics++ >= 10) return;
+    try {
+      config.onError?.("Frontend telemetry pre-commit event rejected.");
+    } catch {
+    }
+  };
+  const getReporter = () => {
+    if (!reporter) {
+      reporter = createTelemetryReporter({
+        appKey: config.appKey,
+        environment: config.environment,
+        ...context,
+        metricsBaseUrl: config.metricsBaseUrl,
+        telemetryFlushIntervalMs: config.telemetryFlushIntervalMs,
+        fetch: config.telemetryFetch,
+        onDiagnostic: (code) => {
+          try {
+            config.onError?.(code);
+          } catch {
+          }
+        }
+      });
+      detach = attachBrowserLifecycle(reporter);
+    }
+    return reporter;
+  };
+  function replay(entry) {
+    const target = getReporter();
+    target.setContext(entry.context);
+    if (entry.kind === "feature") {
+      const methods = ["recordCheck", "recordUsage", "recordView"];
+      entry.values.forEach((count, index) => {
+        for (let i = 0; i < count; i++) target[methods[index]](entry.key, entry.variant);
+      });
+    } else if (entry.kind === "gauge") target.setGauge(entry.key, entry.values[0]);
+    else {
+      let remaining = entry.values[0];
+      do {
+        const value = Math.min(remaining, 1e6);
+        target.incrementCounter(entry.key, value);
+        remaining -= value;
+      } while (remaining > 0);
+    }
+    target.setContext(context);
+  }
+  function isValidEntry(entry) {
+    return !(typeof entry.key !== "string" || !entry.key.trim() || entry.kind === "feature" && (typeof entry.variant !== "string" || !entry.variant.length || entry.variant.length > 64 || /[^A-Za-z0-9_-]/.test(entry.variant)) || entry.values.some((value) => !Number.isFinite(value) || value < 0 || value > 1e6 || entry.kind !== "gauge" && !Number.isInteger(value)));
+  }
+  function fitsAdmissionBudget(entries, entry) {
+    let operations = 0;
+    let bytes = 0;
+    let variants = 0;
+    for (const value of entries) {
+      if (value.kind === "feature" && value.key === entry.key && value.partition === entry.partition) variants++;
+      const count = value.kind === "feature" ? value.values.reduce((a, b) => a + b, 0) : Math.max(1, Math.ceil(value.values[0] / 1e6));
+      operations += count;
+      const serialized = JSON.stringify({ k: config.appKey, e: config.environment ?? "Production", ...value });
+      const size = new TextEncoder().encode(serialized).byteLength;
+      if (size > 49152) return false;
+      bytes += size * count;
+    }
+    return entries.length <= 2e3 && operations <= 2e3 && bytes <= 262144 && variants <= 16;
+  }
+  function event(entry) {
+    if (disposed || (entry.kind === "feature" ? !usage : !metrics)) return;
+    if (!isValidEntry(entry)) {
+      diagnostic();
+      return;
+    }
+    if (active) {
+      replay(entry);
+      return;
+    }
+    const id = JSON.stringify([entry.partition, entry.kind === "feature" ? "f" : "m", entry.key, entry.variant]);
+    const previous = staged.get(id);
+    if (previous && previous.kind !== entry.kind) {
+      diagnostic();
+      return;
+    }
+    if (previous && entry.kind !== "gauge") entry.values = entry.values.map((value, index) => value + previous.values[index]);
+    const entries = [...staged.entries()].filter(([key]) => key !== id).map(([, value]) => value);
+    entries.push(entry);
+    if (!fitsAdmissionBudget(entries, entry)) {
+      diagnostic();
+      return;
+    }
+    staged.set(id, entry);
+  }
+  function feature(key, variant, index, attribution = context, capturedPartition = partition) {
+    const values = [0, 0, 0];
+    values[index] = 1;
+    event({ partition: capturedPartition, context: attribution, key, variant, kind: "feature", values });
+  }
+  const api = {
+    recordUsage: (key, variant = "enabled") => feature(key, variant, 1),
+    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] }),
+    flushTelemetry: async () => {
+      await reporter?.flush();
+    }
+  };
+  return {
+    api,
+    setContext(next) {
+      if (disposed) return;
+      if (context.identity !== next.identity || context.instanceId !== next.instanceId) partition++;
+      context = { identity: next.identity, instanceId: next.instanceId };
+      reporter?.setContext(context);
+    },
+    captureCheck() {
+      if (disposed || !usage) return () => {
+      };
+      if (active) {
+        const record = getReporter().captureCheck();
+        return (key, result) => record(key, checkVariantLabel(result));
+      }
+      const attribution = context;
+      const capturedPartition = partition;
+      return (key, result) => feature(key, checkVariantLabel(result), 0, attribution, capturedPartition);
+    },
+    recordCheck: (key, result) => feature(key, checkVariantLabel(result), 0),
+    activate() {
+      if (disposed || active) return;
+      active = true;
+      const pending = staged;
+      staged = /* @__PURE__ */ new Map();
+      for (const entry of pending.values()) replay(entry);
+      pending.clear();
+    },
+    dispose(options) {
+      disposed = true;
+      staged.clear();
+      detach?.();
+      reporter?.dispose(options);
+    }
+  };
+}
 
 // src/client/sdk-identity.ts
 var SDK_ID = "react-router";
-var SDK_VERSION = "1.0.1";
+var SDK_VERSION = "1.2.0";
 function appendSdkQueryParams(params) {
   params.set("sdk", SDK_ID);
   params.set("sdkVersion", SDK_VERSION);
 }
 var TogglyContext = createContext(void 0);
-function TogglyProvider({
+var transportIds = /* @__PURE__ */ new WeakMap();
+var nextTransportId = 0;
+function transportId(value) {
+  if (!value) return 0;
+  let id = transportIds.get(value);
+  if (id === void 0) {
+    id = ++nextTransportId;
+    transportIds.set(value, id);
+  }
+  return id;
+}
+var useCommittedContextEffect = globalThis.window === void 0 ? useEffect : useLayoutEffect;
+function TogglyProvider(props) {
+  const config = props.config ?? (props.serverContext ? { appKey: props.serverContext.appKey, environment: props.serverContext.environment } : void 0);
+  const committedOwner = useRef();
+  const ownerKey = JSON.stringify([transportId(config?.telemetryFetch), config?.appKey ?? "", config?.environment ?? "Production", config?.enableTelemetry, config?.enableUsageTracking, config?.enableMetrics, config?.metricsBaseUrl, config?.telemetryFlushIntervalMs]);
+  const snapshot = props.serverContext;
+  const matchesOwner = (!snapshot?.appKey || snapshot.appKey === config?.appKey) && (!snapshot?.environment || snapshot.environment === (config?.environment ?? "Production"));
+  return /* @__PURE__ */ jsx(TogglyProviderOwner, { ...props, committedOwner, config, serverContext: matchesOwner ? snapshot : void 0 }, ownerKey);
+}
+function TogglyProviderOwner({
+  committedOwner,
   children,
   serverContext,
   config,
@@ -160,6 +362,48 @@ function TogglyProvider({
     () => createLogger(mergedConfig?.debug ?? false),
     [mergedConfig?.debug]
   );
+  const contextRef = useRef({
+    identity: serverContext ? serverContext.identity : mergedConfig?.identity,
+    instanceId: mergedConfig?.instanceId?.trim() || void 0,
+    groups: [...mergedConfig?.groups ?? []],
+    claims: { ...mergedConfig?.claims }
+  });
+  const committedTargetingProps = useRef({
+    groups: [...mergedConfig?.groups ?? []],
+    claims: { ...mergedConfig?.claims }
+  });
+  const flagsRef = useRef(serverContext?.flags ?? mergedConfig?.featureDefaults ?? {});
+  const variantsRef = useRef(null);
+  const generationRef = useRef(0);
+  const updateRevisionRef = useRef(0);
+  const [telemetry] = useState(() => createBrowserTelemetry({ ...config, ...contextRef.current }));
+  const mountedRef = useRef(true);
+  useEffect(() => {
+    mountedRef.current = true;
+    const transport = JSON.stringify([
+      config?.metricsBaseUrl ?? "https://metrics.toggly.io",
+      config?.telemetryFlushIntervalMs ?? 45e3,
+      config?.enableTelemetry !== false,
+      config?.enableUsageTracking !== false,
+      config?.enableMetrics !== false
+    ]);
+    const previous = committedOwner.current;
+    if (previous && previous.telemetry !== telemetry) {
+      previous.telemetry.dispose({ flush: previous.transport === transport && previous.fetch === config?.telemetryFetch });
+    }
+    committedOwner.current = { telemetry, transport, fetch: config?.telemetryFetch };
+    telemetry.activate();
+    return () => {
+      mountedRef.current = false;
+      generationRef.current++;
+      queueMicrotask(() => {
+        if (!mountedRef.current) {
+          if (committedOwner.current?.telemetry === telemetry) committedOwner.current = void 0;
+          telemetry.dispose();
+        }
+      });
+    };
+  }, [telemetry]);
   const [flags, setFlags] = useState(
     serverContext?.flags ?? mergedConfig?.featureDefaults ?? {}
   );
@@ -174,23 +418,24 @@ function TogglyProvider({
     buildFlagGateIndex(localGatesRef.current)
   );
   const localGatesListenersRef = useRef(/* @__PURE__ */ new Set());
-  const getEffectiveFlag = useCallback(
-    (featureKey, defaultValue = false, entityContext) => {
-      const remote = isFeatureEnabled(
-        flags,
-        featureKey,
-        defaultValue,
-        entityContext
-      );
-      return applyLocalGate(
-        remote,
-        featureKey,
-        localGatesRef.current,
-        localGateIndexRef.current
-      );
-    },
-    [flags, localGatesRevision]
-  );
+  const captureEvaluation = useCallback((featureKeys) => {
+    const selectedKeys = new Set(featureKeys);
+    const selectedFlags = Object.fromEntries([...selectedKeys].map((key) => [key, flagsRef.current[key]]));
+    const capturedFlags = JSON.parse(JSON.stringify(selectedFlags));
+    const applicableGates = localGatesRef.current.filter((gate) => gate.flagKeys.some((key) => selectedKeys.has(key)));
+    const index = buildFlagGateIndex(applicableGates);
+    const gates = [...new Set(index.values())].map((id) => {
+      const gate = localGatesRef.current.find((candidate) => candidate.id === id);
+      return { ...gate, flagKeys: [...gate.flagKeys] };
+    });
+    const record = telemetry.captureCheck();
+    return (featureKey, defaultValue = false, entityContext) => {
+      const remote = isFeatureEnabled(capturedFlags, featureKey, defaultValue, entityContext);
+      const result = applyLocalGate(remote, featureKey, gates, index);
+      record(featureKey, result);
+      return result;
+    };
+  }, [flags, localGatesRevision, telemetry]);
   const registerContext2 = useCallback(
     (kind, mapper) => {
       registerContext(kind, mapper);
@@ -226,8 +471,9 @@ function TogglyProvider({
     }
   }, [mergedConfig?.localGates, setLocalGates]);
   const executeAfterRefresh = useCallback(
-    async (newFlags) => {
+    async (newFlags, generation, revision) => {
       for (const hook of hooks) {
+        if (!mountedRef.current || generation !== generationRef.current || revision !== updateRevisionRef.current) return;
         if (hook.afterRefresh) {
           try {
             await hook.afterRefresh(newFlags);
@@ -243,46 +489,66 @@ function TogglyProvider({
     [hooks, logger]
   );
   const fetchFlags = useCallback(
-    async (userIdentity) => {
+    async (target = contextRef.current) => {
+      if (!mountedRef.current) return flagsRef.current;
       if (!mergedConfig?.appKey) {
         logger.debug("No appKey, using current flags.");
-        return flags;
+        return flagsRef.current;
       }
       try {
-        const url = buildDefinitionsUrl(mergedConfig, userIdentity);
-        logger.debug(`Fetching flags from: ${url}`);
+        const parsedUrl = new URL(buildDefinitionsUrl(mergedConfig, target));
+        if (target.instanceId) {
+          const capturedKeys = [...parsedUrl.searchParams.keys()];
+          for (const key of capturedKeys) {
+            if (key === "u" || key === "userId" || key === "g" || key.startsWith("claim.")) parsedUrl.searchParams.delete(key);
+          }
+          parsedUrl.searchParams.set("i", target.instanceId);
+        }
+        const url = parsedUrl.toString();
+        logger.debug("Fetching feature flags");
         const response = await fetchWithTimeout(url, {}, mergedConfig.timeout);
         if (!response.ok) {
           throw new Error(`HTTP ${response.status}: ${response.statusText}`);
         }
         const payload = await response.json();
+        if (mergedConfig.enableVariants === true) {
+          const defs = parseVariantDefsPayload(payload);
+          variantsRef.current = defs;
+          const newFlags2 = variantDefsToFlags(defs);
+          logger.debug(`Fetched ${Object.keys(newFlags2).length} flags (variants).`);
+          return newFlags2;
+        }
+        variantsRef.current = null;
         const newFlags = payload && typeof payload === "object" ? payload : {};
         logger.debug(`Fetched ${Object.keys(newFlags).length} flags.`);
         return newFlags;
       } catch (error) {
         logger.warn("Failed to fetch flags:", error);
-        return flags;
+        return flagsRef.current;
       }
     },
-    [mergedConfig, flags, logger]
+    [mergedConfig, logger]
   );
   const updateFlags = useCallback(
-    async (newFlags) => {
+    async (newFlags, generation, revision) => {
+      if (!mountedRef.current || generation !== generationRef.current || revision !== updateRevisionRef.current) return;
+      flagsRef.current = newFlags;
       setFlags(newFlags);
-      await executeAfterRefresh(newFlags);
-      onFlagsChange?.(newFlags);
+      await executeAfterRefresh(newFlags, generation, revision);
+      if (mountedRef.current && generation === generationRef.current && revision === updateRevisionRef.current) onFlagsChange?.(newFlags);
     },
     [executeAfterRefresh, onFlagsChange]
   );
   const isEnabled = useCallback(
     (featureKey, defaultValue = false, entity, kind) => {
-      return getEffectiveFlag(
+      const evaluate = captureEvaluation([featureKey]);
+      return evaluate(
         featureKey,
         defaultValue,
         normalizeEntityContext(entity, kind)
       );
     },
-    [getEffectiveFlag]
+    [captureEvaluation]
   );
   const isDisabled = useCallback(
     (featureKey, defaultValue = true, entity, kind) => {
@@ -295,67 +561,135 @@ function TogglyProvider({
       if (featureKeys.length === 0) {
         return !negate;
       }
+      const selectedKeys = [...featureKeys];
+      const evaluate = captureEvaluation(selectedKeys);
       const entityContext = normalizeEntityContext(entity, kind);
       let result;
       if (requirement === "any") {
-        result = featureKeys.some(
-          (key) => getEffectiveFlag(key, false, entityContext)
+        result = selectedKeys.some(
+          (key) => evaluate(key, false, entityContext)
         );
       } else {
-        result = featureKeys.every(
-          (key) => getEffectiveFlag(key, false, entityContext)
+        result = selectedKeys.every(
+          (key) => evaluate(key, false, entityContext)
         );
       }
       return negate ? !result : result;
     },
-    [getEffectiveFlag]
+    [captureEvaluation]
+  );
+  const getVariant = useCallback(
+    (featureKey) => {
+      if (!mergedConfig?.enableVariants) return null;
+      const entry = variantsRef.current?.[featureKey];
+      const enabled = applyLocalGate(
+        entry?.enabled === true,
+        featureKey,
+        localGatesRef.current,
+        localGateIndexRef.current
+      );
+      const record = telemetry.captureCheck();
+      record(featureKey, enabled && entry?.variant ? entry.variant : "disabled");
+      if (!enabled || !entry?.variant) return null;
+      return { name: entry.variant, configurationValue: entry.configurationValue };
+    },
+    [mergedConfig?.enableVariants, localGatesRevision, telemetry, flags]
+  );
+  const getVariantValue = useCallback(
+    (featureKey, isT) => {
+      return decodeVariantValue(getVariant(featureKey)?.configurationValue, isT);
+    },
+    [getVariant]
   );
+  const installContext = useCallback((target) => {
+    contextRef.current = target;
+    telemetry.setContext(target);
+    flagsRef.current = mergedConfig?.featureDefaults ?? {};
+    variantsRef.current = null;
+    setFlags(flagsRef.current);
+    setIdentity(target.identity);
+  }, [mergedConfig?.featureDefaults, telemetry]);
+  const isCurrentGeneration = useCallback((generation) => mountedRef.current && generation === generationRef.current, []);
+  const completeIdentification = useCallback((generation) => {
+    if (isCurrentGeneration(generation)) setIsReady(true);
+  }, [isCurrentGeneration]);
+  const currentIdentifyHooks = useCallback(function* (generation, reverse = false) {
+    let index = reverse ? hooks.length - 1 : 0;
+    while (reverse ? index >= 0 : index < hooks.length) {
+      if (!isCurrentGeneration(generation)) return;
+      yield hooks[index];
+      index += reverse ? -1 : 1;
+    }
+  }, [hooks, isCurrentGeneration]);
   const identify = useCallback(
-    async (newIdentity, _context) => {
-      logger.debug(`Identifying user: ${newIdentity}`);
-      for (const hook of hooks) {
-        if (hook.beforeIdentify) {
-          try {
-            await hook.beforeIdentify(newIdentity);
-          } catch (error) {
-            logger.error(
-              `Error in hook "${hook.getMetadata().name}.beforeIdentify":`,
-              error
-            );
-          }
+    async (newIdentity, context) => {
+      if (!mountedRef.current) return;
+      const generation = ++generationRef.current;
+      logger.debug("Identifying user");
+      for (const hook of currentIdentifyHooks(generation)) {
+        if (!hook.beforeIdentify) continue;
+        try {
+          await hook.beforeIdentify(newIdentity);
+        } catch (error) {
+          logger.error(`Error in hook "${hook.getMetadata().name}.beforeIdentify":`, error);
         }
       }
-      setIdentity(newIdentity);
-      const newFlags = await fetchFlags(newIdentity);
-      await updateFlags(newFlags);
-      for (let i = hooks.length - 1; i >= 0; i--) {
-        const hook = hooks[i];
-        if (hook.afterIdentify) {
-          try {
-            await hook.afterIdentify(newIdentity, void 0);
-          } catch (error) {
-            logger.error(
-              `Error in hook "${hook.getMetadata().name}.afterIdentify":`,
-              error
-            );
-          }
+      if (!isCurrentGeneration(generation)) return;
+      const target = {
+        identity: newIdentity,
+        instanceId: context?.instanceId?.trim() || void 0,
+        groups: [...context?.groups ?? contextRef.current.groups],
+        claims: { ...context?.claims ?? contextRef.current.claims }
+      };
+      installContext(target);
+      const revision = ++updateRevisionRef.current;
+      await updateFlags(await fetchFlags(target), generation, revision);
+      for (const hook of currentIdentifyHooks(generation, true)) {
+        if (!hook.afterIdentify) continue;
+        try {
+          await hook.afterIdentify(newIdentity, void 0);
+        } catch (error) {
+          logger.error(`Error in hook "${hook.getMetadata().name}.afterIdentify":`, error);
         }
       }
-      setIsReady(true);
+      completeIdentification(generation);
     },
-    [hooks, fetchFlags, updateFlags, logger]
+    [hooks, fetchFlags, updateFlags, installContext, logger, isCurrentGeneration, completeIdentification, currentIdentifyHooks]
   );
+  useCommittedContextEffect(() => {
+    const previous = committedTargetingProps.current;
+    const groups = [...mergedConfig?.groups ?? []];
+    const claims = { ...mergedConfig?.claims };
+    const groupsChanged = previous.groups.length !== groups.length || groups.some((group, index) => group !== previous.groups[index]);
+    const claimKeys = Object.keys(claims);
+    const claimsChanged = Object.keys(previous.claims).length !== claimKeys.length || claimKeys.some((key) => claims[key] !== previous.claims[key]);
+    if (!groupsChanged && !claimsChanged) return;
+    committedTargetingProps.current = { groups, claims };
+    generationRef.current++;
+    updateRevisionRef.current++;
+    installContext({
+      ...contextRef.current,
+      groups: groupsChanged ? groups : contextRef.current.groups,
+      claims: claimsChanged ? claims : contextRef.current.claims
+    });
+    setIsReady(false);
+  }, [mergedConfig?.groups, mergedConfig?.claims, installContext]);
   const reset = useCallback(async () => {
-    logger.debug("Resetting identity");
-    setIdentity(void 0);
-    const newFlags = await fetchFlags();
-    await updateFlags(newFlags);
-  }, [fetchFlags, updateFlags, logger]);
+    if (!mountedRef.current) return;
+    const generation = ++generationRef.current;
+    const target = { ...contextRef.current, identity: void 0, instanceId: void 0 };
+    installContext(target);
+    const revision = ++updateRevisionRef.current;
+    await updateFlags(await fetchFlags(target), generation, revision);
+    if (mountedRef.current && generation === generationRef.current) setIsReady(true);
+  }, [fetchFlags, updateFlags, installContext]);
   const refresh = useCallback(async () => {
-    logger.debug("Refreshing flags");
-    const newFlags = await fetchFlags(identity);
-    await updateFlags(newFlags);
-  }, [identity, fetchFlags, updateFlags, logger]);
+    if (!mountedRef.current) return;
+    const generation = generationRef.current;
+    const revision = ++updateRevisionRef.current;
+    await updateFlags(await fetchFlags(contextRef.current), generation, revision);
+    if (mountedRef.current && generation === generationRef.current && revision === updateRevisionRef.current) setIsReady(true);
+  }, [fetchFlags, updateFlags]);
   const addHook = useCallback(
     (hook) => {
       setHooks((currentHooks) => {
@@ -433,6 +767,7 @@ function TogglyProvider({
     if (typeof WebSocket === "undefined") {
       return;
     }
+    let live = true;
     function buildWebSocketUrl() {
       const baseUrl = mergedConfig.baseUrl;
       const wsUrl = baseUrl.replace(/^https:\/\//, "wss://").replace(/^http:\/\//, "ws://");
@@ -442,7 +777,7 @@ function TogglyProvider({
       return `${wsUrl.replace(/\/$/, "")}/${mergedConfig.appKey}/ws${query ? `?${query}` : ""}`;
     }
     function connect() {
-      if (wsRef.current) {
+      if (!live || !mountedRef.current || wsRef.current) {
         return;
       }
       const wsUrl = buildWebSocketUrl();
@@ -451,11 +786,13 @@ function TogglyProvider({
         const socket = new WebSocket(wsUrl);
         wsRef.current = socket;
         socket.onopen = () => {
+          if (!live || wsRef.current !== socket) return;
           wsConnectedRef.current = true;
           lastFallbackRefreshRef.current = Date.now();
           logger.debug("WebSocket connected");
         };
         socket.onmessage = (event) => {
+          if (!live || wsRef.current !== socket) return;
           const text = typeof event.data === "string" ? event.data : "";
           try {
             const msg = JSON.parse(text);
@@ -473,12 +810,14 @@ function TogglyProvider({
           }
         };
         socket.onclose = () => {
+          if (!live || wsRef.current !== socket) return;
           wsConnectedRef.current = false;
           wsRef.current = null;
           logger.debug("WebSocket disconnected, reconnecting in 5s");
           scheduleReconnect();
         };
         socket.onerror = () => {
+          if (!live || wsRef.current !== socket) return;
           logger.warn("WebSocket error");
         };
       } catch (error) {
@@ -498,6 +837,7 @@ function TogglyProvider({
     }
     connect();
     return () => {
+      live = false;
       if (wsReconnectTimerRef.current) {
         clearTimeout(wsReconnectTimerRef.current);
         wsReconnectTimerRef.current = null;
@@ -516,7 +856,11 @@ function TogglyProvider({
   useEffect(() => {
     if (!serverContext && mergedConfig?.appKey) {
       logger.debug("No server context, initializing client-side");
-      fetchFlags(identity).then((newFlags) => {
+      const generation = generationRef.current;
+      const revision = ++updateRevisionRef.current;
+      fetchFlags(contextRef.current).then((newFlags) => {
+        if (!mountedRef.current || generation !== generationRef.current || revision !== updateRevisionRef.current) return;
+        flagsRef.current = newFlags;
         setFlags(newFlags);
         setIsReady(true);
       });
@@ -524,6 +868,7 @@ function TogglyProvider({
   }, []);
   const contextValue = useMemo(
     () => ({
+      ...telemetry.api,
       flags,
       isReady,
       identity,
@@ -531,6 +876,8 @@ function TogglyProvider({
       isDisabled,
       evaluateGate,
       registerContext: registerContext2,
+      getVariant,
+      getVariantValue,
       identify,
       reset,
       refresh,
@@ -541,6 +888,7 @@ function TogglyProvider({
       subscribeLocalGatesChanged
     }),
     [
+      telemetry,
       flags,
       isReady,
       identity,
@@ -548,6 +896,8 @@ function TogglyProvider({
       isDisabled,
       evaluateGate,
       registerContext2,
+      getVariant,
+      getVariantValue,
       identify,
       reset,
       refresh,
@@ -651,15 +1001,14 @@ function Feature({
   contextKind
 }) {
   const keys = featureKeys ?? (featureKey ? [featureKey] : []);
-  const singleEnabled = useFeature(keys[0] ?? "", defaultValue, context, contextKind);
-  const gateEnabled = useFeatureGate(keys, requirement, false, context, contextKind);
+  const { isEnabled, evaluateGate } = useTogglyContext();
   let enabled;
   if (keys.length === 0) {
     enabled = defaultValue;
   } else if (keys.length === 1) {
-    enabled = singleEnabled;
+    enabled = isEnabled(keys[0], defaultValue, context, contextKind);
   } else {
-    enabled = gateEnabled;
+    enabled = evaluateGate(keys, requirement, false, context, contextKind);
   }
   if (negate) {
     enabled = !enabled;