@replanejs/react 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Dmitry Tilyupo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.cjs

@@ -0,0 +1,224 @@
+//#region rolldown:runtime
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+
+//#endregion
+const react = __toESM(require("react"));
+const __replanejs_sdk = __toESM(require("@replanejs/sdk"));
+const react_jsx_runtime = __toESM(require("react/jsx-runtime"));
+
+//#region src/context.ts
+const ReplaneContext = (0, react.createContext)(null);
+
+//#endregion
+//#region src/useReplaneClient.ts
+const suspenseCache = new Map();
+function getCacheKey(options) {
+	return `${options.baseUrl}:${options.sdkKey}`;
+}
+/**
+* Hook to manage ReplaneClient creation internally.
+* Handles loading state and cleanup.
+*/
+function useReplaneClient(options, onError) {
+	const [state, setState] = (0, react.useState)({
+		status: "loading",
+		client: null,
+		error: null
+	});
+	const clientRef = (0, react.useRef)(null);
+	const optionsRef = (0, react.useRef)(options);
+	(0, react.useEffect)(() => {
+		let cancelled = false;
+		async function initClient() {
+			try {
+				const client = await (0, __replanejs_sdk.createReplaneClient)(optionsRef.current);
+				if (cancelled) {
+					client.close();
+					return;
+				}
+				clientRef.current = client;
+				setState({
+					status: "ready",
+					client,
+					error: null
+				});
+			} catch (err) {
+				if (cancelled) return;
+				const error = err instanceof Error ? err : new Error(String(err));
+				setState({
+					status: "error",
+					client: null,
+					error
+				});
+				onError?.(error);
+			}
+		}
+		initClient();
+		return () => {
+			cancelled = true;
+			if (clientRef.current) {
+				clientRef.current.close();
+				clientRef.current = null;
+			}
+		};
+	}, []);
+	return state;
+}
+/**
+* Hook for Suspense-based client creation.
+* Throws a promise while loading, throws error on failure.
+*/
+function useReplaneClientSuspense(options) {
+	const cacheKey = getCacheKey(options);
+	const cached = suspenseCache.get(cacheKey);
+	if (cached) {
+		if (cached.error) throw cached.error;
+		if (cached.result) return cached.result;
+		throw cached.promise;
+	}
+	const promise = (0, __replanejs_sdk.createReplaneClient)(options).then((client) => {
+		const entry = suspenseCache.get(cacheKey);
+		if (entry) entry.result = client;
+		return client;
+	}).catch((err) => {
+		const entry = suspenseCache.get(cacheKey);
+		if (entry) entry.error = err instanceof Error ? err : new Error(String(err));
+		throw err;
+	});
+	suspenseCache.set(cacheKey, { promise });
+	throw promise;
+}
+/**
+* Clear the suspense cache for a specific options configuration.
+* Useful for testing or when you need to force re-initialization.
+*/
+function clearSuspenseCache(options) {
+	if (options) suspenseCache.delete(getCacheKey(options));
+	else suspenseCache.clear();
+}
+
+//#endregion
+//#region src/types.ts
+/**
+* Type guard to check if props contain a pre-created client.
+*/
+function hasClient(props) {
+	return "client" in props && props.client !== void 0;
+}
+
+//#endregion
+//#region src/provider.tsx
+/**
+* Internal provider component for pre-created client.
+*/
+function ReplaneProviderWithClient({ client, children }) {
+	const value = (0, react.useMemo)(() => ({ client }), [client]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ReplaneContext.Provider, {
+		value,
+		children
+	});
+}
+/**
+* Internal provider component for options-based client creation (non-suspense).
+*/
+function ReplaneProviderWithOptions({ options, children, loader, onError }) {
+	const state = useReplaneClient(options, onError);
+	if (state.status === "loading") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: loader ?? null });
+	if (state.status === "error") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: loader ?? null });
+	const value = { client: state.client };
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ReplaneContext.Provider, {
+		value,
+		children
+	});
+}
+/**
+* Internal provider component for options-based client creation with Suspense.
+*/
+function ReplaneProviderWithSuspense({ options, children }) {
+	const client = useReplaneClientSuspense(options);
+	const value = (0, react.useMemo)(() => ({ client }), [client]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ReplaneContext.Provider, {
+		value,
+		children
+	});
+}
+/**
+* Provider component that makes a ReplaneClient available to the component tree.
+*
+* Can be used in two ways:
+*
+* 1. With a pre-created client:
+* ```tsx
+* const client = await createReplaneClient({ ... });
+* <ReplaneProvider client={client}>
+*   <App />
+* </ReplaneProvider>
+* ```
+*
+* 2. With options (client managed internally):
+* ```tsx
+* <ReplaneProvider
+*   options={{ baseUrl: '...', sdkKey: '...' }}
+*   loader={<LoadingSpinner />}
+* >
+*   <App />
+* </ReplaneProvider>
+* ```
+*
+* 3. With Suspense:
+* ```tsx
+* <Suspense fallback={<LoadingSpinner />}>
+*   <ReplaneProvider
+*     options={{ baseUrl: '...', sdkKey: '...' }}
+*     suspense
+*   >
+*     <App />
+*   </ReplaneProvider>
+* </Suspense>
+* ```
+*/
+function ReplaneProvider(props) {
+	if (hasClient(props)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ReplaneProviderWithClient, { ...props });
+	if (props.suspense) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ReplaneProviderWithSuspense, { ...props });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ReplaneProviderWithOptions, { ...props });
+}
+
+//#endregion
+//#region src/hooks.ts
+function useReplane() {
+	const context = (0, react.useContext)(ReplaneContext);
+	if (!context) throw new Error("useReplane must be used within a ReplaneProvider");
+	return context;
+}
+function useConfig(name, options) {
+	const { client } = useReplane();
+	const value = (0, react.useSyncExternalStore)((onStoreChange) => {
+		return client.subscribe(name, onStoreChange);
+	}, () => client.get(name, options), () => client.get(name, options));
+	return value;
+}
+
+//#endregion
+exports.ReplaneProvider = ReplaneProvider;
+exports.clearSuspenseCache = clearSuspenseCache;
+exports.useConfig = useConfig;
+exports.useReplane = useReplane;

