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.
- package/LICENSE +39 -39
- package/README.md +440 -440
- package/integrations/astro/README.md +127 -127
- package/integrations/astro/WuApp.astro +63 -63
- package/integrations/astro/WuShell.astro +39 -39
- package/integrations/astro/index.js +68 -68
- package/integrations/astro/package.json +38 -38
- package/integrations/astro/types.d.ts +53 -53
- package/package.json +42 -2
- package/src/adapters/alpine/index.d.ts +60 -0
- package/src/adapters/alpine/index.js +231 -0
- package/src/adapters/alpine.d.ts +3 -0
- package/src/adapters/alpine.js +3 -0
- package/src/adapters/htmx/index.d.ts +60 -0
- package/src/adapters/htmx/index.js +242 -0
- package/src/adapters/htmx.d.ts +3 -0
- package/src/adapters/htmx.js +3 -0
- package/src/adapters/index.js +60 -3
- package/src/adapters/qwik/index.d.ts +52 -0
- package/src/adapters/qwik/index.js +214 -0
- package/src/adapters/qwik.d.ts +3 -0
- package/src/adapters/qwik.js +3 -0
- package/src/adapters/react/ai.js +135 -135
- package/src/adapters/react/index.d.ts +246 -246
- package/src/adapters/react/index.js +695 -695
- package/src/adapters/stencil/index.d.ts +54 -0
- package/src/adapters/stencil/index.js +228 -0
- package/src/adapters/stencil.d.ts +3 -0
- package/src/adapters/stencil.js +3 -0
- package/src/adapters/stimulus/index.d.ts +60 -0
- package/src/adapters/stimulus/index.js +255 -0
- package/src/adapters/stimulus.d.ts +3 -0
- package/src/adapters/stimulus.js +3 -0
- package/src/adapters/vue/index.js +8 -0
- package/dist/wu-framework.cjs.js +0 -3
- package/dist/wu-framework.cjs.js.map +0 -1
- package/dist/wu-framework.dev.js +0 -15667
- package/dist/wu-framework.dev.js.map +0 -1
- package/dist/wu-framework.esm.js +0 -3
- package/dist/wu-framework.esm.js.map +0 -1
- package/dist/wu-framework.umd.js +0 -3
- 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> ·
|
|
21
|
-
<a href="https://www.wu-framework.com/docs/quick-start">Quick Start</a> ·
|
|
22
|
-
<a href="https://www.wu-framework.com/docs/ai/overview">AI Integration</a> ·
|
|
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> ·
|
|
21
|
+
<a href="https://www.wu-framework.com/docs/quick-start">Quick Start</a> ·
|
|
22
|
+
<a href="https://www.wu-framework.com/docs/ai/overview">AI Integration</a> ·
|
|
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.
|