@aprovan/patchwork-image-shadcn 0.1.0-dev.6bd527d → 0.1.0-dev.c680591
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/dist/{chunk-7LFKP2EW.js → chunk-LHCX4D5M.js} +1 -1
- package/dist/chunk-LHCX4D5M.js.map +1 -0
- package/dist/index.d.ts +0 -1
- package/dist/index.js +1 -11
- package/dist/index.js.map +1 -1
- package/dist/setup.d.ts +41 -41
- package/dist/setup.js +1 -1
- package/package.json +1 -1
- package/dist/chunk-4QNUSFQA.js +0 -265
- package/dist/chunk-4QNUSFQA.js.map +0 -1
- package/dist/chunk-7LFKP2EW.js.map +0 -1
- package/dist/html.d.ts +0 -48
- package/dist/html.js +0 -14
- package/dist/html.js.map +0 -1
package/dist/setup.d.ts
CHANGED
|
@@ -6,55 +6,55 @@
|
|
|
6
6
|
*/
|
|
7
7
|
interface SetupOptions {
|
|
8
8
|
/** Enable dark mode (default: false - respects system preference) */
|
|
9
|
-
darkMode?: boolean |
|
|
9
|
+
darkMode?: boolean | "system";
|
|
10
10
|
/** Inject CSS runtime (default: true) */
|
|
11
11
|
cssRuntime?: boolean;
|
|
12
12
|
/** Custom CSS variable overrides */
|
|
13
13
|
cssVariables?: Record<string, string>;
|
|
14
14
|
}
|
|
15
15
|
declare const DEFAULT_CSS_VARIABLES: {
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
16
|
+
"--background": string;
|
|
17
|
+
"--foreground": string;
|
|
18
|
+
"--card": string;
|
|
19
|
+
"--card-foreground": string;
|
|
20
|
+
"--popover": string;
|
|
21
|
+
"--popover-foreground": string;
|
|
22
|
+
"--primary": string;
|
|
23
|
+
"--primary-foreground": string;
|
|
24
|
+
"--secondary": string;
|
|
25
|
+
"--secondary-foreground": string;
|
|
26
|
+
"--muted": string;
|
|
27
|
+
"--muted-foreground": string;
|
|
28
|
+
"--accent": string;
|
|
29
|
+
"--accent-foreground": string;
|
|
30
|
+
"--destructive": string;
|
|
31
|
+
"--destructive-foreground": string;
|
|
32
|
+
"--border": string;
|
|
33
|
+
"--input": string;
|
|
34
|
+
"--ring": string;
|
|
35
|
+
"--radius": string;
|
|
36
36
|
};
|
|
37
37
|
declare const DARK_CSS_VARIABLES: {
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
38
|
+
"--background": string;
|
|
39
|
+
"--foreground": string;
|
|
40
|
+
"--card": string;
|
|
41
|
+
"--card-foreground": string;
|
|
42
|
+
"--popover": string;
|
|
43
|
+
"--popover-foreground": string;
|
|
44
|
+
"--primary": string;
|
|
45
|
+
"--primary-foreground": string;
|
|
46
|
+
"--secondary": string;
|
|
47
|
+
"--secondary-foreground": string;
|
|
48
|
+
"--muted": string;
|
|
49
|
+
"--muted-foreground": string;
|
|
50
|
+
"--accent": string;
|
|
51
|
+
"--accent-foreground": string;
|
|
52
|
+
"--destructive": string;
|
|
53
|
+
"--destructive-foreground": string;
|
|
54
|
+
"--border": string;
|
|
55
|
+
"--input": string;
|
|
56
|
+
"--ring": string;
|
|
57
|
+
"--radius": string;
|
|
58
58
|
};
|
|
59
59
|
declare global {
|
|
60
60
|
interface Window {
|
package/dist/setup.js
CHANGED
package/package.json
CHANGED
package/dist/chunk-4QNUSFQA.js
DELETED
|
@@ -1,265 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
DARK_CSS_VARIABLES,
|
|
3
|
-
DEFAULT_CSS_VARIABLES
|
|
4
|
-
} from "./chunk-7LFKP2EW.js";
|
|
5
|
-
|
|
6
|
-
// src/html.ts
|
|
7
|
-
function generateThemeCss(theme) {
|
|
8
|
-
const vars = theme === "dark" ? DARK_CSS_VARIABLES : DEFAULT_CSS_VARIABLES;
|
|
9
|
-
const cssVarsString = Object.entries(vars).map(([key, value]) => ` ${key}: ${value};`).join("\n");
|
|
10
|
-
return `
|
|
11
|
-
:root {
|
|
12
|
-
${cssVarsString}
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
* {
|
|
16
|
-
margin: 0;
|
|
17
|
-
padding: 0;
|
|
18
|
-
box-sizing: border-box;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
body {
|
|
22
|
-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
|
23
|
-
line-height: 1.5;
|
|
24
|
-
color: hsl(var(--foreground));
|
|
25
|
-
background-color: hsl(var(--background));
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
*, *::before, *::after {
|
|
29
|
-
border-color: hsl(var(--border));
|
|
30
|
-
}
|
|
31
|
-
`;
|
|
32
|
-
}
|
|
33
|
-
function getTailwindCdnScript() {
|
|
34
|
-
return "https://cdn.tailwindcss.com";
|
|
35
|
-
}
|
|
36
|
-
function generateMountCode(propsJson) {
|
|
37
|
-
return `
|
|
38
|
-
import { createRoot } from "react-dom/client";
|
|
39
|
-
import React from "react";
|
|
40
|
-
|
|
41
|
-
// Widget code will set window.__PATCHWORK_WIDGET__
|
|
42
|
-
const Component = window.__PATCHWORK_WIDGET__;
|
|
43
|
-
const props = ${propsJson};
|
|
44
|
-
|
|
45
|
-
if (Component) {
|
|
46
|
-
const root = createRoot(document.getElementById('root'));
|
|
47
|
-
root.render(React.createElement(Component, props));
|
|
48
|
-
window.parent.postMessage({ type: 'patchwork:ready' }, '*');
|
|
49
|
-
} else {
|
|
50
|
-
const root = createRoot(document.getElementById('root'));
|
|
51
|
-
root.render(
|
|
52
|
-
React.createElement('div', { style: { color: 'red', padding: '20px' } },
|
|
53
|
-
React.createElement('h2', null, 'Error: No component found'),
|
|
54
|
-
React.createElement('p', null, 'Widget must export a default component.')
|
|
55
|
-
)
|
|
56
|
-
);
|
|
57
|
-
window.parent.postMessage({ type: 'patchwork:error', message: 'No component found' }, '*');
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
window.addEventListener('error', (e) => {
|
|
61
|
-
window.parent.postMessage({ type: 'patchwork:error', message: e.message }, '*');
|
|
62
|
-
});
|
|
63
|
-
`;
|
|
64
|
-
}
|
|
65
|
-
function transformWidgetCode(code) {
|
|
66
|
-
let result = code;
|
|
67
|
-
const namedMatch = result.match(/export\s*{\s*(\w+)\s+as\s+default\s*}/);
|
|
68
|
-
if (namedMatch) {
|
|
69
|
-
result = result.replace(
|
|
70
|
-
/export\s*{\s*\w+\s+as\s+default\s*};?/,
|
|
71
|
-
`window.__PATCHWORK_WIDGET__ = ${namedMatch[1]};`
|
|
72
|
-
);
|
|
73
|
-
}
|
|
74
|
-
const directMatch = result.match(/export\s+default\s+(?:function\s+)?(\w+)/);
|
|
75
|
-
if (directMatch && !namedMatch) {
|
|
76
|
-
result = result.replace(
|
|
77
|
-
/export\s+default\s+(?:function\s+)?(\w+)/,
|
|
78
|
-
`window.__PATCHWORK_WIDGET__ = $1`
|
|
79
|
-
);
|
|
80
|
-
}
|
|
81
|
-
return result.replace(/export\s*{[^}]*};?/g, "");
|
|
82
|
-
}
|
|
83
|
-
function generateServiceBridge(services) {
|
|
84
|
-
if (services.length === 0) return "";
|
|
85
|
-
const namespaceAssignments = services.map((ns) => `window.${ns} = createNamespaceProxy('${ns}');`).join("\n ");
|
|
86
|
-
return `
|
|
87
|
-
(function() {
|
|
88
|
-
var pendingCalls = new Map();
|
|
89
|
-
|
|
90
|
-
window.__patchwork_call__ = function(namespace, method, args) {
|
|
91
|
-
return new Promise(function(resolve, reject) {
|
|
92
|
-
var id = Math.random().toString(36).slice(2);
|
|
93
|
-
pendingCalls.set(id, { resolve: resolve, reject: reject });
|
|
94
|
-
window.parent.postMessage({
|
|
95
|
-
type: 'patchwork:call',
|
|
96
|
-
id: id,
|
|
97
|
-
service: namespace,
|
|
98
|
-
method: method,
|
|
99
|
-
args: args
|
|
100
|
-
}, '*');
|
|
101
|
-
setTimeout(function() {
|
|
102
|
-
if (pendingCalls.has(id)) {
|
|
103
|
-
pendingCalls.delete(id);
|
|
104
|
-
reject(new Error('Service call timeout: ' + namespace + '.' + method));
|
|
105
|
-
}
|
|
106
|
-
}, 30000);
|
|
107
|
-
});
|
|
108
|
-
};
|
|
109
|
-
|
|
110
|
-
window.addEventListener('message', function(e) {
|
|
111
|
-
if (e.data && e.data.type === 'patchwork:response') {
|
|
112
|
-
var pending = pendingCalls.get(e.data.id);
|
|
113
|
-
if (pending) {
|
|
114
|
-
pendingCalls.delete(e.data.id);
|
|
115
|
-
if (e.data.result.success) {
|
|
116
|
-
pending.resolve(e.data.result.data);
|
|
117
|
-
} else {
|
|
118
|
-
pending.reject(new Error(e.data.result.error || 'Service call failed'));
|
|
119
|
-
}
|
|
120
|
-
}
|
|
121
|
-
}
|
|
122
|
-
});
|
|
123
|
-
|
|
124
|
-
function createNamespaceProxy(namespace) {
|
|
125
|
-
function createNestedProxy(path) {
|
|
126
|
-
var fn = function() {
|
|
127
|
-
return window.__patchwork_call__(namespace, path, Array.prototype.slice.call(arguments));
|
|
128
|
-
};
|
|
129
|
-
return new Proxy(fn, {
|
|
130
|
-
get: function(_, nestedName) {
|
|
131
|
-
if (typeof nestedName === 'symbol') return undefined;
|
|
132
|
-
var newPath = path ? path + '.' + nestedName : nestedName;
|
|
133
|
-
return createNestedProxy(newPath);
|
|
134
|
-
}
|
|
135
|
-
});
|
|
136
|
-
}
|
|
137
|
-
return new Proxy({}, {
|
|
138
|
-
get: function(_, fieldName) {
|
|
139
|
-
if (typeof fieldName === 'symbol') return undefined;
|
|
140
|
-
return createNestedProxy(fieldName);
|
|
141
|
-
}
|
|
142
|
-
});
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
-
${namespaceAssignments}
|
|
146
|
-
})();
|
|
147
|
-
`;
|
|
148
|
-
}
|
|
149
|
-
function generateHtml(compiledJs, importMap, options = {}) {
|
|
150
|
-
const {
|
|
151
|
-
title = "Patchwork Widget",
|
|
152
|
-
theme = "dark",
|
|
153
|
-
customCss = "",
|
|
154
|
-
props = {},
|
|
155
|
-
services = []
|
|
156
|
-
} = options;
|
|
157
|
-
const themeCss = generateThemeCss(theme);
|
|
158
|
-
const tailwindCdn = getTailwindCdnScript();
|
|
159
|
-
const widgetCode = transformWidgetCode(compiledJs);
|
|
160
|
-
const importMapJson = JSON.stringify({ imports: importMap }, null, 2);
|
|
161
|
-
const propsJson = JSON.stringify(props);
|
|
162
|
-
const mountCode = generateMountCode(propsJson);
|
|
163
|
-
const serviceBridge = generateServiceBridge(services);
|
|
164
|
-
return `<!DOCTYPE html>
|
|
165
|
-
<html lang="en" class="${theme}">
|
|
166
|
-
<head>
|
|
167
|
-
<meta charset="UTF-8">
|
|
168
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
169
|
-
<title>${title}</title>
|
|
170
|
-
<!-- Tailwind Play CDN - config must be set BEFORE script loads -->
|
|
171
|
-
<script>
|
|
172
|
-
window.tailwind = {
|
|
173
|
-
config: ${JSON.stringify({
|
|
174
|
-
darkMode: "class",
|
|
175
|
-
theme: {
|
|
176
|
-
extend: {
|
|
177
|
-
colors: {
|
|
178
|
-
border: "hsl(var(--border))",
|
|
179
|
-
input: "hsl(var(--input))",
|
|
180
|
-
ring: "hsl(var(--ring))",
|
|
181
|
-
background: "hsl(var(--background))",
|
|
182
|
-
foreground: "hsl(var(--foreground))",
|
|
183
|
-
primary: {
|
|
184
|
-
DEFAULT: "hsl(var(--primary))",
|
|
185
|
-
foreground: "hsl(var(--primary-foreground))"
|
|
186
|
-
},
|
|
187
|
-
secondary: {
|
|
188
|
-
DEFAULT: "hsl(var(--secondary))",
|
|
189
|
-
foreground: "hsl(var(--secondary-foreground))"
|
|
190
|
-
},
|
|
191
|
-
destructive: {
|
|
192
|
-
DEFAULT: "hsl(var(--destructive))",
|
|
193
|
-
foreground: "hsl(var(--destructive-foreground))"
|
|
194
|
-
},
|
|
195
|
-
muted: {
|
|
196
|
-
DEFAULT: "hsl(var(--muted))",
|
|
197
|
-
foreground: "hsl(var(--muted-foreground))"
|
|
198
|
-
},
|
|
199
|
-
accent: {
|
|
200
|
-
DEFAULT: "hsl(var(--accent))",
|
|
201
|
-
foreground: "hsl(var(--accent-foreground))"
|
|
202
|
-
},
|
|
203
|
-
popover: {
|
|
204
|
-
DEFAULT: "hsl(var(--popover))",
|
|
205
|
-
foreground: "hsl(var(--popover-foreground))"
|
|
206
|
-
},
|
|
207
|
-
card: {
|
|
208
|
-
DEFAULT: "hsl(var(--card))",
|
|
209
|
-
foreground: "hsl(var(--card-foreground))"
|
|
210
|
-
}
|
|
211
|
-
},
|
|
212
|
-
borderRadius: {
|
|
213
|
-
lg: "var(--radius)",
|
|
214
|
-
md: "calc(var(--radius) - 2px)",
|
|
215
|
-
sm: "calc(var(--radius) - 4px)"
|
|
216
|
-
}
|
|
217
|
-
}
|
|
218
|
-
}
|
|
219
|
-
})}
|
|
220
|
-
};
|
|
221
|
-
</script>
|
|
222
|
-
<script src="${tailwindCdn}" crossorigin></script>
|
|
223
|
-
<script type="importmap">${importMapJson}</script>
|
|
224
|
-
<style>${themeCss}${customCss}</style>
|
|
225
|
-
</head>
|
|
226
|
-
<body>
|
|
227
|
-
<div id="root"></div>
|
|
228
|
-
<script>
|
|
229
|
-
// Service bridge
|
|
230
|
-
${serviceBridge}
|
|
231
|
-
</script>
|
|
232
|
-
<script type="module">
|
|
233
|
-
// Widget code
|
|
234
|
-
${widgetCode}
|
|
235
|
-
</script>
|
|
236
|
-
<script type="module">
|
|
237
|
-
// Mount the widget
|
|
238
|
-
${mountCode}
|
|
239
|
-
</script>
|
|
240
|
-
</body>
|
|
241
|
-
</html>`;
|
|
242
|
-
}
|
|
243
|
-
function getDefaultImportMap(cdn = "https://esm.sh") {
|
|
244
|
-
return {
|
|
245
|
-
react: `${cdn}/react@18`,
|
|
246
|
-
"react/": `${cdn}/react@18/`,
|
|
247
|
-
"react-dom": `${cdn}/react-dom@18`,
|
|
248
|
-
"react-dom/": `${cdn}/react-dom@18/`,
|
|
249
|
-
"react-dom/client": `${cdn}/react-dom@18/client`
|
|
250
|
-
};
|
|
251
|
-
}
|
|
252
|
-
function getFrameworkDependencies() {
|
|
253
|
-
return {
|
|
254
|
-
react: "^18.0.0",
|
|
255
|
-
"react-dom": "^18.0.0"
|
|
256
|
-
};
|
|
257
|
-
}
|
|
258
|
-
|
|
259
|
-
export {
|
|
260
|
-
transformWidgetCode,
|
|
261
|
-
generateHtml,
|
|
262
|
-
getDefaultImportMap,
|
|
263
|
-
getFrameworkDependencies
|
|
264
|
-
};
|
|
265
|
-
//# sourceMappingURL=chunk-4QNUSFQA.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/html.ts"],"sourcesContent":["/**\n * @aprovan/patchwork-image-shadcnshadcn - HTML Generation\n *\n * Generates complete HTML documents for browser widget rendering.\n * The image owns the full HTML template including CSS, import maps, and mounting code.\n *\n * Uses Tailwind Play CDN for runtime CSS generation.\n */\n\nimport { DEFAULT_CSS_VARIABLES, DARK_CSS_VARIABLES } from './setup.js';\n\nexport interface HtmlOptions {\n /** Document title */\n title?: string;\n /** Theme: 'light' | 'dark' (default: 'dark') */\n theme?: 'light' | 'dark';\n /** Custom CSS to inject */\n customCss?: string;\n /** Widget props to pass */\n props?: Record<string, unknown>;\n /** Service namespaces to expose (generates bridge code) */\n services?: string[];\n}\n\nexport interface ImportMapEntry {\n [pkg: string]: string;\n}\n\n/**\n * Generate CSS for the selected theme\n */\nfunction generateThemeCss(theme: 'light' | 'dark'): string {\n const vars = theme === 'dark' ? DARK_CSS_VARIABLES : DEFAULT_CSS_VARIABLES;\n const cssVarsString = Object.entries(vars)\n .map(([key, value]) => ` ${key}: ${value};`)\n .join('\\n');\n\n return `\n:root {\n${cssVarsString}\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n line-height: 1.5;\n color: hsl(var(--foreground));\n background-color: hsl(var(--background));\n}\n\n*, *::before, *::after {\n border-color: hsl(var(--border));\n}\n`;\n}\n\n/**\n * Return the Tailwind Play CDN script URL.\n * Play CDN auto-initializes with MutationObserver, generating CSS on-demand.\n */\nfunction getTailwindCdnScript(): string {\n return 'https://cdn.tailwindcss.com';\n}\n\n/**\n * Generate the mounting code for React widgets\n */\nfunction generateMountCode(propsJson: string): string {\n return `\nimport { createRoot } from \"react-dom/client\";\nimport React from \"react\";\n\n// Widget code will set window.__PATCHWORK_WIDGET__\nconst Component = window.__PATCHWORK_WIDGET__;\nconst props = ${propsJson};\n\nif (Component) {\n const root = createRoot(document.getElementById('root'));\n root.render(React.createElement(Component, props));\n window.parent.postMessage({ type: 'patchwork:ready' }, '*');\n} else {\n const root = createRoot(document.getElementById('root'));\n root.render(\n React.createElement('div', { style: { color: 'red', padding: '20px' } },\n React.createElement('h2', null, 'Error: No component found'),\n React.createElement('p', null, 'Widget must export a default component.')\n )\n );\n window.parent.postMessage({ type: 'patchwork:error', message: 'No component found' }, '*');\n}\n\nwindow.addEventListener('error', (e) => {\n window.parent.postMessage({ type: 'patchwork:error', message: e.message }, '*');\n});\n`;\n}\n\n/**\n * Transform compiled widget code to set global export\n */\nexport function transformWidgetCode(code: string): string {\n let result = code;\n\n // Handle: export { X as default }\n const namedMatch = result.match(/export\\s*{\\s*(\\w+)\\s+as\\s+default\\s*}/);\n if (namedMatch) {\n result = result.replace(\n /export\\s*{\\s*\\w+\\s+as\\s+default\\s*};?/,\n `window.__PATCHWORK_WIDGET__ = ${namedMatch[1]};`,\n );\n }\n\n // Handle: export default X or export default function X\n const directMatch = result.match(/export\\s+default\\s+(?:function\\s+)?(\\w+)/);\n if (directMatch && !namedMatch) {\n result = result.replace(\n /export\\s+default\\s+(?:function\\s+)?(\\w+)/,\n `window.__PATCHWORK_WIDGET__ = $1`,\n );\n }\n\n // Remove remaining exports\n return result.replace(/export\\s*{[^}]*};?/g, '');\n}\n\n/**\n * Generate service bridge code for iframe communication\n *\n * Creates JavaScript that sets up:\n * 1. Message handling for service results from parent\n * 2. Dynamic proxy objects for each service namespace\n */\nfunction generateServiceBridge(services: string[]): string {\n if (services.length === 0) return '';\n\n const namespaceAssignments = services\n .map((ns) => `window.${ns} = createNamespaceProxy('${ns}');`)\n .join('\\n ');\n\n return `\n(function() {\n var pendingCalls = new Map();\n\n window.__patchwork_call__ = function(namespace, method, args) {\n return new Promise(function(resolve, reject) {\n var id = Math.random().toString(36).slice(2);\n pendingCalls.set(id, { resolve: resolve, reject: reject });\n window.parent.postMessage({\n type: 'patchwork:call',\n id: id,\n service: namespace,\n method: method,\n args: args\n }, '*');\n setTimeout(function() {\n if (pendingCalls.has(id)) {\n pendingCalls.delete(id);\n reject(new Error('Service call timeout: ' + namespace + '.' + method));\n }\n }, 30000);\n });\n };\n\n window.addEventListener('message', function(e) {\n if (e.data && e.data.type === 'patchwork:response') {\n var pending = pendingCalls.get(e.data.id);\n if (pending) {\n pendingCalls.delete(e.data.id);\n if (e.data.result.success) {\n pending.resolve(e.data.result.data);\n } else {\n pending.reject(new Error(e.data.result.error || 'Service call failed'));\n }\n }\n }\n });\n\n function createNamespaceProxy(namespace) {\n function createNestedProxy(path) {\n var fn = function() {\n return window.__patchwork_call__(namespace, path, Array.prototype.slice.call(arguments));\n };\n return new Proxy(fn, {\n get: function(_, nestedName) {\n if (typeof nestedName === 'symbol') return undefined;\n var newPath = path ? path + '.' + nestedName : nestedName;\n return createNestedProxy(newPath);\n }\n });\n }\n return new Proxy({}, {\n get: function(_, fieldName) {\n if (typeof fieldName === 'symbol') return undefined;\n return createNestedProxy(fieldName);\n }\n });\n }\n\n ${namespaceAssignments}\n})();\n`;\n}\n\n/**\n * Generate a complete HTML document for rendering a widget\n *\n * Uses Tailwind Play CDN which detects class usage via MutationObserver and\n * generates CSS on-demand.\n *\n * @param compiledJs - The compiled widget JavaScript code\n * @param importMap - Import map for dependencies\n * @param options - HTML generation options\n */\nexport function generateHtml(\n compiledJs: string,\n importMap: ImportMapEntry,\n options: HtmlOptions = {},\n): string {\n const {\n title = 'Patchwork Widget',\n theme = 'dark',\n customCss = '',\n props = {},\n services = [],\n } = options;\n\n const themeCss = generateThemeCss(theme);\n const tailwindCdn = getTailwindCdnScript();\n const widgetCode = transformWidgetCode(compiledJs);\n const importMapJson = JSON.stringify({ imports: importMap }, null, 2);\n const propsJson = JSON.stringify(props);\n const mountCode = generateMountCode(propsJson);\n const serviceBridge = generateServiceBridge(services);\n\n return `<!DOCTYPE html>\n<html lang=\"en\" class=\"${theme}\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>${title}</title>\n <!-- Tailwind Play CDN - config must be set BEFORE script loads -->\n <script>\n window.tailwind = {\n config: ${JSON.stringify({\n darkMode: 'class',\n theme: {\n extend: {\n colors: {\n border: 'hsl(var(--border))',\n input: 'hsl(var(--input))',\n ring: 'hsl(var(--ring))',\n background: 'hsl(var(--background))',\n foreground: 'hsl(var(--foreground))',\n primary: {\n DEFAULT: 'hsl(var(--primary))',\n foreground: 'hsl(var(--primary-foreground))',\n },\n secondary: {\n DEFAULT: 'hsl(var(--secondary))',\n foreground: 'hsl(var(--secondary-foreground))',\n },\n destructive: {\n DEFAULT: 'hsl(var(--destructive))',\n foreground: 'hsl(var(--destructive-foreground))',\n },\n muted: {\n DEFAULT: 'hsl(var(--muted))',\n foreground: 'hsl(var(--muted-foreground))',\n },\n accent: {\n DEFAULT: 'hsl(var(--accent))',\n foreground: 'hsl(var(--accent-foreground))',\n },\n popover: {\n DEFAULT: 'hsl(var(--popover))',\n foreground: 'hsl(var(--popover-foreground))',\n },\n card: {\n DEFAULT: 'hsl(var(--card))',\n foreground: 'hsl(var(--card-foreground))',\n },\n },\n borderRadius: {\n lg: 'var(--radius)',\n md: 'calc(var(--radius) - 2px)',\n sm: 'calc(var(--radius) - 4px)',\n },\n },\n },\n })}\n };\n </script>\n <script src=\"${tailwindCdn}\" crossorigin></script>\n <script type=\"importmap\">${importMapJson}</script>\n <style>${themeCss}${customCss}</style>\n</head>\n<body>\n <div id=\"root\"></div>\n <script>\n // Service bridge\n ${serviceBridge}\n </script>\n <script type=\"module\">\n // Widget code\n ${widgetCode}\n </script>\n <script type=\"module\">\n // Mount the widget\n ${mountCode}\n </script>\n</body>\n</html>`;\n}\n\n/**\n * Get the default import map for this image\n */\nexport function getDefaultImportMap(cdn = 'https://esm.sh'): ImportMapEntry {\n return {\n react: `${cdn}/react@18`,\n 'react/': `${cdn}/react@18/`,\n 'react-dom': `${cdn}/react-dom@18`,\n 'react-dom/': `${cdn}/react-dom@18/`,\n 'react-dom/client': `${cdn}/react-dom@18/client`,\n };\n}\n\n/**\n * Get framework dependencies declared by this image\n */\nexport function getFrameworkDependencies(): Record<string, string> {\n return {\n react: '^18.0.0',\n 'react-dom': '^18.0.0',\n };\n}\n"],"mappings":"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","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/setup.ts"],"sourcesContent":["/**\n * @aprovan/patchwork-image-shadcn\n *\n * Setup function for the ShadCN/ui image.\n * Uses Tailwind Play CDN for runtime CSS generation.\n */\n\nexport interface SetupOptions {\n /** Enable dark mode (default: false - respects system preference) */\n darkMode?: boolean | 'system';\n /** Inject CSS runtime (default: true) */\n cssRuntime?: boolean;\n /** Custom CSS variable overrides */\n cssVariables?: Record<string, string>;\n}\n\nexport const DEFAULT_CSS_VARIABLES = {\n '--background': '0 0% 100%',\n '--foreground': '222.2 84% 4.9%',\n '--card': '0 0% 100%',\n '--card-foreground': '222.2 84% 4.9%',\n '--popover': '0 0% 100%',\n '--popover-foreground': '222.2 84% 4.9%',\n '--primary': '222.2 47.4% 11.2%',\n '--primary-foreground': '210 40% 98%',\n '--secondary': '210 40% 96.1%',\n '--secondary-foreground': '222.2 47.4% 11.2%',\n '--muted': '210 40% 96.1%',\n '--muted-foreground': '215.4 16.3% 46.9%',\n '--accent': '210 40% 96.1%',\n '--accent-foreground': '222.2 47.4% 11.2%',\n '--destructive': '0 84.2% 60.2%',\n '--destructive-foreground': '210 40% 98%',\n '--border': '214.3 31.8% 91.4%',\n '--input': '214.3 31.8% 91.4%',\n '--ring': '222.2 84% 4.9%',\n '--radius': '0.5rem',\n};\n\nexport const DARK_CSS_VARIABLES = {\n '--background': '222.2 84% 4.9%',\n '--foreground': '210 40% 98%',\n '--card': '222.2 84% 4.9%',\n '--card-foreground': '210 40% 98%',\n '--popover': '222.2 84% 4.9%',\n '--popover-foreground': '210 40% 98%',\n '--primary': '210 40% 98%',\n '--primary-foreground': '222.2 47.4% 11.2%',\n '--secondary': '217.2 32.6% 17.5%',\n '--secondary-foreground': '210 40% 98%',\n '--muted': '217.2 32.6% 17.5%',\n '--muted-foreground': '215 20.2% 65.1%',\n '--accent': '217.2 32.6% 17.5%',\n '--accent-foreground': '210 40% 98%',\n '--destructive': '0 62.8% 30.6%',\n '--destructive-foreground': '210 40% 98%',\n '--border': '217.2 32.6% 17.5%',\n '--input': '217.2 32.6% 17.5%',\n '--ring': '212.7 26.8% 83.9%',\n '--radius': '0.5rem',\n};\n\n// Track CSS runtime state\nlet tailwindLoadPromise: Promise<void> | null = null;\nlet themeStyleElement: HTMLStyleElement | null = null;\nconst containerObservers: Map<HTMLElement, MutationObserver> = new Map();\n\n// Window type augmentation for Tailwind Play CDN\ndeclare global {\n interface Window {\n tailwind?: {\n config?: Record<string, unknown>;\n };\n }\n}\n\n/**\n * Setup the ShadCN/ui image runtime environment\n *\n * Injects Tailwind Play CDN and theme CSS variables.\n * Sets up a MutationObserver to trigger CSS regeneration when content changes.\n *\n * @param root - Root element where the widget will be mounted\n * @param options - Optional configuration\n */\nexport async function setup(\n root: HTMLElement,\n options: SetupOptions = {},\n): Promise<void> {\n const { darkMode = 'system', cssRuntime = true, cssVariables = {} } = options;\n\n // Inject Tailwind Play CDN and wait for it to load\n if (cssRuntime) {\n await injectTailwindPlayCdn();\n }\n\n // Determine if dark mode\n let isDark = false;\n if (darkMode === true) {\n isDark = true;\n } else if (darkMode === 'system') {\n isDark =\n window.matchMedia?.('(prefers-color-scheme: dark)').matches ?? false;\n }\n\n // Create or update theme style element\n if (!themeStyleElement) {\n themeStyleElement = document.createElement('style');\n themeStyleElement.id = 'patchwork-image-shadcn-theme';\n document.head.appendChild(themeStyleElement);\n }\n\n // Build CSS variables\n const baseVars = isDark ? DARK_CSS_VARIABLES : DEFAULT_CSS_VARIABLES;\n const mergedVars = { ...baseVars, ...cssVariables };\n const cssVarsString = Object.entries(mergedVars)\n .map(([key, value]) => `${key}: ${value};`)\n .join('\\n ');\n\n themeStyleElement.textContent = `\n /* Patchwork ShadCN Theme */\n :root {\n ${cssVarsString}\n }\n\n .patchwork-widget {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n line-height: 1.5;\n color: hsl(var(--foreground));\n background-color: hsl(var(--background));\n }\n\n .patchwork-widget *, .patchwork-widget *::before, .patchwork-widget *::after {\n box-sizing: border-box;\n border-color: hsl(var(--border));\n }\n `;\n\n // Mark root as patchwork widget container\n root.classList.add('patchwork-widget');\n\n // Set dark mode class if needed\n if (isDark) {\n root.classList.add('dark');\n } else {\n root.classList.remove('dark');\n }\n\n // Set up MutationObserver to trigger Tailwind re-compile on content changes\n if (cssRuntime && !containerObservers.has(root)) {\n const observer = new MutationObserver(() => {\n // Trigger Tailwind to re-scan by dispatching a custom event\n // The Play CDN listens for this internally\n requestAnimationFrame(() => {\n // Force Tailwind to re-process by triggering a mutation\n const tempNode = document.createTextNode('');\n document.body.appendChild(tempNode);\n document.body.removeChild(tempNode);\n });\n });\n\n observer.observe(root, {\n childList: true,\n subtree: true,\n attributes: true,\n attributeFilter: ['class'],\n });\n\n containerObservers.set(root, observer);\n }\n}\n\n/**\n * Inject Tailwind Play CDN script\n *\n * The Play CDN automatically observes the DOM and generates CSS\n * for any Tailwind classes it finds.\n *\n * Returns a promise that resolves when Tailwind is fully loaded.\n */\nfunction injectTailwindPlayCdn(): Promise<void> {\n // Return existing promise if already loading/loaded\n if (tailwindLoadPromise) {\n return tailwindLoadPromise;\n }\n\n // Check if already injected\n if (document.getElementById('patchwork-tailwind-cdn')) {\n return Promise.resolve();\n }\n\n tailwindLoadPromise = new Promise((resolve, reject) => {\n // First, set up the config object BEFORE loading Tailwind\n // Tailwind Play CDN reads window.tailwind.config on load\n window.tailwind = {\n config: {\n darkMode: 'class',\n theme: {\n extend: {\n colors: {\n border: 'hsl(var(--border))',\n input: 'hsl(var(--input))',\n ring: 'hsl(var(--ring))',\n background: 'hsl(var(--background))',\n foreground: 'hsl(var(--foreground))',\n primary: {\n DEFAULT: 'hsl(var(--primary))',\n foreground: 'hsl(var(--primary-foreground))',\n },\n secondary: {\n DEFAULT: 'hsl(var(--secondary))',\n foreground: 'hsl(var(--secondary-foreground))',\n },\n destructive: {\n DEFAULT: 'hsl(var(--destructive))',\n foreground: 'hsl(var(--destructive-foreground))',\n },\n muted: {\n DEFAULT: 'hsl(var(--muted))',\n foreground: 'hsl(var(--muted-foreground))',\n },\n accent: {\n DEFAULT: 'hsl(var(--accent))',\n foreground: 'hsl(var(--accent-foreground))',\n },\n popover: {\n DEFAULT: 'hsl(var(--popover))',\n foreground: 'hsl(var(--popover-foreground))',\n },\n card: {\n DEFAULT: 'hsl(var(--card))',\n foreground: 'hsl(var(--card-foreground))',\n },\n },\n borderRadius: {\n lg: 'var(--radius)',\n md: 'calc(var(--radius) - 2px)',\n sm: 'calc(var(--radius) - 4px)',\n },\n },\n },\n },\n };\n\n // Load Tailwind Play CDN\n const script = document.createElement('script');\n script.id = 'patchwork-tailwind-cdn';\n script.src = 'https://cdn.tailwindcss.com';\n\n // Wait for script to load before resolving\n script.onload = () => {\n resolve();\n };\n script.onerror = () => {\n reject(new Error('Failed to load Tailwind Play CDN'));\n };\n\n document.head.appendChild(script);\n });\n\n return tailwindLoadPromise;\n}\n\n/**\n * Cleanup any global resources added by setup\n */\nexport function cleanup(): void {\n if (themeStyleElement) {\n themeStyleElement.remove();\n themeStyleElement = null;\n }\n\n const tailwindScript = document.getElementById('patchwork-tailwind-cdn');\n if (tailwindScript) {\n tailwindScript.remove();\n tailwindLoadPromise = null;\n }\n\n // Clean up the tailwind config from window\n if (window.tailwind) {\n delete window.tailwind;\n }\n\n // Clean up observers\n containerObservers.forEach((observer) => observer.disconnect());\n containerObservers.clear();\n}\n"],"mappings":"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","names":[]}
|
package/dist/html.d.ts
DELETED
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @aprovan/patchwork-image-shadcnshadcn - HTML Generation
|
|
3
|
-
*
|
|
4
|
-
* Generates complete HTML documents for browser widget rendering.
|
|
5
|
-
* The image owns the full HTML template including CSS, import maps, and mounting code.
|
|
6
|
-
*
|
|
7
|
-
* Uses Tailwind Play CDN for runtime CSS generation.
|
|
8
|
-
*/
|
|
9
|
-
interface HtmlOptions {
|
|
10
|
-
/** Document title */
|
|
11
|
-
title?: string;
|
|
12
|
-
/** Theme: 'light' | 'dark' (default: 'dark') */
|
|
13
|
-
theme?: 'light' | 'dark';
|
|
14
|
-
/** Custom CSS to inject */
|
|
15
|
-
customCss?: string;
|
|
16
|
-
/** Widget props to pass */
|
|
17
|
-
props?: Record<string, unknown>;
|
|
18
|
-
/** Service namespaces to expose (generates bridge code) */
|
|
19
|
-
services?: string[];
|
|
20
|
-
}
|
|
21
|
-
interface ImportMapEntry {
|
|
22
|
-
[pkg: string]: string;
|
|
23
|
-
}
|
|
24
|
-
/**
|
|
25
|
-
* Transform compiled widget code to set global export
|
|
26
|
-
*/
|
|
27
|
-
declare function transformWidgetCode(code: string): string;
|
|
28
|
-
/**
|
|
29
|
-
* Generate a complete HTML document for rendering a widget
|
|
30
|
-
*
|
|
31
|
-
* Uses Tailwind Play CDN which detects class usage via MutationObserver and
|
|
32
|
-
* generates CSS on-demand.
|
|
33
|
-
*
|
|
34
|
-
* @param compiledJs - The compiled widget JavaScript code
|
|
35
|
-
* @param importMap - Import map for dependencies
|
|
36
|
-
* @param options - HTML generation options
|
|
37
|
-
*/
|
|
38
|
-
declare function generateHtml(compiledJs: string, importMap: ImportMapEntry, options?: HtmlOptions): string;
|
|
39
|
-
/**
|
|
40
|
-
* Get the default import map for this image
|
|
41
|
-
*/
|
|
42
|
-
declare function getDefaultImportMap(cdn?: string): ImportMapEntry;
|
|
43
|
-
/**
|
|
44
|
-
* Get framework dependencies declared by this image
|
|
45
|
-
*/
|
|
46
|
-
declare function getFrameworkDependencies(): Record<string, string>;
|
|
47
|
-
|
|
48
|
-
export { type HtmlOptions, type ImportMapEntry, generateHtml, getDefaultImportMap, getFrameworkDependencies, transformWidgetCode };
|
package/dist/html.js
DELETED
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
generateHtml,
|
|
3
|
-
getDefaultImportMap,
|
|
4
|
-
getFrameworkDependencies,
|
|
5
|
-
transformWidgetCode
|
|
6
|
-
} from "./chunk-4QNUSFQA.js";
|
|
7
|
-
import "./chunk-7LFKP2EW.js";
|
|
8
|
-
export {
|
|
9
|
-
generateHtml,
|
|
10
|
-
getDefaultImportMap,
|
|
11
|
-
getFrameworkDependencies,
|
|
12
|
-
transformWidgetCode
|
|
13
|
-
};
|
|
14
|
-
//# sourceMappingURL=html.js.map
|
package/dist/html.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|