package/dist/index.d.cts

@@ -0,0 +1,100 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { ReplaneClient, ReplaneClientOptions } from "@replanejs/sdk";
+import { ReactNode } from "react";
+
+//#region src/types.d.ts
+interface ReplaneContextValue<T extends object = any> {
+  client: ReplaneClient<T>;
+}
+/**
+ * Props for ReplaneProvider when using a pre-created client.
+ */
+interface ReplaneProviderWithClientProps<T extends object = any> {
+  /** Pre-created ReplaneClient instance */
+  client: ReplaneClient<T>;
+  children: ReactNode;
+}
+/**
+ * Props for ReplaneProvider when letting it manage the client internally.
+ */
+interface ReplaneProviderWithOptionsProps<T extends object = any> {
+  /** Options to create the ReplaneClient */
+  options: ReplaneClientOptions<T>;
+  children: ReactNode;
+  /**
+   * Optional loading component to show while the client is initializing.
+   * If not provided and suspense is false/undefined, children will not render until ready.
+   */
+  loader?: ReactNode;
+  /**
+   * If true, uses React Suspense for loading state.
+   * The provider will throw a promise that Suspense can catch.
+   * @default false
+   */
+  suspense?: boolean;
+  /**
+   * Callback when client initialization fails.
+   */
+  onError?: (error: Error) => void;
+}
+type ReplaneProviderProps<T extends object = any> = ReplaneProviderWithClientProps<T> | ReplaneProviderWithOptionsProps<T>;
+/**
+ * Type guard to check if props contain a pre-created client.
+ */
+//#endregion
+//#region src/provider.d.ts
+/**
+ * Provider component that makes a ReplaneClient available to the component tree.
+ *
+ * Can be used in two ways:
+ *
+ * 1. With a pre-created client:
+ * ```tsx
+ * const client = await createReplaneClient({ ... });
+ * <ReplaneProvider client={client}>
+ *   <App />
+ * </ReplaneProvider>
+ * ```
+ *
+ * 2. With options (client managed internally):
+ * ```tsx
+ * <ReplaneProvider
+ *   options={{ baseUrl: '...', sdkKey: '...' }}
+ *   loader={<LoadingSpinner />}
+ * >
+ *   <App />
+ * </ReplaneProvider>
+ * ```
+ *
+ * 3. With Suspense:
+ * ```tsx
+ * <Suspense fallback={<LoadingSpinner />}>
+ *   <ReplaneProvider
+ *     options={{ baseUrl: '...', sdkKey: '...' }}
+ *     suspense
+ *   >
+ *     <App />
+ *   </ReplaneProvider>
+ * </Suspense>
+ * ```
+ */
+declare function ReplaneProvider<T extends object>(props: ReplaneProviderProps<T>): react_jsx_runtime0.JSX.Element;
+//# sourceMappingURL=provider.d.ts.map
+//#endregion
+//#region src/hooks.d.ts
+declare function useReplane<T extends object = any>(): ReplaneContextValue<T>;
+declare function useConfig<T>(name: string, options?: {
+  context?: Record<string, string | number | boolean | null>;
+}): T;
+//# sourceMappingURL=hooks.d.ts.map
+
+//#endregion
+//#region src/useReplaneClient.d.ts
+/**
+ * Clear the suspense cache for a specific options configuration.
+ * Useful for testing or when you need to force re-initialization.
+ */
+declare function clearSuspenseCache<T extends object>(options?: ReplaneClientOptions<T>): void;
+//#endregion
+export { type ReplaneContextValue, ReplaneProvider, type ReplaneProviderProps, type ReplaneProviderWithClientProps, type ReplaneProviderWithOptionsProps, clearSuspenseCache, useConfig, useReplane };
+//# sourceMappingURL=index.d.cts.map

