dynim-react 1.0.7 → 1.0.9
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 +11 -439
- package/dist/builder/BuilderProvider.d.ts +8 -24
- package/dist/builder/BuilderProvider.d.ts.map +1 -1
- package/dist/builder/BuilderProvider.js +152 -154
- package/dist/builder/index.d.ts +0 -2
- package/dist/builder/index.d.ts.map +1 -1
- package/dist/builder/index.js +0 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -3
- package/package.json +2 -2
- package/dist/builder/EditableZone.d.ts +0 -73
- package/dist/builder/EditableZone.d.ts.map +0 -1
- package/dist/builder/EditableZone.js +0 -83
- package/dist/inference/DynimProvider.d.ts +0 -23
- package/dist/inference/DynimProvider.d.ts.map +0 -1
- package/dist/inference/DynimProvider.js +0 -231
- package/dist/inference/createDynimSDK.d.ts +0 -39
- package/dist/inference/createDynimSDK.d.ts.map +0 -1
- package/dist/inference/createDynimSDK.js +0 -61
package/README.md
CHANGED
|
@@ -1,447 +1,19 @@
|
|
|
1
1
|
# dynim-react
|
|
2
2
|
|
|
3
|
-
React components
|
|
3
|
+
React components for visual page building and tenant customization.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Documentation
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
npm install dynim-react
|
|
9
|
-
# dynim-core is included as a dependency
|
|
10
|
-
```
|
|
11
|
-
|
|
12
|
-
**Peer Dependencies:**
|
|
13
|
-
- `react` >= 17.0.0
|
|
14
|
-
- `react-dom` >= 17.0.0
|
|
15
|
-
|
|
16
|
-
## Overview
|
|
17
|
-
|
|
18
|
-
This package has two main modules:
|
|
19
|
-
|
|
20
|
-
1. **Builder** - Visual builder integration for editing pages/components with AI chat and code generation
|
|
21
|
-
2. **Inference** - Dynamic loading of tenant-specific customization bundles
|
|
22
|
-
|
|
23
|
-
## Folder Structure
|
|
24
|
-
|
|
25
|
-
```
|
|
26
|
-
src/
|
|
27
|
-
├── index.ts # Main entry point
|
|
28
|
-
├── builder/
|
|
29
|
-
│ ├── BuilderProvider.tsx # Visual builder React provider
|
|
30
|
-
│ ├── EditableZone.tsx # Zone wrappers for customization control
|
|
31
|
-
│ ├── ChatContext.tsx # Chat state context
|
|
32
|
-
│ ├── useChatbot.ts # Headless chat hook
|
|
33
|
-
│ ├── MessageList.tsx # Message display component
|
|
34
|
-
│ └── ChatInput.tsx # Chat input component
|
|
35
|
-
└── inference/
|
|
36
|
-
├── types.ts # TypeScript definitions
|
|
37
|
-
├── sharedContext.ts # Shared context registration
|
|
38
|
-
└── InferenceProvider.tsx # Tenant bundle loader
|
|
39
|
-
```
|
|
40
|
-
|
|
41
|
-
## Builder Module
|
|
42
|
-
|
|
43
|
-
### BuilderProvider
|
|
44
|
-
|
|
45
|
-
Main provider component that integrates the visual builder UI into your app.
|
|
46
|
-
|
|
47
|
-
```tsx
|
|
48
|
-
import { BuilderProvider, useBuilder } from 'dynim-react';
|
|
49
|
-
|
|
50
|
-
function App() {
|
|
51
|
-
return (
|
|
52
|
-
<BuilderProvider
|
|
53
|
-
config={{
|
|
54
|
-
apiBase: 'https://api.example.com',
|
|
55
|
-
pageId: '/dashboard',
|
|
56
|
-
sessionToken: jwtToken,
|
|
57
|
-
onCodeEdit: (edit) => console.log('Code changed:', edit),
|
|
58
|
-
}}
|
|
59
|
-
onBuilderReady={(ctx) => console.log('Builder ready!')}
|
|
60
|
-
>
|
|
61
|
-
<YourApp />
|
|
62
|
-
</BuilderProvider>
|
|
63
|
-
);
|
|
64
|
-
}
|
|
65
|
-
```
|
|
66
|
-
|
|
67
|
-
**Config Options:**
|
|
68
|
-
|
|
69
|
-
```tsx
|
|
70
|
-
interface BuilderConfig {
|
|
71
|
-
apiBase?: string; // Default: 'http://localhost:8080'
|
|
72
|
-
pageId?: string; // Default: window.location.pathname
|
|
73
|
-
logo?: string; // Builder UI logo text
|
|
74
|
-
contentRoot?: HTMLElement; // Default: document.body
|
|
75
|
-
sessionToken?: string; // JWT authentication token
|
|
76
|
-
refreshToken?: string; // For token renewal
|
|
77
|
-
getSession?: () => Promise<{ token: string }>; // Dynamic token fetching
|
|
78
|
-
onMessage?: (data: BuilderMessage) => void; // Chat message callback
|
|
79
|
-
onError?: (error: Error) => void; // Error callback
|
|
80
|
-
onCodeMessage?: (event: CodeEvent) => void; // Code generation events
|
|
81
|
-
onCodeEdit?: (edit: CodeEdit) => void; // Code edit callback
|
|
82
|
-
}
|
|
83
|
-
```
|
|
84
|
-
|
|
85
|
-
### useBuilder Hook
|
|
86
|
-
|
|
87
|
-
Access builder controls from any child component:
|
|
88
|
-
|
|
89
|
-
```tsx
|
|
90
|
-
function EditorToolbar() {
|
|
91
|
-
const {
|
|
92
|
-
// Builder controls
|
|
93
|
-
enterBuilder, // () => void - Enter edit mode
|
|
94
|
-
exitBuilder, // () => void - Exit without saving
|
|
95
|
-
saveBuilder, // () => Promise<void> - Save and exit
|
|
96
|
-
isBuilderActive, // boolean - Current edit state
|
|
97
|
-
|
|
98
|
-
// Chat
|
|
99
|
-
sendChat, // (message: string) => Promise<void>
|
|
100
|
-
sendElementChat, // (message: string, element: HTMLElement) => Promise<void>
|
|
101
|
-
|
|
102
|
-
// Code generation (Flexcode)
|
|
103
|
-
sendCode, // (projectId: string, prompt: string) => Promise<void>
|
|
104
|
-
saveCode, // (projectId: string) => Promise<void>
|
|
105
|
-
abandonCode, // (projectId: string) => Promise<void>
|
|
106
|
-
codeEdits, // CodeEdit[] - Pending code changes
|
|
107
|
-
|
|
108
|
-
// Builder instance
|
|
109
|
-
getBuilder, // () => Builder - Get underlying builder instance
|
|
110
|
-
} = useBuilder();
|
|
7
|
+
See [SDK React Documentation](../../utils/docs/sdk/REACT.md)
|
|
111
8
|
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
<button onClick={saveBuilder} disabled={!isBuilderActive}>
|
|
118
|
-
Save Changes
|
|
119
|
-
</button>
|
|
120
|
-
</div>
|
|
121
|
-
);
|
|
122
|
-
}
|
|
123
|
-
```
|
|
124
|
-
|
|
125
|
-
### Chat Components
|
|
126
|
-
|
|
127
|
-
Pre-built chat UI components:
|
|
128
|
-
|
|
129
|
-
```tsx
|
|
130
|
-
import { ChatProvider, MessageList, ChatInput } from 'dynim-react';
|
|
131
|
-
|
|
132
|
-
function BuilderChat() {
|
|
133
|
-
return (
|
|
134
|
-
<ChatProvider endpoint="/api/chat" apiKey="...">
|
|
135
|
-
<MessageList showAvatars showTimestamps={false} />
|
|
136
|
-
<ChatInput placeholder="Ask the builder..." />
|
|
137
|
-
</ChatProvider>
|
|
138
|
-
);
|
|
139
|
-
}
|
|
140
|
-
```
|
|
141
|
-
|
|
142
|
-
### useChatbot Hook
|
|
143
|
-
|
|
144
|
-
Headless hook for building custom chat UIs:
|
|
145
|
-
|
|
146
|
-
```tsx
|
|
147
|
-
import { useChatbot } from 'dynim-react';
|
|
148
|
-
|
|
149
|
-
function CustomChat() {
|
|
150
|
-
const {
|
|
151
|
-
messages, // Message[] - Array of chat messages
|
|
152
|
-
isLoading, // boolean - Response being fetched
|
|
153
|
-
isTyping, // boolean - AI typing indicator
|
|
154
|
-
sendMessage, // (text: string) => Promise<void>
|
|
155
|
-
clearMessages, // () => void - Clear history
|
|
156
|
-
} = useChatbot({
|
|
157
|
-
endpoint: '/api/chat',
|
|
158
|
-
apiKey: 'your-api-key',
|
|
159
|
-
onError: (error) => console.error(error),
|
|
160
|
-
});
|
|
161
|
-
|
|
162
|
-
return (
|
|
163
|
-
<div>
|
|
164
|
-
{messages.map(msg => (
|
|
165
|
-
<div key={msg.id} className={msg.role}>
|
|
166
|
-
{msg.text}
|
|
167
|
-
</div>
|
|
168
|
-
))}
|
|
169
|
-
<form onSubmit={(e) => {
|
|
170
|
-
e.preventDefault();
|
|
171
|
-
sendMessage(e.target.message.value);
|
|
172
|
-
e.target.reset();
|
|
173
|
-
}}>
|
|
174
|
-
<input name="message" disabled={isLoading} />
|
|
175
|
-
<button type="submit">Send</button>
|
|
176
|
-
</form>
|
|
177
|
-
</div>
|
|
178
|
-
);
|
|
179
|
-
}
|
|
180
|
-
```
|
|
181
|
-
|
|
182
|
-
**Message Type:**
|
|
183
|
-
|
|
184
|
-
```tsx
|
|
185
|
-
interface Message {
|
|
186
|
-
id: string;
|
|
187
|
-
role: 'user' | 'assistant';
|
|
188
|
-
text: string;
|
|
189
|
-
timestamp: Date;
|
|
190
|
-
}
|
|
191
|
-
```
|
|
192
|
-
|
|
193
|
-
### Zone Components
|
|
194
|
-
|
|
195
|
-
Control which parts of your UI can be customized in the builder:
|
|
196
|
-
|
|
197
|
-
```tsx
|
|
198
|
-
import { LockedZone, EditableZone } from 'dynim-react';
|
|
199
|
-
|
|
200
|
-
function App() {
|
|
201
|
-
return (
|
|
202
|
-
<div>
|
|
203
|
-
<LockedZone>
|
|
204
|
-
<Navigation /> {/* Protected - cannot be modified */}
|
|
205
|
-
</LockedZone>
|
|
206
|
-
|
|
207
|
-
<main>
|
|
208
|
-
{/* Editable by default */}
|
|
209
|
-
<Hero />
|
|
210
|
-
<Features />
|
|
211
|
-
</main>
|
|
212
|
-
|
|
213
|
-
<LockedZone>
|
|
214
|
-
<Sidebar>
|
|
215
|
-
<Logo /> {/* Locked */}
|
|
216
|
-
<EditableZone>
|
|
217
|
-
<CustomWidgets /> {/* Editable island inside locked zone */}
|
|
218
|
-
</EditableZone>
|
|
219
|
-
</Sidebar>
|
|
220
|
-
</LockedZone>
|
|
221
|
-
</div>
|
|
222
|
-
);
|
|
223
|
-
}
|
|
224
|
-
```
|
|
225
|
-
|
|
226
|
-
**Zone Props:**
|
|
227
|
-
|
|
228
|
-
```tsx
|
|
229
|
-
// Custom wrapper element
|
|
230
|
-
<EditableZone as="section" className="content">
|
|
231
|
-
<Content />
|
|
232
|
-
</EditableZone>
|
|
233
|
-
|
|
234
|
-
// Aliases
|
|
235
|
-
<NonCustomizable> {/* Same as LockedZone */}
|
|
236
|
-
<Customizable> {/* Same as EditableZone */}
|
|
237
|
-
```
|
|
9
|
+
Related:
|
|
10
|
+
- [SDK Overview](../../utils/docs/sdk/README.md)
|
|
11
|
+
- [SDK Core](../../utils/docs/sdk/CORE.md)
|
|
12
|
+
- [UI Builder](../../utils/docs/ui-builder/README.md)
|
|
13
|
+
- [Inference Server](../../utils/docs/inference-server/README.md)
|
|
238
14
|
|
|
239
|
-
|
|
240
|
-
- `EditableZone` / `Customizable` - Creates editable areas (sets `vis="true"`)
|
|
15
|
+
## Install
|
|
241
16
|
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
### InferenceProvider
|
|
245
|
-
|
|
246
|
-
Dynamically loads and renders tenant-specific customization bundles.
|
|
247
|
-
|
|
248
|
-
```tsx
|
|
249
|
-
import { InferenceProvider } from 'dynim-react';
|
|
250
|
-
|
|
251
|
-
function App() {
|
|
252
|
-
const { tenantId } = useAuth();
|
|
253
|
-
|
|
254
|
-
return (
|
|
255
|
-
<InferenceProvider
|
|
256
|
-
tenantId={tenantId}
|
|
257
|
-
bundleUrl={(id) => `https://cdn.example.com/bundles/${id}.js`}
|
|
258
|
-
checkCustomizations={async (id) => {
|
|
259
|
-
const res = await fetch(`/api/customizations/${id}`);
|
|
260
|
-
return res.ok;
|
|
261
|
-
}}
|
|
262
|
-
loadingComponent={<Spinner />}
|
|
263
|
-
errorBanner={true}
|
|
264
|
-
onLoad={(id) => console.log(`Loaded for ${id}`)}
|
|
265
|
-
onError={(err, id) => console.error(`Failed for ${id}:`, err)}
|
|
266
|
-
>
|
|
267
|
-
<BaseApp />
|
|
268
|
-
</InferenceProvider>
|
|
269
|
-
);
|
|
270
|
-
}
|
|
271
|
-
```
|
|
272
|
-
|
|
273
|
-
**Props:**
|
|
274
|
-
|
|
275
|
-
```tsx
|
|
276
|
-
interface InferenceProviderProps {
|
|
277
|
-
tenantId: string | null; // Current tenant (null = no customization)
|
|
278
|
-
bundleUrl: string | ((id: string) => string); // Bundle URL or URL builder
|
|
279
|
-
bundleToken?: string; // Auth token for bundle fetch
|
|
280
|
-
checkCustomizations?: (id: string) => Promise<bool>; // Pre-check if tenant has bundle
|
|
281
|
-
loadingComponent?: ReactNode; // Custom loading UI
|
|
282
|
-
errorBanner?: boolean | ReactNode; // Show errors (default: false)
|
|
283
|
-
onError?: (error: Error, tenantId: string) => void;
|
|
284
|
-
onLoad?: (tenantId: string) => void;
|
|
285
|
-
children: ReactNode; // Fallback/default app
|
|
286
|
-
}
|
|
287
|
-
```
|
|
288
|
-
|
|
289
|
-
**Loading States:**
|
|
290
|
-
|
|
291
|
-
`idle` → `checking` → `loading` → `loaded` / `error` / `no-customization`
|
|
292
|
-
|
|
293
|
-
### Shared Context
|
|
294
|
-
|
|
295
|
-
Tenant bundles access the host app's React and custom hooks via a shared context on `window.__DYNIM__`:
|
|
296
|
-
|
|
297
|
-
```tsx
|
|
298
|
-
import { createSharedContext, getSharedContext, isSharedContextReady } from 'dynim-react';
|
|
299
|
-
|
|
300
|
-
// Register shared context (call once at app initialization)
|
|
301
|
-
createSharedContext({
|
|
302
|
-
React,
|
|
303
|
-
ReactDOM,
|
|
304
|
-
hooks: { useAuth, useTheme, useNotifications },
|
|
305
|
-
contexts: { AuthContext, ThemeContext },
|
|
306
|
-
globals: { utils: myUtils },
|
|
307
|
-
});
|
|
308
|
-
|
|
309
|
-
// Check if ready
|
|
310
|
-
if (isSharedContextReady()) {
|
|
311
|
-
const ctx = getSharedContext();
|
|
312
|
-
// ...
|
|
313
|
-
}
|
|
314
|
-
```
|
|
315
|
-
|
|
316
|
-
**Writing a Tenant Bundle:**
|
|
317
|
-
|
|
318
|
-
```typescript
|
|
319
|
-
// tenant-bundle.ts
|
|
320
|
-
const { React, ReactDOM, hooks, contexts } = window.__DYNIM__;
|
|
321
|
-
const { useAuth, useTheme } = hooks;
|
|
322
|
-
|
|
323
|
-
function TenantCustomization() {
|
|
324
|
-
const { user } = useAuth();
|
|
325
|
-
const { theme } = useTheme();
|
|
326
|
-
|
|
327
|
-
return (
|
|
328
|
-
<div style={{ background: theme.bg }}>
|
|
329
|
-
<h1>Welcome, {user.name}!</h1>
|
|
330
|
-
<p>Custom content for {user.tenantId}</p>
|
|
331
|
-
</div>
|
|
332
|
-
);
|
|
333
|
-
}
|
|
334
|
-
|
|
335
|
-
// Render into the designated root
|
|
336
|
-
const root = document.getElementById('dynim-root');
|
|
337
|
-
ReactDOM.render(<TenantCustomization />, root);
|
|
338
|
-
```
|
|
339
|
-
|
|
340
|
-
## Architecture
|
|
341
|
-
|
|
342
|
-
```
|
|
343
|
-
Application
|
|
344
|
-
│
|
|
345
|
-
├── BuilderProvider (visual editing)
|
|
346
|
-
│ ├── Creates builder instance (dynim-core)
|
|
347
|
-
│ ├── Manages SSE streaming for chat/code
|
|
348
|
-
│ ├── Handles drag-and-drop, history, diffs
|
|
349
|
-
│ └── Exposes useBuilder hook
|
|
350
|
-
│
|
|
351
|
-
└── InferenceProvider (tenant customization)
|
|
352
|
-
├── Registers global SDK (window.__DYNIM__)
|
|
353
|
-
├── Loads tenant bundle script
|
|
354
|
-
├── Renders bundle into #dynim-root
|
|
355
|
-
└── Falls back to children if no customizations
|
|
356
|
-
```
|
|
357
|
-
|
|
358
|
-
## Exports
|
|
359
|
-
|
|
360
|
-
```tsx
|
|
361
|
-
// Builder
|
|
362
|
-
export { BuilderProvider, useBuilder } from './builder';
|
|
363
|
-
export { ChatProvider, useChatContext } from './builder';
|
|
364
|
-
export { MessageList, ChatInput, useChatbot } from './builder';
|
|
365
|
-
export { LockedZone, EditableZone, NonCustomizable, Customizable } from './builder';
|
|
366
|
-
|
|
367
|
-
// Inference
|
|
368
|
-
export { InferenceProvider } from './inference';
|
|
369
|
-
export { createSharedContext, getSharedContext, isSharedContextReady } from './inference';
|
|
370
|
-
|
|
371
|
-
// Re-exports everything from dynim-core
|
|
372
|
-
export * from 'dynim-core';
|
|
373
|
-
```
|
|
374
|
-
|
|
375
|
-
## Re-exports from dynim-core
|
|
376
|
-
|
|
377
|
-
For convenience, `dynim-react` re-exports all of `dynim-core`:
|
|
378
|
-
|
|
379
|
-
```tsx
|
|
380
|
-
import {
|
|
381
|
-
// State
|
|
382
|
-
createState,
|
|
383
|
-
|
|
384
|
-
// Clients
|
|
385
|
-
createClient,
|
|
386
|
-
createBuilderClient,
|
|
387
|
-
createCodeClient,
|
|
388
|
-
|
|
389
|
-
// Builder
|
|
390
|
-
createBuilder,
|
|
391
|
-
createEditorState,
|
|
392
|
-
createHistoryState,
|
|
393
|
-
createTreeState,
|
|
394
|
-
createDiffState,
|
|
395
|
-
|
|
396
|
-
// UI
|
|
397
|
-
createWidget,
|
|
398
|
-
createOverlays,
|
|
399
|
-
createFreezeOverlay,
|
|
400
|
-
createDragEngine,
|
|
401
|
-
createAIPromptPopover,
|
|
402
|
-
|
|
403
|
-
// DOM utilities
|
|
404
|
-
scanDOM,
|
|
405
|
-
getStableId,
|
|
406
|
-
findByStableId,
|
|
407
|
-
buildElementIdentifier,
|
|
408
|
-
|
|
409
|
-
// Classifier
|
|
410
|
-
createClassifier,
|
|
411
|
-
} from 'dynim-react';
|
|
412
|
-
```
|
|
413
|
-
|
|
414
|
-
## TypeScript
|
|
415
|
-
|
|
416
|
-
Full TypeScript support with exported types:
|
|
417
|
-
|
|
418
|
-
```tsx
|
|
419
|
-
import type {
|
|
420
|
-
// Config
|
|
421
|
-
BuilderConfig,
|
|
422
|
-
BuilderContextValue,
|
|
423
|
-
ChatbotConfig,
|
|
424
|
-
InferenceProviderProps,
|
|
425
|
-
DynimSDKConfig,
|
|
426
|
-
|
|
427
|
-
// Props
|
|
428
|
-
ZoneProps,
|
|
429
|
-
MessageListProps,
|
|
430
|
-
ChatInputProps,
|
|
431
|
-
|
|
432
|
-
// Data
|
|
433
|
-
Message,
|
|
434
|
-
ChatState,
|
|
435
|
-
CodeEdit,
|
|
436
|
-
CodeEvent,
|
|
437
|
-
DiffEntry,
|
|
438
|
-
BuilderMessage,
|
|
439
|
-
|
|
440
|
-
// Global
|
|
441
|
-
DynimGlobal,
|
|
442
|
-
} from 'dynim-react';
|
|
17
|
+
```bash
|
|
18
|
+
npm install dynim-react
|
|
443
19
|
```
|
|
444
|
-
|
|
445
|
-
## License
|
|
446
|
-
|
|
447
|
-
MIT
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* BuilderProvider - React integration for the visual builder
|
|
3
3
|
*
|
|
4
|
-
* Integrates the visual builder UI (floating bar,
|
|
5
|
-
*
|
|
4
|
+
* Integrates the visual builder UI (floating bar, overlays) from dynim-core.
|
|
5
|
+
* Loads tenant bundles via dynamic import() and renders them as React components.
|
|
6
6
|
*/
|
|
7
7
|
import { type ReactNode } from 'react';
|
|
8
|
-
import type { BuilderInstance, CodeEdit, CodeEvent, CodeMessage
|
|
8
|
+
import type { BuilderInstance, CodeEdit, CodeEvent, CodeMessage } from 'dynim-core';
|
|
9
9
|
export interface BuilderConfig {
|
|
10
10
|
apiBase?: string;
|
|
11
11
|
pageId?: string;
|
|
@@ -27,18 +27,8 @@ export interface BuilderConfig {
|
|
|
27
27
|
onCodeEdit?: (edit: CodeEdit) => void;
|
|
28
28
|
/** @deprecated Use onCodeMessageUpdate instead */
|
|
29
29
|
onCodeMessage?: (event: CodeEvent) => void;
|
|
30
|
-
/** @deprecated No longer needed - BuilderProvider creates internal container */
|
|
31
|
-
previewContainer?: HTMLElement;
|
|
32
30
|
/** Function to resolve bundle URL from project ID */
|
|
33
31
|
getBundleUrl?: (projectId: string) => string | Promise<string>;
|
|
34
|
-
/** If true, bundles replace children when loaded. If false, uses external previewContainer (default: true) */
|
|
35
|
-
inPlacePreview?: boolean;
|
|
36
|
-
/** Whether to auto-apply style changes from code edits (default: true) */
|
|
37
|
-
autoApplyStyles?: boolean;
|
|
38
|
-
/** Transition duration for bundle crossfade in ms (default: 300) */
|
|
39
|
-
previewTransitionDuration?: number;
|
|
40
|
-
/** Called when a style change is applied */
|
|
41
|
-
onStyleApplied?: (change: StyleChange, elements: Element[]) => void;
|
|
42
32
|
/** Called when bundle starts loading */
|
|
43
33
|
onBundleLoadStart?: (bundleUrl: string) => void;
|
|
44
34
|
/** Called when bundle finishes loading */
|
|
@@ -53,7 +43,6 @@ export interface BuilderConfig {
|
|
|
53
43
|
export interface BuilderContextValue {
|
|
54
44
|
enterBuilder: () => void;
|
|
55
45
|
exitBuilder: () => void;
|
|
56
|
-
saveBuilder: () => Promise<void>;
|
|
57
46
|
isBuilderActive: boolean;
|
|
58
47
|
getBuilder: () => BuilderInstance | null;
|
|
59
48
|
sendCode: (query: string) => Promise<void>;
|
|
@@ -66,7 +55,7 @@ export interface BuilderContextValue {
|
|
|
66
55
|
resetCodeMessage: () => void;
|
|
67
56
|
/** @deprecated Use codeMessage.edits instead */
|
|
68
57
|
codeEdits: CodeEdit[];
|
|
69
|
-
/** Load a bundle
|
|
58
|
+
/** Load a bundle by URL */
|
|
70
59
|
loadBundle: (bundleUrl: string) => Promise<void>;
|
|
71
60
|
/** Load bundle for a project (uses getBundleUrl from config) */
|
|
72
61
|
loadProjectBundle: (projectId: string) => Promise<void>;
|
|
@@ -74,19 +63,11 @@ export interface BuilderContextValue {
|
|
|
74
63
|
loadSavedBundle: (projectId: string) => Promise<void>;
|
|
75
64
|
/** Load temp bundle for a project (AI edits preview) */
|
|
76
65
|
loadTempBundle: (projectId: string) => Promise<void>;
|
|
77
|
-
/** Apply styles directly to preview DOM */
|
|
78
|
-
applyStyles: (selector: string, styles: Record<string, string>) => void;
|
|
79
|
-
/** Apply className to preview DOM */
|
|
80
|
-
applyClassName: (selector: string, className: string) => void;
|
|
81
|
-
/** Toggle CSS classes on preview DOM */
|
|
82
|
-
toggleClasses: (selector: string, add: string[], remove: string[]) => void;
|
|
83
|
-
/** Check if bundle manager is available */
|
|
84
|
-
hasBundleManager: boolean;
|
|
85
66
|
/** Check if a bundle is currently loaded */
|
|
86
67
|
isBundleLoaded: boolean;
|
|
87
68
|
/** Check if bundle is loading */
|
|
88
69
|
isBundleLoading: boolean;
|
|
89
|
-
/** Unload current bundle */
|
|
70
|
+
/** Unload current bundle (show children again) */
|
|
90
71
|
unloadBundle: () => void;
|
|
91
72
|
}
|
|
92
73
|
export interface BuilderProviderProps {
|
|
@@ -96,6 +77,9 @@ export interface BuilderProviderProps {
|
|
|
96
77
|
}
|
|
97
78
|
/**
|
|
98
79
|
* BuilderProvider - Wraps your app with builder support
|
|
80
|
+
*
|
|
81
|
+
* When a bundle is loaded, it replaces children with the bundle's App component.
|
|
82
|
+
* Bundles are loaded via dynamic import() and rendered as React components.
|
|
99
83
|
*/
|
|
100
84
|
export declare function BuilderProvider({ children, config, onBuilderReady, }: BuilderProviderProps): JSX.Element;
|
|
101
85
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BuilderProvider.d.ts","sourceRoot":"","sources":["../../src/builder/BuilderProvider.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAc,EAQZ,KAAK,SAAS,
|
|
1
|
+
{"version":3,"file":"BuilderProvider.d.ts","sourceRoot":"","sources":["../../src/builder/BuilderProvider.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAc,EAQZ,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAQf,OAAO,KAAK,EAEV,eAAe,EAEf,QAAQ,EACR,SAAS,EACT,WAAW,EACZ,MAAM,YAAY,CAAC;AAEpB,MAAM,WAAW,aAAa;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,2CAA2C;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mDAAmD;IACnD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,+DAA+D;IAC/D,UAAU,CAAC,EAAE,MAAM,OAAO,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,YAAY,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACrE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,GAAG,KAAK,KAAK,IAAI,CAAC;IACzC,oEAAoE;IACpE,mBAAmB,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IACrD,0CAA0C;IAC1C,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACtC,kDAAkD;IAClD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IAE3C,qDAAqD;IACrD,YAAY,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;IAC/D,wCAAwC;IACxC,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,0CAA0C;IAC1C,oBAAoB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,uFAAuF;IACvF,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACnC,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAChC,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACpC;AAED,MAAM,WAAW,mBAAmB;IAClC,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,eAAe,EAAE,OAAO,CAAC;IACzB,UAAU,EAAE,MAAM,eAAe,GAAG,IAAI,CAAC;IAEzC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC3C,QAAQ,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9B,WAAW,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACjC,SAAS,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/B,4CAA4C;IAC5C,WAAW,EAAE,WAAW,CAAC;IACzB,+BAA+B;IAC/B,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,gDAAgD;IAChD,SAAS,EAAE,QAAQ,EAAE,CAAC;IAGtB,2BAA2B;IAC3B,UAAU,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACjD,gEAAgE;IAChE,iBAAiB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACxD,kDAAkD;IAClD,eAAe,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACtD,wDAAwD;IACxD,cAAc,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACrD,4CAA4C;IAC5C,cAAc,EAAE,OAAO,CAAC;IACxB,iCAAiC;IACjC,eAAe,EAAE,OAAO,CAAC;IACzB,kDAAkD;IAClD,YAAY,EAAE,MAAM,IAAI,CAAC;CAC1B;AAID,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,mBAAmB,KAAK,IAAI,CAAC;CACzD;AAED;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,MAAW,EACX,cAAc,GACf,EAAE,oBAAoB,GAAG,GAAG,CAAC,OAAO,CAubpC;AAED;;GAEG;AACH,wBAAgB,UAAU,IAAI,mBAAmB,CAMhD"}
|