@sansavision/create-pulse 0.4.1 → 0.4.2

package/templates/react-queue-demo/src/App.tsx

@@ -36,7 +36,7 @@ const TTL_OPTIONS = [
 ]
 
 export default function App() {
-    const [connected, setConnected] = useState(false)
+    const [connectionState, setConnectionState] = useState<'connecting' | 'connected' | 'reconnecting' | 'disconnected'>('connecting')
     const [messages, setMessages] = useState<DisplayMessage[]>([])
     const [input, setInput] = useState('')
     const [rtt, setRtt] = useState<number | null>(null)
@@ -47,35 +47,54 @@ export default function App() {
     const connRef = useRef<PulseConnection | null>(null)
     const queueRef = useRef<PulseQueue | null>(null)
 
+    const connected = connectionState === 'connected'
+
+    // Helper: drain persisted messages and refresh depth
+    const recoverMessages = useCallback(async (queue: PulseQueue) => {
+        try {
+            const recovered = await queue.drain()
+            if (recovered.length > 0) {
+                setMessages(recovered.map((m) => ({ ...m, state: 'pending' as const })))
+            }
+            await refreshDepth(queue)
+        } catch {
+            // Queue may not exist yet — that's fine, it'll be auto-created
+        }
+    }, [])
+
     // Connect + auto-fetch existing messages on mount
+    // Auto-reconnect is enabled by default in the SDK — the protocol "just works"
     useEffect(() => {
         const pulse = new Pulse({ apiKey: 'dev' })
 
+        setConnectionState('connecting')
+
         pulse.connect('ws://localhost:4001').then(async (connection) => {
             connRef.current = connection
             const queue = new PulseQueue(connection, QUEUE_NAME, 'demo-ui')
             queueRef.current = queue
-            setConnected(true)
+            setConnectionState('connected')
 
             // Live metrics
             connection.on('metrics', (m: ConnectionMetrics) => setRtt(m.rtt))
 
-            // Drain any persisted messages from a previous session
-            const recovered = await queue.drain()
-            if (recovered.length > 0) {
-                setMessages(recovered.map((m) => ({ ...m, state: 'pending' as const })))
-            }
+            // Connection lifecycle events
+            connection.on('disconnect', () => setConnectionState('reconnecting'))
+            connection.on('reconnecting', () => setConnectionState('reconnecting'))
+            connection.on('reconnected', async () => {
+                setConnectionState('connected')
+                // Re-drain persisted messages after reconnect
+                await recoverMessages(queue)
+            })
 
-            // Refresh depth
-            await refreshDepth(queue)
-        }).catch((err: Error) => {
-            console.error('Failed to connect:', err)
+            // Drain any persisted messages from a previous session
+            await recoverMessages(queue)
         })
 
         return () => {
             connRef.current?.disconnect()
         }
-    }, [])
+    }, [recoverMessages])
 
     const refreshDepth = async (queue?: PulseQueue) => {
         const q = queue || queueRef.current
@@ -162,8 +181,10 @@ export default function App() {
             <h1>🔄 Pulse Queue Demo</h1>
             <p style={{ color: '#888' }}>
                 Durable message queues with at-least-once delivery over PLP.
-                {connected ? (
+                {connectionState === 'connected' ? (
                     <span style={{ color: '#4ade80' }}> ● Connected</span>
+                ) : connectionState === 'reconnecting' ? (
+                    <span style={{ color: '#fbbf24' }}> ◌ Reconnecting...</span>
                 ) : (
                     <span style={{ color: '#f87171' }}> ○ Connecting...</span>
                 )}

package/src/index.ts

@@ -1,115 +0,0 @@
-#!/usr/bin/env node
-import * as p from '@clack/prompts';
-import pc from 'picocolors';
-import mri from 'mri';
-import fs from 'fs';
-import path from 'path';
-import { fileURLToPath } from 'url';
-
-const argv = mri(process.argv.slice(2));
-
-// In CommonJS, __dirname is available, but since we compile with tsup to CJS, we can just use __dirname.
-const TEMPLATES_DIR = path.join(__dirname, '../templates');
-
-async function main() {
-    p.intro(pc.bgMagenta(pc.white(' Create Pulse App ')));
-
-    let targetDir = argv._[0];
-
-    const project = await p.group(
-        {
-            path: () => {
-                if (targetDir) return Promise.resolve(targetDir);
-                return p.text({
-                    message: 'Project name:',
-                    initialValue: 'pulse-app',
-                    validate: (val) => {
-                        if (!val || val.trim() === '') return 'Project name is required';
-                        return;
-                    }
-                });
-            },
-            template: () => {
-                return p.select({
-                    message: 'Pick a template:',
-                    options: [
-                        { value: 'react-watch-together', label: 'Watch Together (React + TS)', hint: 'Synchronized video playback' },
-                        { value: 'react-all-features', label: 'All Features (React + TS)', hint: 'Chat, Video, Audio, RPC' },
-                        { value: 'react-queue-demo', label: 'Durable Queues (React + TS)', hint: 'Persistent queues with WAL/Postgres/Redis' },
-                        { value: 'vanilla-basic', label: 'Vanilla JS (Basic)', hint: 'Minimal setup' }
-                    ]
-                });
-            }
-        },
-        {
-            onCancel: () => {
-                p.cancel('Operation cancelled.');
-                process.exit(0);
-            }
-        }
-    );
-
-    const destDir = path.resolve(process.cwd(), project.path);
-    if (!fs.existsSync(destDir)) {
-        fs.mkdirSync(destDir, { recursive: true });
-    }
-
-    const s = p.spinner();
-    s.start(`Scaffolding project in ${pc.cyan(project.path)}...`);
-
-    const templateDir = path.join(TEMPLATES_DIR, project.template as string);
-
-    if (!fs.existsSync(templateDir)) {
-        s.stop(pc.red(`Template ${project.template} not found at ${templateDir}`));
-        process.exit(1);
-    }
-
-    copyDir(templateDir, destDir);
-
-    // Rename _gitignore to .gitignore
-    const gitignorePath = path.join(destDir, '_gitignore');
-    if (fs.existsSync(gitignorePath)) {
-        fs.renameSync(gitignorePath, path.join(destDir, '.gitignore'));
-    }
-
-    // Update package.json name to match the project path
-    const pkgPath = path.join(destDir, 'package.json');
-    if (fs.existsSync(pkgPath)) {
-        const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf-8'));
-        pkg.name = path.basename(destDir);
-        fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2));
-    }
-
-    s.stop(`Scaffolded ${pc.cyan(project.template)} template in ${pc.cyan(project.path)}`);
-
-    p.note(
-        `cd ${project.path}\n` +
-        `npm install\n` +
-        `npm run dev`,
-        'Next steps'
-    );
-
-    p.outro(pc.magenta('Pulse is ready! 🚀'));
-}
-
-function copyDir(src: string, dest: string) {
-    const entries = fs.readdirSync(src, { withFileTypes: true });
-
-    for (const entry of entries) {
-        const srcPath = path.join(src, entry.name);
-        if (entry.name === 'node_modules' || entry.name === 'dist') continue;
-
-        const destPath = path.join(dest, entry.name);
-
-        if (entry.isDirectory()) {
-            if (!fs.existsSync(destPath)) {
-                fs.mkdirSync(destPath);
-            }
-            copyDir(srcPath, destPath);
-        } else {
-            fs.copyFileSync(srcPath, destPath);
-        }
-    }
-}
-
-main().catch(console.error);