package/dist/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","names":[],"sources":["../src/types.ts","../src/provider.tsx","../src/hooks.ts","../src/useReplaneClient.ts"],"sourcesContent":[],"mappings":";;;;;UAIiB;UACP,cAAc;;AADxB;;;AACU,UAOO,8BAPP,CAAA,UAAA,MAAA,GAAA,GAAA,CAAA,CAAA;EAAa;EAON,MAAA,EAEP,aAFO,CAEO,CAFP,CAAA;EAA8B,QAAA,EAGnC,SAHmC;;;;AAG1B;AAOJ,UAAA,+BAA+B,CAAA,UAAA,MAAA,GAAA,GAAA,CAAA,CAAA;EAAA;EAAA,OAEhB,EAArB,oBAAqB,CAAA,CAAA,CAAA;EAAC,QAAtB,EACC,SADD;EAAoB;;;AAgBN;EAIb,MAAA,CAAA,EAdD,SAcC;EAAoB;;;;;EAEG,QAAA,CAAA,EAAA,OAAA;;;;ECgDnB,OAAA,CAAA,EAAA,CAAA,KAAA,EDtDI,KCsDW,EAAA,GAAA,IAAA;;AAA+C,KDlDlE,oBCkDkE,CAAA,UAAA,MAAA,GAAA,GAAA,CAAA,GDjD1E,8BCiD0E,CDjD3C,CCiD2C,CAAA,GDhD1E,+BCgD0E,CDhD1C,CCgD0C,CAAA;;;AAAE;;;;;;;AD1FhF;;;;AACuB;AAOvB;;;;;AAGqB;AAOrB;;;;;;;AAkByB;AAIzB;;;;;;AAEmC;;;;ACgDnC;;AAA8E,iBAA9D,eAA8D,CAAA,UAAA,MAAA,CAAA,CAAA,KAAA,EAArB,oBAAqB,CAAA,CAAA,CAAA,CAAA,EAAE,kBAAA,CAAA,GAAA,CAAA,OAAF;;;;iBCzF9D,sCAAsC,oBAAoB;iBAQ1D;YAEQ;IACrB;AFZH;;;;AAwCA;;;;AAEoC,iBGgFpB,kBHhFoB,CAAA,UAAA,MAAA,CAAA,CAAA,OAAA,CAAA,EGgF2B,oBHhF3B,CGgFgD,CHhFhD,CAAA,CAAA,EAAA,IAAA"}

package/dist/index.d.ts

