wu-framework 1.1.17 → 1.1.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (42) hide show
  1. package/LICENSE +39 -39
  2. package/README.md +440 -440
  3. package/integrations/astro/README.md +127 -127
  4. package/integrations/astro/WuApp.astro +63 -63
  5. package/integrations/astro/WuShell.astro +39 -39
  6. package/integrations/astro/index.js +68 -68
  7. package/integrations/astro/package.json +38 -38
  8. package/integrations/astro/types.d.ts +53 -53
  9. package/package.json +42 -2
  10. package/src/adapters/alpine/index.d.ts +60 -0
  11. package/src/adapters/alpine/index.js +231 -0
  12. package/src/adapters/alpine.d.ts +3 -0
  13. package/src/adapters/alpine.js +3 -0
  14. package/src/adapters/htmx/index.d.ts +60 -0
  15. package/src/adapters/htmx/index.js +242 -0
  16. package/src/adapters/htmx.d.ts +3 -0
  17. package/src/adapters/htmx.js +3 -0
  18. package/src/adapters/index.js +60 -3
  19. package/src/adapters/qwik/index.d.ts +52 -0
  20. package/src/adapters/qwik/index.js +214 -0
  21. package/src/adapters/qwik.d.ts +3 -0
  22. package/src/adapters/qwik.js +3 -0
  23. package/src/adapters/react/ai.js +135 -135
  24. package/src/adapters/react/index.d.ts +246 -246
  25. package/src/adapters/react/index.js +695 -695
  26. package/src/adapters/stencil/index.d.ts +54 -0
  27. package/src/adapters/stencil/index.js +228 -0
  28. package/src/adapters/stencil.d.ts +3 -0
  29. package/src/adapters/stencil.js +3 -0
  30. package/src/adapters/stimulus/index.d.ts +60 -0
  31. package/src/adapters/stimulus/index.js +255 -0
  32. package/src/adapters/stimulus.d.ts +3 -0
  33. package/src/adapters/stimulus.js +3 -0
  34. package/src/adapters/vue/index.js +8 -0
  35. package/dist/wu-framework.cjs.js +0 -3
  36. package/dist/wu-framework.cjs.js.map +0 -1
  37. package/dist/wu-framework.dev.js +0 -15667
  38. package/dist/wu-framework.dev.js.map +0 -1
  39. package/dist/wu-framework.esm.js +0 -3
  40. package/dist/wu-framework.esm.js.map +0 -1
  41. package/dist/wu-framework.umd.js +0 -3
  42. package/dist/wu-framework.umd.js.map +0 -1
