feat: rewrite to new provider pattern and cookie overrides

Author: Swiftwork

packages/browser-sdk/package.json

@@ -38,6 +38,7 @@
   "dependencies": {
     "@floating-ui/dom": "^1.6.8",
     "canonical-json": "^0.0.4",
+    "fast-equals": "^5.2.2",
     "js-cookie": "^3.0.5",
     "preact": "^10.22.1"
   },

packages/browser-sdk/src/client.ts

@@ -1,3 +1,5 @@
+import { deepEqual } from "fast-equals";
+
 import {
   AutoFeedback,
   Feedback,
@@ -17,7 +19,7 @@ import {
 import { ToolbarPosition } from "./ui/types";
 import { API_BASE_URL, APP_BASE_URL, SSE_REALTIME_BASE_URL } from "./config";
 import { ReflagContext } from "./context";
-import { HookArgs, HooksManager } from "./hooksManager";
+import { HookArgs, HooksManager, State } from "./hooksManager";
 import { HttpClient } from "./httpClient";
 import { Logger, loggerWithPrefix, quietConsoleLogger } from "./logger";
 import { showToolbarToggle } from "./toolbar";
@@ -176,11 +178,6 @@ export interface Config {
    * Whether the client is bootstrapped.
    */
   bootstrapped: boolean;
-
-  /**
-   * Whether the client is initialized.
-   */
-  initialized: boolean;
 }
 
 /**
@@ -318,7 +315,6 @@ const defaultConfig: Config = {
   enableTracking: true,
   offline: false,
   bootstrapped: false,
-  initialized: false,
 };
 
 /**
@@ -379,18 +375,19 @@ export interface Flag {
 
 function shouldShowToolbar(opts: InitOptions) {
   const toolbarOpts = opts.toolbar;
+  if (typeof window === "undefined") return false;
   if (typeof toolbarOpts === "boolean") return toolbarOpts;
   if (typeof toolbarOpts?.show === "boolean") return toolbarOpts.show;
-
-  return window?.location?.hostname === "localhost";
+  return window.location.hostname === "localhost";
 }
 
 /**
  * ReflagClient lets you interact with the Reflag API.
  */
 export class ReflagClient {
+  private state: State = "idle";
   private readonly publishableKey: string;
-  private readonly context: ReflagContext;
+  private context: ReflagContext;
   private config: Config;
   private requestFeedbackOptions: Partial<RequestFeedbackOptions>;
   private readonly httpClient: HttpClient;
@@ -413,7 +410,7 @@ export class ReflagClient {
     this.context = {
       user: opts?.user?.id ? opts.user : undefined,
       company: opts?.company?.id ? opts.company : undefined,
-      otherContext: opts?.otherContext,
+      other: { ...opts?.otherContext, ...opts?.other },
     };
 
     this.config = {
@@ -424,7 +421,6 @@ export class ReflagClient {
       offline: opts?.offline ?? defaultConfig.offline,
       bootstrapped:
         opts && "bootstrappedFlags" in opts && !!opts.bootstrappedFlags,
-      initialized: false,
     };
 
     this.requestFeedbackOptions = {
@@ -440,11 +436,10 @@ export class ReflagClient {
 
     this.flagsClient = new FlagsClient(
       this.httpClient,
-      // API expects `other` and we have `otherContext`.
       {
         user: this.context.user,
         company: this.context.company,
-        other: this.context.otherContext,
+        other: { ...this.context.otherContext, ...this.context.other },
       },
       this.logger,
       isBootstrapped(opts)
@@ -455,6 +450,7 @@ export class ReflagClient {
         : {
             expireTimeMs: opts.expireTimeMs,
             staleTimeMs: opts.staleTimeMs,
+            staleWhileRevalidate: opts.staleWhileRevalidate,
             timeoutMs: opts.timeoutMs,
             fallbackFlags: opts.fallbackFlags,
             offline: this.config.offline,
@@ -506,10 +502,11 @@ export class ReflagClient {
    * Must be called before calling other SDK methods.
    */
   async initialize() {
-    if (this.config.initialized) {
-      this.logger.warn("Reflag client already initialized");
+    if (this.state === "initializing" || this.state === "initialized") {
+      this.logger.warn(`"Reflag client already ${this.state}`);
       return;
     }
+    this.setState("initializing");
 
     const start = Date.now();
     if (this.autoFeedback) {
@@ -542,7 +539,27 @@ export class ReflagClient {
         "ms" +
         (this.config.offline ? " (offline mode)" : ""),
     );
-    this.config.initialized = true;
+    this.setState("initialized");
+  }
+
+  /**
+   * Stop the SDK.
+   * This will stop any automated feedback surveys.
+   *
+   **/
+  async stop() {
+    if (this.autoFeedback) {
+      // ensure fully initialized before stopping
+      await this.autoFeedbackInit;
+      this.autoFeedback.stop();
+    }
+
+    this.flagsClient.stop();
+    this.setState("stopped");
+  }
+
+  getState() {
+    return this.state;
   }
 
   /**
@@ -584,67 +601,120 @@ export class ReflagClient {
   /**
    * Update the user context.
    * Performs a shallow merge with the existing user context.
-   * Attempting to update the user ID will log a warning and be ignored.
+   * It will not update the context if nothing has changed.
    *
    * @param user
    */
   async updateUser(user: { [key: string]: string | number | undefined }) {
-    if (user.id && user.id !== this.context.user?.id) {
-      this.logger.warn(
-        "ignoring attempt to update the user ID. Re-initialize the ReflagClient with a new user ID instead.",
-      );
-      return;
-    }
-
-    this.context.user = {
+    const userIdChanged = user.id && user.id !== this.context.user?.id;
+    const newUserContext = {
       ...this.context.user,
       ...user,
       id: user.id ?? this.context.user?.id,
     };
+
+    // Nothing has changed, skipping update
+    if (deepEqual(this.context.user, newUserContext)) return;
+    this.context.user = newUserContext;
     void this.user();
+
+    // Update the feedback user if the user ID has changed
+    if (userIdChanged) {
+      void this.updateAutoFeedbackUser(String(user.id));
+    }
+
     await this.flagsClient.setContext(this.context);
   }
 
   /**
    * Update the company context.
    * Performs a shallow merge with the existing company context.
-   * Attempting to update the company ID will log a warning and be ignored.
+   * It will not update the context if nothing has changed.
    *
    * @param company The company details.
    */
   async updateCompany(company: { [key: string]: string | number | undefined }) {
-    if (company.id && company.id !== this.context.company?.id) {
-      this.logger.warn(
-        "ignoring attempt to update the company ID. Re-initialize the ReflagClient with a new company ID instead.",
-      );
-      return;
-    }
-    this.context.company = {
+    const newCompanyContext = {
       ...this.context.company,
       ...company,
       id: company.id ?? this.context.company?.id,
     };
+
+    // Nothing has changed, skipping update
+    if (deepEqual(this.context.company, newCompanyContext)) return;
+    this.context.company = newCompanyContext;
     void this.company();
+
     await this.flagsClient.setContext(this.context);
   }
 
   /**
    * Update the company context.
    * Performs a shallow merge with the existing company context.
-   * Updates to the company ID will be ignored.
+   * It will not update the context if nothing has changed.
    *
    * @param otherContext Additional context.
    */
   async updateOtherContext(otherContext: {
     [key: string]: string | number | undefined;
   }) {
-    this.context.otherContext = {
-      ...this.context.otherContext,
+    const newOtherContext = {
+      ...this.context.other,
       ...otherContext,
     };
+
+    // Nothing has changed, skipping update
+    if (deepEqual(this.context.other, newOtherContext)) return;
+    this.context.other = newOtherContext;
+
     await this.flagsClient.setContext(this.context);
   }
 
+  /**
+   * Update the context.
+   * Performs a shallow merge with the existing context.
+   * It will not update the context if nothing has changed.
+   *
+   * @param context The context to update.
+   */
+  async updateContext({ otherContext, ...context }: ReflagContext) {
+    const userIdChanged =
+      context.user?.id && context.user.id !== this.context.user?.id;
+    const newContext = {
+      ...this.context,
+      ...context,
+      other: { ...this.context.other, ...otherContext, ...context.other },
+    };
+
+    // Nothing has changed, skipping update
+    if (deepEqual(this.context, newContext)) return;
+    this.context = newContext;
+
+    if (context.company) {
+      void this.company();
+    }
+
+    if (context.user) {
+      void this.user();
+      // Update the automatic feedback user if the user ID has changed
+      if (userIdChanged) {
+        void this.updateAutoFeedbackUser(String(context.user.id));
+      }
+    }
+
+    await this.flagsClient.setContext(this.context);
+  }
+
+  /**
+   * Update the flags.
+   *
+   * @param flags The flags to update.
+   * @param triggerEvent Whether to trigger the `flagsUpdated` event.
+   */
+  updateFlags(flags: FetchedFlags, triggerEvent = true) {
+    this.flagsClient.setFetchedFlags(flags, triggerEvent);
+  }
+
   /**
    * Track an event in Reflag.
    *
@@ -876,27 +946,17 @@ export class ReflagClient {
     };
   }
 
+  private setState(state: State) {
+    this.state = state;
+    this.hooks.trigger("stateUpdated", state);
+  }
+
   private sendCheckEvent(checkEvent: CheckEvent) {
     return this.flagsClient.sendCheckEvent(checkEvent, () => {
       this.hooks.trigger("check", checkEvent);
     });
   }
 
-  /**
-   * Stop the SDK.
-   * This will stop any automated feedback surveys.
-   *
-   **/
-  async stop() {
-    if (this.autoFeedback) {
-      // ensure fully initialized before stopping
-      await this.autoFeedbackInit;
-      this.autoFeedback.stop();
-    }
-
-    this.flagsClient.stop();
-  }
-
   /**
    * Send attributes to Reflag for the current user
    */
@@ -958,4 +1018,13 @@ export class ReflagClient {
     this.hooks.trigger("company", this.context.company);
     return res;
   }
+
+  private async updateAutoFeedbackUser(userId: string) {
+    if (!this.autoFeedback) {
+      return;
+    }
+    // Ensure fully initialized before updating the user
+    await this.autoFeedbackInit;
+    await this.autoFeedback.setUser(userId);
+  }
 }

packages/browser-sdk/src/context.ts

@@ -55,7 +55,13 @@ export interface ReflagContext {
   user?: UserContext;
 
   /**
-   * Context which is not related to a user or a company
+   * Context which is not related to a user or a company.
+   */
+  other?: Record<string, string | number | undefined>;
+
+  /**
+   * Context which is not related to a user or a company.
+   * @deprecated Use `other` instead
    */
   otherContext?: Record<string, string | number | undefined>;
 }