@@ -0,0 +1,100 @@
+import { ReactNode } from "react";
+import { ReplaneClient, ReplaneClientOptions } from "@replanejs/sdk";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/types.d.ts
+interface ReplaneContextValue<T extends object = any> {
+  client: ReplaneClient<T>;
+}
+/**
+ * Props for ReplaneProvider when using a pre-created client.
+ */
+interface ReplaneProviderWithClientProps<T extends object = any> {
+  /** Pre-created ReplaneClient instance */
+  client: ReplaneClient<T>;
+  children: ReactNode;
+}
+/**
+ * Props for ReplaneProvider when letting it manage the client internally.
+ */
+interface ReplaneProviderWithOptionsProps<T extends object = any> {
+  /** Options to create the ReplaneClient */
+  options: ReplaneClientOptions<T>;
+  children: ReactNode;
+  /**
+   * Optional loading component to show while the client is initializing.
+   * If not provided and suspense is false/undefined, children will not render until ready.
+   */
+  loader?: ReactNode;
+  /**
+   * If true, uses React Suspense for loading state.
+   * The provider will throw a promise that Suspense can catch.
+   * @default false
+   */
+  suspense?: boolean;
+  /**
+   * Callback when client initialization fails.
+   */
+  onError?: (error: Error) => void;
+}
+type ReplaneProviderProps<T extends object = any> = ReplaneProviderWithClientProps<T> | ReplaneProviderWithOptionsProps<T>;
+/**
+ * Type guard to check if props contain a pre-created client.
+ */
+//#endregion
+//#region src/provider.d.ts
+/**
+ * Provider component that makes a ReplaneClient available to the component tree.
+ *
+ * Can be used in two ways:
+ *
+ * 1. With a pre-created client:
+ * ```tsx
+ * const client = await createReplaneClient({ ... });
+ * <ReplaneProvider client={client}>
+ *   <App />
+ * </ReplaneProvider>
+ * ```
+ *
+ * 2. With options (client managed internally):
+ * ```tsx
+ * <ReplaneProvider
+ *   options={{ baseUrl: '...', sdkKey: '...' }}
+ *   loader={<LoadingSpinner />}
+ * >
+ *   <App />
+ * </ReplaneProvider>
+ * ```
+ *
+ * 3. With Suspense:
+ * ```tsx
+ * <Suspense fallback={<LoadingSpinner />}>
+ *   <ReplaneProvider
+ *     options={{ baseUrl: '...', sdkKey: '...' }}
+ *     suspense
+ *   >
+ *     <App />
+ *   </ReplaneProvider>
+ * </Suspense>
+ * ```
+ */
+declare function ReplaneProvider<T extends object>(props: ReplaneProviderProps<T>): react_jsx_runtime0.JSX.Element;
+//# sourceMappingURL=provider.d.ts.map
+//#endregion
+//#region src/hooks.d.ts
+declare function useReplane<T extends object = any>(): ReplaneContextValue<T>;
+declare function useConfig<T>(name: string, options?: {
+  context?: Record<string, string | number | boolean | null>;
+}): T;
+//# sourceMappingURL=hooks.d.ts.map
+
+//#endregion
+//#region src/useReplaneClient.d.ts
+/**
+ * Clear the suspense cache for a specific options configuration.
+ * Useful for testing or when you need to force re-initialization.
+ */
+declare function clearSuspenseCache<T extends object>(options?: ReplaneClientOptions<T>): void;
+//#endregion
+export { type ReplaneContextValue, ReplaneProvider, type ReplaneProviderProps, type ReplaneProviderWithClientProps, type ReplaneProviderWithOptionsProps, clearSuspenseCache, useConfig, useReplane };
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../src/types.ts","../src/provider.tsx","../src/hooks.ts","../src/useReplaneClient.ts"],"sourcesContent":[],"mappings":";;;;;UAIiB;UACP,cAAc;;AADxB;;;AACU,UAOO,8BAPP,CAAA,UAAA,MAAA,GAAA,GAAA,CAAA,CAAA;EAAa;EAON,MAAA,EAEP,aAFO,CAEO,CAFP,CAAA;EAA8B,QAAA,EAGnC,SAHmC;;;;AAG1B;AAOJ,UAAA,+BAA+B,CAAA,UAAA,MAAA,GAAA,GAAA,CAAA,CAAA;EAAA;EAAA,OAEhB,EAArB,oBAAqB,CAAA,CAAA,CAAA;EAAC,QAAtB,EACC,SADD;EAAoB;;;AAgBN;EAIb,MAAA,CAAA,EAdD,SAcC;EAAoB;;;;;EAEG,QAAA,CAAA,EAAA,OAAA;;;;ECgDnB,OAAA,CAAA,EAAA,CAAA,KAAA,EDtDI,KCsDW,EAAA,GAAA,IAAA;;AAA+C,KDlDlE,oBCkDkE,CAAA,UAAA,MAAA,GAAA,GAAA,CAAA,GDjD1E,8BCiD0E,CDjD3C,CCiD2C,CAAA,GDhD1E,+BCgD0E,CDhD1C,CCgD0C,CAAA;;;AAAE;;;;;;;AD1FhF;;;;AACuB;AAOvB;;;;;AAGqB;AAOrB;;;;;;;AAkByB;AAIzB;;;;;;AAEmC;;;;ACgDnC;;AAA8E,iBAA9D,eAA8D,CAAA,UAAA,MAAA,CAAA,CAAA,KAAA,EAArB,oBAAqB,CAAA,CAAA,CAAA,CAAA,EAAE,kBAAA,CAAA,GAAA,CAAA,OAAF;;;;iBCzF9D,sCAAsC,oBAAoB;iBAQ1D;YAEQ;IACrB;AFZH;;;;AAwCA;;;;AAEoC,iBGgFpB,kBHhFoB,CAAA,UAAA,MAAA,CAAA,CAAA,OAAA,CAAA,EGgF2B,oBHhF3B,CGgFgD,CHhFhD,CAAA,CAAA,EAAA,IAAA"}

