@patterninc/pattern-ui 0.0.0-main.202610080441.d12ae32dfdcb → 0.0.0-main.202610080442.f227f6fcab21

package/dist/components/ToggleProvider/ToggleProvider.js

@@ -1,7 +1,7 @@
-import { detectEnvironment, fetchToggles } from "./fetchToggles.js";
+import { detectEnvironment, fetchToggles, requestToggles } from "./fetchToggles.js";
 import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
-import React, { createContext, useEffect, useState } from "react";
+import React, { createContext, useEffect, useEffectEvent, useState } from "react";
 
 //#region src/components/ToggleProvider/ToggleProvider.tsx
 const ToggleProviderContext = createContext({
@@ -118,7 +118,7 @@ function setToggleCookie(name, value) {
 *   ```
 */
 const ToggleProvider = (t0) => {
-	const $ = c(25);
+	const $ = c(33);
 	const { children, distributionKey, environment, initialToggles, initialToggleOverrides, errorCallback, finishedLoadingCallback, toggleApiUrl: t1 } = t0;
 	const toggleApiUrl = t1 === void 0 ? DEFAULT_TOGGLE_API_URL : t1;
 	let t2;
@@ -166,87 +166,107 @@ const ToggleProvider = (t0) => {
 	} else t6 = $[7];
 	const setToggleOverride = t6;
 	let t7;
+	if ($[8] !== finishedLoadingCallback) {
+		t7 = (isLoaded) => {
+			finishedLoadingCallback?.(isLoaded);
+		};
+		$[8] = finishedLoadingCallback;
+		$[9] = t7;
+	} else t7 = $[9];
+	const onFinishedLoading = useEffectEvent(t7);
 	let t8;
-	if ($[8] !== distributionKey || $[9] !== errorCallback || $[10] !== finishedLoadingCallback || $[11] !== initialToggles || $[12] !== resolvedEnvironment || $[13] !== toggleApiUrl) {
-		t7 = () => {
+	if ($[10] !== errorCallback) {
+		t8 = (error) => {
+			errorCallback?.(error);
+		};
+		$[10] = errorCallback;
+		$[11] = t8;
+	} else t8 = $[11];
+	const onError = useEffectEvent(t8);
+	let t9;
+	if ($[12] !== distributionKey || $[13] !== initialToggles || $[14] !== onError || $[15] !== onFinishedLoading || $[16] !== resolvedEnvironment || $[17] !== toggleApiUrl) {
+		t9 = () => {
 			if (initialToggles !== void 0) {
-				finishedLoadingCallback?.(true);
+				onFinishedLoading(true);
 				return;
 			}
 			const controller = new AbortController();
 			const { signal } = controller;
-			fetchToggles(distributionKey, resolvedEnvironment, toggleApiUrl, signal).then((toggles) => {
+			requestToggles(distributionKey, resolvedEnvironment, toggleApiUrl, signal).then((toggles) => {
 				if (!signal.aborted) {
 					setTogglesFromCDN(toggles);
-					finishedLoadingCallback?.(true);
+					onFinishedLoading(true);
 				}
-			}).catch((error) => {
-				if (error?.name === "AbortError") return;
-				if (errorCallback) errorCallback(error);
-				if (initialToggles === void 0) setTogglesFromCDN([]);
-				if (!error?.message?.toLowerCase().includes("canceled")) finishedLoadingCallback?.(true);
+			}, (error_0) => {
+				if (signal.aborted || error_0 instanceof Error && error_0.name === "AbortError") return;
+				console.error("Error fetching toggles:", error_0);
+				onError(error_0 instanceof Error ? error_0.message : String(error_0));
+				setTogglesFromCDN([]);
+				onFinishedLoading(true);
 			});
 			return () => {
 				controller.abort();
 			};
 		};
-		t8 = [
+		$[12] = distributionKey;
+		$[13] = initialToggles;
+		$[14] = onError;
+		$[15] = onFinishedLoading;
+		$[16] = resolvedEnvironment;
+		$[17] = toggleApiUrl;
+		$[18] = t9;
+	} else t9 = $[18];
+	let t10;
+	if ($[19] !== distributionKey || $[20] !== initialToggles || $[21] !== resolvedEnvironment || $[22] !== toggleApiUrl) {
+		t10 = [
 			distributionKey,
 			resolvedEnvironment,
-			errorCallback,
-			finishedLoadingCallback,
 			initialToggles,
 			toggleApiUrl
 		];
-		$[8] = distributionKey;
-		$[9] = errorCallback;
-		$[10] = finishedLoadingCallback;
-		$[11] = initialToggles;
-		$[12] = resolvedEnvironment;
-		$[13] = toggleApiUrl;
-		$[14] = t7;
-		$[15] = t8;
-	} else {
-		t7 = $[14];
-		t8 = $[15];
-	}
-	useEffect(t7, t8);
-	let t9;
-	if ($[16] !== toggleOverrides || $[17] !== togglesFromCDN) {
-		t9 = togglesFromCDN?.map((toggle) => {
+		$[19] = distributionKey;
+		$[20] = initialToggles;
+		$[21] = resolvedEnvironment;
+		$[22] = toggleApiUrl;
+		$[23] = t10;
+	} else t10 = $[23];
+	useEffect(t9, t10);
+	let t11;
+	if ($[24] !== toggleOverrides || $[25] !== togglesFromCDN) {
+		t11 = togglesFromCDN?.map((toggle) => {
 			const overrideValue = toggleOverrides[toggle.key];
 			return {
 				...toggle,
 				enabled: overrideValue !== void 0 ? overrideValue : toggle.enabled
 			};
 		});
-		$[16] = toggleOverrides;
-		$[17] = togglesFromCDN;
-		$[18] = t9;
-	} else t9 = $[18];
-	const mergedToggles = t9;
-	let t10;
-	if ($[19] !== mergedToggles || $[20] !== togglesFromCDN) {
-		t10 = {
+		$[24] = toggleOverrides;
+		$[25] = togglesFromCDN;
+		$[26] = t11;
+	} else t11 = $[26];
+	const mergedToggles = t11;
+	let t12;
+	if ($[27] !== mergedToggles || $[28] !== togglesFromCDN) {
+		t12 = {
 			toggles: mergedToggles,
 			originalToggles: togglesFromCDN,
 			setToggleOverride
 		};
-		$[19] = mergedToggles;
-		$[20] = togglesFromCDN;
-		$[21] = t10;
-	} else t10 = $[21];
-	let t11;
-	if ($[22] !== children || $[23] !== t10) {
-		t11 = /* @__PURE__ */ jsx(ToggleProviderContext.Provider, {
-			value: t10,
+		$[27] = mergedToggles;
+		$[28] = togglesFromCDN;
+		$[29] = t12;
+	} else t12 = $[29];
+	let t13;
+	if ($[30] !== children || $[31] !== t12) {
+		t13 = /* @__PURE__ */ jsx(ToggleProviderContext.Provider, {
+			value: t12,
 			children
 		});
-		$[22] = children;
-		$[23] = t10;
-		$[24] = t11;
-	} else t11 = $[24];
-	return t11;
+		$[30] = children;
+		$[31] = t12;
+		$[32] = t13;
+	} else t13 = $[32];
+	return t13;
 };
 
 //#endregion

package/dist/components/ToggleProvider/fetchToggles.js

@@ -41,17 +41,24 @@ function detectEnvironment() {
 * @returns Promise resolving to an array of toggles
 */
 async function fetchToggles(distributionKey, environment, toggleApiUrl = DEFAULT_TOGGLE_API_URL, signal) {
-	const resolvedEnvironment = environment || detectEnvironment();
 	try {
-		const response = await fetch(`${toggleApiUrl}/cdn/${distributionKey}/${resolvedEnvironment}`, { signal });
-		if (!response.ok) throw new Error(`Failed to fetch toggles: ${response.status} ${response.statusText}`);
-		return await response.json();
+		return await requestToggles(distributionKey, environment, toggleApiUrl, signal);
 	} catch (error) {
 		if (error instanceof Error && error.name === "AbortError") throw error;
 		console.error("Error fetching toggles:", error);
 		return [];
 	}
 }
+/**
+* Same request as {@link fetchToggles}, but rejects on every failure instead of resolving to `[]`.
+* Used by `ToggleProvider` so fetch failures reach its `errorCallback`.
+*/
+async function requestToggles(distributionKey, environment, toggleApiUrl = DEFAULT_TOGGLE_API_URL, signal) {
+	const resolvedEnvironment = environment || detectEnvironment();
+	const response = await fetch(`${toggleApiUrl}/cdn/${distributionKey}/${resolvedEnvironment}`, { signal });
+	if (!response.ok) throw new Error(`Failed to fetch toggles: ${response.status} ${response.statusText}`);
+	return await response.json();
+}
 
 //#endregion
-export { detectEnvironment, fetchToggles };
+export { detectEnvironment, fetchToggles, requestToggles };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patterninc/pattern-ui",
-  "version": "0.0.0-main.202610080441.d12ae32dfdcb",
+  "version": "0.0.0-main.202610080442.f227f6fcab21",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/patterninc/pattern-exp.git",

package/src/components/ToggleProvider/ToggleProvider.tsx

@@ -1,6 +1,10 @@
-import React, { createContext, useEffect, useState } from 'react'
+import React, { createContext, useEffect, useEffectEvent, useState } from 'react'
 
-import { detectEnvironment, fetchToggles as fetchTogglesFromCDN } from './fetchToggles'
+import {
+  detectEnvironment,
+  fetchToggles as fetchTogglesFromCDN,
+  requestToggles,
+} from './fetchToggles'
 
 /** Toggle interface representing a feature toggle from the API */
 export interface Toggle {
@@ -247,56 +251,53 @@ export const ToggleProvider = ({
     }))
   }
 
+  // Effect Events keep the latest callbacks without listing them as effect deps, so inline
+  // callbacks from consumers don't abort and refetch on every render.
+  const onFinishedLoading = useEffectEvent((isLoaded: boolean) => {
+    finishedLoadingCallback?.(isLoaded)
+  })
+  const onError = useEffectEvent((error: string | Record<string, unknown>) => {
+    errorCallback?.(error)
+  })
+
   // Server-provided initialToggles is the catalog for this render. Skip the client
   // CDN fetch so hydration stays stable. `undefined` means the server miss — fetch.
   useEffect(() => {
     if (initialToggles !== undefined) {
-      finishedLoadingCallback?.(true)
+      onFinishedLoading(true)
       return
     }
 
     const controller = new AbortController()
     const { signal } = controller
 
-    fetchTogglesFromCDN(distributionKey, resolvedEnvironment, toggleApiUrl, signal)
-      .then((toggles) => {
+    // requestToggles (unlike the public fetchToggles) rejects on failure so errors reach onError.
+    // The rejection handler is passed to then() (not catch()) so a throw from the success path,
+    // e.g. a consumer's finishedLoadingCallback, isn't mistaken for a fetch failure.
+    requestToggles(distributionKey, resolvedEnvironment, toggleApiUrl, signal).then(
+      (toggles) => {
         // Only update state if not aborted
         if (!signal.aborted) {
           setTogglesFromCDN(toggles)
-          finishedLoadingCallback?.(true)
+          onFinishedLoading(true)
         }
-      })
-      .catch((error) => {
+      },
+      (error: unknown) => {
         // Don't handle abort errors - they're expected during cleanup
-        if (error?.name === 'AbortError') return
+        if (signal.aborted || (error instanceof Error && error.name === 'AbortError')) return
 
-        // Handle other errors
-        if (errorCallback) {
-          errorCallback(error)
-        }
-        // If client-side fetch fails but we have initialToggles from server, keep those
-        // Otherwise set to empty array
-        if (initialToggles === undefined) {
-          setTogglesFromCDN([])
-        }
-
-        // If the query is cancelled, don't set finished loading to true. This fixes issues in strict mode
-        if (!error?.message?.toLowerCase().includes('canceled')) {
-          finishedLoadingCallback?.(true)
-        }
-      })
+        console.error('Error fetching toggles:', error)
+        onError(error instanceof Error ? error.message : String(error))
+        // initialToggles is undefined on this path (the effect returned early otherwise)
+        setTogglesFromCDN([])
+        onFinishedLoading(true)
+      },
+    )
 
     return () => {
       controller.abort()
     }
-  }, [
-    distributionKey,
-    resolvedEnvironment,
-    errorCallback,
-    finishedLoadingCallback,
-    initialToggles,
-    toggleApiUrl,
-  ])
+  }, [distributionKey, resolvedEnvironment, initialToggles, toggleApiUrl])
 
   // Merge backend toggles with local overrides
   const mergedToggles = togglesFromCDN?.map((toggle) => {

package/src/components/ToggleProvider/fetchToggles.ts

@@ -63,18 +63,8 @@ export async function fetchToggles(
   toggleApiUrl: string = DEFAULT_TOGGLE_API_URL,
   signal?: AbortSignal,
 ): Promise<Toggle[]> {
-  const resolvedEnvironment = environment || detectEnvironment()
   try {
-    const response = await fetch(`${toggleApiUrl}/cdn/${distributionKey}/${resolvedEnvironment}`, {
-      signal,
-    })
-
-    if (!response.ok) {
-      throw new Error(`Failed to fetch toggles: ${response.status} ${response.statusText}`)
-    }
-
-    const toggles = (await response.json()) as Toggle[]
-    return toggles
+    return await requestToggles(distributionKey, environment, toggleApiUrl, signal)
   } catch (error) {
     // Don't log or return empty array for abort errors - let caller handle it
     if (error instanceof Error && error.name === 'AbortError') {
@@ -87,3 +77,25 @@ export async function fetchToggles(
     return []
   }
 }
+
+/**
+ * Same request as {@link fetchToggles}, but rejects on every failure instead of resolving to `[]`.
+ * Used by `ToggleProvider` so fetch failures reach its `errorCallback`.
+ */
+export async function requestToggles(
+  distributionKey: string,
+  environment?: ToggleEnvironment,
+  toggleApiUrl: string = DEFAULT_TOGGLE_API_URL,
+  signal?: AbortSignal,
+): Promise<Toggle[]> {
+  const resolvedEnvironment = environment || detectEnvironment()
+  const response = await fetch(`${toggleApiUrl}/cdn/${distributionKey}/${resolvedEnvironment}`, {
+    signal,
+  })
+
+  if (!response.ok) {
+    throw new Error(`Failed to fetch toggles: ${response.status} ${response.statusText}`)
+  }
+
+  return (await response.json()) as Toggle[]
+}