@dheme/next 1.1.0 → 1.3.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.
- package/README.md +49 -4
- package/dist/index.d.mts +16 -6
- package/dist/index.d.ts +16 -6
- package/dist/index.js +16 -84
- package/dist/index.mjs +7 -45
- package/dist/server.d.mts +23 -3
- package/dist/server.d.ts +23 -3
- package/dist/server.js +47 -6
- package/dist/server.mjs +78 -9
- package/package.json +3 -3
- package/dist/chunk-7HW3FXOF.mjs +0 -34
- package/dist/types-ClHCJGkl.d.mts +0 -25
- package/dist/types-ClHCJGkl.d.ts +0 -25
package/README.md
CHANGED
|
@@ -34,7 +34,8 @@ pnpm add @dheme/next @dheme/react @dheme/sdk
|
|
|
34
34
|
|
|
35
35
|
```tsx
|
|
36
36
|
// app/layout.tsx (Server Component)
|
|
37
|
-
import { DhemeScript
|
|
37
|
+
import { DhemeScript } from '@dheme/next/server'; // Server Component — server path only
|
|
38
|
+
import { DhemeProvider } from '@dheme/next';
|
|
38
39
|
|
|
39
40
|
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
|
40
41
|
return (
|
|
@@ -117,6 +118,42 @@ Fetches the theme on the server and renders inline `<style>` + `<script>` tags.
|
|
|
117
118
|
</script>
|
|
118
119
|
```
|
|
119
120
|
|
|
121
|
+
### `<ThemeGenerator>` (Client Component)
|
|
122
|
+
|
|
123
|
+
A floating FAB for real-time theme generation. Re-exported from `@dheme/react` with `'use client'` already applied.
|
|
124
|
+
|
|
125
|
+
```tsx
|
|
126
|
+
// app/layout.tsx
|
|
127
|
+
import { DhemeScript } from '@dheme/next/server';
|
|
128
|
+
import { DhemeProvider, ThemeGenerator } from '@dheme/next';
|
|
129
|
+
|
|
130
|
+
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
|
131
|
+
return (
|
|
132
|
+
<html lang="en" suppressHydrationWarning>
|
|
133
|
+
<head>
|
|
134
|
+
<DhemeScript apiKey={process.env.DHEME_API_KEY!} theme="#3b82f6" />
|
|
135
|
+
</head>
|
|
136
|
+
<body>
|
|
137
|
+
<DhemeProvider apiKey={process.env.DHEME_API_KEY!} theme="#3b82f6">
|
|
138
|
+
{children}
|
|
139
|
+
<ThemeGenerator />
|
|
140
|
+
</DhemeProvider>
|
|
141
|
+
</body>
|
|
142
|
+
</html>
|
|
143
|
+
);
|
|
144
|
+
}
|
|
145
|
+
```
|
|
146
|
+
|
|
147
|
+
`ThemeGenerator` must be placed **inside** `<DhemeProvider>`. It renders a pill-shaped FAB in the bottom-right corner (configurable). Clicking it opens a panel with:
|
|
148
|
+
|
|
149
|
+
- Color pickers for primary and optional secondary color
|
|
150
|
+
- Sliders for saturation, lightness, and border radius
|
|
151
|
+
- Toggles for colorful card, background, and border
|
|
152
|
+
|
|
153
|
+
All controls call `generateTheme()` in real time with per-parameter debounce. Changes apply instantly via CSS variables.
|
|
154
|
+
|
|
155
|
+
See [`@dheme/react` → ThemeGenerator](https://www.npmjs.com/package/@dheme/react#themegenerator) for the full props reference and customization options.
|
|
156
|
+
|
|
120
157
|
### `<DhemeProvider>` (Client Component)
|
|
121
158
|
|
|
122
159
|
Wraps `@dheme/react`'s provider with **cookie synchronization**. When the user changes theme or mode on the client, it writes to cookies so the server can read them on the next request.
|
|
@@ -263,7 +300,8 @@ DHEME_BASE_URL=http://localhost:3005
|
|
|
263
300
|
### `app/layout.tsx`
|
|
264
301
|
|
|
265
302
|
```tsx
|
|
266
|
-
import { DhemeScript
|
|
303
|
+
import { DhemeScript } from '@dheme/next/server';
|
|
304
|
+
import { DhemeProvider } from '@dheme/next';
|
|
267
305
|
|
|
268
306
|
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
|
269
307
|
return (
|
|
@@ -369,16 +407,17 @@ Request → DhemeScript (Server Component) DhemeProvider (Client Component)
|
|
|
369
407
|
| **Caching** | localStorage | LRU in-memory + localStorage |
|
|
370
408
|
| **Mode persistence** | localStorage | Cookies + localStorage |
|
|
371
409
|
| **SSR support** | No | Yes |
|
|
410
|
+
| **ThemeGenerator** | Yes | Yes (re-exported) |
|
|
372
411
|
|
|
373
412
|
## TypeScript
|
|
374
413
|
|
|
375
414
|
All types are exported:
|
|
376
415
|
|
|
377
416
|
```typescript
|
|
417
|
+
// Client types
|
|
378
418
|
import type {
|
|
379
419
|
DhemeProviderProps,
|
|
380
|
-
|
|
381
|
-
GenerateThemeStylesOptions,
|
|
420
|
+
ThemeGeneratorProps,
|
|
382
421
|
ThemeMode,
|
|
383
422
|
ThemeDataState,
|
|
384
423
|
ThemeActionsState,
|
|
@@ -387,6 +426,12 @@ import type {
|
|
|
387
426
|
ColorTokens,
|
|
388
427
|
HSLColor,
|
|
389
428
|
} from '@dheme/next';
|
|
429
|
+
|
|
430
|
+
// Server types
|
|
431
|
+
import type {
|
|
432
|
+
DhemeScriptProps,
|
|
433
|
+
GenerateThemeStylesOptions,
|
|
434
|
+
} from '@dheme/next/server';
|
|
390
435
|
```
|
|
391
436
|
|
|
392
437
|
## Related Packages
|
package/dist/index.d.mts
CHANGED
|
@@ -1,11 +1,21 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import {
|
|
3
|
-
export { G as GenerateThemeStylesOptions } from './types-ClHCJGkl.mjs';
|
|
4
|
-
export { ThemeActionsState, ThemeDataState, ThemeMode, applyThemeCSSVariables, buildCacheKey, themeToCSS, useDhemeClient, useGenerateTheme, useTheme, useThemeActions } from '@dheme/react';
|
|
2
|
+
import { GenerateThemeRequest } from '@dheme/sdk';
|
|
5
3
|
export { ColorTokens, GenerateThemeRequest, GenerateThemeResponse, HSLColor } from '@dheme/sdk';
|
|
4
|
+
import { DhemeProviderProps as DhemeProviderProps$1, ThemeMode } from '@dheme/react';
|
|
5
|
+
export { ThemeActionsState, ThemeDataState, ThemeGenerator, ThemeGeneratorProps, ThemeMode, applyThemeCSSVariables, buildCacheKey, themeToCSS, useDhemeClient, useGenerateTheme, useTheme, useThemeActions } from '@dheme/react';
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
interface DhemeProviderProps extends DhemeProviderProps$1 {
|
|
8
|
+
cookieSync?: boolean;
|
|
9
|
+
}
|
|
10
|
+
interface GenerateThemeStylesOptions {
|
|
11
|
+
/** API key (obrigatório para uso externo; omitir para rotas internas sem autenticação) */
|
|
12
|
+
apiKey?: string;
|
|
13
|
+
theme: string;
|
|
14
|
+
themeParams?: Omit<GenerateThemeRequest, 'theme'>;
|
|
15
|
+
mode?: ThemeMode;
|
|
16
|
+
baseUrl?: string;
|
|
17
|
+
}
|
|
8
18
|
|
|
9
|
-
declare function
|
|
19
|
+
declare function DhemeProvider({ children, cookieSync, onThemeChange, onModeChange, theme: primaryColor, themeParams, ...props }: DhemeProviderProps): React.ReactElement;
|
|
10
20
|
|
|
11
|
-
export { DhemeProvider, DhemeProviderProps,
|
|
21
|
+
export { DhemeProvider, type DhemeProviderProps, type GenerateThemeStylesOptions };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,11 +1,21 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import {
|
|
3
|
-
export { G as GenerateThemeStylesOptions } from './types-ClHCJGkl.js';
|
|
4
|
-
export { ThemeActionsState, ThemeDataState, ThemeMode, applyThemeCSSVariables, buildCacheKey, themeToCSS, useDhemeClient, useGenerateTheme, useTheme, useThemeActions } from '@dheme/react';
|
|
2
|
+
import { GenerateThemeRequest } from '@dheme/sdk';
|
|
5
3
|
export { ColorTokens, GenerateThemeRequest, GenerateThemeResponse, HSLColor } from '@dheme/sdk';
|
|
4
|
+
import { DhemeProviderProps as DhemeProviderProps$1, ThemeMode } from '@dheme/react';
|
|
5
|
+
export { ThemeActionsState, ThemeDataState, ThemeGenerator, ThemeGeneratorProps, ThemeMode, applyThemeCSSVariables, buildCacheKey, themeToCSS, useDhemeClient, useGenerateTheme, useTheme, useThemeActions } from '@dheme/react';
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
interface DhemeProviderProps extends DhemeProviderProps$1 {
|
|
8
|
+
cookieSync?: boolean;
|
|
9
|
+
}
|
|
10
|
+
interface GenerateThemeStylesOptions {
|
|
11
|
+
/** API key (obrigatório para uso externo; omitir para rotas internas sem autenticação) */
|
|
12
|
+
apiKey?: string;
|
|
13
|
+
theme: string;
|
|
14
|
+
themeParams?: Omit<GenerateThemeRequest, 'theme'>;
|
|
15
|
+
mode?: ThemeMode;
|
|
16
|
+
baseUrl?: string;
|
|
17
|
+
}
|
|
8
18
|
|
|
9
|
-
declare function
|
|
19
|
+
declare function DhemeProvider({ children, cookieSync, onThemeChange, onModeChange, theme: primaryColor, themeParams, ...props }: DhemeProviderProps): React.ReactElement;
|
|
10
20
|
|
|
11
|
-
export { DhemeProvider, DhemeProviderProps,
|
|
21
|
+
export { DhemeProvider, type DhemeProviderProps, type GenerateThemeStylesOptions };
|
package/dist/index.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
'use client';
|
|
1
2
|
"use strict";
|
|
2
3
|
var __create = Object.create;
|
|
3
4
|
var __defProp = Object.defineProperty;
|
|
@@ -28,19 +29,19 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
28
29
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
30
|
|
|
30
31
|
// src/index.ts
|
|
31
|
-
var
|
|
32
|
-
__export(
|
|
32
|
+
var src_exports = {};
|
|
33
|
+
__export(src_exports, {
|
|
33
34
|
DhemeProvider: () => DhemeProvider,
|
|
34
|
-
|
|
35
|
-
applyThemeCSSVariables: () =>
|
|
36
|
-
buildCacheKey: () =>
|
|
37
|
-
themeToCSS: () =>
|
|
38
|
-
useDhemeClient: () =>
|
|
39
|
-
useGenerateTheme: () =>
|
|
40
|
-
useTheme: () =>
|
|
41
|
-
useThemeActions: () =>
|
|
35
|
+
ThemeGenerator: () => import_react3.ThemeGenerator,
|
|
36
|
+
applyThemeCSSVariables: () => import_react5.applyThemeCSSVariables,
|
|
37
|
+
buildCacheKey: () => import_react5.buildCacheKey,
|
|
38
|
+
themeToCSS: () => import_react5.themeToCSS,
|
|
39
|
+
useDhemeClient: () => import_react4.useDhemeClient,
|
|
40
|
+
useGenerateTheme: () => import_react4.useGenerateTheme,
|
|
41
|
+
useTheme: () => import_react4.useTheme,
|
|
42
|
+
useThemeActions: () => import_react4.useThemeActions
|
|
42
43
|
});
|
|
43
|
-
module.exports = __toCommonJS(
|
|
44
|
+
module.exports = __toCommonJS(src_exports);
|
|
44
45
|
|
|
45
46
|
// src/components/DhemeProvider.tsx
|
|
46
47
|
var import_react = __toESM(require("react"));
|
|
@@ -92,85 +93,16 @@ function DhemeProvider({
|
|
|
92
93
|
});
|
|
93
94
|
}
|
|
94
95
|
|
|
95
|
-
// src/components/
|
|
96
|
-
var import_react3 =
|
|
97
|
-
var import_sdk = require("@dheme/sdk");
|
|
98
|
-
var import_react4 = require("@dheme/react");
|
|
99
|
-
|
|
100
|
-
// src/server/cache.ts
|
|
101
|
-
var ThemeCache = class {
|
|
102
|
-
constructor(maxSize = 100, ttlMs = 36e5) {
|
|
103
|
-
this.cache = /* @__PURE__ */ new Map();
|
|
104
|
-
this.maxSize = maxSize;
|
|
105
|
-
this.ttl = ttlMs;
|
|
106
|
-
}
|
|
107
|
-
get(key) {
|
|
108
|
-
const entry = this.cache.get(key);
|
|
109
|
-
if (!entry) return null;
|
|
110
|
-
if (Date.now() - entry.timestamp > this.ttl) {
|
|
111
|
-
this.cache.delete(key);
|
|
112
|
-
return null;
|
|
113
|
-
}
|
|
114
|
-
return entry.data;
|
|
115
|
-
}
|
|
116
|
-
set(key, data) {
|
|
117
|
-
if (this.cache.size >= this.maxSize) {
|
|
118
|
-
const oldestKey = this.cache.keys().next().value;
|
|
119
|
-
if (oldestKey !== void 0) {
|
|
120
|
-
this.cache.delete(oldestKey);
|
|
121
|
-
}
|
|
122
|
-
}
|
|
123
|
-
this.cache.set(key, { data, timestamp: Date.now() });
|
|
124
|
-
}
|
|
125
|
-
clear() {
|
|
126
|
-
this.cache.clear();
|
|
127
|
-
}
|
|
128
|
-
};
|
|
129
|
-
var themeCache = new ThemeCache();
|
|
130
|
-
|
|
131
|
-
// src/components/DhemeScript.tsx
|
|
132
|
-
async function DhemeScript({
|
|
133
|
-
apiKey,
|
|
134
|
-
theme,
|
|
135
|
-
themeParams,
|
|
136
|
-
defaultMode = "light",
|
|
137
|
-
baseUrl,
|
|
138
|
-
nonce
|
|
139
|
-
}) {
|
|
140
|
-
const params = { theme, ...themeParams };
|
|
141
|
-
const cacheKey = (0, import_react4.buildCacheKey)(params);
|
|
142
|
-
let themeData = themeCache.get(cacheKey);
|
|
143
|
-
if (!themeData) {
|
|
144
|
-
const client = new import_sdk.DhemeClient({ apiKey, baseUrl });
|
|
145
|
-
const response = await client.generateTheme(params);
|
|
146
|
-
themeData = response.data;
|
|
147
|
-
themeCache.set(cacheKey, themeData);
|
|
148
|
-
}
|
|
149
|
-
const lightCSS = (0, import_react4.themeToCSS)(themeData, "light");
|
|
150
|
-
const darkCSS = (0, import_react4.themeToCSS)(themeData, "dark");
|
|
151
|
-
const styleContent = `:root{${lightCSS}}.dark{${darkCSS}}`;
|
|
152
|
-
const scriptContent = (0, import_react4.getNextBlockingScriptPayload)(defaultMode);
|
|
153
|
-
return import_react3.default.createElement(
|
|
154
|
-
import_react3.default.Fragment,
|
|
155
|
-
null,
|
|
156
|
-
import_react3.default.createElement("style", {
|
|
157
|
-
nonce,
|
|
158
|
-
dangerouslySetInnerHTML: { __html: styleContent }
|
|
159
|
-
}),
|
|
160
|
-
import_react3.default.createElement("script", {
|
|
161
|
-
nonce,
|
|
162
|
-
dangerouslySetInnerHTML: { __html: scriptContent }
|
|
163
|
-
})
|
|
164
|
-
);
|
|
165
|
-
}
|
|
96
|
+
// src/components/ThemeGenerator.tsx
|
|
97
|
+
var import_react3 = require("@dheme/react");
|
|
166
98
|
|
|
167
99
|
// src/index.ts
|
|
100
|
+
var import_react4 = require("@dheme/react");
|
|
168
101
|
var import_react5 = require("@dheme/react");
|
|
169
|
-
var import_react6 = require("@dheme/react");
|
|
170
102
|
// Annotate the CommonJS export names for ESM import in node:
|
|
171
103
|
0 && (module.exports = {
|
|
172
104
|
DhemeProvider,
|
|
173
|
-
|
|
105
|
+
ThemeGenerator,
|
|
174
106
|
applyThemeCSSVariables,
|
|
175
107
|
buildCacheKey,
|
|
176
108
|
themeToCSS,
|
package/dist/index.mjs
CHANGED
|
@@ -1,6 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
themeCache
|
|
3
|
-
} from "./chunk-7HW3FXOF.mjs";
|
|
1
|
+
'use client';
|
|
4
2
|
|
|
5
3
|
// src/components/DhemeProvider.tsx
|
|
6
4
|
import React, { useCallback, useRef } from "react";
|
|
@@ -52,54 +50,18 @@ function DhemeProvider({
|
|
|
52
50
|
});
|
|
53
51
|
}
|
|
54
52
|
|
|
55
|
-
// src/components/
|
|
56
|
-
import
|
|
57
|
-
import { DhemeClient } from "@dheme/sdk";
|
|
58
|
-
import { themeToCSS, buildCacheKey, getNextBlockingScriptPayload } from "@dheme/react";
|
|
59
|
-
async function DhemeScript({
|
|
60
|
-
apiKey,
|
|
61
|
-
theme,
|
|
62
|
-
themeParams,
|
|
63
|
-
defaultMode = "light",
|
|
64
|
-
baseUrl,
|
|
65
|
-
nonce
|
|
66
|
-
}) {
|
|
67
|
-
const params = { theme, ...themeParams };
|
|
68
|
-
const cacheKey = buildCacheKey(params);
|
|
69
|
-
let themeData = themeCache.get(cacheKey);
|
|
70
|
-
if (!themeData) {
|
|
71
|
-
const client = new DhemeClient({ apiKey, baseUrl });
|
|
72
|
-
const response = await client.generateTheme(params);
|
|
73
|
-
themeData = response.data;
|
|
74
|
-
themeCache.set(cacheKey, themeData);
|
|
75
|
-
}
|
|
76
|
-
const lightCSS = themeToCSS(themeData, "light");
|
|
77
|
-
const darkCSS = themeToCSS(themeData, "dark");
|
|
78
|
-
const styleContent = `:root{${lightCSS}}.dark{${darkCSS}}`;
|
|
79
|
-
const scriptContent = getNextBlockingScriptPayload(defaultMode);
|
|
80
|
-
return React2.createElement(
|
|
81
|
-
React2.Fragment,
|
|
82
|
-
null,
|
|
83
|
-
React2.createElement("style", {
|
|
84
|
-
nonce,
|
|
85
|
-
dangerouslySetInnerHTML: { __html: styleContent }
|
|
86
|
-
}),
|
|
87
|
-
React2.createElement("script", {
|
|
88
|
-
nonce,
|
|
89
|
-
dangerouslySetInnerHTML: { __html: scriptContent }
|
|
90
|
-
})
|
|
91
|
-
);
|
|
92
|
-
}
|
|
53
|
+
// src/components/ThemeGenerator.tsx
|
|
54
|
+
import { ThemeGenerator } from "@dheme/react";
|
|
93
55
|
|
|
94
56
|
// src/index.ts
|
|
95
57
|
import { useTheme, useThemeActions, useGenerateTheme, useDhemeClient } from "@dheme/react";
|
|
96
|
-
import { themeToCSS
|
|
58
|
+
import { themeToCSS, applyThemeCSSVariables, buildCacheKey } from "@dheme/react";
|
|
97
59
|
export {
|
|
98
60
|
DhemeProvider,
|
|
99
|
-
|
|
61
|
+
ThemeGenerator,
|
|
100
62
|
applyThemeCSSVariables,
|
|
101
|
-
|
|
102
|
-
|
|
63
|
+
buildCacheKey,
|
|
64
|
+
themeToCSS,
|
|
103
65
|
useDhemeClient,
|
|
104
66
|
useGenerateTheme,
|
|
105
67
|
useTheme,
|
package/dist/server.d.mts
CHANGED
|
@@ -1,6 +1,26 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { GenerateThemeRequest, GenerateThemeResponse } from '@dheme/sdk';
|
|
2
3
|
import { ThemeMode } from '@dheme/react';
|
|
3
|
-
|
|
4
|
+
|
|
5
|
+
interface DhemeScriptProps {
|
|
6
|
+
/** API key (obrigatório para uso externo; omitir para rotas internas sem autenticação) */
|
|
7
|
+
apiKey?: string;
|
|
8
|
+
theme: string;
|
|
9
|
+
themeParams?: Omit<GenerateThemeRequest, 'theme'>;
|
|
10
|
+
defaultMode?: ThemeMode;
|
|
11
|
+
baseUrl?: string;
|
|
12
|
+
nonce?: string;
|
|
13
|
+
}
|
|
14
|
+
interface GenerateThemeStylesOptions {
|
|
15
|
+
/** API key (obrigatório para uso externo; omitir para rotas internas sem autenticação) */
|
|
16
|
+
apiKey?: string;
|
|
17
|
+
theme: string;
|
|
18
|
+
themeParams?: Omit<GenerateThemeRequest, 'theme'>;
|
|
19
|
+
mode?: ThemeMode;
|
|
20
|
+
baseUrl?: string;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
declare function DhemeScript({ apiKey, theme, themeParams, defaultMode, baseUrl, nonce, }: DhemeScriptProps): Promise<React.ReactElement>;
|
|
4
24
|
|
|
5
25
|
declare function generateThemeStyles(options: GenerateThemeStylesOptions): Promise<string>;
|
|
6
26
|
|
|
@@ -18,4 +38,4 @@ declare class ThemeCache {
|
|
|
18
38
|
}
|
|
19
39
|
declare const themeCache: ThemeCache;
|
|
20
40
|
|
|
21
|
-
export { GenerateThemeStylesOptions, generateThemeStyles, getModeFromCookie, getParamsFromCookie, themeCache };
|
|
41
|
+
export { DhemeScript, type DhemeScriptProps, type GenerateThemeStylesOptions, generateThemeStyles, getModeFromCookie, getParamsFromCookie, themeCache };
|
package/dist/server.d.ts
CHANGED
|
@@ -1,6 +1,26 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { GenerateThemeRequest, GenerateThemeResponse } from '@dheme/sdk';
|
|
2
3
|
import { ThemeMode } from '@dheme/react';
|
|
3
|
-
|
|
4
|
+
|
|
5
|
+
interface DhemeScriptProps {
|
|
6
|
+
/** API key (obrigatório para uso externo; omitir para rotas internas sem autenticação) */
|
|
7
|
+
apiKey?: string;
|
|
8
|
+
theme: string;
|
|
9
|
+
themeParams?: Omit<GenerateThemeRequest, 'theme'>;
|
|
10
|
+
defaultMode?: ThemeMode;
|
|
11
|
+
baseUrl?: string;
|
|
12
|
+
nonce?: string;
|
|
13
|
+
}
|
|
14
|
+
interface GenerateThemeStylesOptions {
|
|
15
|
+
/** API key (obrigatório para uso externo; omitir para rotas internas sem autenticação) */
|
|
16
|
+
apiKey?: string;
|
|
17
|
+
theme: string;
|
|
18
|
+
themeParams?: Omit<GenerateThemeRequest, 'theme'>;
|
|
19
|
+
mode?: ThemeMode;
|
|
20
|
+
baseUrl?: string;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
declare function DhemeScript({ apiKey, theme, themeParams, defaultMode, baseUrl, nonce, }: DhemeScriptProps): Promise<React.ReactElement>;
|
|
4
24
|
|
|
5
25
|
declare function generateThemeStyles(options: GenerateThemeStylesOptions): Promise<string>;
|
|
6
26
|
|
|
@@ -18,4 +38,4 @@ declare class ThemeCache {
|
|
|
18
38
|
}
|
|
19
39
|
declare const themeCache: ThemeCache;
|
|
20
40
|
|
|
21
|
-
export { GenerateThemeStylesOptions, generateThemeStyles, getModeFromCookie, getParamsFromCookie, themeCache };
|
|
41
|
+
export { DhemeScript, type DhemeScriptProps, type GenerateThemeStylesOptions, generateThemeStyles, getModeFromCookie, getParamsFromCookie, themeCache };
|
package/dist/server.js
CHANGED
|
@@ -30,6 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
30
30
|
// src/server.ts
|
|
31
31
|
var server_exports = {};
|
|
32
32
|
__export(server_exports, {
|
|
33
|
+
DhemeScript: () => DhemeScript,
|
|
33
34
|
generateThemeStyles: () => generateThemeStyles,
|
|
34
35
|
getModeFromCookie: () => getModeFromCookie,
|
|
35
36
|
getParamsFromCookie: () => getParamsFromCookie,
|
|
@@ -37,9 +38,10 @@ __export(server_exports, {
|
|
|
37
38
|
});
|
|
38
39
|
module.exports = __toCommonJS(server_exports);
|
|
39
40
|
|
|
40
|
-
// src/
|
|
41
|
+
// src/components/DhemeScript.tsx
|
|
42
|
+
var import_react = __toESM(require("react"));
|
|
41
43
|
var import_sdk = require("@dheme/sdk");
|
|
42
|
-
var
|
|
44
|
+
var import_react2 = require("@dheme/react");
|
|
43
45
|
|
|
44
46
|
// src/server/cache.ts
|
|
45
47
|
var ThemeCache = class {
|
|
@@ -72,20 +74,58 @@ var ThemeCache = class {
|
|
|
72
74
|
};
|
|
73
75
|
var themeCache = new ThemeCache();
|
|
74
76
|
|
|
77
|
+
// src/components/DhemeScript.tsx
|
|
78
|
+
async function DhemeScript({
|
|
79
|
+
apiKey,
|
|
80
|
+
theme,
|
|
81
|
+
themeParams,
|
|
82
|
+
defaultMode = "light",
|
|
83
|
+
baseUrl,
|
|
84
|
+
nonce
|
|
85
|
+
}) {
|
|
86
|
+
const params = { theme, ...themeParams };
|
|
87
|
+
const cacheKey = (0, import_react2.buildCacheKey)(params);
|
|
88
|
+
let themeData = themeCache.get(cacheKey);
|
|
89
|
+
if (!themeData) {
|
|
90
|
+
const client = new import_sdk.DhemeClient({ apiKey, baseUrl });
|
|
91
|
+
const response = await client.generateTheme(params);
|
|
92
|
+
themeData = response.data;
|
|
93
|
+
themeCache.set(cacheKey, themeData);
|
|
94
|
+
}
|
|
95
|
+
const lightCSS = (0, import_react2.themeToCSS)(themeData, "light");
|
|
96
|
+
const darkCSS = (0, import_react2.themeToCSS)(themeData, "dark");
|
|
97
|
+
const styleContent = `:root{${lightCSS}}.dark{${darkCSS}}`;
|
|
98
|
+
const scriptContent = (0, import_react2.getNextBlockingScriptPayload)(defaultMode);
|
|
99
|
+
return import_react.default.createElement(
|
|
100
|
+
import_react.default.Fragment,
|
|
101
|
+
null,
|
|
102
|
+
import_react.default.createElement("style", {
|
|
103
|
+
nonce,
|
|
104
|
+
dangerouslySetInnerHTML: { __html: styleContent }
|
|
105
|
+
}),
|
|
106
|
+
import_react.default.createElement("script", {
|
|
107
|
+
nonce,
|
|
108
|
+
dangerouslySetInnerHTML: { __html: scriptContent }
|
|
109
|
+
})
|
|
110
|
+
);
|
|
111
|
+
}
|
|
112
|
+
|
|
75
113
|
// src/server/generateThemeStyles.ts
|
|
114
|
+
var import_sdk2 = require("@dheme/sdk");
|
|
115
|
+
var import_react3 = require("@dheme/react");
|
|
76
116
|
async function generateThemeStyles(options) {
|
|
77
117
|
const { apiKey, theme, themeParams, mode = "light", baseUrl } = options;
|
|
78
118
|
const params = { theme, ...themeParams };
|
|
79
|
-
const cacheKey = (0,
|
|
119
|
+
const cacheKey = (0, import_react3.buildCacheKey)(params);
|
|
80
120
|
const cached = themeCache.get(cacheKey);
|
|
81
121
|
if (cached) {
|
|
82
|
-
return (0,
|
|
122
|
+
return (0, import_react3.themeToCSS)(cached, mode);
|
|
83
123
|
}
|
|
84
|
-
const client = new
|
|
124
|
+
const client = new import_sdk2.DhemeClient({ apiKey, baseUrl });
|
|
85
125
|
const response = await client.generateTheme(params);
|
|
86
126
|
const data = response.data;
|
|
87
127
|
themeCache.set(cacheKey, data);
|
|
88
|
-
return (0,
|
|
128
|
+
return (0, import_react3.themeToCSS)(data, mode);
|
|
89
129
|
}
|
|
90
130
|
|
|
91
131
|
// src/server/cookies.ts
|
|
@@ -115,6 +155,7 @@ async function getParamsFromCookie() {
|
|
|
115
155
|
}
|
|
116
156
|
// Annotate the CommonJS export names for ESM import in node:
|
|
117
157
|
0 && (module.exports = {
|
|
158
|
+
DhemeScript,
|
|
118
159
|
generateThemeStyles,
|
|
119
160
|
getModeFromCookie,
|
|
120
161
|
getParamsFromCookie,
|
package/dist/server.mjs
CHANGED
|
@@ -1,23 +1,91 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
} from "
|
|
1
|
+
// src/components/DhemeScript.tsx
|
|
2
|
+
import React from "react";
|
|
3
|
+
import { DhemeClient } from "@dheme/sdk";
|
|
4
|
+
import { themeToCSS, buildCacheKey, getNextBlockingScriptPayload } from "@dheme/react";
|
|
5
|
+
|
|
6
|
+
// src/server/cache.ts
|
|
7
|
+
var ThemeCache = class {
|
|
8
|
+
constructor(maxSize = 100, ttlMs = 36e5) {
|
|
9
|
+
this.cache = /* @__PURE__ */ new Map();
|
|
10
|
+
this.maxSize = maxSize;
|
|
11
|
+
this.ttl = ttlMs;
|
|
12
|
+
}
|
|
13
|
+
get(key) {
|
|
14
|
+
const entry = this.cache.get(key);
|
|
15
|
+
if (!entry) return null;
|
|
16
|
+
if (Date.now() - entry.timestamp > this.ttl) {
|
|
17
|
+
this.cache.delete(key);
|
|
18
|
+
return null;
|
|
19
|
+
}
|
|
20
|
+
return entry.data;
|
|
21
|
+
}
|
|
22
|
+
set(key, data) {
|
|
23
|
+
if (this.cache.size >= this.maxSize) {
|
|
24
|
+
const oldestKey = this.cache.keys().next().value;
|
|
25
|
+
if (oldestKey !== void 0) {
|
|
26
|
+
this.cache.delete(oldestKey);
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
this.cache.set(key, { data, timestamp: Date.now() });
|
|
30
|
+
}
|
|
31
|
+
clear() {
|
|
32
|
+
this.cache.clear();
|
|
33
|
+
}
|
|
34
|
+
};
|
|
35
|
+
var themeCache = new ThemeCache();
|
|
36
|
+
|
|
37
|
+
// src/components/DhemeScript.tsx
|
|
38
|
+
async function DhemeScript({
|
|
39
|
+
apiKey,
|
|
40
|
+
theme,
|
|
41
|
+
themeParams,
|
|
42
|
+
defaultMode = "light",
|
|
43
|
+
baseUrl,
|
|
44
|
+
nonce
|
|
45
|
+
}) {
|
|
46
|
+
const params = { theme, ...themeParams };
|
|
47
|
+
const cacheKey = buildCacheKey(params);
|
|
48
|
+
let themeData = themeCache.get(cacheKey);
|
|
49
|
+
if (!themeData) {
|
|
50
|
+
const client = new DhemeClient({ apiKey, baseUrl });
|
|
51
|
+
const response = await client.generateTheme(params);
|
|
52
|
+
themeData = response.data;
|
|
53
|
+
themeCache.set(cacheKey, themeData);
|
|
54
|
+
}
|
|
55
|
+
const lightCSS = themeToCSS(themeData, "light");
|
|
56
|
+
const darkCSS = themeToCSS(themeData, "dark");
|
|
57
|
+
const styleContent = `:root{${lightCSS}}.dark{${darkCSS}}`;
|
|
58
|
+
const scriptContent = getNextBlockingScriptPayload(defaultMode);
|
|
59
|
+
return React.createElement(
|
|
60
|
+
React.Fragment,
|
|
61
|
+
null,
|
|
62
|
+
React.createElement("style", {
|
|
63
|
+
nonce,
|
|
64
|
+
dangerouslySetInnerHTML: { __html: styleContent }
|
|
65
|
+
}),
|
|
66
|
+
React.createElement("script", {
|
|
67
|
+
nonce,
|
|
68
|
+
dangerouslySetInnerHTML: { __html: scriptContent }
|
|
69
|
+
})
|
|
70
|
+
);
|
|
71
|
+
}
|
|
4
72
|
|
|
5
73
|
// src/server/generateThemeStyles.ts
|
|
6
|
-
import { DhemeClient } from "@dheme/sdk";
|
|
7
|
-
import { themeToCSS, buildCacheKey } from "@dheme/react";
|
|
74
|
+
import { DhemeClient as DhemeClient2 } from "@dheme/sdk";
|
|
75
|
+
import { themeToCSS as themeToCSS2, buildCacheKey as buildCacheKey2 } from "@dheme/react";
|
|
8
76
|
async function generateThemeStyles(options) {
|
|
9
77
|
const { apiKey, theme, themeParams, mode = "light", baseUrl } = options;
|
|
10
78
|
const params = { theme, ...themeParams };
|
|
11
|
-
const cacheKey =
|
|
79
|
+
const cacheKey = buildCacheKey2(params);
|
|
12
80
|
const cached = themeCache.get(cacheKey);
|
|
13
81
|
if (cached) {
|
|
14
|
-
return
|
|
82
|
+
return themeToCSS2(cached, mode);
|
|
15
83
|
}
|
|
16
|
-
const client = new
|
|
84
|
+
const client = new DhemeClient2({ apiKey, baseUrl });
|
|
17
85
|
const response = await client.generateTheme(params);
|
|
18
86
|
const data = response.data;
|
|
19
87
|
themeCache.set(cacheKey, data);
|
|
20
|
-
return
|
|
88
|
+
return themeToCSS2(data, mode);
|
|
21
89
|
}
|
|
22
90
|
|
|
23
91
|
// src/server/cookies.ts
|
|
@@ -46,6 +114,7 @@ async function getParamsFromCookie() {
|
|
|
46
114
|
}
|
|
47
115
|
}
|
|
48
116
|
export {
|
|
117
|
+
DhemeScript,
|
|
49
118
|
generateThemeStyles,
|
|
50
119
|
getModeFromCookie,
|
|
51
120
|
getParamsFromCookie,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dheme/next",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.3.0",
|
|
4
4
|
"description": "Next.js App Router bindings for Dheme SDK with server-side theme generation",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"module": "./dist/index.mjs",
|
|
@@ -23,8 +23,8 @@
|
|
|
23
23
|
"LICENSE"
|
|
24
24
|
],
|
|
25
25
|
"scripts": {
|
|
26
|
-
"build": "tsup
|
|
27
|
-
"dev": "tsup
|
|
26
|
+
"build": "tsup",
|
|
27
|
+
"dev": "tsup --watch",
|
|
28
28
|
"test": "vitest run",
|
|
29
29
|
"test:watch": "vitest",
|
|
30
30
|
"lint": "eslint src --ext .ts,.tsx",
|
package/dist/chunk-7HW3FXOF.mjs
DELETED
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
// src/server/cache.ts
|
|
2
|
-
var ThemeCache = class {
|
|
3
|
-
constructor(maxSize = 100, ttlMs = 36e5) {
|
|
4
|
-
this.cache = /* @__PURE__ */ new Map();
|
|
5
|
-
this.maxSize = maxSize;
|
|
6
|
-
this.ttl = ttlMs;
|
|
7
|
-
}
|
|
8
|
-
get(key) {
|
|
9
|
-
const entry = this.cache.get(key);
|
|
10
|
-
if (!entry) return null;
|
|
11
|
-
if (Date.now() - entry.timestamp > this.ttl) {
|
|
12
|
-
this.cache.delete(key);
|
|
13
|
-
return null;
|
|
14
|
-
}
|
|
15
|
-
return entry.data;
|
|
16
|
-
}
|
|
17
|
-
set(key, data) {
|
|
18
|
-
if (this.cache.size >= this.maxSize) {
|
|
19
|
-
const oldestKey = this.cache.keys().next().value;
|
|
20
|
-
if (oldestKey !== void 0) {
|
|
21
|
-
this.cache.delete(oldestKey);
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
this.cache.set(key, { data, timestamp: Date.now() });
|
|
25
|
-
}
|
|
26
|
-
clear() {
|
|
27
|
-
this.cache.clear();
|
|
28
|
-
}
|
|
29
|
-
};
|
|
30
|
-
var themeCache = new ThemeCache();
|
|
31
|
-
|
|
32
|
-
export {
|
|
33
|
-
themeCache
|
|
34
|
-
};
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import { GenerateThemeRequest } from '@dheme/sdk';
|
|
2
|
-
import { DhemeProviderProps as DhemeProviderProps$1, ThemeMode } from '@dheme/react';
|
|
3
|
-
|
|
4
|
-
interface DhemeProviderProps extends DhemeProviderProps$1 {
|
|
5
|
-
cookieSync?: boolean;
|
|
6
|
-
}
|
|
7
|
-
interface DhemeScriptProps {
|
|
8
|
-
/** API key (obrigatório para uso externo; omitir para rotas internas sem autenticação) */
|
|
9
|
-
apiKey?: string;
|
|
10
|
-
theme: string;
|
|
11
|
-
themeParams?: Omit<GenerateThemeRequest, 'theme'>;
|
|
12
|
-
defaultMode?: ThemeMode;
|
|
13
|
-
baseUrl?: string;
|
|
14
|
-
nonce?: string;
|
|
15
|
-
}
|
|
16
|
-
interface GenerateThemeStylesOptions {
|
|
17
|
-
/** API key (obrigatório para uso externo; omitir para rotas internas sem autenticação) */
|
|
18
|
-
apiKey?: string;
|
|
19
|
-
theme: string;
|
|
20
|
-
themeParams?: Omit<GenerateThemeRequest, 'theme'>;
|
|
21
|
-
mode?: ThemeMode;
|
|
22
|
-
baseUrl?: string;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
export type { DhemeProviderProps as D, GenerateThemeStylesOptions as G, DhemeScriptProps as a };
|
package/dist/types-ClHCJGkl.d.ts
DELETED
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import { GenerateThemeRequest } from '@dheme/sdk';
|
|
2
|
-
import { DhemeProviderProps as DhemeProviderProps$1, ThemeMode } from '@dheme/react';
|
|
3
|
-
|
|
4
|
-
interface DhemeProviderProps extends DhemeProviderProps$1 {
|
|
5
|
-
cookieSync?: boolean;
|
|
6
|
-
}
|
|
7
|
-
interface DhemeScriptProps {
|
|
8
|
-
/** API key (obrigatório para uso externo; omitir para rotas internas sem autenticação) */
|
|
9
|
-
apiKey?: string;
|
|
10
|
-
theme: string;
|
|
11
|
-
themeParams?: Omit<GenerateThemeRequest, 'theme'>;
|
|
12
|
-
defaultMode?: ThemeMode;
|
|
13
|
-
baseUrl?: string;
|
|
14
|
-
nonce?: string;
|
|
15
|
-
}
|
|
16
|
-
interface GenerateThemeStylesOptions {
|
|
17
|
-
/** API key (obrigatório para uso externo; omitir para rotas internas sem autenticação) */
|
|
18
|
-
apiKey?: string;
|
|
19
|
-
theme: string;
|
|
20
|
-
themeParams?: Omit<GenerateThemeRequest, 'theme'>;
|
|
21
|
-
mode?: ThemeMode;
|
|
22
|
-
baseUrl?: string;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
export type { DhemeProviderProps as D, GenerateThemeStylesOptions as G, DhemeScriptProps as a };
|