package/README.md CHANGED
@@ -1,440 +1,440 @@
1
- <p align="center">
2
- <img src="https://raw.githubusercontent.com/LuisPadre25/wu-framework/main/wu-logo.png" width="80" alt="Wu Framework" />
3
- </p>
4
-
5
- <h1 align="center">Wu Framework</h1>
6
-
7
- <p align="center">
8
- <strong>Universal microfrontends with built-in AI. Zero dependencies.</strong>
9
- </p>
10
-
11
- <p align="center">
12
- <a href="https://www.npmjs.com/package/wu-framework"><img src="https://img.shields.io/npm/v/wu-framework.svg?color=8b5cf6&label=npm" alt="npm version" /></a>
13
- <a href="https://github.com/LuisPadre25/wu-framework/actions"><img src="https://img.shields.io/github/actions/workflow/status/LuisPadre25/wu-framework/ci.yml?label=tests&color=10b981" alt="tests" /></a>
14
- <img src="https://img.shields.io/badge/tests-650%20passed-10b981" alt="650 tests" />
15
- <img src="https://img.shields.io/badge/dependencies-0-8b5cf6" alt="zero deps" />
16
- <a href="https://opensource.org/licenses/MIT"><img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="MIT License" /></a>
17
- </p>
18
-
19
- <p align="center">
20
- <a href="https://www.wu-framework.com">Documentation</a> &middot;
21
- <a href="https://www.wu-framework.com/docs/quick-start">Quick Start</a> &middot;
22
- <a href="https://www.wu-framework.com/docs/ai/overview">AI Integration</a> &middot;
23
- <a href="#wucommerce--real-world-example">Live Example</a>
24
- </p>
25
-
26
- ---
27
-
28
- Run **React, Vue, Angular, Svelte, Solid, Preact, Lit, and Vanilla JS** micro-apps side by side in the same page. Each app lives in its own Shadow DOM with full CSS isolation. Apps communicate through a shared event bus and store — no tight coupling, no iframes.
29
-
30
- Add AI to any app with one line. Connect your own LLM (OpenAI, Anthropic, Ollama) and your app gains context-aware tool calling, autonomous agents, and cross-app orchestration. **WebMCP ready** for Chrome 146+.
31
-
32
- ```bash
33
- npm install wu-framework
34
- ```
35
-
36
- ## 30-Second Demo
37
-
38
- ```js
39
- import { wu } from 'wu-framework';
40
- import { wuReact } from 'wu-framework/adapters/react';
41
- import { wuVue } from 'wu-framework/adapters/vue';
42
-
43
- // Register micro-apps from different frameworks
44
- wuReact.register('cart', CartApp);
45
- wuVue.register('catalog', CatalogApp);
46
-
47
- // Mount them — each gets its own Shadow DOM
48
- await wu.mount('cart', '#cart-container');
49
- await wu.mount('catalog', '#catalog-container');
50
-
51
- // They talk to each other via events
52
- wu.emit('cart:item-added', { productId: 'SKU-42' });
53
- wu.on('catalog:product-selected', (e) => console.log(e.data));
54
-
55
- // Add AI with one line — BYOL (Bring Your Own LLM)
56
- wu.ai.provider('openai', { endpoint: '/api/ai/chat', model: 'gpt-4o' });
57
- wu.ai.action('addToCart', {
58
- description: 'Add a product to the shopping cart',
59
- parameters: { productId: { type: 'string', required: true } },
60
- handler: async (params) => wu.emit('cart:item-added', params),
61
- });
62
-
63
- // Now the AI can control your app
64
- await wu.ai.send('Add product SKU-42 to the cart');
65
- ```
66
-
67
- ## Why Wu?
68
-
69
- | | **Wu Framework** | **single-spa** | **Module Federation** | **iframes** |
70
- |---|:---:|:---:|:---:|:---:|
71
- | Framework adapters | **8** | 4 | 1* | Any |
72
- | Shadow DOM isolation | Yes | No | No | Yes (heavy) |
73
- | Shared event bus | Built-in | Manual | Manual | postMessage |
74
- | Shared store | Built-in | Manual | Manual | No |
75
- | Standalone mode | Automatic | No | No | N/A |
76
- | AI integration | Built-in | No | No | No |
77
- | WebMCP (Chrome 146+) | Built-in | No | No | No |
78
- | MCP Server (dev tools) | Built-in | No | No | No |
79
- | Dependencies | **0** | 0 | Webpack 5 | N/A |
80
- | Bundle size (min) | ~174 KB | ~10 KB | Varies | N/A |
81
-
82
- *Module Federation is Webpack-coupled; Wu is bundler-agnostic.
83
-
84
- ---
85
-
86
- ## Features
87
-
88
- ### Core
89
-
90
- - **8 Framework Adapters** — React, Vue, Angular, Svelte, Solid, Preact, Lit, Vanilla
91
- - **Shadow DOM Isolation** — CSS and DOM fully sandboxed per app
92
- - **3 Sandbox Strategies** — Shadow DOM, Proxy, iframe — choose per app
93
- - **3 CSS Isolation Modes** — `shared`, `isolated`, `fully-isolated` per app
94
- - **Event Bus** — Namespaced pub/sub with wildcards, replay, and middleware
95
- - **Shared Store** — Cross-app reactive state with dot-path notation and persistence
96
- - **Plugin System** — Extend Wu with lifecycle hooks
97
- - **Performance Monitor** — Mount time, memory, FPS tracking per app
98
- - **Error Boundaries** — Catch and recover from micro-app failures
99
- - **Keep-Alive** — Preserve app state when hiding/showing
100
- - **Prefetch** — Speculation Rules API with automatic fallback chain
101
- - **Cookie Overrides** — QA redirects individual apps to different URLs per-browser
102
- - **Standalone Mode** — Every micro-app works without a shell, zero lock-in
103
-
104
- ### AI (BYOL — Bring Your Own LLM)
105
-
106
- - **4 Paradigms** — App→LLM, LLM→App, Autonomous Agent, Cross-App Orchestration
107
- - **Tool Calling** — Register actions the AI executes autonomously
108
- - **Streaming** — Async generator for real-time responses
109
- - **Multi-turn** — Namespaced conversations with history
110
- - **Reactive Triggers** — Events automatically invoke the AI
111
- - **Auto Context** — Store state, apps, events injected into the system prompt
112
- - **10 Browser Actions** — Screenshot, click, type, navigate, read console/network
113
- - **WebMCP** — `wu.ai.expose()` registers tools via `navigator.modelContext` (Chrome 146+)
114
- - **MCP Server** — Connect Claude Code, Cursor, or any MCP client to your live app
115
- - **4-Layer Security** — Permissions, rate limiting, circuit breaker, loop protection
116
- - **Workflows** — Reusable parameterized AI recipes
117
-
118
- ---
119
-
120
- ## Quick Start
121
-
122
- ### 1. Register your micro-app
123
-
124
- ```jsx
125
- // React
126
- import { wuReact } from 'wu-framework/adapters/react';
127
- wuReact.register('orders', App);
128
-
129
- // Vue
130
- import { wuVue } from 'wu-framework/adapters/vue';
131
- wuVue.register('products', App);
132
-
133
- // Angular (standalone)
134
- import { wuAngular } from 'wu-framework/adapters/angular';
135
- wuAngular.registerStandalone('settings', AppComponent, { createApplication, createComponent });
136
-
137
- // Svelte 5
138
- import { wuSvelte } from 'wu-framework/adapters/svelte';
139
- wuSvelte.registerSvelte5('dashboard', App);
140
-
141
- // Same pattern for Solid, Preact, Lit, Vanilla
142
- ```
143
-
144
- ### 2. Mount from the shell
145
-
146
- ```js
147
- import { wu } from 'wu-framework';
148
-
149
- await wu.init({
150
- apps: [
151
- { name: 'header', url: 'http://localhost:3001' },
152
- { name: 'sidebar', url: 'http://localhost:3002' },
153
- { name: 'content', url: 'http://localhost:3003' },
154
- ]
155
- });
156
-
157
- await wu.mount('header', '#header-container');
158
- await wu.mount('sidebar', '#sidebar-container');
159
- await wu.mount('content', '#content-container');
160
- ```
161
-
162
- ### 3. Cross-app communication
163
-
164
- ```js
165
- import { emit, on, getState, setState } from 'wu-framework';
166
-
167
- // Events
168
- emit('user:login', { userId: 123 });
169
- on('user:*', (event) => console.log(event.data));
170
-
171
- // Shared store
172
- setState('user.name', 'John');
173
- getState('user.name'); // 'John'
174
- ```
175
-
176
- ### 4. Add AI (optional)
177
-
178
- ```js
179
- wu.ai.provider('ollama', {
180
- endpoint: 'http://localhost:11434/api/chat',
181
- model: 'llama3',
182
- });
183
-
184
- const response = await wu.ai.send('What apps are mounted?');
185
- ```
186
-
187
- ---
188
-
189
- ## WuCommerce — Real-World Example
190
-
191
- Wu ships with **WuCommerce**, a Shopify-like merchant dashboard where every section is a real micro-app built with a different framework.
192
-
193
- | Micro-app | Framework | What it does |
194
- |-----------|-----------|-------------|
195
- | **Topbar** | Preact | Store name, nav tabs, search, notifications, theme toggle |
196
- | **Dashboard** | Svelte 5 | KPI cards, sparklines, recent orders, revenue chart |
197
- | **Orders** | React | Order table with filters, search, status badges |
198
- | **Products** | Vue 3 | Product catalog grid, stock badges, category filter |
199
- | **Customers** | Solid.js | Customer list, segment badges, click-to-filter-orders |
200
- | **Analytics** | Lit | Revenue bar chart, traffic donut, top products |
201
- | **Chat** | Vanilla JS | Floating chat widget with conversations and messages |
202
- | **Settings** | Angular 21 | Store config form, shipping zones, payment methods |
203
-
204
- All 8 apps communicate through Wu's event bus and shared store. Click a customer → orders filter. Toggle theme → all 8 apps update. Change store name in settings → topbar updates.
205
-
206
- ---
207
-
208
- ## 3 Sandbox Strategies
209
-
210
- | Mode | How it works | Tree shaking | Source maps | HMR | JS isolation |
211
- |------|-------------|:---:|:---:|:---:|:---:|
212
- | `module` (default) | `import()` + Proxy side-effect tracking | Yes | Yes | Yes | Side effects only |
213
- | `strict` | Hidden iframe + real `import()` | Yes | Yes | Yes | **Full** (separate window) |
214
- | `eval` | Fetch HTML → parse → `with(proxy){}` | No | No | No | **Full** (proxy traps) |
215
-
216
- ```js
217
- await wu.init({
218
- apps: [
219
- { name: 'header', url: '...', sandbox: 'module' },
220
- { name: 'analytics', url: '...', sandbox: 'strict' },
221
- { name: 'legacy', url: '...', sandbox: 'eval' },
222
- ]
223
- });
224
- ```
225
-
226
- **Auto-cleaned on unmount:** timers, intervals, rAF, event listeners, localStorage keys, DOM mutations.
227
-
228
- ---
229
-
230
- ## 3 CSS Isolation Modes
231
-
232
- | Mode | What happens | When to use |
233
- |------|-------------|-------------|
234
- | `shared` | Host styles injected into Shadow DOM | Apps sharing a design system (Tailwind) |
235
- | `isolated` | Pure Shadow DOM — no external styles | Fully independent apps |
236
- | `fully-isolated` | Only the app's own styles | Apps that need their CSS but not global CSS |
237
-
238
- ```json
239
- { "name": "my-app", "entry": "index.js", "styleMode": "isolated" }
240
- ```
241
-
242
- ---
243
-
244
- ## AI Paradigms
245
-
246
- ### 1. App → LLM → App
247
-
248
- ```js
249
- const response = await wu.ai.send('What items are in the cart?');
250
- ```
251
-
252
- ### 2. LLM → App → LLM (WebMCP)
253
-
254
- ```js
255
- wu.ai.expose(); // Registers all tools via navigator.modelContext (Chrome 146+)
256
- ```
257
-
258
- ### 3. Autonomous Agent
259
-
260
- ```js
261
- for await (const step of wu.ai.agent('Find the top customer and show their profile')) {
262
- console.log(`Step ${step.step}: ${step.content}`);
263
- }
264
- ```
265
-
266
- ### 4. Cross-App Orchestration
267
-
268
- ```js
269
- const result = await wu.ai.intent('Find customer Emma and refund order #4821');
270
- console.log(result.appsInvolved); // ['customers', 'orders']
271
- ```
272
-
273
- ---
274
-
275
- ## Plugins & Hooks
276
-
277
- ```js
278
- import { usePlugin, createPlugin, useHook } from 'wu-framework';
279
-
280
- usePlugin(createPlugin({
281
- name: 'analytics',
282
- install: (api) => api.on('app:mounted', (e) => track(e)),
283
- afterMount: async (ctx) => log('mounted in', ctx.mountTime, 'ms')
284
- }));
285
-
286
- useHook('beforeMount', async (context, next) => {
287
- console.log('Mounting:', context.appName);
288
- await next();
289
- });
290
- ```
291
-
292
- Phases: `beforeInit` → `afterInit` → `beforeLoad` → `afterLoad` → `beforeMount` → `afterMount` → `beforeUnmount` → `afterUnmount`
293
-
294
- ---
295
-
296
- ## Prefetch (Speculation Rules API)
297
-
298
- ```js
299
- wu.prefetch(['sidebar', 'analytics']);
300
- wu.prefetch(['sidebar'], { trigger: 'hover', action: 'prerender' });
301
- wu.prefetchAll();
302
- ```
303
-
304
- Fallback chain: Speculation Rules API (Chrome 121+) → `<link rel="modulepreload">` → `<link rel="prefetch">`
305
-
306
- ---
307
-
308
- ## Cookie Overrides for QA
309
-
310
- ```js
311
- wu.override('sidebar', 'http://localhost:5174');
312
- wu.getOverrides(); // { sidebar: 'http://localhost:5174' }
313
- wu.removeOverride('sidebar');
314
- ```
315
-
316
- QA sets a cookie → only **their browser** sees the override. Everyone else sees production. 3-layer security: environment gate, domain allowlist, visual indicator.
317
-
318
- ---
319
-
320
- ## Project Stats
321
-
322
- | Metric | Value |
323
- |---|---|
324
- | Source files | 79 |
325
- | Lines of code | 23,442 |
326
- | Test cases | **650** |
327
- | Framework adapters | 8 |
328
- | AI modules | 12 |
329
- | Core modules | 23 |
330
- | Runtime dependencies | **0** |
331
- | Bundle (ESM, minified) | ~174 KB |
332
-
333
- ---
334
-
335
- ## Build
336
-
337
- ```bash
338
- npm run build # ESM + CJS + UMD + Dev
339
- npm run test # 650 tests (Vitest)
340
- npm run test:coverage # Coverage report
341
- ```
342
-
343
- | Output | Format | Use |
344
- |--------|--------|-----|
345
- | `wu-framework.esm.js` | ES Module | Bundler imports |
346
- | `wu-framework.cjs.js` | CommonJS | Node.js require |
347
- | `wu-framework.umd.js` | UMD | CDN / script tag |
348
- | `www.wu-framework.com.js` | ES Module | Development |
349
-
350
- ---
351
-
352
- ## Architecture
353
-
354
- ```
355
- ┌───────────────────────────────────────────────────────────────────────┐
356
- │ SHELL (any framework) │
357
- ├──────────┬──────────┬──────────┬──────────┬──────────┬───────────────┤
358
- │ Shadow │ Shadow │ Shadow │ Shadow │ Shadow │ Shadow ... │
359
- │ ┌──────┐ │ ┌──────┐ │ ┌──────┐ │ ┌──────┐ │ ┌──────┐ │ ┌──────┐ │
360
- │ │Topbar│ │ │Dashbd│ │ │Orders│ │ │Produc│ │ │Custo.│ │ │Analyt│ │
361
- │ │Preact│ │ │Svelte│ │ │React │ │ │Vue 3 │ │ │Solid │ │ │ Lit │ │
362
- │ └──────┘ │ └──────┘ │ └──────┘ │ └──────┘ │ └──────┘ │ └──────┘ │
363
- ├──────────┴──────────┴──────────┴──────────┴──────────┴───────────────┤
364
- │ WU FRAMEWORK CORE │
365
- │ Sandbox (module/strict/eval) · EventBus (wildcards, replay) │
366
- │ Store (dot-paths, batch) · StyleBridge (shared/isolated/fully-iso) │
367
- │ Loader · Hooks · Plugins · Cache · Prefetch · Overrides │
368
- ├──────────────────────────────────────────────────────────────────────┤
369
- │ WU AI (BYOL) │
370
- │ Provider · Actions · Agent · Orchestrate · Triggers · Context │
371
- │ Browser Actions · WebMCP · MCP Server · Workflows · Security │
372
- └──────────────────────────────────────────────────────────────────────┘
373
- ```
374
-
375
- ---
376
-
377
- ## Documentation
378
-
379
- Full documentation at **[www.wu-framework.com](https://www.wu-framework.com)**
380
-
381
- - [Quick Start](https://www.wu-framework.com/docs/quick-start) — Get running in 5 minutes
382
- - [Getting Started](https://www.wu-framework.com/docs/getting-started) — Deeper tutorial with cross-app communication
383
- - [API Reference](https://www.wu-framework.com/docs/core/api) — Full API docs
384
- - [Event Bus](https://www.wu-framework.com/docs/core/event-bus) — Inter-app communication
385
- - [Shared Store](https://www.wu-framework.com/docs/core/store) — Cross-app reactive state
386
- - [Sandbox](https://www.wu-framework.com/docs/core/sandbox) — JS isolation strategies
387
- - [AI Overview](https://www.wu-framework.com/docs/ai/overview) — 4 AI paradigms
388
- - [AI Actions](https://www.wu-framework.com/docs/ai/actions) — Register tools for the LLM
389
- - [Browser Actions](https://www.wu-framework.com/docs/ai/browser-actions) — 10 built-in browser tools
390
- - [MCP Server](https://www.wu-framework.com/docs/ai/mcp-server) — Connect AI agents to live apps
391
- - [CSS Isolation](https://www.wu-framework.com/docs/guides/css-isolation) — Shadow DOM style modes
392
- - [Deployment](https://www.wu-framework.com/docs/guides/deployment) — Production deployment guide
393
-
394
- ---
395
-
396
- ## Browser Support
397
-
398
- Chrome 80+, Firefox 78+, Safari 14+, Edge 80+. Shadow DOM v1 required.
399
-
400
- ---
401
-
402
- <div align="center">
403
-
404
- ### What if Wu Framework could think without thinking?
405
-
406
- </div>
407
-
408
- ```
409
- User: "add to cart"
410
-
411
- Before After
412
- ────── ─────
413
- wu.ai.send() → LLM wu.ai.send() → ???
414
- ~2,000 ms ~0.73 ms
415
- $0.003 per call $0.000
416
- ```
417
-
418
- Something is coming. It learned from every LLM call you ever made. It doesn't need the cloud anymore.
419
-
420
- **99.79% accuracy. 0.73 milliseconds. 800 KB. Zero GPU. Zero internet.**
421
-
422
- 274x faster than neural networks. And it dreams.
423
-
424
- <div align="center">
425
-
426
- **COMING SOON**
427
-
428
- </div>
429
-
430
- ---
431
-
432
- ## Contributing
433
-
434
- Contributions welcome. Please open an issue first to discuss what you'd like to change.
435
-
436
- ## License
437
-
438
- [MIT](./LICENSE) — Free for personal and commercial use.
439
-
440
- See [LICENSE-COMMERCIAL.md](./LICENSE-COMMERCIAL.md) for optional enterprise support and consulting.
1
+ <p align="center">
2
+ <img src="https://raw.githubusercontent.com/LuisPadre25/wu-framework/main/wu-logo.png" width="80" alt="Wu Framework" />
3
+ </p>
4
+
5
+ <h1 align="center">Wu Framework</h1>
6
+
7
+ <p align="center">
8
+ <strong>Universal microfrontends with built-in AI. Zero dependencies.</strong>
9
+ </p>
10
+
11
+ <p align="center">
12
+ <a href="https://www.npmjs.com/package/wu-framework"><img src="https://img.shields.io/npm/v/wu-framework.svg?color=8b5cf6&label=npm" alt="npm version" /></a>
13
+ <a href="https://github.com/LuisPadre25/wu-framework/actions"><img src="https://img.shields.io/github/actions/workflow/status/LuisPadre25/wu-framework/ci.yml?label=tests&color=10b981" alt="tests" /></a>
14
+ <img src="https://img.shields.io/badge/tests-650%20passed-10b981" alt="650 tests" />
15
+ <img src="https://img.shields.io/badge/dependencies-0-8b5cf6" alt="zero deps" />
16
+ <a href="https://opensource.org/licenses/MIT"><img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="MIT License" /></a>
17
+ </p>
18
+
19
+ <p align="center">
20
+ <a href="https://www.wu-framework.com">Documentation</a> &middot;
21
+ <a href="https://www.wu-framework.com/docs/quick-start">Quick Start</a> &middot;
22
+ <a href="https://www.wu-framework.com/docs/ai/overview">AI Integration</a> &middot;
23
+ <a href="#wucommerce--real-world-example">Live Example</a>
24
+ </p>
25
+
26
+ ---
27
+
28
+ Run **React, Vue, Angular, Svelte, Solid, Preact, Lit, and Vanilla JS** micro-apps side by side in the same page. Each app lives in its own Shadow DOM with full CSS isolation. Apps communicate through a shared event bus and store — no tight coupling, no iframes.
29
+
30
+ Add AI to any app with one line. Connect your own LLM (OpenAI, Anthropic, Ollama) and your app gains context-aware tool calling, autonomous agents, and cross-app orchestration. **WebMCP ready** for Chrome 146+.
31
+
32
+ ```bash
33
+ npm install wu-framework
34
+ ```
35
+
36
+ ## 30-Second Demo
37
+
38
+ ```js
39
+ import { wu } from 'wu-framework';
40
+ import { wuReact } from 'wu-framework/adapters/react';
41
+ import { wuVue } from 'wu-framework/adapters/vue';
42
+
43
+ // Register micro-apps from different frameworks
44
+ wuReact.register('cart', CartApp);
45
+ wuVue.register('catalog', CatalogApp);
46
+
47
+ // Mount them — each gets its own Shadow DOM
48
+ await wu.mount('cart', '#cart-container');
49
+ await wu.mount('catalog', '#catalog-container');
50
+
51
+ // They talk to each other via events
52
+ wu.emit('cart:item-added', { productId: 'SKU-42' });
53
+ wu.on('catalog:product-selected', (e) => console.log(e.data));
54
+
55
+ // Add AI with one line — BYOL (Bring Your Own LLM)
56
+ wu.ai.provider('openai', { endpoint: '/api/ai/chat', model: 'gpt-4o' });
57
+ wu.ai.action('addToCart', {
58
+ description: 'Add a product to the shopping cart',
59
+ parameters: { productId: { type: 'string', required: true } },
60
+ handler: async (params) => wu.emit('cart:item-added', params),
61
+ });
62
+
63
+ // Now the AI can control your app
64
+ await wu.ai.send('Add product SKU-42 to the cart');
65
+ ```
66
+
67
+ ## Why Wu?
68
+
69
+ | | **Wu Framework** | **single-spa** | **Module Federation** | **iframes** |
70
+ |---|:---:|:---:|:---:|:---:|
71
+ | Framework adapters | **8** | 4 | 1* | Any |
72
+ | Shadow DOM isolation | Yes | No | No | Yes (heavy) |
73
+ | Shared event bus | Built-in | Manual | Manual | postMessage |
74
+ | Shared store | Built-in | Manual | Manual | No |
75
+ | Standalone mode | Automatic | No | No | N/A |
76
+ | AI integration | Built-in | No | No | No |
77
+ | WebMCP (Chrome 146+) | Built-in | No | No | No |
78
+ | MCP Server (dev tools) | Built-in | No | No | No |
79
+ | Dependencies | **0** | 0 | Webpack 5 | N/A |
80
+ | Bundle size (min) | ~174 KB | ~10 KB | Varies | N/A |
81
+
82
+ *Module Federation is Webpack-coupled; Wu is bundler-agnostic.
83
+
84
+ ---
85
+
86
+ ## Features
87
+
88
+ ### Core
89
+
90
+ - **8 Framework Adapters** — React, Vue, Angular, Svelte, Solid, Preact, Lit, Vanilla
91
+ - **Shadow DOM Isolation** — CSS and DOM fully sandboxed per app
92
+ - **3 Sandbox Strategies** — Shadow DOM, Proxy, iframe — choose per app
93
+ - **3 CSS Isolation Modes** — `shared`, `isolated`, `fully-isolated` per app
94
+ - **Event Bus** — Namespaced pub/sub with wildcards, replay, and middleware
95
+ - **Shared Store** — Cross-app reactive state with dot-path notation and persistence
96
+ - **Plugin System** — Extend Wu with lifecycle hooks
97
+ - **Performance Monitor** — Mount time, memory, FPS tracking per app
98
+ - **Error Boundaries** — Catch and recover from micro-app failures
99
+ - **Keep-Alive** — Preserve app state when hiding/showing
100
+ - **Prefetch** — Speculation Rules API with automatic fallback chain
101
+ - **Cookie Overrides** — QA redirects individual apps to different URLs per-browser
102
+ - **Standalone Mode** — Every micro-app works without a shell, zero lock-in
103
+
104
+ ### AI (BYOL — Bring Your Own LLM)
105
+
106
+ - **4 Paradigms** — App→LLM, LLM→App, Autonomous Agent, Cross-App Orchestration
107
+ - **Tool Calling** — Register actions the AI executes autonomously
108
+ - **Streaming** — Async generator for real-time responses
109
+ - **Multi-turn** — Namespaced conversations with history
110
+ - **Reactive Triggers** — Events automatically invoke the AI
111
+ - **Auto Context** — Store state, apps, events injected into the system prompt
112
+ - **10 Browser Actions** — Screenshot, click, type, navigate, read console/network
113
+ - **WebMCP** — `wu.ai.expose()` registers tools via `navigator.modelContext` (Chrome 146+)
114
+ - **MCP Server** — Connect Claude Code, Cursor, or any MCP client to your live app
115
+ - **4-Layer Security** — Permissions, rate limiting, circuit breaker, loop protection
116
+ - **Workflows** — Reusable parameterized AI recipes
117
+
118
+ ---
119
+
120
+ ## Quick Start
121
+
122
+ ### 1. Register your micro-app
123
+
124
+ ```jsx
125
+ // React
126
+ import { wuReact } from 'wu-framework/adapters/react';
127
+ wuReact.register('orders', App);
128
+
129
+ // Vue
130
+ import { wuVue } from 'wu-framework/adapters/vue';
131
+ wuVue.register('products', App);
132
+
133
+ // Angular (standalone)
134
+ import { wuAngular } from 'wu-framework/adapters/angular';
135
+ wuAngular.registerStandalone('settings', AppComponent, { createApplication, createComponent });
136
+
137
+ // Svelte 5
138
+ import { wuSvelte } from 'wu-framework/adapters/svelte';
139
+ wuSvelte.registerSvelte5('dashboard', App);
140
+
141
+ // Same pattern for Solid, Preact, Lit, Vanilla
142
+ ```
143
+
144
+ ### 2. Mount from the shell
145
+
146
+ ```js
147
+ import { wu } from 'wu-framework';
148
+
149
+ await wu.init({
150
+ apps: [
151
+ { name: 'header', url: 'http://localhost:3001' },
152
+ { name: 'sidebar', url: 'http://localhost:3002' },
153
+ { name: 'content', url: 'http://localhost:3003' },
154
+ ]
155
+ });
156
+
157
+ await wu.mount('header', '#header-container');
158
+ await wu.mount('sidebar', '#sidebar-container');
159
+ await wu.mount('content', '#content-container');
160
+ ```
161
+
162
+ ### 3. Cross-app communication
163
+
164
+ ```js
165
+ import { emit, on, getState, setState } from 'wu-framework';
166
+
167
+ // Events
168
+ emit('user:login', { userId: 123 });
169
+ on('user:*', (event) => console.log(event.data));
170
+
171
+ // Shared store
172
+ setState('user.name', 'John');
173
+ getState('user.name'); // 'John'
174
+ ```
175
+
176
+ ### 4. Add AI (optional)
177
+
178
+ ```js
179
+ wu.ai.provider('ollama', {
180
+ endpoint: 'http://localhost:11434/api/chat',
181
+ model: 'llama3',
182
+ });
183
+
184
+ const response = await wu.ai.send('What apps are mounted?');
185
+ ```
186
+
187
+ ---
188
+
189
+ ## WuCommerce — Real-World Example
190
+
191
+ Wu ships with **WuCommerce**, a Shopify-like merchant dashboard where every section is a real micro-app built with a different framework.
192
+
193
+ | Micro-app | Framework | What it does |
194
+ |-----------|-----------|-------------|
195
+ | **Topbar** | Preact | Store name, nav tabs, search, notifications, theme toggle |
196
+ | **Dashboard** | Svelte 5 | KPI cards, sparklines, recent orders, revenue chart |
197
+ | **Orders** | React | Order table with filters, search, status badges |
198
+ | **Products** | Vue 3 | Product catalog grid, stock badges, category filter |
199
+ | **Customers** | Solid.js | Customer list, segment badges, click-to-filter-orders |
200
+ | **Analytics** | Lit | Revenue bar chart, traffic donut, top products |
201
+ | **Chat** | Vanilla JS | Floating chat widget with conversations and messages |
202
+ | **Settings** | Angular 21 | Store config form, shipping zones, payment methods |
203
+
204
+ All 8 apps communicate through Wu's event bus and shared store. Click a customer → orders filter. Toggle theme → all 8 apps update. Change store name in settings → topbar updates.
205
+
206
+ ---
207
+
208
+ ## 3 Sandbox Strategies
209
+
210
+ | Mode | How it works | Tree shaking | Source maps | HMR | JS isolation |
211
+ |------|-------------|:---:|:---:|:---:|:---:|
212
+ | `module` (default) | `import()` + Proxy side-effect tracking | Yes | Yes | Yes | Side effects only |
213
+ | `strict` | Hidden iframe + real `import()` | Yes | Yes | Yes | **Full** (separate window) |
214
+ | `eval` | Fetch HTML → parse → `with(proxy){}` | No | No | No | **Full** (proxy traps) |
215
+
216
+ ```js
217
+ await wu.init({
218
+ apps: [
219
+ { name: 'header', url: '...', sandbox: 'module' },
220
+ { name: 'analytics', url: '...', sandbox: 'strict' },
221
+ { name: 'legacy', url: '...', sandbox: 'eval' },
222
+ ]
223
+ });
224
+ ```
225
+
226
+ **Auto-cleaned on unmount:** timers, intervals, rAF, event listeners, localStorage keys, DOM mutations.
227
+
228
+ ---
229
+
230
+ ## 3 CSS Isolation Modes
231
+
232
+ | Mode | What happens | When to use |
233
+ |------|-------------|-------------|
234
+ | `shared` | Host styles injected into Shadow DOM | Apps sharing a design system (Tailwind) |
235
+ | `isolated` | Pure Shadow DOM — no external styles | Fully independent apps |
236
+ | `fully-isolated` | Only the app's own styles | Apps that need their CSS but not global CSS |
237
+
238
+ ```json
239
+ { "name": "my-app", "entry": "index.js", "styleMode": "isolated" }
240
+ ```
241
+
242
+ ---
243
+
244
+ ## AI Paradigms
245
+
246
+ ### 1. App → LLM → App
247
+
248
+ ```js
249
+ const response = await wu.ai.send('What items are in the cart?');
250
+ ```
251
+
252
+ ### 2. LLM → App → LLM (WebMCP)
253
+
254
+ ```js
255
+ wu.ai.expose(); // Registers all tools via navigator.modelContext (Chrome 146+)
256
+ ```
257
+
258
+ ### 3. Autonomous Agent
259
+
260
+ ```js
261
+ for await (const step of wu.ai.agent('Find the top customer and show their profile')) {
262
+ console.log(`Step ${step.step}: ${step.content}`);
263
+ }
264
+ ```
265
+
266
+ ### 4. Cross-App Orchestration
267
+
268
+ ```js
269
+ const result = await wu.ai.intent('Find customer Emma and refund order #4821');
270
+ console.log(result.appsInvolved); // ['customers', 'orders']
271
+ ```
272
+
273
+ ---
274
+
275
+ ## Plugins & Hooks
276
+
277
+ ```js
278
+ import { usePlugin, createPlugin, useHook } from 'wu-framework';
279
+
280
+ usePlugin(createPlugin({
281
+ name: 'analytics',
282
+ install: (api) => api.on('app:mounted', (e) => track(e)),
283
+ afterMount: async (ctx) => log('mounted in', ctx.mountTime, 'ms')
284
+ }));
285
+
286
+ useHook('beforeMount', async (context, next) => {
287
+ console.log('Mounting:', context.appName);
288
+ await next();
289
+ });
290
+ ```
291
+
292
+ Phases: `beforeInit` → `afterInit` → `beforeLoad` → `afterLoad` → `beforeMount` → `afterMount` → `beforeUnmount` → `afterUnmount`
293
+
294
+ ---
295
+
296
+ ## Prefetch (Speculation Rules API)
297
+
298
+ ```js
299
+ wu.prefetch(['sidebar', 'analytics']);
300
+ wu.prefetch(['sidebar'], { trigger: 'hover', action: 'prerender' });
301
+ wu.prefetchAll();
302
+ ```
303
+
304
+ Fallback chain: Speculation Rules API (Chrome 121+) → `<link rel="modulepreload">` → `<link rel="prefetch">`
305
+
306
+ ---
307
+
308
+ ## Cookie Overrides for QA
309
+
310
+ ```js
311
+ wu.override('sidebar', 'http://localhost:5174');
312
+ wu.getOverrides(); // { sidebar: 'http://localhost:5174' }
313
+ wu.removeOverride('sidebar');
314
+ ```
315
+
316
+ QA sets a cookie → only **their browser** sees the override. Everyone else sees production. 3-layer security: environment gate, domain allowlist, visual indicator.
317
+
318
+ ---
319
+
320
+ ## Project Stats
321
+
322
+ | Metric | Value |
323
+ |---|---|
324
+ | Source files | 79 |
325
+ | Lines of code | 23,442 |
326
+ | Test cases | **650** |
327
+ | Framework adapters | 8 |
328
+ | AI modules | 12 |
329
+ | Core modules | 23 |
330
+ | Runtime dependencies | **0** |
331
+ | Bundle (ESM, minified) | ~174 KB |
332
+
333
+ ---
334
+
335
+ ## Build
336
+
337
+ ```bash
338
+ npm run build # ESM + CJS + UMD + Dev
339
+ npm run test # 650 tests (Vitest)
340
+ npm run test:coverage # Coverage report
341
+ ```
342
+
343
+ | Output | Format | Use |
344
+ |--------|--------|-----|
345
+ | `wu-framework.esm.js` | ES Module | Bundler imports |
346
+ | `wu-framework.cjs.js` | CommonJS | Node.js require |
347
+ | `wu-framework.umd.js` | UMD | CDN / script tag |
348
+ | `www.wu-framework.com.js` | ES Module | Development |
349
+
350
+ ---
351
+
352
+ ## Architecture
353
+
354
+ ```
355
+ ┌───────────────────────────────────────────────────────────────────────┐
356
+ │ SHELL (any framework) │
357
+ ├──────────┬──────────┬──────────┬──────────┬──────────┬───────────────┤
358
+ │ Shadow │ Shadow │ Shadow │ Shadow │ Shadow │ Shadow ... │
359
+ │ ┌──────┐ │ ┌──────┐ │ ┌──────┐ │ ┌──────┐ │ ┌──────┐ │ ┌──────┐ │
360
+ │ │Topbar│ │ │Dashbd│ │ │Orders│ │ │Produc│ │ │Custo.│ │ │Analyt│ │
361
+ │ │Preact│ │ │Svelte│ │ │React │ │ │Vue 3 │ │ │Solid │ │ │ Lit │ │
362
+ │ └──────┘ │ └──────┘ │ └──────┘ │ └──────┘ │ └──────┘ │ └──────┘ │
363
+ ├──────────┴──────────┴──────────┴──────────┴──────────┴───────────────┤
364
+ │ WU FRAMEWORK CORE │
365
+ │ Sandbox (module/strict/eval) · EventBus (wildcards, replay) │
366
+ │ Store (dot-paths, batch) · StyleBridge (shared/isolated/fully-iso) │
367
+ │ Loader · Hooks · Plugins · Cache · Prefetch · Overrides │
368
+ ├──────────────────────────────────────────────────────────────────────┤
369
+ │ WU AI (BYOL) │
370
+ │ Provider · Actions · Agent · Orchestrate · Triggers · Context │
371
+ │ Browser Actions · WebMCP · MCP Server · Workflows · Security │
372
+ └──────────────────────────────────────────────────────────────────────┘
373
+ ```
374
+
375
+ ---
376
+
377
+ ## Documentation
378
+
379
+ Full documentation at **[www.wu-framework.com](https://www.wu-framework.com)**
380
+
381
+ - [Quick Start](https://www.wu-framework.com/docs/quick-start) — Get running in 5 minutes
382
+ - [Getting Started](https://www.wu-framework.com/docs/getting-started) — Deeper tutorial with cross-app communication
383
+ - [API Reference](https://www.wu-framework.com/docs/core/api) — Full API docs
384
+ - [Event Bus](https://www.wu-framework.com/docs/core/event-bus) — Inter-app communication
385
+ - [Shared Store](https://www.wu-framework.com/docs/core/store) — Cross-app reactive state
386
+ - [Sandbox](https://www.wu-framework.com/docs/core/sandbox) — JS isolation strategies
387
+ - [AI Overview](https://www.wu-framework.com/docs/ai/overview) — 4 AI paradigms
388
+ - [AI Actions](https://www.wu-framework.com/docs/ai/actions) — Register tools for the LLM
389
+ - [Browser Actions](https://www.wu-framework.com/docs/ai/browser-actions) — 10 built-in browser tools
390
+ - [MCP Server](https://www.wu-framework.com/docs/ai/mcp-server) — Connect AI agents to live apps
391
+ - [CSS Isolation](https://www.wu-framework.com/docs/guides/css-isolation) — Shadow DOM style modes
392
+ - [Deployment](https://www.wu-framework.com/docs/guides/deployment) — Production deployment guide
393
+
394
+ ---
395
+
396
+ ## Browser Support
397
+
398
+ Chrome 80+, Firefox 78+, Safari 14+, Edge 80+. Shadow DOM v1 required.
399
+
400
+ ---
401
+
402
+ <div align="center">
403
+
404
+ ### What if Wu Framework could think without thinking?
405
+
406
+ </div>
407
+
408
+ ```
409
+ User: "add to cart"
410
+
411
+ Before After
412
+ ────── ─────
413
+ wu.ai.send() → LLM wu.ai.send() → ???
414
+ ~2,000 ms ~0.73 ms
415
+ $0.003 per call $0.000
416
+ ```
417
+
418
+ Something is coming. It learned from every LLM call you ever made. It doesn't need the cloud anymore.
419
+
420
+ **99.79% accuracy. 0.73 milliseconds. 800 KB. Zero GPU. Zero internet.**
421
+
422
+ 274x faster than neural networks. And it dreams.
423
+
424
+ <div align="center">
425
+
426
+ **COMING SOON**
427
+
428
+ </div>
429
+
430
+ ---
431
+
432
+ ## Contributing
433
+
434
+ Contributions welcome. Please open an issue first to discuss what you'd like to change.
435
+
436
+ ## License
437
+
438
+ [MIT](./LICENSE) — Free for personal and commercial use.
439
+
440
+ See [LICENSE-COMMERCIAL.md](./LICENSE-COMMERCIAL.md) for optional enterprise support and consulting.