package/dist/index.js

@@ -0,0 +1,199 @@
+import { createContext, useContext, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { createReplaneClient } from "@replanejs/sdk";
+import { Fragment, jsx } from "react/jsx-runtime";
+
+//#region src/context.ts
+const ReplaneContext = createContext(null);
+
+//#endregion
+//#region src/useReplaneClient.ts
+const suspenseCache = new Map();
+function getCacheKey(options) {
+	return `${options.baseUrl}:${options.sdkKey}`;
+}
+/**
+* Hook to manage ReplaneClient creation internally.
+* Handles loading state and cleanup.
+*/
+function useReplaneClient(options, onError) {
+	const [state, setState] = useState({
+		status: "loading",
+		client: null,
+		error: null
+	});
+	const clientRef = useRef(null);
+	const optionsRef = useRef(options);
+	useEffect(() => {
+		let cancelled = false;
+		async function initClient() {
+			try {
+				const client = await createReplaneClient(optionsRef.current);
+				if (cancelled) {
+					client.close();
+					return;
+				}
+				clientRef.current = client;
+				setState({
+					status: "ready",
+					client,
+					error: null
+				});
+			} catch (err) {
+				if (cancelled) return;
+				const error = err instanceof Error ? err : new Error(String(err));
+				setState({
+					status: "error",
+					client: null,
+					error
+				});
+				onError?.(error);
+			}
+		}
+		initClient();
+		return () => {
+			cancelled = true;
+			if (clientRef.current) {
+				clientRef.current.close();
+				clientRef.current = null;
+			}
+		};
+	}, []);
+	return state;
+}
+/**
+* Hook for Suspense-based client creation.
+* Throws a promise while loading, throws error on failure.
+*/
+function useReplaneClientSuspense(options) {
+	const cacheKey = getCacheKey(options);
+	const cached = suspenseCache.get(cacheKey);
+	if (cached) {
+		if (cached.error) throw cached.error;
+		if (cached.result) return cached.result;
+		throw cached.promise;
+	}
+	const promise = createReplaneClient(options).then((client) => {
+		const entry = suspenseCache.get(cacheKey);
+		if (entry) entry.result = client;
+		return client;
+	}).catch((err) => {
+		const entry = suspenseCache.get(cacheKey);
+		if (entry) entry.error = err instanceof Error ? err : new Error(String(err));
+		throw err;
+	});
+	suspenseCache.set(cacheKey, { promise });
+	throw promise;
+}
+/**
+* Clear the suspense cache for a specific options configuration.
+* Useful for testing or when you need to force re-initialization.
+*/
+function clearSuspenseCache(options) {
+	if (options) suspenseCache.delete(getCacheKey(options));
+	else suspenseCache.clear();
+}
+
+//#endregion
+//#region src/types.ts
+/**
+* Type guard to check if props contain a pre-created client.
+*/
+function hasClient(props) {
+	return "client" in props && props.client !== void 0;
+}
+
+//#endregion
+//#region src/provider.tsx
+/**
+* Internal provider component for pre-created client.
+*/
+function ReplaneProviderWithClient({ client, children }) {
+	const value = useMemo(() => ({ client }), [client]);
+	return /* @__PURE__ */ jsx(ReplaneContext.Provider, {
+		value,
+		children
+	});
+}
+/**
+* Internal provider component for options-based client creation (non-suspense).
+*/
+function ReplaneProviderWithOptions({ options, children, loader, onError }) {
+	const state = useReplaneClient(options, onError);
+	if (state.status === "loading") return /* @__PURE__ */ jsx(Fragment, { children: loader ?? null });
+	if (state.status === "error") return /* @__PURE__ */ jsx(Fragment, { children: loader ?? null });
+	const value = { client: state.client };
+	return /* @__PURE__ */ jsx(ReplaneContext.Provider, {
+		value,
+		children
+	});
+}
+/**
+* Internal provider component for options-based client creation with Suspense.
+*/
+function ReplaneProviderWithSuspense({ options, children }) {
+	const client = useReplaneClientSuspense(options);
+	const value = useMemo(() => ({ client }), [client]);
+	return /* @__PURE__ */ jsx(ReplaneContext.Provider, {
+		value,
+		children
+	});
+}
+/**
+* Provider component that makes a ReplaneClient available to the component tree.
+*
+* Can be used in two ways:
+*
+* 1. With a pre-created client:
+* ```tsx
+* const client = await createReplaneClient({ ... });
+* <ReplaneProvider client={client}>
+*   <App />
+* </ReplaneProvider>
+* ```
+*
+* 2. With options (client managed internally):
+* ```tsx
+* <ReplaneProvider
+*   options={{ baseUrl: '...', sdkKey: '...' }}
+*   loader={<LoadingSpinner />}
+* >
+*   <App />
+* </ReplaneProvider>
+* ```
+*
+* 3. With Suspense:
+* ```tsx
+* <Suspense fallback={<LoadingSpinner />}>
+*   <ReplaneProvider
+*     options={{ baseUrl: '...', sdkKey: '...' }}
+*     suspense
+*   >
+*     <App />
+*   </ReplaneProvider>
+* </Suspense>
+* ```
+*/
+function ReplaneProvider(props) {
+	if (hasClient(props)) return /* @__PURE__ */ jsx(ReplaneProviderWithClient, { ...props });
+	if (props.suspense) return /* @__PURE__ */ jsx(ReplaneProviderWithSuspense, { ...props });
+	return /* @__PURE__ */ jsx(ReplaneProviderWithOptions, { ...props });
+}
+
+//#endregion
+//#region src/hooks.ts
+function useReplane() {
+	const context = useContext(ReplaneContext);
+	if (!context) throw new Error("useReplane must be used within a ReplaneProvider");
+	return context;
+}
+function useConfig(name, options) {
+	const { client } = useReplane();
+	const value = useSyncExternalStore((onStoreChange) => {
+		return client.subscribe(name, onStoreChange);
+	}, () => client.get(name, options), () => client.get(name, options));
+	return value;
+}
+
+//#endregion
+export { ReplaneProvider, clearSuspenseCache, useConfig, useReplane };
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["options: ReplaneClientOptions<T>","onError?: (error: Error) => void","options?: ReplaneClientOptions<T>","props: ReplaneProviderProps<T>","value: ReplaneContextValue<T>","props: ReplaneProviderProps<T>","name: string","options?: { context?: Record<string, string | number | boolean | null> }"],"sources":["../src/context.ts","../src/useReplaneClient.ts","../src/types.ts","../src/provider.tsx","../src/hooks.ts"],"sourcesContent":["import { createContext } from \"react\";\nimport type { ReplaneContextValue } from \"./types\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport const ReplaneContext = createContext<ReplaneContextValue<any> | null>(null);\n","import { useEffect, useRef, useState } from \"react\";\nimport { createReplaneClient } from \"@replanejs/sdk\";\nimport type { ReplaneClient, ReplaneClientOptions } from \"@replanejs/sdk\";\n\ntype ClientState<T extends object> =\n  | { status: \"loading\"; client: null; error: null }\n  | { status: \"ready\"; client: ReplaneClient<T>; error: null }\n  | { status: \"error\"; client: null; error: Error };\n\n// Cache for suspense promise tracking\nconst suspenseCache = new Map<\n  string,\n  {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    promise: Promise<ReplaneClient<any>>;\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    result?: ReplaneClient<any>;\n    error?: Error;\n  }\n>();\n\nfunction getCacheKey<T extends object>(options: ReplaneClientOptions<T>): string {\n  return `${options.baseUrl}:${options.sdkKey}`;\n}\n\n/**\n * Hook to manage ReplaneClient creation internally.\n * Handles loading state and cleanup.\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function useReplaneClient<T extends object = any>(\n  options: ReplaneClientOptions<T>,\n  onError?: (error: Error) => void\n): ClientState<T> {\n  const [state, setState] = useState<ClientState<T>>({\n    status: \"loading\",\n    client: null,\n    error: null,\n  });\n  const clientRef = useRef<ReplaneClient<T> | null>(null);\n  const optionsRef = useRef(options);\n\n  useEffect(() => {\n    let cancelled = false;\n\n    async function initClient() {\n      try {\n        const client = await createReplaneClient<T>(optionsRef.current);\n        if (cancelled) {\n          client.close();\n          return;\n        }\n        clientRef.current = client;\n        setState({ status: \"ready\", client, error: null });\n      } catch (err) {\n        if (cancelled) return;\n        const error = err instanceof Error ? err : new Error(String(err));\n        setState({ status: \"error\", client: null, error });\n        onError?.(error);\n      }\n    }\n\n    initClient();\n\n    return () => {\n      cancelled = true;\n      if (clientRef.current) {\n        clientRef.current.close();\n        clientRef.current = null;\n      }\n    };\n    // We intentionally only run this effect once on mount\n    // Options changes would require remounting the provider\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  return state;\n}\n\n/**\n * Hook for Suspense-based client creation.\n * Throws a promise while loading, throws error on failure.\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function useReplaneClientSuspense<T extends object = any>(\n  options: ReplaneClientOptions<T>\n): ReplaneClient<T> {\n  const cacheKey = getCacheKey(options);\n  const cached = suspenseCache.get(cacheKey);\n\n  if (cached) {\n    if (cached.error) {\n      throw cached.error;\n    }\n    if (cached.result) {\n      return cached.result as ReplaneClient<T>;\n    }\n    // Still loading, throw the promise\n    throw cached.promise;\n  }\n\n  // First time - create the promise\n  const promise = createReplaneClient<T>(options)\n    .then((client) => {\n      const entry = suspenseCache.get(cacheKey);\n      if (entry) {\n        entry.result = client;\n      }\n      return client;\n    })\n    .catch((err) => {\n      const entry = suspenseCache.get(cacheKey);\n      if (entry) {\n        entry.error = err instanceof Error ? err : new Error(String(err));\n      }\n      throw err;\n    });\n\n  suspenseCache.set(cacheKey, { promise });\n  throw promise;\n}\n\n/**\n * Clear the suspense cache for a specific options configuration.\n * Useful for testing or when you need to force re-initialization.\n */\nexport function clearSuspenseCache<T extends object>(options?: ReplaneClientOptions<T>): void {\n  if (options) {\n    suspenseCache.delete(getCacheKey(options));\n  } else {\n    suspenseCache.clear();\n  }\n}\n","import type { ReplaneClient, ReplaneClientOptions } from \"@replanejs/sdk\";\nimport type { ReactNode } from \"react\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport interface ReplaneContextValue<T extends object = any> {\n  client: ReplaneClient<T>;\n}\n\n/**\n * Props for ReplaneProvider when using a pre-created client.\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport interface ReplaneProviderWithClientProps<T extends object = any> {\n  /** Pre-created ReplaneClient instance */\n  client: ReplaneClient<T>;\n  children: ReactNode;\n}\n\n/**\n * Props for ReplaneProvider when letting it manage the client internally.\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport interface ReplaneProviderWithOptionsProps<T extends object = any> {\n  /** Options to create the ReplaneClient */\n  options: ReplaneClientOptions<T>;\n  children: ReactNode;\n  /**\n   * Optional loading component to show while the client is initializing.\n   * If not provided and suspense is false/undefined, children will not render until ready.\n   */\n  loader?: ReactNode;\n  /**\n   * If true, uses React Suspense for loading state.\n   * The provider will throw a promise that Suspense can catch.\n   * @default false\n   */\n  suspense?: boolean;\n  /**\n   * Callback when client initialization fails.\n   */\n  onError?: (error: Error) => void;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type ReplaneProviderProps<T extends object = any> =\n  | ReplaneProviderWithClientProps<T>\n  | ReplaneProviderWithOptionsProps<T>;\n\n/**\n * Type guard to check if props contain a pre-created client.\n */\nexport function hasClient<T extends object>(\n  props: ReplaneProviderProps<T>\n): props is ReplaneProviderWithClientProps<T> {\n  return \"client\" in props && props.client !== undefined;\n}\n","import { useMemo } from \"react\";\nimport { ReplaneContext } from \"./context\";\nimport { useReplaneClient, useReplaneClientSuspense } from \"./useReplaneClient\";\nimport type {\n  ReplaneProviderProps,\n  ReplaneProviderWithClientProps,\n  ReplaneProviderWithOptionsProps,\n  ReplaneContextValue,\n} from \"./types\";\nimport { hasClient } from \"./types\";\n\n/**\n * Internal provider component for pre-created client.\n */\nfunction ReplaneProviderWithClient<T extends object>({\n  client,\n  children,\n}: ReplaneProviderWithClientProps<T>) {\n  const value = useMemo<ReplaneContextValue<T>>(() => ({ client }), [client]);\n  return <ReplaneContext.Provider value={value}>{children}</ReplaneContext.Provider>;\n}\n\n/**\n * Internal provider component for options-based client creation (non-suspense).\n */\nfunction ReplaneProviderWithOptions<T extends object>({\n  options,\n  children,\n  loader,\n  onError,\n}: ReplaneProviderWithOptionsProps<T>) {\n  const state = useReplaneClient<T>(options, onError);\n\n  if (state.status === \"loading\") {\n    return <>{loader ?? null}</>;\n  }\n\n  if (state.status === \"error\") {\n    // Error was already reported via onError callback\n    // Return loader or null to prevent rendering children without a client\n    return <>{loader ?? null}</>;\n  }\n\n  const value: ReplaneContextValue<T> = { client: state.client };\n  return <ReplaneContext.Provider value={value}>{children}</ReplaneContext.Provider>;\n}\n\n/**\n * Internal provider component for options-based client creation with Suspense.\n */\nfunction ReplaneProviderWithSuspense<T extends object>({\n  options,\n  children,\n}: ReplaneProviderWithOptionsProps<T>) {\n  const client = useReplaneClientSuspense<T>(options);\n  const value = useMemo<ReplaneContextValue<T>>(() => ({ client }), [client]);\n  return <ReplaneContext.Provider value={value}>{children}</ReplaneContext.Provider>;\n}\n\n/**\n * Provider component that makes a ReplaneClient available to the component tree.\n *\n * Can be used in two ways:\n *\n * 1. With a pre-created client:\n * ```tsx\n * const client = await createReplaneClient({ ... });\n * <ReplaneProvider client={client}>\n *   <App />\n * </ReplaneProvider>\n * ```\n *\n * 2. With options (client managed internally):\n * ```tsx\n * <ReplaneProvider\n *   options={{ baseUrl: '...', sdkKey: '...' }}\n *   loader={<LoadingSpinner />}\n * >\n *   <App />\n * </ReplaneProvider>\n * ```\n *\n * 3. With Suspense:\n * ```tsx\n * <Suspense fallback={<LoadingSpinner />}>\n *   <ReplaneProvider\n *     options={{ baseUrl: '...', sdkKey: '...' }}\n *     suspense\n *   >\n *     <App />\n *   </ReplaneProvider>\n * </Suspense>\n * ```\n */\nexport function ReplaneProvider<T extends object>(props: ReplaneProviderProps<T>) {\n  if (hasClient(props)) {\n    return <ReplaneProviderWithClient {...props} />;\n  }\n\n  if (props.suspense) {\n    return <ReplaneProviderWithSuspense {...props} />;\n  }\n\n  return <ReplaneProviderWithOptions {...props} />;\n}\n","import { useContext, useSyncExternalStore } from \"react\";\nimport { ReplaneContext } from \"./context\";\nimport type { ReplaneContextValue } from \"./types\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function useReplane<T extends object = any>(): ReplaneContextValue<T> {\n  const context = useContext(ReplaneContext);\n  if (!context) {\n    throw new Error(\"useReplane must be used within a ReplaneProvider\");\n  }\n  return context as ReplaneContextValue<T>;\n}\n\nexport function useConfig<T>(\n  name: string,\n  options?: { context?: Record<string, string | number | boolean | null> }\n): T {\n  const { client } = useReplane();\n\n  const value = useSyncExternalStore(\n    (onStoreChange) => {\n      return client.subscribe(name, onStoreChange);\n    },\n    () => client.get(name, options) as T,\n    () => client.get(name, options) as T\n  );\n\n  return value;\n}\n"],"mappings":"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"}

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@replanejs/react",
+  "version": "0.1.1",
+  "description": "React SDK for Replane - feature flags and remote configuration",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "keywords": [
+    "replane",
+    "react",
+    "feature-flags",
+    "remote-config",
+    "configuration",
+    "sdk"
+  ],
+  "author": "",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/replane-dev/replane-javascript",
+    "directory": "packages/react"
+  },
+  "bugs": {
+    "url": "https://github.com/replane-dev/replane-javascript/issues"
+  },
+  "homepage": "https://github.com/replane-dev/replane-javascript#readme",
+  "peerDependencies": {
+    "react": ">=18.0.0"
+  },
+  "dependencies": {
+    "@replanejs/sdk": "0.6.2"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "bumpp": "^10.1.0",
+    "@testing-library/react": "^16.3.1",
+    "@types/node": "^22.19.3",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.3.7",
+    "jsdom": "^27.3.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.3.1",
+    "tsdown": "^0.11.9",
+    "typescript": "^5.4.0",
+    "vitest": "^3.2.4"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "dev": "tsdown --watch",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "release": "pnpm run build && bumpp && npm publish"
+  }
+}