Skip to content

README.md

Latest commit

 

History

History
118 lines (86 loc) · 3.21 KB

README.md

File metadata and controls

118 lines (86 loc) · 3.21 KB

Vite + AbsurderSQL Example with Multi-Tab Support

This example demonstrates using absurder-sql in a Vite development environment with comprehensive multi-tab coordination.

Setup

# Install dependencies
npm install

# Build the WASM package (from repo root)
cd ../..
wasm-pack build --target web --out-dir pkg
cd examples/vite-app

# Start dev server
npm run dev

Features

Core Features

  • [✓] Hot module replacement with Vite
  • [✓] SQLite database in the browser
  • [✓] IndexedDB persistence
  • [✓] Multi-tab leader election
  • [✓] Automatic write coordination
  • [✓] Real-time sync across tabs
  • [✓] Leader/follower badge display
  • [✓] Automatic UI updates on tab status change

Advanced Features

  • [✓] Write Queuing: Queue writes from any tab
  • [✓] Optimistic Updates: Track pending writes
  • [✓] Coordination Metrics: Monitor performance

Multi-Tab Testing

  1. Open http://localhost:5173 in your browser
  2. Open the same URL in additional tabs
  3. Observe the leader badge ([LEADER] or [FOLLOWER])
  4. Try clicking "Run Test" in different tabs
  5. See how only the leader tab can write
  6. Click "Request Leadership" to become leader
  7. Watch how data changes sync across all tabs

How It Works

  • Leader Election: First tab becomes leader automatically
  • Write Guard: Only leader can execute INSERT/UPDATE/DELETE
  • Auto-Sync: Changes automatically sync to IndexedDB
  • Notifications: BroadcastChannel notifies other tabs of changes
  • Failover: When leader tab closes, another tab becomes leader

Code Highlights

The app uses MultiTabDatabase wrapper for simplified multi-tab handling:

import { MultiTabDatabase } from '../multi-tab-wrapper.js';

const db = new MultiTabDatabase(Database, 'vite_example', {
  autoSync: true,           // Auto-sync after writes
  waitForLeadership: false  // Error if not leader
});

await db.init();

// Only leader can write
await db.write("INSERT INTO items VALUES (1, 'Item', 9.99)");

// OR use queueWrite from any tab
await db.queueWrite("INSERT INTO items VALUES (1, 'Item', 9.99)");
// Leaders execute immediately, followers forward to leader

// Any tab can read
const result = await db.query("SELECT * FROM items");

// Listen for changes from other tabs
db.onRefresh(() => {
  console.log('Data changed in another tab!');
});

// Advanced Features:

// Optimistic Updates
await db.enableOptimisticUpdates(true);
const writeId = await db.trackOptimisticWrite("INSERT ...");
const pending = await db.getPendingWritesCount();

// Coordination Metrics
await db.enableCoordinationMetrics(true);
await db.recordLeadershipChange(true);
const metrics = JSON.parse(await db.getCoordinationMetrics());

Production build

npm run build
npm run preview

The build output in dist/ is ready to deploy to any static host.

Documentation

E2E Testing

This app is tested with Playwright. Run tests from repo root:

npm run test:e2e