@dheme/react 2.4.0 → 2.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.d.mts +17 -1
  2. package/dist/index.d.ts +17 -1
  3. package/dist/index.js +16 -5
  4. package/dist/index.mjs +16 -5
  5. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -26,6 +26,22 @@ interface DhemeProviderProps {
26
26
  baseUrl?: string;
27
27
  persist?: boolean;
28
28
  autoApply?: boolean;
29
+ /**
30
+ * Custom theme generation function. When provided, replaces the SDK client's
31
+ * generateTheme call entirely. Useful for internal use cases with custom endpoints.
32
+ *
33
+ * @example
34
+ * // Call an internal proxy route without API key:
35
+ * onGenerateTheme={async (params) => {
36
+ * const res = await fetch('/api/generate-theme/proxy', {
37
+ * method: 'POST',
38
+ * headers: { 'Content-Type': 'application/json' },
39
+ * body: JSON.stringify(params),
40
+ * });
41
+ * return res.json();
42
+ * }}
43
+ */
44
+ onGenerateTheme?: (params: GenerateThemeRequest) => Promise<GenerateThemeResponse>;
29
45
  onThemeChange?: (theme: GenerateThemeResponse) => void;
30
46
  onModeChange?: (mode: ThemeMode) => void;
31
47
  onError?: (error: Error) => void;
@@ -36,7 +52,7 @@ interface DhemeScriptProps {
36
52
  nonce?: string;
37
53
  }
38
54
 
39
- declare function DhemeProvider({ apiKey, theme: primaryColor, themeParams, defaultMode, baseUrl, persist, autoApply, onThemeChange, onModeChange, onError, children, }: DhemeProviderProps): React__default.ReactElement;
55
+ declare function DhemeProvider({ apiKey, theme: primaryColor, themeParams, defaultMode, baseUrl, persist, autoApply, onGenerateTheme: customGenerateTheme, onThemeChange, onModeChange, onError, children, }: DhemeProviderProps): React__default.ReactElement;
40
56
 
41
57
  declare function DhemeScript({ defaultMode, nonce, }: DhemeScriptProps): React__default.ReactElement;
42
58
 
package/dist/index.d.ts CHANGED
@@ -26,6 +26,22 @@ interface DhemeProviderProps {
26
26
  baseUrl?: string;
27
27
  persist?: boolean;
28
28
  autoApply?: boolean;
29
+ /**
30
+ * Custom theme generation function. When provided, replaces the SDK client's
31
+ * generateTheme call entirely. Useful for internal use cases with custom endpoints.
32
+ *
33
+ * @example
34
+ * // Call an internal proxy route without API key:
35
+ * onGenerateTheme={async (params) => {
36
+ * const res = await fetch('/api/generate-theme/proxy', {
37
+ * method: 'POST',
38
+ * headers: { 'Content-Type': 'application/json' },
39
+ * body: JSON.stringify(params),
40
+ * });
41
+ * return res.json();
42
+ * }}
43
+ */
44
+ onGenerateTheme?: (params: GenerateThemeRequest) => Promise<GenerateThemeResponse>;
29
45
  onThemeChange?: (theme: GenerateThemeResponse) => void;
30
46
  onModeChange?: (mode: ThemeMode) => void;
31
47
  onError?: (error: Error) => void;
@@ -36,7 +52,7 @@ interface DhemeScriptProps {
36
52
  nonce?: string;
37
53
  }
38
54
 
39
- declare function DhemeProvider({ apiKey, theme: primaryColor, themeParams, defaultMode, baseUrl, persist, autoApply, onThemeChange, onModeChange, onError, children, }: DhemeProviderProps): React__default.ReactElement;
55
+ declare function DhemeProvider({ apiKey, theme: primaryColor, themeParams, defaultMode, baseUrl, persist, autoApply, onGenerateTheme: customGenerateTheme, onThemeChange, onModeChange, onError, children, }: DhemeProviderProps): React__default.ReactElement;
40
56
 
41
57
  declare function DhemeScript({ defaultMode, nonce, }: DhemeScriptProps): React__default.ReactElement;
42
58
 
package/dist/index.js CHANGED
@@ -259,12 +259,15 @@ function DhemeProvider({
259
259
  baseUrl,
260
260
  persist = true,
261
261
  autoApply = true,
262
+ onGenerateTheme: customGenerateTheme,
262
263
  onThemeChange,
263
264
  onModeChange,
264
265
  onError,
265
266
  children
266
267
  }) {
267
268
  const client = (0, import_react3.useMemo)(() => new import_sdk.DhemeClient({ apiKey, baseUrl }), [apiKey, baseUrl]);
269
+ const customGenerateThemeRef = (0, import_react3.useRef)(customGenerateTheme);
270
+ customGenerateThemeRef.current = customGenerateTheme;
268
271
  const [theme, setTheme] = (0, import_react3.useState)(null);
269
272
  const [mode, setModeState] = (0, import_react3.useState)(() => {
270
273
  if (typeof window === "undefined") return defaultMode;
@@ -303,14 +306,23 @@ function DhemeProvider({
303
306
  }
304
307
  }
305
308
  }, [theme, mode, autoApply]);
309
+ const fetchTheme = (0, import_react3.useCallback)(
310
+ async (params) => {
311
+ if (customGenerateThemeRef.current) {
312
+ return customGenerateThemeRef.current(params);
313
+ }
314
+ const response = await client.generateTheme(params);
315
+ return response.data;
316
+ },
317
+ [client]
318
+ );
306
319
  const generateTheme = (0, import_react3.useCallback)(
307
320
  async (params) => {
308
321
  abortRef.current?.abort();
309
322
  setIsLoading(true);
310
323
  setError(null);
311
324
  try {
312
- const response = await client.generateTheme(params);
313
- const data = response.data;
325
+ const data = await fetchTheme(params);
314
326
  setTheme(data);
315
327
  setIsReady(true);
316
328
  if (autoApplyRef.current) {
@@ -330,7 +342,7 @@ function DhemeProvider({
330
342
  setIsLoading(false);
331
343
  }
332
344
  },
333
- [client]
345
+ [fetchTheme]
334
346
  );
335
347
  const clearTheme = (0, import_react3.useCallback)(() => {
336
348
  setTheme(null);
@@ -353,9 +365,8 @@ function DhemeProvider({
353
365
  if (autoApply) applyThemeCSSVariables(cached, mode);
354
366
  const controller = new AbortController();
355
367
  abortRef.current = controller;
356
- client.generateTheme(params).then((response) => {
368
+ fetchTheme(params).then((data) => {
357
369
  if (controller.signal.aborted) return;
358
- const data = response.data;
359
370
  const cachedLight = JSON.stringify(cached.colors.light);
360
371
  const freshLight = JSON.stringify(data.colors.light);
361
372
  if (cachedLight !== freshLight) {
package/dist/index.mjs CHANGED
@@ -209,12 +209,15 @@ function DhemeProvider({
209
209
  baseUrl,
210
210
  persist = true,
211
211
  autoApply = true,
212
+ onGenerateTheme: customGenerateTheme,
212
213
  onThemeChange,
213
214
  onModeChange,
214
215
  onError,
215
216
  children
216
217
  }) {
217
218
  const client = useMemo(() => new DhemeClient({ apiKey, baseUrl }), [apiKey, baseUrl]);
219
+ const customGenerateThemeRef = useRef(customGenerateTheme);
220
+ customGenerateThemeRef.current = customGenerateTheme;
218
221
  const [theme, setTheme] = useState(null);
219
222
  const [mode, setModeState] = useState(() => {
220
223
  if (typeof window === "undefined") return defaultMode;
@@ -253,14 +256,23 @@ function DhemeProvider({
253
256
  }
254
257
  }
255
258
  }, [theme, mode, autoApply]);
259
+ const fetchTheme = useCallback(
260
+ async (params) => {
261
+ if (customGenerateThemeRef.current) {
262
+ return customGenerateThemeRef.current(params);
263
+ }
264
+ const response = await client.generateTheme(params);
265
+ return response.data;
266
+ },
267
+ [client]
268
+ );
256
269
  const generateTheme = useCallback(
257
270
  async (params) => {
258
271
  abortRef.current?.abort();
259
272
  setIsLoading(true);
260
273
  setError(null);
261
274
  try {
262
- const response = await client.generateTheme(params);
263
- const data = response.data;
275
+ const data = await fetchTheme(params);
264
276
  setTheme(data);
265
277
  setIsReady(true);
266
278
  if (autoApplyRef.current) {
@@ -280,7 +292,7 @@ function DhemeProvider({
280
292
  setIsLoading(false);
281
293
  }
282
294
  },
283
- [client]
295
+ [fetchTheme]
284
296
  );
285
297
  const clearTheme = useCallback(() => {
286
298
  setTheme(null);
@@ -303,9 +315,8 @@ function DhemeProvider({
303
315
  if (autoApply) applyThemeCSSVariables(cached, mode);
304
316
  const controller = new AbortController();
305
317
  abortRef.current = controller;
306
- client.generateTheme(params).then((response) => {
318
+ fetchTheme(params).then((data) => {
307
319
  if (controller.signal.aborted) return;
308
- const data = response.data;
309
320
  const cachedLight = JSON.stringify(cached.colors.light);
310
321
  const freshLight = JSON.stringify(data.colors.light);
311
322
  if (cachedLight !== freshLight) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dheme/react",
3
- "version": "2.4.0",
3
+ "version": "2.5.0",
4
4
  "description": "React bindings for Dheme SDK with zero-FOUC theme application",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",