Skip to content

Commit 152301f

Browse files
hotlonghotlong
committed
msw-todo
1 parent c52a8c9 commit 152301f

29 files changed

Lines changed: 2064 additions & 106 deletions

‎examples/msw-todo/.gitignore‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
# Dependencies
2+
node_modules
3+
pnpm-lock.yaml
4+
5+
# Build outputs
6+
dist
7+
build
8+
*.tsbuildinfo
9+
10+
# Development
11+
.vite
12+
.cache
13+
14+
# Environment
15+
.env
16+
.env.local
17+
18+
# Editor
19+
.vscode/*
20+
!.vscode/extensions.json
21+
.idea
22+
*.swp
23+
*.swo
24+
*~
25+
26+
# OS
27+
.DS_Store
28+
Thumbs.db
29+
30+
# MSW
31+
public/mockServiceWorker.js

‎examples/msw-todo/CHANGELOG.md‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
# @objectstack/example-msw-react-crud
2+
3+
## 0.6.1
4+
5+
### Patch Changes
6+
7+
- Updated dependencies
8+
- @objectstack/spec@0.6.1
9+
- @objectstack/client@0.6.1
10+
- @objectstack/driver-memory@0.6.1
11+
- @objectstack/objectql@0.6.1
12+
- @objectstack/plugin-msw@0.6.1
13+
- @objectstack/runtime@0.6.1
14+
- @objectstack/example-todo@0.6.1
15+
16+
## 0.6.0
17+
18+
### Minor Changes
19+
20+
- b2df5f7: Unified version bump to 0.5.0
21+
22+
- Standardized all package versions to 0.5.0 across the monorepo
23+
- Fixed driver-memory package.json paths for proper module resolution
24+
- Ensured all packages are in sync for the 0.5.0 release
25+
26+
### Patch Changes
27+
28+
- Updated dependencies [b2df5f7]
29+
- @objectstack/spec@0.6.0
30+
- @objectstack/client@0.6.0
31+
- @objectstack/driver-memory@0.6.0
32+
- @objectstack/plugin-msw@0.6.0
33+
- @objectstack/runtime@0.6.0
34+
- @objectstack/example-todo@0.6.0
35+
36+
## 1.0.2
37+
38+
### Patch Changes
39+
40+
- Updated dependencies
41+
- @objectstack/spec@0.4.2
42+
- @objectstack/client@0.4.2
43+
- @objectstack/driver-memory@0.4.2
44+
- @objectstack/plugin-msw@0.4.2
45+
- @objectstack/runtime@0.4.2
46+
- @objectstack/example-todo@1.0.9
47+
48+
## 1.0.1
49+
50+
### Patch Changes
51+
52+
- Updated dependencies
53+
- @objectstack/spec@0.4.1
54+
- @objectstack/client@0.4.1
55+
- @objectstack/driver-memory@0.4.1
56+
- @objectstack/plugin-msw@0.4.1
57+
- @objectstack/runtime@0.4.1
58+
- @objectstack/example-todo@1.0.8
59+
60+
## 1.0.0
61+
62+
### Major Features
63+
64+
- Initial release of MSW + React CRUD example
65+
- Complete CRUD operations (Create, Read, Update, Delete) for tasks
66+
- Integration with @objectstack/client for all API calls
67+
- MSW browser worker setup for API mocking
68+
- React components demonstrating best practices:
69+
- TaskList component for displaying and managing tasks
70+
- TaskForm component for creating and editing tasks
71+
- TaskItem component for individual task display
72+
- Comprehensive README with setup instructions and usage examples
73+
- Full TypeScript support with proper type definitions
74+
- Vite development server and build configuration
75+
- Styled UI with modern CSS

‎examples/msw-todo/QUICKSTART.md‎

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
# Quick Start Guide - Simplified MSW Integration
2+
3+
This is the **simplified** version using `@objectstack/plugin-msw` that auto-mocks all API endpoints. No manual handler code required!
4+
5+
## Prerequisites
6+
7+
- Node.js 18 or later
8+
- pnpm package manager
9+
10+
## Step 1: Install Dependencies
11+
12+
From the repository root:
13+
14+
```bash
15+
pnpm install
16+
```
17+
18+
## Step 2: Build Required Packages
19+
20+
Build the core packages:
21+
22+
```bash
23+
# Build all required packages
24+
pnpm --filter @objectstack/spec build
25+
pnpm --filter @objectstack/runtime build
26+
pnpm --filter @objectstack/plugin-msw build
27+
pnpm --filter @objectstack/client build
28+
```
29+
30+
## Step 3: Initialize MSW
31+
32+
The MSW service worker file should already be initialized:
33+
34+
```bash
35+
cd examples/ui/msw-react-crud
36+
npx msw init public/ --save
37+
```
38+
39+
## Step 4: Start the Development Server
40+
41+
```bash
42+
cd examples/ui/msw-react-crud
43+
pnpm dev
44+
```
45+
46+
The application will start on `http://localhost:3000`
47+
48+
## ✨ What's Different?
49+
50+
### Before (Manual Approach) ❌
51+
52+
You had to manually write 145+ lines of MSW handlers:
53+
54+
```typescript
55+
// src/mocks/browser.ts - OLD WAY
56+
const handlers = [
57+
http.get('/api/v1/data/task', ({ request }) => {
58+
// Manual pagination, filtering, sorting...
59+
}),
60+
http.post('/api/v1/data/task', async ({ request }) => {
61+
// Manual ID generation, validation...
62+
}),
63+
// ... more manual handlers
64+
];
65+
const worker = setupWorker(...handlers);
66+
await worker.start();
67+
```
68+
69+
### After (Plugin Approach) ✅
70+
71+
Now just **3 lines** with auto-mocking:
72+
73+
```typescript
74+
// src/mocks/browser.ts - NEW WAY
75+
const kernel = new ObjectKernel();
76+
kernel.use(new AppPlugin(appConfig));
77+
kernel.use(new MSWPlugin({ baseUrl: '/api/v1' }));
78+
await kernel.bootstrap(); // Auto-mocks ALL endpoints!
79+
```
80+
81+
## 📦 How It Works
82+
83+
1. **Define Your Data Model** in `objectstack.config.ts`:
84+
```typescript
85+
const TaskObject = ObjectSchema.create({
86+
name: 'task',
87+
fields: {
88+
subject: Field.text({ required: true }),
89+
priority: Field.number()
90+
}
91+
});
92+
```
93+
94+
2. **Auto-Mock Everything**: The MSW plugin automatically mocks:
95+
- ✅ Discovery endpoints
96+
- ✅ Metadata endpoints
97+
- ✅ All CRUD operations
98+
- ✅ Query operations
99+
- ✅ Pagination, sorting, filtering
100+
101+
3. **Use ObjectStack Client** normally:
102+
```typescript
103+
const client = new ObjectStackClient({ baseUrl: '/api/v1' });
104+
await client.data.create('task', { subject: 'New task' });
105+
```
106+
107+
## 🎯 Test CRUD Operations
108+
109+
Once running, you can:
110+
111+
1. **Create** tasks using the form
112+
2. **Read** tasks in the list
113+
3. **Update** tasks by clicking "Edit"
114+
4. **Delete** tasks by clicking "Delete"
115+
5. **Toggle completion** status
116+
117+
## 🔍 What Gets Auto-Mocked?
118+
119+
The plugin automatically handles:
120+
121+
| Endpoint | Description |
122+
|----------|-------------|
123+
| `GET /api/v1` | Discovery |
124+
| `GET /api/v1/meta/*` | All metadata |
125+
| `GET /api/v1/data/:object` | Find records |
126+
| `GET /api/v1/data/:object/:id` | Get by ID |
127+
| `POST /api/v1/data/:object` | Create |
128+
| `PATCH /api/v1/data/:object/:id` | Update |
129+
| `DELETE /api/v1/data/:object/:id` | Delete |
130+
131+
**Zero manual code!** 🎉
132+
133+
## 🔧 Advanced: Custom Handlers
134+
135+
Need custom logic? Easy:
136+
137+
```typescript
138+
const customHandlers = [
139+
http.get('/api/custom/hello', () =>
140+
HttpResponse.json({ message: 'Hello!' })
141+
)
142+
];
143+
144+
const kernel = new ObjectKernel();
145+
kernel.use(new AppPlugin(appConfig));
146+
kernel.use(new MSWPlugin({
147+
customHandlers, // Add your custom handlers
148+
baseUrl: '/api/v1'
149+
}));
150+
await kernel.bootstrap();
151+
```
152+
153+
## Troubleshooting
154+
155+
**MSW worker not starting?**
156+
```bash
157+
npx msw init public/ --save
158+
```
159+
160+
**TypeScript errors?**
161+
```bash
162+
pnpm --filter @objectstack/spec build
163+
pnpm --filter @objectstack/runtime build
164+
pnpm --filter @objectstack/plugin-msw build
165+
```
166+
167+
**404 errors?**
168+
Check browser console for MSW startup message
169+
170+
## 📚 Learn More
171+
172+
- Full documentation: [README.md](./README.md)
173+
- MSW Plugin: `packages/plugins/plugin-msw/README.md`
174+
- Runtime: `packages/runtime/README.md`
175+
- Client API: `packages/client/README.md`

0 commit comments

Comments
 (0)