feat: cleanup context types

Author: Swiftwork

packages/browser-sdk/src/client.ts

@@ -18,7 +18,7 @@ import {
 } from "./flag/flags";
 import { ToolbarPosition } from "./ui/types";
 import { API_BASE_URL, APP_BASE_URL, SSE_REALTIME_BASE_URL } from "./config";
-import { ReflagContext } from "./context";
+import { ReflagContext, ReflagDeprecatedContext } from "./context";
 import { HookArgs, HooksManager, State } from "./hooksManager";
 import { HttpClient } from "./httpClient";
 import { Logger, loggerWithPrefix, quietConsoleLogger } from "./logger";
@@ -198,7 +198,7 @@ export type FlagDefinitions = Readonly<Array<string>>;
 /**
  * ReflagClient initialization options.
  */
-export type InitOptions = ReflagContext & {
+export type InitOptions = ReflagDeprecatedContext & {
   /**
    * Publishable key for authentication
    */
@@ -436,11 +436,7 @@ export class ReflagClient {
 
     this.flagsClient = new FlagsClient(
       this.httpClient,
-      {
-        user: this.context.user,
-        company: this.context.company,
-        other: { ...this.context.otherContext, ...this.context.other },
-      },
+      this.context,
       this.logger,
       isBootstrapped(opts)
         ? {
@@ -677,7 +673,7 @@ export class ReflagClient {
    *
    * @param context The context to update.
    */
-  async updateContext({ otherContext, ...context }: ReflagContext) {
+  async updateContext({ otherContext, ...context }: ReflagDeprecatedContext) {
     const userIdChanged =
       context.user?.id && context.user.id !== this.context.user?.id;
     const newContext = {

packages/browser-sdk/src/context.ts

@@ -58,10 +58,12 @@ export interface ReflagContext {
    * Context which is not related to a user or a company.
    */
   other?: Record<string, string | number | undefined>;
+}
 
+export interface ReflagDeprecatedContext extends ReflagContext {
   /**
    * Context which is not related to a user or a company.
-   * @deprecated Use `other` instead
+   * @deprecated Use `other` instead, this property will be removed in the next major version
    */
   otherContext?: Record<string, string | number | undefined>;
 }

packages/browser-sdk/src/flag/flagCache.ts

@@ -157,7 +157,12 @@ function validateCacheData(cacheDataInput: any) {
   return cacheData;
 }
 
-// Simple object check.
-export function isObject(item: any): boolean {
-  return item && typeof item === "object" && !Array.isArray(item);
+/**
+ * Check if the given item is an object.
+ *
+ * @param item - The item to check.
+ * @returns `true` if the item is an object, `false` otherwise.
+ **/
+export function isObject(item: any): item is Record<string, any> {
+  return (item && typeof item === "object" && !Array.isArray(item)) || false;
 }

packages/browser-sdk/src/flag/flags.ts

@@ -184,33 +184,6 @@ const overridesCookieKey = `__reflag_overrides`;
 
 type OverridesFlags = Record<string, boolean | null>;
 
-function setOverridesCache(overrides: OverridesFlags) {
-  try {
-    Cookies.set(overridesCookieKey, JSON.stringify(overrides), {
-      expires: 30, // 30 days
-      sameSite: "strict",
-    });
-  } catch {
-    // Cookie setting failed, overrides won't persist
-  }
-}
-
-function getOverridesCache(): OverridesFlags {
-  try {
-    const cookieValue = Cookies.get(overridesCookieKey);
-    if (cookieValue) {
-      const cachedOverrides = JSON.parse(cookieValue);
-      if (isObject(cachedOverrides)) {
-        return cachedOverrides;
-      }
-    }
-  } catch {
-    // Ignore cookie parsing errors
-  }
-
-  return {};
-}
-
 type FlagsClientOptions = Partial<Config> & {
   bootstrappedFlags?: FetchedFlags;
   fallbackFlags?: Record<string, FallbackFlagOverride> | string[];
@@ -263,7 +236,7 @@ export class FlagsClient {
     this.fallbackFlags = this.setupFallbackFlags(fallbackFlags);
 
     try {
-      const storedFlagOverrides = getOverridesCache();
+      const storedFlagOverrides = this.getOverridesCache();
       for (const key in storedFlagOverrides) {
         this.flagOverrides[key] = storedFlagOverrides[key];
       }
@@ -312,11 +285,7 @@ export class FlagsClient {
   }
 
   async setContext(context: ReflagContext) {
-    this.context = {
-      user: context.user,
-      company: context.company,
-      other: { ...context.otherContext, ...context.other },
-    };
+    this.context = context;
     this.setFetchedFlags((await this.maybeFetchFlags()) || {});
   }
 
@@ -330,7 +299,7 @@ export class FlagsClient {
     } else {
       this.flagOverrides[key] = isEnabled;
     }
-    setOverridesCache(this.flagOverrides);
+    this.setOverridesCache(this.flagOverrides);
 
     this.flags = this.mergeFlags(this.fetchedFlags, this.flagOverrides);
     this.triggerFlagsUpdated();
@@ -430,6 +399,31 @@ export class FlagsClient {
     }
   }
 
+  private setOverridesCache(overrides: OverridesFlags) {
+    try {
+      Cookies.set(overridesCookieKey, JSON.stringify(overrides), {
+        expires: 7, // 1 week
+        sameSite: "strict",
+      });
+    } catch {
+      this.logger.warn(
+        "storing flag overrides in cookies failed, overrides won't persist",
+      );
+    }
+  }
+
+  private getOverridesCache(): OverridesFlags {
+    try {
+      const overridesCookie = Cookies.get(overridesCookieKey);
+      const overrides = JSON.parse(overridesCookie || "{}");
+      if (!isObject(overrides)) throw new Error("invalid overrides");
+      return overrides;
+    } catch {
+      this.logger.warn("getting flag overrides from cookies failed");
+      return {};
+    }
+  }
+
   private async maybeFetchFlags(): Promise<FetchedFlags | undefined> {
     if (this.config.offline) {
       return;

packages/react-sdk/dev/nextjs-flag-demo/components/Providers.tsx

@@ -12,11 +12,13 @@ export const Providers = ({ publishableKey, children }: Props) => {
   return (
     <ReflagProvider
       publishableKey={publishableKey}
-      company={{ id: "demo-company", name: "Demo Company" }}
-      user={{
-        id: "demo-user",
-        email: "demo-user@example.com",
-        "optin-huddles": "true",
+      context={{
+        company: { id: "demo-company", name: "Demo Company" },
+        user: {
+          id: "demo-user",
+          email: "demo-user@example.com",
+          "optin-huddles": "true",
+        },
       }}
       fallbackFlags={["fallback-feature"]}
     >

packages/react-sdk/dev/plain/app.tsx

@@ -314,9 +314,11 @@ export function App() {
   return (
     <ReflagProvider
       publishableKey={publishableKey}
-      company={initialCompany}
-      user={initialUser}
-      other={initialOtherContext}
+      context={{
+        user: initialUser,
+        company: initialCompany,
+        other: initialOtherContext,
+      }}
       apiBaseUrl={apiBaseUrl}
     >
       {!publishableKey && (

packages/react-sdk/src/index.tsx

@@ -205,29 +205,55 @@ export function ReflagClientProvider({
 /**
  * Props for the ReflagProvider.
  */
-export type ReflagProps = InitOptions & ReflagPropsBase;
+export type ReflagProps = Omit<InitOptions, keyof ReflagContext> &
+  ReflagPropsBase & {
+    /**
+     * The context to use for the ReflagClient containing user, company, and other context.
+     */
+    context: ReflagContext;
+
+    /**
+     * Company related context. If you provide `id` Reflag will enrich the evaluation context with
+     * company attributes on Reflag servers.
+     * @deprecated Use `context` instead, this property will be removed in the next major version
+     */
+    company?: CompanyContext;
+
+    /**
+     * User related context. If you provide `id` Reflag will enrich the evaluation context with
+     * user attributes on Reflag servers.
+     * @deprecated Use `context` instead, this property will be removed in the next major version
+     */
+    user?: UserContext;
+
+    /**
+     * Context which is not related to a user or a company.
+     * @deprecated Use `context` instead, this property will be removed in the next major version
+     */
+    otherContext?: Record<string, string | number | undefined>;
+  };
 
 /**
  * Provider for the ReflagClient.
  */
 export function ReflagProvider({
   children,
+  context,
   user,
   company,
-  other,
   otherContext,
   loadingComponent,
   debug,
   ...config
 }: ReflagProps) {
-  const context = useMemo(
-    () => ({ user, company, other: { ...otherContext, ...other } }),
-    [user, company, other, otherContext],
+  const resolvedContext = useMemo(
+    () => ({ user, company, other: otherContext, ...context }),
+    [user, company, otherContext, context],
   );
   const client = useReflagClient(
     {
       ...config,
-      ...context,
+      ...resolvedContext,
     },
     debug,
   );
@@ -242,8 +268,8 @@ export function ReflagProvider({
 
   // Update the context if it changes
   useEffect(() => {
-    void client.updateContext(context);
-  }, [client, context]);
+    void client.updateContext(resolvedContext);
+  }, [client, resolvedContext]);
 
   return (
     <ReflagClientProvider client={client} loadingComponent={loadingComponent}>
@@ -257,7 +283,7 @@ export function ReflagProvider({
  */
 export type ReflagBootstrappedProps = Omit<
   InitOptionsBootstrapped,
-  "bootstrappedFlags" | keyof ReflagContext
+  "user" | "company" | "otherContext" | "bootstrappedFlags"
 > &
   ReflagPropsBase & {
     /**