@molecule/app-bonds-default-react 1.0.0 → 1.0.1
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 +427 -0
- package/package.json +67 -61
package/README.md
ADDED
|
@@ -0,0 +1,427 @@
|
|
|
1
|
+
<!--
|
|
2
|
+
AUTO-GENERATED — DO NOT EDIT THIS FILE.
|
|
3
|
+
Generated by `mlcl sync-docs` from the package's src/index.ts JSDoc + mlcl/registry.json.
|
|
4
|
+
Edits here are overwritten on the next commit (molecule's pre-commit hook regenerates).
|
|
5
|
+
To change this document, edit the module-level JSDoc in src/index.ts.
|
|
6
|
+
Generated: 2026-08-04T01:50:10.868Z
|
|
7
|
+
-->
|
|
8
|
+
|
|
9
|
+
# @molecule/app-bonds-default-react
|
|
10
|
+
|
|
11
|
+
> **Auto-generated, AI-first package reference** for the [molecule.dev](https://molecule.dev) ecosystem.
|
|
12
|
+
> It is written to be read by coding agents as much as by people, and is generated from this
|
|
13
|
+
> package's source — edit `src/index.ts` JSDoc, not this file.
|
|
14
|
+
|
|
15
|
+
`@molecule/app-bonds-default-react` — default app-side bond wirings for the
|
|
16
|
+
React fleet stack, replacing the byte-identical per-app files:
|
|
17
|
+
|
|
18
|
+
- `bootstrapApp({ App, authClient, setupProviders, registerPWA? })` — the
|
|
19
|
+
whole scaffolded `src/main.tsx`: awaits `setupProviders()` BEFORE the
|
|
20
|
+
first render, kicks off `authClient.initialize()` (best-effort), mounts
|
|
21
|
+
`<App />` in StrictMode on `#root`, then registers the PWA.
|
|
22
|
+
- `setupAllDefaultBonds()` — wires the SEVEN universal bonds in one call:
|
|
23
|
+
fonts-arimo, routing-react-router, storage-localstorage, styling-tailwind
|
|
24
|
+
(registers the tailwind-merge class merger), theme-css-variables
|
|
25
|
+
(light + dark via `getDefaultThemeProvider()`), ui-tailwind ClassMap,
|
|
26
|
+
icons-molecule. Each also exists as an individual `setupApp*()` for apps
|
|
27
|
+
that wire a la carte (per-app `app/src/bonds/<name>.ts` files stay 1-line
|
|
28
|
+
re-exports of these).
|
|
29
|
+
- Auth/http factories — `createDefaultAuthClient(authConfig)` returns
|
|
30
|
+
`{ authClient, setupAuthDefault }`; the `...WithHttpSync` /
|
|
31
|
+
`...WithFetchClient` variants also keep the bonded http client's bearer
|
|
32
|
+
token in sync with auth events.
|
|
33
|
+
|
|
34
|
+
## Quick Start
|
|
35
|
+
|
|
36
|
+
```tsx
|
|
37
|
+
// src/main.tsx
|
|
38
|
+
import {
|
|
39
|
+
bootstrapApp,
|
|
40
|
+
createDefaultAuthClientWithHttpSync,
|
|
41
|
+
setupAllDefaultBonds,
|
|
42
|
+
setupAppCodeEditorMonaco,
|
|
43
|
+
} from '@molecule/app-bonds-default-react'
|
|
44
|
+
|
|
45
|
+
import { App } from './App.js'
|
|
46
|
+
import { authConfig } from './config.js'
|
|
47
|
+
|
|
48
|
+
const { authClient, setupAuthDefault } = createDefaultAuthClientWithHttpSync(authConfig)
|
|
49
|
+
|
|
50
|
+
bootstrapApp({
|
|
51
|
+
App,
|
|
52
|
+
authClient,
|
|
53
|
+
// Async so optional async bonds are AWAITED before the first render.
|
|
54
|
+
setupProviders: async () => {
|
|
55
|
+
setupAllDefaultBonds()
|
|
56
|
+
setupAuthDefault()
|
|
57
|
+
await setupAppCodeEditorMonaco() // only if the app uses the code editor
|
|
58
|
+
},
|
|
59
|
+
})
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
## Type
|
|
63
|
+
|
|
64
|
+
`feature`
|
|
65
|
+
|
|
66
|
+
## Installation
|
|
67
|
+
|
|
68
|
+
```bash
|
|
69
|
+
npm install @molecule/app-bonds-default-react @molecule/app-auth @molecule/app-charts-chartjs @molecule/app-code-editor @molecule/app-code-editor-monaco @molecule/app-command-palette @molecule/app-command-palette-cmdk @molecule/app-drag-drop @molecule/app-drag-drop-dndkit @molecule/app-fonts @molecule/app-fonts-arimo @molecule/app-http @molecule/app-icons @molecule/app-icons-molecule @molecule/app-keyboard-shortcuts @molecule/app-keyboard-shortcuts-hotkeys @molecule/app-maps-leaflet @molecule/app-realtime @molecule/app-realtime-socketio @molecule/app-routing @molecule/app-routing-react-router @molecule/app-storage @molecule/app-storage-localstorage @molecule/app-styling-tailwind @molecule/app-theme @molecule/app-theme-css-variables @molecule/app-ui @molecule/app-ui-tailwind @molecule/app-video-hls @molecule/app-virtual-scroll @molecule/app-virtual-scroll-tanstack react react-dom
|
|
70
|
+
npm install -D @types/react @types/react-dom
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
## API
|
|
74
|
+
|
|
75
|
+
### Functions
|
|
76
|
+
|
|
77
|
+
#### `bootstrapApp(opts)`
|
|
78
|
+
|
|
79
|
+
Boot the React app: wire bonds, kick off auth initialization, mount
|
|
80
|
+
`<App />` inside `<StrictMode>` to `#root`, and (optionally) register
|
|
81
|
+
the PWA service worker.
|
|
82
|
+
|
|
83
|
+
Replaces the 20-line per-app `src/main.tsx` that 97 fleet apps shipped
|
|
84
|
+
byte-identically.
|
|
85
|
+
|
|
86
|
+
```typescript
|
|
87
|
+
function bootstrapApp(opts: {
|
|
88
|
+
App: ComponentType
|
|
89
|
+
authClient: { initialize: () => Promise<void> }
|
|
90
|
+
setupProviders: () => void | Promise<void>
|
|
91
|
+
registerPWA?: () => void
|
|
92
|
+
}): void
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
#### `createDefaultAuthClient(authConfig)`
|
|
96
|
+
|
|
97
|
+
Builds the default JWT auth client + wires it into `@molecule/app-auth`.
|
|
98
|
+
|
|
99
|
+
Replaces the 16-line per-app `bonds/auth-default.ts` that 93 fleet
|
|
100
|
+
apps shipped byte-identically. Apps pass their own `authConfig`
|
|
101
|
+
(which lives in `src/config.ts`).
|
|
102
|
+
|
|
103
|
+
```typescript
|
|
104
|
+
function createDefaultAuthClient(authConfig: AuthClientConfig): {
|
|
105
|
+
authClient: AuthClient<TUser>
|
|
106
|
+
setupAuthDefault: () => void
|
|
107
|
+
}
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
#### `createDefaultAuthClientWithFetchClient(authConfig, fetchClientOptions)`
|
|
111
|
+
|
|
112
|
+
Most aggressive variant — bonds a fetch-based HTTP client with the
|
|
113
|
+
given `baseURL` (so molecule pkg `useGet('/path')` calls hit
|
|
114
|
+
`${baseURL}/path` instead of the SPA's catch-all route), AND keeps
|
|
115
|
+
its bearer token in sync with auth events.
|
|
116
|
+
|
|
117
|
+
Used by apps where molecule packages render pricing / billing /
|
|
118
|
+
other authed JSON-fetching screens that need both behaviors.
|
|
119
|
+
|
|
120
|
+
```typescript
|
|
121
|
+
function createDefaultAuthClientWithFetchClient(
|
|
122
|
+
authConfig: AuthClientConfig,
|
|
123
|
+
fetchClientOptions: { baseURL: string; withCredentials?: boolean },
|
|
124
|
+
): { authClient: AuthClient<TUser>; setupAuthDefault: () => void }
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
#### `createDefaultAuthClientWithHttpSync(authConfig)`
|
|
128
|
+
|
|
129
|
+
Variant of `createDefaultAuthClient` that also keeps the bonded
|
|
130
|
+
`@molecule/app-http` client's bearer token in sync with auth events
|
|
131
|
+
(login / register / refresh / logout). Required by apps whose http
|
|
132
|
+
client must carry the JWT on every request — without this wiring,
|
|
133
|
+
authed endpoints return 401 after page reloads or token refresh.
|
|
134
|
+
|
|
135
|
+
Hydrates the HTTP client's token from the persisted auth state
|
|
136
|
+
on setup, then listens for auth events to keep them aligned.
|
|
137
|
+
|
|
138
|
+
```typescript
|
|
139
|
+
function createDefaultAuthClientWithHttpSync(authConfig: AuthClientConfig): {
|
|
140
|
+
authClient: AuthClient<TUser>
|
|
141
|
+
setupAuthDefault: () => void
|
|
142
|
+
}
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
#### `createDefaultHttpClient(baseURL)`
|
|
146
|
+
|
|
147
|
+
Builds the default fetch-based HTTP client + wires it into
|
|
148
|
+
`@molecule/app-http`. Replaces the per-app `bonds/http-default.ts`
|
|
149
|
+
shipped by ~52 fleet apps.
|
|
150
|
+
|
|
151
|
+
```typescript
|
|
152
|
+
function createDefaultHttpClient(baseURL: string): {
|
|
153
|
+
httpClient: HttpClient
|
|
154
|
+
setupHttpDefault: () => void
|
|
155
|
+
}
|
|
156
|
+
```
|
|
157
|
+
|
|
158
|
+
#### `createDefaultHttpClientWithAuthBearer(opts)`
|
|
159
|
+
|
|
160
|
+
Variant of `createDefaultHttpClient` that adds a request interceptor
|
|
161
|
+
injecting the JWT bearer token from the auth client AND (optionally)
|
|
162
|
+
stripping a leading `/api/` from request URLs.
|
|
163
|
+
|
|
164
|
+
Replaces ~20 per-app `bonds/http-default.ts` files that hand-roll
|
|
165
|
+
this same wiring. Pass `stripApiPrefix: true` when the app uses
|
|
166
|
+
`baseURL: '/api'` to handle pages that pass `/api/`-prefixed paths
|
|
167
|
+
(would otherwise resolve to `/api/api/...` and 404).
|
|
168
|
+
|
|
169
|
+
```typescript
|
|
170
|
+
function createDefaultHttpClientWithAuthBearer(opts: {
|
|
171
|
+
baseURL: string
|
|
172
|
+
withCredentials?: boolean
|
|
173
|
+
stripApiPrefix?: boolean
|
|
174
|
+
getToken: () => string | null | undefined
|
|
175
|
+
}): { httpClient: HttpClient; setupHttpDefault: () => void }
|
|
176
|
+
```
|
|
177
|
+
|
|
178
|
+
#### `getDefaultThemeProvider()`
|
|
179
|
+
|
|
180
|
+
Returns (and lazily constructs) the shared default CSS-variables theme provider.
|
|
181
|
+
|
|
182
|
+
```typescript
|
|
183
|
+
function getDefaultThemeProvider(): ThemeProvider
|
|
184
|
+
```
|
|
185
|
+
|
|
186
|
+
#### `setupAllDefaultBonds()`
|
|
187
|
+
|
|
188
|
+
Wires all 7 universal app-side bonds in one call — fonts, routing,
|
|
189
|
+
storage, styling, theme, UI ClassMap, icons (in that order). Auth
|
|
190
|
+
|
|
191
|
+
- i18n stay per-app because they need app-specific config.
|
|
192
|
+
|
|
193
|
+
Replaces 9 individual setupX() calls in per-app `bonds/index.ts`.
|
|
194
|
+
|
|
195
|
+
```typescript
|
|
196
|
+
function setupAllDefaultBonds(): void
|
|
197
|
+
```
|
|
198
|
+
|
|
199
|
+
#### `setupAppChartsChartjs()`
|
|
200
|
+
|
|
201
|
+
Wires `@molecule/app-charts-chartjs` (Chart.js) to `@molecule/app-charts` — real
|
|
202
|
+
line/bar/pie/etc. charts instead of the core's placeholder panel.
|
|
203
|
+
|
|
204
|
+
```typescript
|
|
205
|
+
function setupAppChartsChartjs(): Promise<void>
|
|
206
|
+
```
|
|
207
|
+
|
|
208
|
+
#### `setupAppCodeEditorMonaco()`
|
|
209
|
+
|
|
210
|
+
Wires `@molecule/app-code-editor-monaco` to `@molecule/app-code-editor`.
|
|
211
|
+
|
|
212
|
+
```typescript
|
|
213
|
+
function setupAppCodeEditorMonaco(): Promise<void>
|
|
214
|
+
```
|
|
215
|
+
|
|
216
|
+
#### `setupAppCommandPaletteCmdk()`
|
|
217
|
+
|
|
218
|
+
Wires `@molecule/app-command-palette-cmdk` to `@molecule/app-command-palette`.
|
|
219
|
+
|
|
220
|
+
```typescript
|
|
221
|
+
function setupAppCommandPaletteCmdk(): Promise<void>
|
|
222
|
+
```
|
|
223
|
+
|
|
224
|
+
#### `setupAppDragDropDndkit()`
|
|
225
|
+
|
|
226
|
+
Wires `@molecule/app-drag-drop-dndkit` to `@molecule/app-drag-drop`.
|
|
227
|
+
|
|
228
|
+
```typescript
|
|
229
|
+
function setupAppDragDropDndkit(): Promise<void>
|
|
230
|
+
```
|
|
231
|
+
|
|
232
|
+
#### `setupAppFontsArimo()`
|
|
233
|
+
|
|
234
|
+
Wires `@molecule/app-fonts-arimo` to `@molecule/app-fonts`.
|
|
235
|
+
|
|
236
|
+
```typescript
|
|
237
|
+
function setupAppFontsArimo(): void
|
|
238
|
+
```
|
|
239
|
+
|
|
240
|
+
#### `setupAppIconsMolecule()`
|
|
241
|
+
|
|
242
|
+
Wires `@molecule/app-icons-molecule` to `@molecule/app-icons`.
|
|
243
|
+
|
|
244
|
+
```typescript
|
|
245
|
+
function setupAppIconsMolecule(): void
|
|
246
|
+
```
|
|
247
|
+
|
|
248
|
+
#### `setupAppKeyboardShortcutsHotkeys()`
|
|
249
|
+
|
|
250
|
+
Wires `@molecule/app-keyboard-shortcuts-hotkeys` to `@molecule/app-keyboard-shortcuts`.
|
|
251
|
+
|
|
252
|
+
```typescript
|
|
253
|
+
function setupAppKeyboardShortcutsHotkeys(): Promise<void>
|
|
254
|
+
```
|
|
255
|
+
|
|
256
|
+
#### `setupAppMapsLeaflet()`
|
|
257
|
+
|
|
258
|
+
Wires `@molecule/app-maps-leaflet` (Leaflet + OpenStreetMap, no API key) to
|
|
259
|
+
`@molecule/app-maps` — a real slippy map instead of the core's grey placeholder.
|
|
260
|
+
REQUIRES `import 'leaflet/dist/leaflet.css'` once in the app entry (the scaffolded
|
|
261
|
+
`bonds/app-maps-leaflet.ts` does this); without it tiles + markers mis-position.
|
|
262
|
+
|
|
263
|
+
```typescript
|
|
264
|
+
function setupAppMapsLeaflet(): Promise<void>
|
|
265
|
+
```
|
|
266
|
+
|
|
267
|
+
#### `setupAppRealtimeSocketio()`
|
|
268
|
+
|
|
269
|
+
Wires `@molecule/app-realtime-socketio` to `@molecule/app-realtime`.
|
|
270
|
+
|
|
271
|
+
```typescript
|
|
272
|
+
function setupAppRealtimeSocketio(): Promise<void>
|
|
273
|
+
```
|
|
274
|
+
|
|
275
|
+
#### `setupAppRoutingReactRouter()`
|
|
276
|
+
|
|
277
|
+
Wires `@molecule/app-routing-react-router` to `@molecule/app-routing`.
|
|
278
|
+
|
|
279
|
+
```typescript
|
|
280
|
+
function setupAppRoutingReactRouter(): void
|
|
281
|
+
```
|
|
282
|
+
|
|
283
|
+
#### `setupAppStorageLocalstorage()`
|
|
284
|
+
|
|
285
|
+
Wires `@molecule/app-storage-localstorage` to `@molecule/app-storage`.
|
|
286
|
+
|
|
287
|
+
```typescript
|
|
288
|
+
function setupAppStorageLocalstorage(): void
|
|
289
|
+
```
|
|
290
|
+
|
|
291
|
+
#### `setupAppStylingTailwind()`
|
|
292
|
+
|
|
293
|
+
Wires `@molecule/app-styling-tailwind`: registers `tailwind-merge` as the
|
|
294
|
+
class merger for `@molecule/app-styling`'s `cn()`, so conflicting Tailwind
|
|
295
|
+
utilities resolve (last wins). Tailwind itself is configured via env vars +
|
|
296
|
+
the Vite plugin; this is the one runtime hook the framework-agnostic styling
|
|
297
|
+
core needs so it carries no Tailwind dependency of its own.
|
|
298
|
+
|
|
299
|
+
```typescript
|
|
300
|
+
function setupAppStylingTailwind(): void
|
|
301
|
+
```
|
|
302
|
+
|
|
303
|
+
#### `setupAppThemeCssVariables()`
|
|
304
|
+
|
|
305
|
+
Wires the default light + dark CSS-variables theme provider to `@molecule/app-theme`.
|
|
306
|
+
|
|
307
|
+
```typescript
|
|
308
|
+
function setupAppThemeCssVariables(): void
|
|
309
|
+
```
|
|
310
|
+
|
|
311
|
+
#### `setupAppUiTailwind()`
|
|
312
|
+
|
|
313
|
+
Wires `@molecule/app-ui-tailwind` `classMap` to `@molecule/app-ui`.
|
|
314
|
+
|
|
315
|
+
```typescript
|
|
316
|
+
function setupAppUiTailwind(): void
|
|
317
|
+
```
|
|
318
|
+
|
|
319
|
+
#### `setupAppVideoHls()`
|
|
320
|
+
|
|
321
|
+
Wires `@molecule/app-video-hls` (hls.js — HLS streaming everywhere) to `@molecule/app-video`.
|
|
322
|
+
|
|
323
|
+
```typescript
|
|
324
|
+
function setupAppVideoHls(): Promise<void>
|
|
325
|
+
```
|
|
326
|
+
|
|
327
|
+
#### `setupAppVirtualScrollTanstack()`
|
|
328
|
+
|
|
329
|
+
Wires `@molecule/app-virtual-scroll-tanstack` to `@molecule/app-virtual-scroll`.
|
|
330
|
+
|
|
331
|
+
```typescript
|
|
332
|
+
function setupAppVirtualScrollTanstack(): Promise<void>
|
|
333
|
+
```
|
|
334
|
+
|
|
335
|
+
## Injection Notes
|
|
336
|
+
|
|
337
|
+
### Requirements
|
|
338
|
+
|
|
339
|
+
Peer dependencies:
|
|
340
|
+
|
|
341
|
+
- `@molecule/app-auth` ^1.0.1
|
|
342
|
+
- `@molecule/app-charts-chartjs` 1.0.1
|
|
343
|
+
- `@molecule/app-code-editor` ^1.0.1
|
|
344
|
+
- `@molecule/app-code-editor-monaco` ^1.0.1
|
|
345
|
+
- `@molecule/app-command-palette` ^1.0.1
|
|
346
|
+
- `@molecule/app-command-palette-cmdk` ^1.0.1
|
|
347
|
+
- `@molecule/app-drag-drop` ^1.0.1
|
|
348
|
+
- `@molecule/app-drag-drop-dndkit` ^1.0.1
|
|
349
|
+
- `@molecule/app-fonts` ^1.0.1
|
|
350
|
+
- `@molecule/app-fonts-arimo` ^1.0.1
|
|
351
|
+
- `@molecule/app-http` ^1.0.1
|
|
352
|
+
- `@molecule/app-icons` ^1.0.1
|
|
353
|
+
- `@molecule/app-icons-molecule` ^1.0.1
|
|
354
|
+
- `@molecule/app-keyboard-shortcuts` ^1.0.1
|
|
355
|
+
- `@molecule/app-keyboard-shortcuts-hotkeys` ^1.0.1
|
|
356
|
+
- `@molecule/app-maps-leaflet` 1.0.1
|
|
357
|
+
- `@molecule/app-realtime` ^1.0.1
|
|
358
|
+
- `@molecule/app-realtime-socketio` ^1.0.1
|
|
359
|
+
- `@molecule/app-routing` ^1.0.1
|
|
360
|
+
- `@molecule/app-routing-react-router` ^1.0.1
|
|
361
|
+
- `@molecule/app-storage` ^1.0.1
|
|
362
|
+
- `@molecule/app-storage-localstorage` ^1.0.1
|
|
363
|
+
- `@molecule/app-styling-tailwind` ^1.0.1
|
|
364
|
+
- `@molecule/app-theme` ^1.0.1
|
|
365
|
+
- `@molecule/app-theme-css-variables` ^1.0.1
|
|
366
|
+
- `@molecule/app-ui` ^1.0.1
|
|
367
|
+
- `@molecule/app-ui-tailwind` ^1.0.1
|
|
368
|
+
- `@molecule/app-video-hls` 1.0.1
|
|
369
|
+
- `@molecule/app-virtual-scroll` ^1.0.1
|
|
370
|
+
- `@molecule/app-virtual-scroll-tanstack` ^1.0.1
|
|
371
|
+
- `react` ^18.0.0 || ^19.0.0
|
|
372
|
+
- `react-dom` ^18.0.0 || ^19.0.0
|
|
373
|
+
|
|
374
|
+
### Runtime Dependencies
|
|
375
|
+
|
|
376
|
+
- `@molecule/app-auth`
|
|
377
|
+
- `@molecule/app-charts-chartjs`
|
|
378
|
+
- `@molecule/app-code-editor`
|
|
379
|
+
- `@molecule/app-code-editor-monaco`
|
|
380
|
+
- `@molecule/app-command-palette`
|
|
381
|
+
- `@molecule/app-command-palette-cmdk`
|
|
382
|
+
- `@molecule/app-drag-drop`
|
|
383
|
+
- `@molecule/app-drag-drop-dndkit`
|
|
384
|
+
- `@molecule/app-fonts`
|
|
385
|
+
- `@molecule/app-fonts-arimo`
|
|
386
|
+
- `@molecule/app-http`
|
|
387
|
+
- `@molecule/app-icons`
|
|
388
|
+
- `@molecule/app-icons-molecule`
|
|
389
|
+
- `@molecule/app-keyboard-shortcuts`
|
|
390
|
+
- `@molecule/app-keyboard-shortcuts-hotkeys`
|
|
391
|
+
- `@molecule/app-maps-leaflet`
|
|
392
|
+
- `@molecule/app-realtime`
|
|
393
|
+
- `@molecule/app-realtime-socketio`
|
|
394
|
+
- `@molecule/app-routing`
|
|
395
|
+
- `@molecule/app-routing-react-router`
|
|
396
|
+
- `@molecule/app-storage`
|
|
397
|
+
- `@molecule/app-storage-localstorage`
|
|
398
|
+
- `@molecule/app-styling-tailwind`
|
|
399
|
+
- `@molecule/app-theme`
|
|
400
|
+
- `@molecule/app-theme-css-variables`
|
|
401
|
+
- `@molecule/app-ui`
|
|
402
|
+
- `@molecule/app-ui-tailwind`
|
|
403
|
+
- `@molecule/app-video-hls`
|
|
404
|
+
- `@molecule/app-virtual-scroll`
|
|
405
|
+
- `@molecule/app-virtual-scroll-tanstack`
|
|
406
|
+
- `react`
|
|
407
|
+
- `react-dom`
|
|
408
|
+
|
|
409
|
+
- `setupAllDefaultBonds()` does NOT wire the optional bonds. Those ship as
|
|
410
|
+
separate ASYNC setups — `setupAppRealtimeSocketio`,
|
|
411
|
+
`setupAppKeyboardShortcutsHotkeys`, `setupAppCommandPaletteCmdk`,
|
|
412
|
+
`setupAppCodeEditorMonaco`, `setupAppVirtualScrollTanstack`,
|
|
413
|
+
`setupAppDragDropDndkit`, `setupAppChartsChartjs`, `setupAppMapsLeaflet`,
|
|
414
|
+
`setupAppVideoHls` — and MUST be awaited inside `setupProviders`
|
|
415
|
+
(make it async). `bootstrapApp` awaits `setupProviders()` before mounting
|
|
416
|
+
so bonded providers exist by a component's first effect; a fire-and-forget
|
|
417
|
+
async setup races the mount and intermittently loses.
|
|
418
|
+
- Plain `createDefaultAuthClient` does NOT attach the JWT to the bonded
|
|
419
|
+
http client. If molecule packages call authed `/api` endpoints, use
|
|
420
|
+
`createDefaultAuthClientWithHttpSync` (or `...WithFetchClient` to also
|
|
421
|
+
bond a fetch client with a `baseURL`) — otherwise those endpoints return
|
|
422
|
+
401 after a page reload or token refresh.
|
|
423
|
+
- `getDefaultThemeProvider()` constructs lazily because the CSS-variables
|
|
424
|
+
theme provider touches `localStorage` at construction — importing this
|
|
425
|
+
package is SSR/test-safe, but only CALL it in a DOM environment. Apps
|
|
426
|
+
with custom themes build their own provider and skip
|
|
427
|
+
`setupAppThemeCssVariables()`.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@molecule/app-bonds-default-react",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.1",
|
|
4
4
|
"description": "Default app-side bond wirings for React+Tailwind+react-router+localStorage+Arimo font+molecule icons. 5 setup functions consolidating 665 byte-identical per-app bond wiring files across the fleet.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -17,7 +17,8 @@
|
|
|
17
17
|
}
|
|
18
18
|
},
|
|
19
19
|
"files": [
|
|
20
|
-
"dist"
|
|
20
|
+
"dist",
|
|
21
|
+
"README.md"
|
|
21
22
|
],
|
|
22
23
|
"keywords": [
|
|
23
24
|
"molecule",
|
|
@@ -26,36 +27,41 @@
|
|
|
26
27
|
"react"
|
|
27
28
|
],
|
|
28
29
|
"license": "Apache-2.0",
|
|
30
|
+
"repository": {
|
|
31
|
+
"type": "git",
|
|
32
|
+
"url": "https://github.com/molecule-dev/molecule.git",
|
|
33
|
+
"directory": "packages/app/infrastructure/bonds-default-react"
|
|
34
|
+
},
|
|
29
35
|
"devDependencies": {
|
|
30
|
-
"@molecule/app-auth": "1.0.
|
|
31
|
-
"@molecule/app-charts-chartjs": "1.0.
|
|
32
|
-
"@molecule/app-code-editor": "1.0.
|
|
33
|
-
"@molecule/app-code-editor-monaco": "1.0.
|
|
34
|
-
"@molecule/app-command-palette": "1.0.
|
|
35
|
-
"@molecule/app-command-palette-cmdk": "1.0.
|
|
36
|
-
"@molecule/app-drag-drop": "1.0.
|
|
37
|
-
"@molecule/app-drag-drop-dndkit": "1.0.
|
|
38
|
-
"@molecule/app-fonts": "1.0.
|
|
39
|
-
"@molecule/app-fonts-arimo": "1.0.
|
|
40
|
-
"@molecule/app-http": "1.0.
|
|
41
|
-
"@molecule/app-icons": "1.0.
|
|
42
|
-
"@molecule/app-icons-molecule": "1.0.
|
|
43
|
-
"@molecule/app-keyboard-shortcuts": "1.0.
|
|
44
|
-
"@molecule/app-keyboard-shortcuts-hotkeys": "1.0.
|
|
45
|
-
"@molecule/app-maps-leaflet": "1.0.
|
|
46
|
-
"@molecule/app-realtime": "1.0.
|
|
47
|
-
"@molecule/app-realtime-socketio": "1.0.
|
|
48
|
-
"@molecule/app-routing": "1.0.
|
|
49
|
-
"@molecule/app-routing-react-router": "1.0.
|
|
50
|
-
"@molecule/app-storage": "1.0.
|
|
51
|
-
"@molecule/app-storage-localstorage": "1.0.
|
|
52
|
-
"@molecule/app-theme": "1.0.
|
|
53
|
-
"@molecule/app-theme-css-variables": "1.0.
|
|
54
|
-
"@molecule/app-ui": "1.0.
|
|
55
|
-
"@molecule/app-ui-tailwind": "1.0.
|
|
56
|
-
"@molecule/app-video-hls": "1.0.
|
|
57
|
-
"@molecule/app-virtual-scroll": "1.0.
|
|
58
|
-
"@molecule/app-virtual-scroll-tanstack": "1.0.
|
|
36
|
+
"@molecule/app-auth": "1.0.1",
|
|
37
|
+
"@molecule/app-charts-chartjs": "1.0.1",
|
|
38
|
+
"@molecule/app-code-editor": "1.0.1",
|
|
39
|
+
"@molecule/app-code-editor-monaco": "1.0.1",
|
|
40
|
+
"@molecule/app-command-palette": "1.0.1",
|
|
41
|
+
"@molecule/app-command-palette-cmdk": "1.0.1",
|
|
42
|
+
"@molecule/app-drag-drop": "1.0.1",
|
|
43
|
+
"@molecule/app-drag-drop-dndkit": "1.0.1",
|
|
44
|
+
"@molecule/app-fonts": "1.0.1",
|
|
45
|
+
"@molecule/app-fonts-arimo": "1.0.1",
|
|
46
|
+
"@molecule/app-http": "1.0.1",
|
|
47
|
+
"@molecule/app-icons": "1.0.1",
|
|
48
|
+
"@molecule/app-icons-molecule": "1.0.1",
|
|
49
|
+
"@molecule/app-keyboard-shortcuts": "1.0.1",
|
|
50
|
+
"@molecule/app-keyboard-shortcuts-hotkeys": "1.0.1",
|
|
51
|
+
"@molecule/app-maps-leaflet": "1.0.1",
|
|
52
|
+
"@molecule/app-realtime": "1.0.1",
|
|
53
|
+
"@molecule/app-realtime-socketio": "1.0.1",
|
|
54
|
+
"@molecule/app-routing": "1.0.1",
|
|
55
|
+
"@molecule/app-routing-react-router": "1.0.1",
|
|
56
|
+
"@molecule/app-storage": "1.0.1",
|
|
57
|
+
"@molecule/app-storage-localstorage": "1.0.1",
|
|
58
|
+
"@molecule/app-theme": "1.0.1",
|
|
59
|
+
"@molecule/app-theme-css-variables": "1.0.1",
|
|
60
|
+
"@molecule/app-ui": "1.0.1",
|
|
61
|
+
"@molecule/app-ui-tailwind": "1.0.1",
|
|
62
|
+
"@molecule/app-video-hls": "1.0.1",
|
|
63
|
+
"@molecule/app-virtual-scroll": "1.0.1",
|
|
64
|
+
"@molecule/app-virtual-scroll-tanstack": "1.0.1",
|
|
59
65
|
"@types/node": "26.1.2",
|
|
60
66
|
"@types/react": "19.2.17",
|
|
61
67
|
"@types/react-dom": "19.2.3",
|
|
@@ -66,36 +72,36 @@
|
|
|
66
72
|
"vitest": "4.1.10"
|
|
67
73
|
},
|
|
68
74
|
"peerDependencies": {
|
|
69
|
-
"@molecule/app-auth": "^1.0.
|
|
70
|
-
"@molecule/app-charts-chartjs": "1.0.
|
|
71
|
-
"@molecule/app-code-editor": "^1.0.
|
|
72
|
-
"@molecule/app-code-editor-monaco": "^1.0.
|
|
73
|
-
"@molecule/app-command-palette": "^1.0.
|
|
74
|
-
"@molecule/app-command-palette-cmdk": "^1.0.
|
|
75
|
-
"@molecule/app-drag-drop": "^1.0.
|
|
76
|
-
"@molecule/app-drag-drop-dndkit": "^1.0.
|
|
77
|
-
"@molecule/app-fonts": "^1.0.
|
|
78
|
-
"@molecule/app-fonts-arimo": "^1.0.
|
|
79
|
-
"@molecule/app-http": "^1.0.
|
|
80
|
-
"@molecule/app-icons": "^1.0.
|
|
81
|
-
"@molecule/app-icons-molecule": "^1.0.
|
|
82
|
-
"@molecule/app-keyboard-shortcuts": "^1.0.
|
|
83
|
-
"@molecule/app-keyboard-shortcuts-hotkeys": "^1.0.
|
|
84
|
-
"@molecule/app-maps-leaflet": "1.0.
|
|
85
|
-
"@molecule/app-realtime": "^1.0.
|
|
86
|
-
"@molecule/app-realtime-socketio": "^1.0.
|
|
87
|
-
"@molecule/app-routing": "^1.0.
|
|
88
|
-
"@molecule/app-routing-react-router": "^1.0.
|
|
89
|
-
"@molecule/app-storage": "^1.0.
|
|
90
|
-
"@molecule/app-storage-localstorage": "^1.0.
|
|
91
|
-
"@molecule/app-styling-tailwind": "^1.0.
|
|
92
|
-
"@molecule/app-theme": "^1.0.
|
|
93
|
-
"@molecule/app-theme-css-variables": "^1.0.
|
|
94
|
-
"@molecule/app-ui": "^1.0.
|
|
95
|
-
"@molecule/app-ui-tailwind": "^1.0.
|
|
96
|
-
"@molecule/app-video-hls": "1.0.
|
|
97
|
-
"@molecule/app-virtual-scroll": "^1.0.
|
|
98
|
-
"@molecule/app-virtual-scroll-tanstack": "^1.0.
|
|
75
|
+
"@molecule/app-auth": "^1.0.1",
|
|
76
|
+
"@molecule/app-charts-chartjs": "1.0.1",
|
|
77
|
+
"@molecule/app-code-editor": "^1.0.1",
|
|
78
|
+
"@molecule/app-code-editor-monaco": "^1.0.1",
|
|
79
|
+
"@molecule/app-command-palette": "^1.0.1",
|
|
80
|
+
"@molecule/app-command-palette-cmdk": "^1.0.1",
|
|
81
|
+
"@molecule/app-drag-drop": "^1.0.1",
|
|
82
|
+
"@molecule/app-drag-drop-dndkit": "^1.0.1",
|
|
83
|
+
"@molecule/app-fonts": "^1.0.1",
|
|
84
|
+
"@molecule/app-fonts-arimo": "^1.0.1",
|
|
85
|
+
"@molecule/app-http": "^1.0.1",
|
|
86
|
+
"@molecule/app-icons": "^1.0.1",
|
|
87
|
+
"@molecule/app-icons-molecule": "^1.0.1",
|
|
88
|
+
"@molecule/app-keyboard-shortcuts": "^1.0.1",
|
|
89
|
+
"@molecule/app-keyboard-shortcuts-hotkeys": "^1.0.1",
|
|
90
|
+
"@molecule/app-maps-leaflet": "1.0.1",
|
|
91
|
+
"@molecule/app-realtime": "^1.0.1",
|
|
92
|
+
"@molecule/app-realtime-socketio": "^1.0.1",
|
|
93
|
+
"@molecule/app-routing": "^1.0.1",
|
|
94
|
+
"@molecule/app-routing-react-router": "^1.0.1",
|
|
95
|
+
"@molecule/app-storage": "^1.0.1",
|
|
96
|
+
"@molecule/app-storage-localstorage": "^1.0.1",
|
|
97
|
+
"@molecule/app-styling-tailwind": "^1.0.1",
|
|
98
|
+
"@molecule/app-theme": "^1.0.1",
|
|
99
|
+
"@molecule/app-theme-css-variables": "^1.0.1",
|
|
100
|
+
"@molecule/app-ui": "^1.0.1",
|
|
101
|
+
"@molecule/app-ui-tailwind": "^1.0.1",
|
|
102
|
+
"@molecule/app-video-hls": "1.0.1",
|
|
103
|
+
"@molecule/app-virtual-scroll": "^1.0.1",
|
|
104
|
+
"@molecule/app-virtual-scroll-tanstack": "^1.0.1",
|
|
99
105
|
"react": "^18.0.0 || ^19.0.0",
|
|
100
106
|
"react-dom": "^18.0.0 || ^19.0.0"
|
|
101
107
|
},
|