|
1 | | -# Browser Support Proof of Concept |
| 1 | +# Browser POC - SQLite Graph Browser Support |
2 | 2 |
|
3 | | -**Goal:** Validate adapter pattern works with wa-sqlite before refactoring main codebase. |
| 3 | +This directory contains a proof-of-concept for adding browser support to sqlite-graph using the adapter pattern. |
4 | 4 |
|
5 | | -## Objectives |
| 5 | +## 📋 Overview |
6 | 6 |
|
7 | | -1. ✅ Get wa-sqlite running in both Node.js and browser |
8 | | -2. ✅ Test OPFS persistence in browser |
9 | | -3. ✅ Validate adapter abstraction pattern |
10 | | -4. ✅ Benchmark performance (Node vs browser) |
11 | | -5. ✅ Confirm same code can run in both environments |
| 7 | +- **Goal**: Enable sqlite-graph to run in web browsers using wa-sqlite |
| 8 | +- **Method**: SPARC (Specification, Pseudocode, Architecture, Refinement, Completion) |
| 9 | +- **Status**: ✅ Implementation complete, awaiting browser testing |
12 | 10 |
|
13 | | -## Structure |
| 11 | +## 🏗️ Architecture |
| 12 | + |
| 13 | +### Adapter Pattern |
| 14 | +``` |
| 15 | +SQLiteAdapter (interface) |
| 16 | + ├── NodeAdapter (better-sqlite3) - ✅ Complete |
| 17 | + └── BrowserAdapter (wa-sqlite) - ✅ Complete |
| 18 | +``` |
| 19 | + |
| 20 | +Both adapters implement the same interface, enabling runtime selection: |
| 21 | +```typescript |
| 22 | +let adapter: SQLiteAdapter; |
| 23 | + |
| 24 | +if (typeof window !== 'undefined') { |
| 25 | + adapter = await BrowserAdapter.create('mydb.sqlite'); |
| 26 | +} else { |
| 27 | + adapter = await NodeAdapter.create('mydb.sqlite'); |
| 28 | +} |
| 29 | +``` |
| 30 | + |
| 31 | +## 📁 Project Structure |
14 | 32 |
|
15 | 33 | ``` |
16 | 34 | browser-poc/ |
17 | | -├── README.md # This file |
18 | | -├── package.json # Dependencies (wa-sqlite, better-sqlite3) |
19 | | -├── adapter-test.ts # Adapter pattern POC |
20 | | -├── node-test.ts # Node.js test harness |
21 | | -├── browser-test.html # Browser test harness |
22 | | -└── results.md # Performance & findings |
| 35 | +├── adapter-interface.ts # SQLiteAdapter & Statement interfaces |
| 36 | +├── node-adapter.ts # Node.js implementation (better-sqlite3) |
| 37 | +├── browser-adapter.ts # Browser implementation (wa-sqlite) |
| 38 | +├── adapter.test.ts # 19 interface compliance tests |
| 39 | +├── test.html # Manual browser testing page |
| 40 | +├── docs/ |
| 41 | +│ ├── browser-adapter-spec.md # Requirements specification |
| 42 | +│ ├── browser-adapter-architecture.md # Design decisions |
| 43 | +│ └── poc-summary.md # Implementation summary |
| 44 | +└── README.md # This file |
| 45 | +``` |
| 46 | + |
| 47 | +## 🚀 Quick Start |
| 48 | + |
| 49 | +### 1. Install Dependencies |
| 50 | +```bash |
| 51 | +npm install |
23 | 52 | ``` |
24 | 53 |
|
25 | | -## Setup |
| 54 | +### 2. Build TypeScript |
| 55 | +```bash |
| 56 | +npm run build |
| 57 | +``` |
26 | 58 |
|
| 59 | +### 3. Run Node.js Tests |
27 | 60 | ```bash |
28 | | -cd experiments/browser-poc |
29 | | -npm init -y |
30 | | -npm install wa-sqlite better-sqlite3 typescript @types/node |
31 | | -npx tsc --init |
| 61 | +npm test |
32 | 62 | ``` |
33 | 63 |
|
34 | | -## Tests to Run |
| 64 | +**Note**: BrowserAdapter tests cannot run in Node.js (requires browser APIs). Node tests validate NodeAdapter only. |
35 | 65 |
|
36 | | -### 1. Adapter Interface Validation |
| 66 | +### 4. Manual Browser Testing |
| 67 | +```bash |
| 68 | +# Serve the directory with a local web server |
| 69 | +npx http-server . -p 8080 |
37 | 70 |
|
38 | | -- [ ] Create SQLiteAdapter interface |
39 | | -- [ ] Implement NodeAdapter (better-sqlite3) |
40 | | -- [ ] Implement BrowserAdapter (wa-sqlite) |
41 | | -- [ ] Run same test code with both adapters |
| 71 | +# Open in browser |
| 72 | +open http://localhost:8080/test.html |
| 73 | +``` |
| 74 | + |
| 75 | +Click "Run All Tests" to validate BrowserAdapter in your browser. |
42 | 76 |
|
43 | | -### 2. Core Operations |
| 77 | +## 🧪 Testing Strategy |
44 | 78 |
|
45 | | -- [ ] CREATE TABLE |
46 | | -- [ ] INSERT rows |
47 | | -- [ ] SELECT queries |
48 | | -- [ ] UPDATE operations |
49 | | -- [ ] DELETE operations |
50 | | -- [ ] Transactions (BEGIN/COMMIT/ROLLBACK) |
| 79 | +### Node.js Tests (19 tests - NodeAdapter only) |
| 80 | +```bash |
| 81 | +npm test |
| 82 | +``` |
| 83 | + |
| 84 | +Tests validate: |
| 85 | +- ✅ Basic operations (create, close, exec, prepare) |
| 86 | +- ✅ CRUD operations (insert, select, update, delete) |
| 87 | +- ✅ Transactions (commit, rollback) |
| 88 | +- ✅ PRAGMA operations (get, set) |
| 89 | +- ✅ Graph operations (nodes, edges, traversal) |
| 90 | + |
| 91 | +### Browser Tests (Manual - test.html) |
| 92 | +Open `test.html` in a browser to run: |
| 93 | +- Basic operations tests |
| 94 | +- CRUD operations tests |
| 95 | +- Transaction tests |
| 96 | +- Graph operations tests |
| 97 | +- Performance benchmarks (1000 row inserts) |
| 98 | + |
| 99 | +### Automated Browser Tests (Future) |
| 100 | +Set up Playwright or Vitest browser mode to run same 19 tests in browser automatically. |
| 101 | + |
| 102 | +## 📊 VFS (Virtual File System) Options |
| 103 | + |
| 104 | +BrowserAdapter auto-selects the best VFS: |
| 105 | + |
| 106 | +| VFS | Performance | Availability | Persistence | |
| 107 | +|-----|-------------|--------------|-------------| |
| 108 | +| **OPFS** | ⚡ Excellent | Chrome 102+, Firefox 111+, Safari 15.2+ | ✅ Yes | |
| 109 | +| **IndexedDB** | 🐢 Good | All modern browsers | ✅ Yes | |
| 110 | +| **Memory** | 🚀 Best | Always | ❌ No | |
| 111 | + |
| 112 | +### Auto-Selection Logic |
| 113 | +```typescript |
| 114 | +const adapter = await BrowserAdapter.create('mydb.sqlite'); |
| 115 | +// Automatically chooses: OPFS > IndexedDB > memory |
| 116 | + |
| 117 | +// Check which VFS was selected |
| 118 | +console.log(adapter.getVFS()); // 'opfs', 'idb', or 'memdb' |
| 119 | +``` |
| 120 | + |
| 121 | +### Manual VFS Override |
| 122 | +```typescript |
| 123 | +const adapter = await BrowserAdapter.create('mydb.sqlite', { vfs: 'idb' }); |
| 124 | +``` |
| 125 | + |
| 126 | +## 📖 Documentation |
| 127 | + |
| 128 | +### Key Documents |
| 129 | +1. **[browser-adapter-spec.md](./docs/browser-adapter-spec.md)** - Requirements and wa-sqlite API analysis |
| 130 | +2. **[browser-adapter-architecture.md](./docs/browser-adapter-architecture.md)** - Design decisions and implementation details |
| 131 | +3. **[poc-summary.md](./docs/poc-summary.md)** - POC findings and recommendations |
| 132 | + |
| 133 | +### Code Examples |
| 134 | + |
| 135 | +#### Basic Usage |
| 136 | +```typescript |
| 137 | +import { BrowserAdapter } from './browser-adapter.js'; |
| 138 | + |
| 139 | +// Create database |
| 140 | +const adapter = await BrowserAdapter.create('mydb.sqlite'); |
| 141 | + |
| 142 | +// Same API as NodeAdapter |
| 143 | +await adapter.exec('CREATE TABLE users (id INTEGER PRIMARY KEY, name TEXT)'); |
| 144 | + |
| 145 | +const stmt = await adapter.prepare('INSERT INTO users (name) VALUES (?)'); |
| 146 | +stmt.run('Alice'); |
| 147 | +stmt.finalize(); |
| 148 | + |
| 149 | +await adapter.close(); |
| 150 | +``` |
| 151 | + |
| 152 | +#### Transactions |
| 153 | +```typescript |
| 154 | +await adapter.transaction(async () => { |
| 155 | + const stmt = await adapter.prepare('INSERT INTO nodes (type) VALUES (?)'); |
| 156 | + for (let i = 0; i < 1000; i++) { |
| 157 | + stmt.run('TestNode'); |
| 158 | + } |
| 159 | + stmt.finalize(); |
| 160 | +}); |
| 161 | +``` |
| 162 | + |
| 163 | +#### Universal Factory |
| 164 | +```typescript |
| 165 | +async function createAdapter(path: string): Promise<SQLiteAdapter> { |
| 166 | + if (typeof window !== 'undefined') { |
| 167 | + const { BrowserAdapter } = await import('./browser-adapter.js'); |
| 168 | + return BrowserAdapter.create(path); |
| 169 | + } else { |
| 170 | + const { NodeAdapter } = await import('./node-adapter.js'); |
| 171 | + return NodeAdapter.create(path); |
| 172 | + } |
| 173 | +} |
| 174 | +``` |
51 | 175 |
|
52 | | -### 3. Graph-Specific Operations |
| 176 | +## ✅ Implementation Status |
53 | 177 |
|
54 | | -- [ ] Create nodes table |
55 | | -- [ ] Create edges table |
56 | | -- [ ] Insert nodes with JSON properties |
57 | | -- [ ] Insert edges |
58 | | -- [ ] Query connected nodes |
59 | | -- [ ] BFS traversal simulation |
| 178 | +### Completed |
| 179 | +- ✅ SQLiteAdapter interface definition |
| 180 | +- ✅ NodeAdapter implementation (19 passing tests) |
| 181 | +- ✅ BrowserAdapter implementation |
| 182 | +- ✅ VFS auto-selection (OPFS/IndexedDB/memory) |
| 183 | +- ✅ Transaction management with rollback |
| 184 | +- ✅ Parameter binding with type detection |
| 185 | +- ✅ Error handling and resource cleanup |
| 186 | +- ✅ Documentation (spec, architecture, summary) |
| 187 | +- ✅ Manual test HTML page |
60 | 188 |
|
61 | | -### 4. Persistence Testing |
| 189 | +### Pending |
| 190 | +- ⏳ Browser test automation (Playwright/Vitest) |
| 191 | +- ⏳ Performance benchmarks (OPFS vs IndexedDB) |
| 192 | +- ⏳ Multi-browser compatibility testing |
| 193 | +- ⏳ Integration with main sqlite-graph package |
| 194 | +- ⏳ Production deployment |
62 | 195 |
|
63 | | -**Node.js:** |
64 | | -- [ ] Write to file |
65 | | -- [ ] Close database |
66 | | -- [ ] Reopen and verify data persists |
| 196 | +## 🎯 Next Steps |
67 | 197 |
|
68 | | -**Browser (OPFS):** |
69 | | -- [ ] Write to OPFS |
70 | | -- [ ] Close database |
71 | | -- [ ] Reopen and verify data persists |
72 | | -- [ ] Test across page reloads |
| 198 | +### Immediate |
| 199 | +1. Test `test.html` in Chrome, Firefox, Safari |
| 200 | +2. Validate OPFS detection and IndexedDB fallback |
| 201 | +3. Measure performance (1000 insert benchmark) |
| 202 | +4. Verify persistence across page reloads |
73 | 203 |
|
74 | | -### 5. Performance Benchmarks |
| 204 | +### Short-term |
| 205 | +1. Set up Playwright for automated browser testing |
| 206 | +2. Port all 19 tests to browser environment |
| 207 | +3. Add browser-specific tests (VFS selection, storage quotas) |
| 208 | +4. CI/CD integration for browser tests |
75 | 209 |
|
76 | | -Measure operations/second: |
77 | | -- [ ] Node.js (better-sqlite3) - baseline |
78 | | -- [ ] Browser (wa-sqlite + OPFS) |
79 | | -- [ ] Browser (wa-sqlite + IndexedDB) |
| 210 | +### Medium-term |
| 211 | +1. Integrate adapter pattern into main package |
| 212 | +2. Create universal factory function |
| 213 | +3. Update documentation with browser examples |
| 214 | +4. Publish v1.0 with browser support |
80 | 215 |
|
81 | | -Target: Browser <2x slower than Node.js |
| 216 | +## 🐛 Known Limitations |
82 | 217 |
|
83 | | -## Expected Results |
| 218 | +1. **Browser-only execution** - BrowserAdapter requires browser APIs |
| 219 | +2. **No Node.js testing** - Cannot run browser tests with jest |
| 220 | +3. **VFS availability** - OPFS not universal (Chrome 102+, Firefox 111+) |
| 221 | +4. **Performance** - IndexedDB 3-5x slower than OPFS |
| 222 | +5. **Type definitions** - wa-sqlite uses `any` types (no official TypeScript support) |
84 | 223 |
|
85 | | -### Performance Expectations |
| 224 | +## 📚 References |
86 | 225 |
|
87 | | -| Operation | Node.js (baseline) | Browser (OPFS) | Browser (IndexedDB) | |
88 | | -|-----------|-------------------|----------------|---------------------| |
89 | | -| INSERT | ~40,000 ops/sec | >20,000 ops/sec | >5,000 ops/sec | |
90 | | -| SELECT | ~100,000 ops/sec | >50,000 ops/sec | >10,000 ops/sec | |
91 | | -| Transaction | ~50,000 ops/sec | >25,000 ops/sec | >5,000 ops/sec | |
| 226 | +- [wa-sqlite Documentation](https://github.com/rhashimoto/wa-sqlite) |
| 227 | +- [OPFS (Origin Private File System)](https://developer.mozilla.org/en-US/docs/Web/API/File_System_Access_API) |
| 228 | +- [better-sqlite3](https://github.com/WiseLibs/better-sqlite3) |
92 | 229 |
|
93 | | -### Bundle Size |
| 230 | +## 🤝 Contributing |
94 | 231 |
|
95 | | -- wa-sqlite WASM: ~566 KB uncompressed → ~250 KB gzipped |
96 | | -- wa-sqlite JS: ~229 KB uncompressed → ~50 KB gzipped |
| 232 | +This is a proof-of-concept. To contribute: |
97 | 233 |
|
98 | | -### Success Criteria |
| 234 | +1. Test `test.html` in your browser |
| 235 | +2. Report VFS detection results (OPFS vs IndexedDB) |
| 236 | +3. Share performance benchmark results |
| 237 | +4. Suggest improvements to adapter interface |
99 | 238 |
|
100 | | -- ✅ Same code runs in Node.js and browser |
101 | | -- ✅ Adapter pattern adds <1% performance overhead |
102 | | -- ✅ OPFS persistence works reliably |
103 | | -- ✅ Browser performance within 2x of Node.js |
104 | | -- ✅ No major blockers identified |
| 239 | +## 📄 License |
105 | 240 |
|
106 | | -## Next Steps After POC |
| 241 | +MIT (same as sqlite-graph) |
107 | 242 |
|
108 | | -If successful: |
109 | | -1. Refactor main Database class to use adapter |
110 | | -2. Convert all operations to async/await |
111 | | -3. Add browser build configuration |
112 | | -4. Create comprehensive browser test suite |
| 243 | +--- |
113 | 244 |
|
114 | | -If issues found: |
115 | | -1. Document blockers |
116 | | -2. Explore alternatives (official SQLite WASM, sql.js) |
117 | | -3. Re-evaluate approach |
| 245 | +**SPARC Status**: Implementation Complete ✅ |
| 246 | +**Next Phase**: Browser Testing & Validation |
| 247 | +**Coordinator**: Claude Code |
| 248 | +**Date**: 2025-11-14 |
0 commit comments