@openfeature/react-sdk 0.4.11 → 1.0.1

package/README.md

@@ -16,8 +16,8 @@
     <img alt="Specification" src="https://img.shields.io/static/v1?label=specification&message=v0.8.0&color=yellow&style=for-the-badge" />
   </a>
   <!-- x-release-please-start-version -->
-  <a href="https://github.com/open-feature/js-sdk/releases/tag/react-sdk-v0.4.11">
-    <img alt="Release" src="https://img.shields.io/static/v1?label=release&message=v0.4.11&color=blue&style=for-the-badge" />
+  <a href="https://github.com/open-feature/js-sdk/releases/tag/react-sdk-v1.0.1">
+    <img alt="Release" src="https://img.shields.io/static/v1?label=release&message=v1.0.1&color=blue&style=for-the-badge" />
   </a>
   <!-- x-release-please-end -->
   <br/>

package/dist/cjs/index.js

@@ -101,8 +101,8 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/evaluation/use-feature-flag.ts
-var import_web_sdk4 = require("@openfeature/web-sdk");
-var import_react4 = require("react");
+var import_web_sdk5 = require("@openfeature/web-sdk");
+var import_react6 = require("react");
 
 // src/internal/context.ts
 var import_react = __toESM(require("react"));
@@ -146,67 +146,131 @@ var DEFAULT_OPTIONS = {
 var normalizeOptions = (options = {}) => {
   const updateOnContextChanged = options.updateOnContextChanged;
   const updateOnConfigurationChanged = options.updateOnConfigurationChanged;
-  const suspendUntilReady2 = "suspendUntilReady" in options ? options.suspendUntilReady : options.suspend;
+  const suspendUntilReady = "suspendUntilReady" in options ? options.suspendUntilReady : options.suspend;
   const suspendWhileReconciling = "suspendWhileReconciling" in options ? options.suspendWhileReconciling : options.suspend;
-  return __spreadValues(__spreadValues(__spreadValues(__spreadValues({}, typeof suspendUntilReady2 === "boolean" && { suspendUntilReady: suspendUntilReady2 }), typeof suspendWhileReconciling === "boolean" && { suspendWhileReconciling }), typeof updateOnContextChanged === "boolean" && { updateOnContextChanged }), typeof updateOnConfigurationChanged === "boolean" && { updateOnConfigurationChanged });
+  return __spreadValues(__spreadValues(__spreadValues(__spreadValues({}, typeof suspendUntilReady === "boolean" && { suspendUntilReady }), typeof suspendWhileReconciling === "boolean" && { suspendWhileReconciling }), typeof updateOnContextChanged === "boolean" && { updateOnContextChanged }), typeof updateOnConfigurationChanged === "boolean" && { updateOnConfigurationChanged });
 };
 
 // src/internal/suspense.ts
 var import_web_sdk = require("@openfeature/web-sdk");
-function suspendUntilReady(client) {
-  let resolve;
-  let reject;
-  throw new Promise((_resolve, _reject) => {
-    resolve = _resolve;
-    reject = _reject;
-    client.addHandler(import_web_sdk.ProviderEvents.Ready, resolve);
-    client.addHandler(import_web_sdk.ProviderEvents.Error, reject);
-  }).finally(() => {
-    client.removeHandler(import_web_sdk.ProviderEvents.Ready, resolve);
-    client.removeHandler(import_web_sdk.ProviderEvents.Ready, reject);
+
+// src/internal/use.ts
+var import_react2 = __toESM(require("react"));
+var use = import_react2.default.use || // This extra generic is to avoid TypeScript mixing up the generic and JSX syntax
+// and emitting an error.
+// We assume that this is only for the `use(thenable)` case, not `use(context)`.
+// https://github.com/facebook/react/blob/aed00dacfb79d17c53218404c52b1c7aa59c4a89/packages/react-server/src/ReactFizzThenable.js#L45
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+((thenable) => {
+  switch (thenable.status) {
+    case "pending":
+      throw thenable;
+    case "fulfilled":
+      return thenable.value;
+    case "rejected":
+      throw thenable.reason;
+    default:
+      thenable.status = "pending";
+      thenable.then(
+        (v) => {
+          thenable.status = "fulfilled";
+          thenable.value = v;
+        },
+        (e) => {
+          thenable.status = "rejected";
+          thenable.reason = e;
+        }
+      );
+      throw thenable;
+  }
+});
+
+// src/internal/suspense.ts
+var globalProviderSuspenseStatus = /* @__PURE__ */ new WeakMap();
+function suspendUntilInitialized(provider, client) {
+  const statusPromiseRef = globalProviderSuspenseStatus.get(provider);
+  if (!statusPromiseRef) {
+    const statusPromise = provider !== import_web_sdk.NOOP_PROVIDER ? isProviderReady(client) : Promise.resolve();
+    globalProviderSuspenseStatus.set(provider, statusPromise);
+    use(statusPromise);
+  } else {
+    use(statusPromiseRef);
+  }
+}
+function suspendUntilReconciled(client) {
+  use(isProviderReady(client));
+}
+function isProviderReady(client) {
+  return __async(this, null, function* () {
+    const controller = new AbortController();
+    try {
+      return yield new Promise((resolve, reject) => {
+        client.addHandler(import_web_sdk.ProviderEvents.Ready, resolve, { signal: controller.signal });
+        client.addHandler(import_web_sdk.ProviderEvents.Error, reject, { signal: controller.signal });
+      });
+    } finally {
+      controller.abort();
+    }
   });
 }
 
 // src/provider/use-open-feature-client.ts
-var import_react2 = __toESM(require("react"));
+var import_react3 = __toESM(require("react"));
+
+// src/internal/errors.ts
+var context = "Components using OpenFeature must be wrapped with an <OpenFeatureProvider>.";
+var tip = "If you are seeing this in a test, see: https://openfeature.dev/docs/reference/technologies/client/web/react#testing";
+var MissingContextError = class extends Error {
+  constructor(reason) {
+    super(`${reason}: ${context} ${tip}`);
+    this.name = "MissingContextError";
+  }
+};
+
+// src/provider/use-open-feature-client.ts
 function useOpenFeatureClient() {
-  const { client } = import_react2.default.useContext(Context) || {};
+  const { client } = import_react3.default.useContext(Context) || {};
   if (!client) {
-    throw new Error(
-      "No OpenFeature client available - components using OpenFeature must be wrapped with an <OpenFeatureProvider>. If you are seeing this in a test, see: https://openfeature.dev/docs/reference/technologies/client/web/react#testing"
-    );
+    throw new MissingContextError("No OpenFeature client available");
   }
   return client;
 }
 
 // src/provider/use-open-feature-client-status.ts
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_web_sdk2 = require("@openfeature/web-sdk");
 function useOpenFeatureClientStatus() {
   const client = useOpenFeatureClient();
-  const [status, setStatus] = (0, import_react3.useState)(client.providerStatus);
-  (0, import_react3.useEffect)(() => {
+  const [status, setStatus] = (0, import_react4.useState)(client.providerStatus);
+  const controller = new AbortController();
+  (0, import_react4.useEffect)(() => {
     const updateStatus = () => setStatus(client.providerStatus);
-    client.addHandler(import_web_sdk2.ProviderEvents.ConfigurationChanged, updateStatus);
-    client.addHandler(import_web_sdk2.ProviderEvents.ContextChanged, updateStatus);
-    client.addHandler(import_web_sdk2.ProviderEvents.Error, updateStatus);
-    client.addHandler(import_web_sdk2.ProviderEvents.Ready, updateStatus);
-    client.addHandler(import_web_sdk2.ProviderEvents.Stale, updateStatus);
-    client.addHandler(import_web_sdk2.ProviderEvents.Reconciling, updateStatus);
+    client.addHandler(import_web_sdk2.ProviderEvents.ConfigurationChanged, updateStatus, { signal: controller.signal });
+    client.addHandler(import_web_sdk2.ProviderEvents.ContextChanged, updateStatus, { signal: controller.signal });
+    client.addHandler(import_web_sdk2.ProviderEvents.Error, updateStatus, { signal: controller.signal });
+    client.addHandler(import_web_sdk2.ProviderEvents.Ready, updateStatus, { signal: controller.signal });
+    client.addHandler(import_web_sdk2.ProviderEvents.Stale, updateStatus, { signal: controller.signal });
+    client.addHandler(import_web_sdk2.ProviderEvents.Reconciling, updateStatus, { signal: controller.signal });
     return () => {
-      client.removeHandler(import_web_sdk2.ProviderEvents.ConfigurationChanged, updateStatus);
-      client.removeHandler(import_web_sdk2.ProviderEvents.ContextChanged, updateStatus);
-      client.removeHandler(import_web_sdk2.ProviderEvents.Error, updateStatus);
-      client.removeHandler(import_web_sdk2.ProviderEvents.Ready, updateStatus);
-      client.removeHandler(import_web_sdk2.ProviderEvents.Stale, updateStatus);
-      client.removeHandler(import_web_sdk2.ProviderEvents.Reconciling, updateStatus);
+      controller.abort();
     };
   }, [client]);
   return status;
 }
 
-// src/evaluation/hook-flag-query.ts
+// src/provider/use-open-feature-provider.ts
+var import_react5 = __toESM(require("react"));
 var import_web_sdk3 = require("@openfeature/web-sdk");
+function useOpenFeatureProvider() {
+  const openFeatureContext = import_react5.default.useContext(Context);
+  if (!openFeatureContext) {
+    throw new MissingContextError("No OpenFeature context available");
+  }
+  return import_web_sdk3.OpenFeature.getProvider(openFeatureContext.domain);
+}
+
+// src/internal/hook-flag-query.ts
+var import_web_sdk4 = require("@openfeature/web-sdk");
 var HookFlagQuery = class {
   constructor(_details) {
     this._details = _details;
@@ -229,7 +293,7 @@ var HookFlagQuery = class {
   }
   get isError() {
     var _a;
-    return !!((_a = this._details) == null ? void 0 : _a.errorCode) || this._details.reason == import_web_sdk3.StandardResolutionReasons.ERROR;
+    return !!((_a = this._details) == null ? void 0 : _a.errorCode) || this._details.reason == import_web_sdk4.StandardResolutionReasons.ERROR;
   }
   get errorCode() {
     var _a;
@@ -240,7 +304,7 @@ var HookFlagQuery = class {
     return (_a = this._details) == null ? void 0 : _a.errorMessage;
   }
   get isAuthoritative() {
-    return !this.isError && this._details.reason != import_web_sdk3.StandardResolutionReasons.STALE && this._details.reason != import_web_sdk3.StandardResolutionReasons.DISABLED;
+    return !this.isError && this._details.reason != import_web_sdk4.StandardResolutionReasons.STALE && this._details.reason != import_web_sdk4.StandardResolutionReasons.DISABLED;
   }
   get type() {
     return typeof this._details.value;
@@ -314,82 +378,102 @@ function attachHandlersAndResolve(flagKey, defaultValue, resolver, options) {
   const defaultedOptions = __spreadValues(__spreadValues(__spreadValues({}, DEFAULT_OPTIONS), useProviderOptions()), normalizeOptions(options));
   const client = useOpenFeatureClient();
   const status = useOpenFeatureClientStatus();
-  if (defaultedOptions.suspendUntilReady && status === import_web_sdk4.ProviderStatus.NOT_READY) {
-    suspendUntilReady(client);
+  const provider = useOpenFeatureProvider();
+  const isFirstRender = (0, import_react6.useRef)(true);
+  if (defaultedOptions.suspendUntilReady && status === import_web_sdk5.ProviderStatus.NOT_READY) {
+    suspendUntilInitialized(provider, client);
   }
-  if (defaultedOptions.suspendWhileReconciling && status === import_web_sdk4.ProviderStatus.RECONCILING) {
-    suspendUntilReady(client);
+  if (defaultedOptions.suspendWhileReconciling && status === import_web_sdk5.ProviderStatus.RECONCILING) {
+    suspendUntilReconciled(client);
   }
-  const [evaluationDetails, setEvaluationDetails] = (0, import_react4.useState)(
-    resolver(client).call(client, flagKey, defaultValue, options)
+  const [evaluationDetails, setEvaluationDetails] = (0, import_react6.useState)(
+    () => resolver(client).call(client, flagKey, defaultValue, options)
   );
-  const evaluationDetailsRef = (0, import_react4.useRef)(evaluationDetails);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+    const newDetails = resolver(client).call(client, flagKey, defaultValue, options);
+    if (!isEqual(newDetails.value, evaluationDetails.value)) {
+      setEvaluationDetails(newDetails);
+    }
+  }, [client, flagKey, defaultValue, options, resolver, evaluationDetails]);
+  const evaluationDetailsRef = (0, import_react6.useRef)(evaluationDetails);
+  (0, import_react6.useEffect)(() => {
     evaluationDetailsRef.current = evaluationDetails;
   }, [evaluationDetails]);
-  const updateEvaluationDetailsCallback = () => {
+  const updateEvaluationDetailsCallback = (0, import_react6.useCallback)(() => {
     const updatedEvaluationDetails = resolver(client).call(client, flagKey, defaultValue, options);
     if (!isEqual(updatedEvaluationDetails.value, evaluationDetailsRef.current.value)) {
       setEvaluationDetails(updatedEvaluationDetails);
     }
-  };
-  const configurationChangeCallback = (eventDetails) => {
-    if (shouldEvaluateFlag(flagKey, eventDetails == null ? void 0 : eventDetails.flagsChanged)) {
-      updateEvaluationDetailsCallback();
-    }
-  };
-  (0, import_react4.useEffect)(() => {
-    if (status === import_web_sdk4.ProviderStatus.NOT_READY) {
-      client.addHandler(import_web_sdk4.ProviderEvents.Ready, updateEvaluationDetailsCallback);
+  }, [client, flagKey, defaultValue, options, resolver]);
+  const configurationChangeCallback = (0, import_react6.useCallback)(
+    (eventDetails) => {
+      if (shouldEvaluateFlag(flagKey, eventDetails == null ? void 0 : eventDetails.flagsChanged)) {
+        updateEvaluationDetailsCallback();
+      }
+    },
+    [flagKey, updateEvaluationDetailsCallback]
+  );
+  (0, import_react6.useEffect)(() => {
+    const controller = new AbortController();
+    if (status === import_web_sdk5.ProviderStatus.NOT_READY) {
+      client.addHandler(import_web_sdk5.ProviderEvents.Ready, updateEvaluationDetailsCallback, { signal: controller.signal });
     }
     if (defaultedOptions.updateOnContextChanged) {
-      client.addHandler(import_web_sdk4.ProviderEvents.ContextChanged, updateEvaluationDetailsCallback);
+      client.addHandler(import_web_sdk5.ProviderEvents.ContextChanged, updateEvaluationDetailsCallback, { signal: controller.signal });
     }
-    return () => {
-      client.removeHandler(import_web_sdk4.ProviderEvents.Ready, updateEvaluationDetailsCallback);
-      client.removeHandler(import_web_sdk4.ProviderEvents.ContextChanged, updateEvaluationDetailsCallback);
-    };
-  }, []);
-  (0, import_react4.useEffect)(() => {
     if (defaultedOptions.updateOnConfigurationChanged) {
-      client.addHandler(import_web_sdk4.ProviderEvents.ConfigurationChanged, configurationChangeCallback);
+      client.addHandler(import_web_sdk5.ProviderEvents.ConfigurationChanged, configurationChangeCallback, {
+        signal: controller.signal
+      });
     }
     return () => {
-      client.removeHandler(import_web_sdk4.ProviderEvents.ConfigurationChanged, configurationChangeCallback);
+      controller.abort();
     };
-  }, []);
+  }, [
+    client,
+    status,
+    defaultedOptions.updateOnContextChanged,
+    defaultedOptions.updateOnConfigurationChanged,
+    updateEvaluationDetailsCallback,
+    configurationChangeCallback
+  ]);
   return evaluationDetails;
 }
 
 // src/provider/provider.tsx
-var import_web_sdk5 = require("@openfeature/web-sdk");
-var React3 = __toESM(require("react"));
+var import_web_sdk6 = require("@openfeature/web-sdk");
+var React5 = __toESM(require("react"));
 function OpenFeatureProvider(_a) {
   var _b = _a, { client, domain, children } = _b, options = __objRest(_b, ["client", "domain", "children"]);
   if (!client) {
-    client = import_web_sdk5.OpenFeature.getClient(domain);
+    client = import_web_sdk6.OpenFeature.getClient(domain);
   }
-  return /* @__PURE__ */ React3.createElement(Context.Provider, { value: { client, options, domain } }, children);
+  return /* @__PURE__ */ React5.createElement(Context.Provider, { value: { client, options, domain } }, children);
 }
 
 // src/provider/use-when-provider-ready.ts
-var import_web_sdk6 = require("@openfeature/web-sdk");
+var import_web_sdk7 = require("@openfeature/web-sdk");
 function useWhenProviderReady(options) {
+  const defaultedOptions = __spreadValues(__spreadValues(__spreadValues({}, DEFAULT_OPTIONS), useProviderOptions()), normalizeOptions(options));
   const client = useOpenFeatureClient();
   const status = useOpenFeatureClientStatus();
-  const defaultedOptions = __spreadValues(__spreadValues(__spreadValues({}, DEFAULT_OPTIONS), useProviderOptions()), normalizeOptions(options));
-  if (defaultedOptions.suspendUntilReady && status === import_web_sdk6.ProviderStatus.NOT_READY) {
-    suspendUntilReady(client);
+  const provider = useOpenFeatureProvider();
+  if (defaultedOptions.suspendUntilReady && status === import_web_sdk7.ProviderStatus.NOT_READY) {
+    suspendUntilInitialized(provider, client);
   }
-  return status === import_web_sdk6.ProviderStatus.READY;
+  return status === import_web_sdk7.ProviderStatus.READY;
 }
 
 // src/provider/test-provider.tsx
-var import_web_sdk7 = require("@openfeature/web-sdk");
-var import_react5 = __toESM(require("react"));
+var import_web_sdk8 = require("@openfeature/web-sdk");
+var import_react7 = __toESM(require("react"));
 var TEST_VARIANT = "test-variant";
 var TEST_PROVIDER = "test-provider";
-var TestProvider = class extends import_web_sdk7.InMemoryProvider {
+var TestProvider = class extends import_web_sdk8.InMemoryProvider {
   constructor(flagValueMap, delay = 0) {
     const flagConfig = Object.entries(flagValueMap).reduce((acc, flag) => {
       return __spreadProps(__spreadValues({}, acc), {
@@ -424,15 +508,15 @@ var TestProvider = class extends import_web_sdk7.InMemoryProvider {
 };
 function OpenFeatureTestProvider(testProviderOptions) {
   const { flagValueMap, provider } = testProviderOptions;
-  const effectiveProvider = flagValueMap ? new TestProvider(flagValueMap, testProviderOptions.delayMs) : mixInNoop(provider) || import_web_sdk7.NOOP_PROVIDER;
-  testProviderOptions.domain ? import_web_sdk7.OpenFeature.setProvider(testProviderOptions.domain, effectiveProvider) : import_web_sdk7.OpenFeature.setProvider(effectiveProvider);
-  return /* @__PURE__ */ import_react5.default.createElement(OpenFeatureProvider, __spreadProps(__spreadValues({}, testProviderOptions), { domain: testProviderOptions.domain }), testProviderOptions.children);
+  const effectiveProvider = flagValueMap ? new TestProvider(flagValueMap, testProviderOptions.delayMs) : mixInNoop(provider) || import_web_sdk8.NOOP_PROVIDER;
+  testProviderOptions.domain ? import_web_sdk8.OpenFeature.setProvider(testProviderOptions.domain, effectiveProvider) : import_web_sdk8.OpenFeature.setProvider(effectiveProvider);
+  return /* @__PURE__ */ import_react7.default.createElement(OpenFeatureProvider, __spreadProps(__spreadValues({}, testProviderOptions), { domain: testProviderOptions.domain }), testProviderOptions.children);
 }
 function mixInNoop(provider = {}) {
-  for (const prop of Object.getOwnPropertyNames(Object.getPrototypeOf(import_web_sdk7.NOOP_PROVIDER)).filter((prop2) => prop2 !== "constructor")) {
+  for (const prop of Object.getOwnPropertyNames(Object.getPrototypeOf(import_web_sdk8.NOOP_PROVIDER)).filter((prop2) => prop2 !== "constructor")) {
     const patchedProvider = provider;
     if (!Object.getPrototypeOf(patchedProvider)[prop] && !patchedProvider[prop]) {
-      patchedProvider[prop] = Object.getPrototypeOf(import_web_sdk7.NOOP_PROVIDER)[prop];
+      patchedProvider[prop] = Object.getPrototypeOf(import_web_sdk8.NOOP_PROVIDER)[prop];
     }
   }
   if (!provider.metadata || !provider.metadata.name) {
@@ -442,17 +526,17 @@ function mixInNoop(provider = {}) {
 }
 
 // src/context/use-context-mutator.ts
-var import_react6 = require("react");
-var import_web_sdk8 = require("@openfeature/web-sdk");
+var import_react8 = require("react");
+var import_web_sdk9 = require("@openfeature/web-sdk");
 function useContextMutator(options = { defaultContext: false }) {
-  const { domain } = (0, import_react6.useContext)(Context) || {};
-  const previousContext = (0, import_react6.useRef)(null);
-  const setContext = (0, import_react6.useCallback)((updatedContext) => __async(this, null, function* () {
+  const { domain } = (0, import_react8.useContext)(Context) || {};
+  const previousContext = (0, import_react8.useRef)(null);
+  const setContext = (0, import_react8.useCallback)((updatedContext) => __async(null, null, function* () {
     if (previousContext.current !== updatedContext) {
       if (!domain || (options == null ? void 0 : options.defaultContext)) {
-        import_web_sdk8.OpenFeature.setContext(updatedContext);
+        import_web_sdk9.OpenFeature.setContext(updatedContext);
       } else {
-        import_web_sdk8.OpenFeature.setContext(domain, updatedContext);
+        import_web_sdk9.OpenFeature.setContext(domain, updatedContext);
       }
       previousContext.current = updatedContext;
     }
@@ -463,10 +547,10 @@ function useContextMutator(options = { defaultContext: false }) {
 }
 
 // src/tracking/use-track.ts
-var import_react7 = require("react");
+var import_react9 = require("react");
 function useTrack() {
   const client = useOpenFeatureClient();
-  const track = (0, import_react7.useCallback)((trackingEventName, trackingEventDetails) => {
+  const track = (0, import_react9.useCallback)((trackingEventName, trackingEventDetails) => {
     client.track(trackingEventName, trackingEventDetails);
   }, []);
   return {