@creately/rdm-canvas 0.1.0

package/server/index.ts

@@ -0,0 +1,492 @@
+/**
+ * rdm-canvas Server — Bun HTTP + WebSocket with bidirectional sync
+ *
+ * WebSocket Protocol:
+ *   Server → Client: { type: "rdm", text: "<full rdm text>" }
+ *   Server → Client: { type: "error", errors: [{code, message, line?, column?}] }
+ *   Client → Server: { type: "rdm-update", text: "<full rdm text>" }
+ *   Client → Server: { type: "rdm-patch", op: PatchOperation }
+ */
+
+import { FileWatcher } from './fileWatcher';
+import { readFileSync, existsSync } from 'fs';
+import { resolve, dirname, join } from 'path';
+import type { Server, ServerWebSocket } from 'bun';
+import { parse } from '@creately/rdm-core/parser';
+import { patchRdm } from '@creately/rdm-core/patcher';
+import type { PatchOperation } from '@creately/rdm-core/patcher';
+import { scanRdmFiles } from './fileScanner';
+import { renderIndexPage } from './indexPage';
+
+interface ServerOptions {
+  filePath: string;
+  port: number;
+}
+
+interface WsMessage {
+  type: string;
+  text?: string;
+  op?: PatchOperation;
+  errors?: Array<{ code: string; message: string; line?: number; column?: number }>;
+}
+
+export function startServer(options: ServerOptions): Server {
+  const { filePath, port } = options;
+  const absolutePath = resolve(filePath);
+  const clients = new Set<ServerWebSocket<unknown>>();
+
+  // Read initial content
+  let currentContent = readFileSync(absolutePath, 'utf-8');
+
+  // Set up file watcher
+  const watcher = new FileWatcher({
+    filePath: absolutePath,
+    debounceMs: 100,
+    onChange: (content: string) => {
+      currentContent = content;
+      broadcast({ type: 'rdm', text: content });
+      console.log(`[file→browser] Updated (${content.length} bytes)`);
+    },
+  });
+  watcher.start();
+
+  function broadcast(msg: WsMessage): void {
+    const data = JSON.stringify(msg);
+    for (const ws of clients) {
+      try {
+        ws.send(data);
+      } catch {
+        clients.delete(ws);
+      }
+    }
+  }
+
+  // Resolve static HTML path
+  const staticDir = resolve(dirname(new URL(import.meta.url).pathname), '../static');
+
+  // Look for the viewer bundle in several locations
+  const viewerBundlePaths = [
+    resolve(dirname(absolutePath), 'node_modules/rdm-canvas/static/rdm-viewer.iife.js'),
+    resolve(process.cwd(), 'dist/rdm-viewer/rdm-viewer.iife.js'),
+    resolve(dirname(new URL(import.meta.url).pathname), '../static/rdm-viewer.iife.js'),
+    // Walk up from the watched file looking for dist/rdm-viewer/
+    ...findAncestorPaths(absolutePath, 'dist/rdm-viewer/rdm-viewer.iife.js'),
+  ];
+
+  const server = Bun.serve({
+    port,
+    fetch(req, server) {
+      const url = new URL(req.url);
+
+      // WebSocket upgrade
+      if (url.pathname === '/ws') {
+        const upgraded = server.upgrade(req);
+        if (!upgraded) {
+          return new Response('WebSocket upgrade failed', { status: 400 });
+        }
+        return undefined;
+      }
+
+      // Serve the viewer bundle
+      if (url.pathname === '/rdm-viewer.iife.js') {
+        for (const bundlePath of viewerBundlePaths) {
+          if (existsSync(bundlePath)) {
+            return new Response(Bun.file(bundlePath), {
+              headers: {
+                'Content-Type': 'application/javascript',
+                'Cache-Control': 'no-cache, no-store, must-revalidate',
+              },
+            });
+          }
+        }
+        return new Response('Viewer bundle not found. Run: bun run build:rdm-viewer', {
+          status: 404,
+        });
+      }
+
+      // Serve static HTML
+      if (url.pathname === '/' || url.pathname === '/index.html') {
+        const htmlPath = resolve(staticDir, 'index.html');
+        if (existsSync(htmlPath)) {
+          return new Response(Bun.file(htmlPath), {
+            headers: { 'Content-Type': 'text/html' },
+          });
+        }
+        // Inline fallback HTML
+        return new Response(getInlineHtml(), {
+          headers: { 'Content-Type': 'text/html' },
+        });
+      }
+
+      return new Response('Not found', { status: 404 });
+    },
+    websocket: {
+      open(ws) {
+        clients.add(ws);
+        // Send current content on connect
+        ws.send(JSON.stringify({ type: 'rdm', text: currentContent }));
+        console.log(`[ws] Client connected (${clients.size} total)`);
+      },
+      message(ws, message) {
+        try {
+          const msg: WsMessage = JSON.parse(String(message));
+          if (msg.type === 'rdm-update' && msg.text) {
+            // Validate before writing — reject if the serialized output doesn't parse
+            const parseResult = parse(msg.text);
+            if (parseResult.errors && parseResult.errors.length > 0) {
+              console.log(`[browser→file] REJECTED: ${parseResult.errors.length} parse error(s) — not writing to disk`);
+              return;
+            }
+            currentContent = msg.text;
+            // Write back to file (watcher suppressed during write)
+            watcher.writeBack(msg.text).then(() => {
+              console.log(`[browser→file] Updated (${msg.text!.length} bytes)`);
+            });
+            // Broadcast to other clients
+            for (const client of clients) {
+              if (client !== ws) {
+                client.send(JSON.stringify({ type: 'rdm', text: msg.text }));
+              }
+            }
+          } else if (msg.type === 'rdm-patch' && msg.op) {
+            const result = patchRdm(currentContent, msg.op);
+            if (!result.success) {
+              ws.send(JSON.stringify({ type: 'error', errors: (result.errors || []).map(m => ({ code: 'PATCH_FAILED', message: m })) }));
+              return;
+            }
+            currentContent = result.text;
+            watcher.writeBack(result.text).then(() => {
+              console.log(`[patch→file] Updated (${result.text.length} bytes)`);
+            });
+            // Broadcast to other clients (not the sender — they already have the position)
+            for (const client of clients) {
+              if (client !== ws) {
+                try { client.send(JSON.stringify({ type: 'rdm', text: result.text })); } catch { clients.delete(client); }
+              }
+            }
+          }
+        } catch {
+          // Invalid JSON, ignore
+        }
+      },
+      close(ws) {
+        clients.delete(ws);
+        console.log(`[ws] Client disconnected (${clients.size} total)`);
+      },
+    },
+  });
+
+  return server;
+}
+
+// --- Directory Mode ---
+
+interface DirectoryServerOptions {
+  rootDir: string;
+  port: number;
+  title?: string;
+}
+
+interface FileSession {
+  watcher: FileWatcher;
+  clients: Set<ServerWebSocket<{ filePath: string }>>;
+  content: string;
+}
+
+export function startDirectoryServer(options: DirectoryServerOptions): Server {
+  const { rootDir, port, title = 'rdm-canvas' } = options;
+  const absoluteRoot = resolve(rootDir);
+  const fileSessions = new Map<string, FileSession>();
+
+  const staticDir = resolve(dirname(new URL(import.meta.url).pathname), '../static');
+
+  const viewerBundlePaths = [
+    resolve(process.cwd(), 'dist/rdm-viewer/rdm-viewer.iife.js'),
+    resolve(dirname(new URL(import.meta.url).pathname), '../static/rdm-viewer.iife.js'),
+    ...findAncestorPaths(absoluteRoot, 'dist/rdm-viewer/rdm-viewer.iife.js'),
+  ];
+
+  function getOrCreateSession(relPath: string): FileSession | null {
+    if (fileSessions.has(relPath)) return fileSessions.get(relPath)!;
+
+    const absPath = resolve(absoluteRoot, relPath);
+    if (!existsSync(absPath)) return null;
+
+    const content = readFileSync(absPath, 'utf-8');
+    const clients = new Set<ServerWebSocket<{ filePath: string }>>();
+
+    const watcher = new FileWatcher({
+      filePath: absPath,
+      debounceMs: 100,
+      onChange: (newContent: string) => {
+        session.content = newContent;
+        const data = JSON.stringify({ type: 'rdm', text: newContent });
+        for (const ws of clients) {
+          try { ws.send(data); } catch { clients.delete(ws); }
+        }
+        console.log(`[file→browser] ${relPath} (${newContent.length} bytes)`);
+      },
+    });
+    watcher.start();
+
+    const session: FileSession = { watcher, clients, content };
+    fileSessions.set(relPath, session);
+    return session;
+  }
+
+  function cleanupSession(relPath: string): void {
+    const session = fileSessions.get(relPath);
+    if (session && session.clients.size === 0) {
+      session.watcher.stop();
+      fileSessions.delete(relPath);
+      console.log(`[watch] Stopped watching ${relPath}`);
+    }
+  }
+
+  function serveViewerPage(filePath: string): Response {
+    const htmlPath = resolve(staticDir, 'index.html');
+    if (existsSync(htmlPath)) {
+      let html = readFileSync(htmlPath, 'utf-8');
+      // Inject back-link and file query param
+      const backLink = `<a href="/" style="position:fixed;top:12px;left:12px;z-index:9999;font-family:system-ui,sans-serif;font-size:13px;color:#64748b;text-decoration:none;background:rgba(255,255,255,0.9);padding:4px 10px;border-radius:6px;border:1px solid #e2e8f0;">\u2190 Index</a>`;
+      html = html.replace('<body>', `<body>${backLink}`);
+      // Inject file path as a global so the WS script can use it
+      const script = `<script>window.__RDM_FILE__ = ${JSON.stringify(filePath)};</script>`;
+      html = html.replace('</head>', `${script}</head>`);
+      return new Response(html, { headers: { 'Content-Type': 'text/html' } });
+    }
+    return new Response('Viewer HTML not found', { status: 404 });
+  }
+
+  const server = Bun.serve<{ filePath: string }>({
+    port,
+    fetch(req, server) {
+      const url = new URL(req.url);
+
+      // Index page
+      if (url.pathname === '/') {
+        const files = scanRdmFiles(absoluteRoot);
+        return new Response(renderIndexPage(files, title), {
+          headers: { 'Content-Type': 'text/html' },
+        });
+      }
+
+      // API: file list
+      if (url.pathname === '/api/files') {
+        const files = scanRdmFiles(absoluteRoot);
+        return new Response(JSON.stringify(files), {
+          headers: { 'Content-Type': 'application/json' },
+        });
+      }
+
+      // Viewer page
+      if (url.pathname.startsWith('/view/')) {
+        const filePath = decodeURIComponent(url.pathname.slice(6));
+        const absPath = resolve(absoluteRoot, filePath);
+        if (!absPath.startsWith(absoluteRoot) || !existsSync(absPath)) {
+          return new Response('File not found', { status: 404 });
+        }
+        return serveViewerPage(filePath);
+      }
+
+      // WebSocket upgrade
+      if (url.pathname === '/ws') {
+        const filePath = url.searchParams.get('file') || '';
+        if (!filePath) return new Response('Missing file param', { status: 400 });
+        const upgraded = server.upgrade(req, { data: { filePath } });
+        if (!upgraded) return new Response('WebSocket upgrade failed', { status: 400 });
+        return undefined;
+      }
+
+      // Viewer bundle
+      if (url.pathname === '/rdm-viewer.iife.js') {
+        for (const bundlePath of viewerBundlePaths) {
+          if (existsSync(bundlePath)) {
+            return new Response(Bun.file(bundlePath), {
+              headers: {
+                'Content-Type': 'application/javascript',
+                'Cache-Control': 'no-cache, no-store, must-revalidate',
+              },
+            });
+          }
+        }
+        return new Response('Viewer bundle not found. Run: bun run build:rdm-viewer', { status: 404 });
+      }
+
+      return new Response('Not found', { status: 404 });
+    },
+    websocket: {
+      open(ws) {
+        const { filePath } = ws.data;
+        const session = getOrCreateSession(filePath);
+        if (!session) {
+          ws.close(1008, 'File not found');
+          return;
+        }
+        session.clients.add(ws);
+        ws.send(JSON.stringify({ type: 'rdm', text: session.content }));
+        console.log(`[ws] ${filePath}: client connected (${session.clients.size} total)`);
+      },
+      message(ws, message) {
+        const { filePath } = ws.data;
+        const session = fileSessions.get(filePath);
+        if (!session) return;
+        try {
+          const msg: WsMessage = JSON.parse(String(message));
+          if (msg.type === 'rdm-update' && msg.text) {
+            const parseResult = parse(msg.text);
+            if (parseResult.errors && parseResult.errors.length > 0) {
+              console.log(`[browser→file] ${filePath}: REJECTED (${parseResult.errors.length} errors)`);
+              return;
+            }
+            session.content = msg.text;
+            session.watcher.writeBack(msg.text).then(() => {
+              console.log(`[browser→file] ${filePath}: Updated (${msg.text!.length} bytes)`);
+            });
+            for (const client of session.clients) {
+              if (client !== ws) {
+                client.send(JSON.stringify({ type: 'rdm', text: msg.text }));
+              }
+            }
+          } else if (msg.type === 'rdm-patch' && msg.op) {
+            const result = patchRdm(session.content, msg.op);
+            if (!result.success) {
+              ws.send(JSON.stringify({ type: 'error', errors: (result.errors || []).map(m => ({ code: 'PATCH_FAILED', message: m })) }));
+              return;
+            }
+            session.content = result.text;
+            session.watcher.writeBack(result.text).then(() => {
+              console.log(`[patch→file] ${filePath}: Updated (${result.text.length} bytes)`);
+            });
+            // Broadcast to other clients (not the sender)
+            const data = JSON.stringify({ type: 'rdm', text: result.text });
+            for (const client of session.clients) {
+              if (client !== ws) {
+                try { client.send(data); } catch { session.clients.delete(client); }
+              }
+            }
+          }
+        } catch {
+          // Invalid JSON
+        }
+      },
+      close(ws) {
+        const { filePath } = ws.data;
+        const session = fileSessions.get(filePath);
+        if (session) {
+          session.clients.delete(ws);
+          console.log(`[ws] ${filePath}: client disconnected (${session.clients.size} total)`);
+          cleanupSession(filePath);
+        }
+      },
+    },
+  });
+
+  return server;
+}
+
+function findAncestorPaths(fromPath: string, target: string): string[] {
+  const paths: string[] = [];
+  let dir = dirname(fromPath);
+  for (let i = 0; i < 10; i++) {
+    const candidate = resolve(dir, target);
+    paths.push(candidate);
+    const parent = dirname(dir);
+    if (parent === dir) break;
+    dir = parent;
+  }
+  return paths;
+}
+
+function getInlineHtml(): string {
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>rdm-canvas</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    html, body { width: 100%; height: 100%; overflow: hidden; }
+    #rdm-root { width: 100%; height: 100%; }
+    .ws-status {
+      position: fixed; top: 8px; left: 8px; z-index: 1000;
+      padding: 4px 10px; border-radius: 4px; font-size: 12px;
+      font-family: system-ui, sans-serif;
+      background: rgba(0,0,0,0.7); color: #4ade80;
+    }
+    .ws-status.disconnected { color: #f87171; }
+  </style>
+</head>
+<body>
+  <div id="ws-status" class="ws-status">Connecting...</div>
+  <div id="rdm-root"></div>
+  <script src="/rdm-viewer.iife.js"></script>
+  <script>
+    let viewer = null;
+    let ws = null;
+    let reconnectTimer = null;
+    const statusEl = document.getElementById('ws-status');
+
+    function connect() {
+      const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
+      ws = new WebSocket(protocol + '//' + location.host + '/ws');
+
+      ws.onopen = () => {
+        statusEl.textContent = 'Connected';
+        statusEl.className = 'ws-status';
+        if (reconnectTimer) { clearTimeout(reconnectTimer); reconnectTimer = null; }
+      };
+
+      ws.onmessage = (event) => {
+        try {
+          const msg = JSON.parse(event.data);
+          if (msg.type === 'rdm') {
+            if (!viewer) {
+              viewer = window._RdmViewer.mount(document.getElementById('rdm-root'), {
+                rdmText: msg.text,
+                editable: true,
+                onPatch: (op) => {
+                  if (ws && ws.readyState === WebSocket.OPEN) {
+                    ws.send(JSON.stringify({ type: 'rdm-patch', op: op }));
+                  }
+                },
+                onRdmChange: (rdmText) => {
+                  if (ws && ws.readyState === WebSocket.OPEN) {
+                    ws.send(JSON.stringify({ type: 'rdm-update', text: rdmText }));
+                  }
+                }
+              });
+            } else {
+              viewer.updateRdm(msg.text);
+            }
+          }
+        } catch (e) {
+          console.error('WS message error:', e);
+        }
+      };
+
+      ws.onclose = () => {
+        statusEl.textContent = 'Disconnected - reconnecting...';
+        statusEl.className = 'ws-status disconnected';
+        reconnectTimer = setTimeout(connect, 2000);
+      };
+
+      ws.onerror = () => ws.close();
+    }
+
+    // Resolve double-nesting from Vite IIFE: window.RdmViewer.RdmViewer.mount or window.RdmViewer.mount
+    var Viewer = window.RdmViewer;
+    if (Viewer && Viewer.RdmViewer) Viewer = Viewer.RdmViewer;
+    if (Viewer && Viewer.default) Viewer = Viewer.default;
+    if (Viewer && Viewer.mount) {
+      window._RdmViewer = Viewer;
+      connect();
+    } else {
+      statusEl.textContent = 'Error: Viewer bundle not loaded';
+      statusEl.className = 'ws-status disconnected';
+    }
+  </script>
+</body>
+</html>`;
+}

package/server/indexPage.ts

@@ -0,0 +1,108 @@
+/**
+ * Index Page — Server-rendered HTML for directory mode file listing
+ */
+
+import type { RdmFileInfo } from './fileScanner';
+
+export function renderIndexPage(files: RdmFileInfo[], title: string): string {
+  const grouped = new Map<string, RdmFileInfo[]>();
+  for (const file of files) {
+    const dir = file.directory || '(root)';
+    if (!grouped.has(dir)) grouped.set(dir, []);
+    grouped.get(dir)!.push(file);
+  }
+
+  const sections = Array.from(grouped.entries())
+    .map(([dir, dirFiles]) => {
+      const cards = dirFiles
+        .map((f) => {
+          const href = `/view/${encodeURIComponent(f.relativePath)}`;
+          const typeLabel = f.type
+            ? `<span class="badge badge-${f.type}">${f.type}</span>`
+            : '';
+          const sizeKb = (f.size / 1024).toFixed(1);
+          return `<a class="card" href="${href}">
+          <div class="card-title">${escapeHtml(f.title || f.name)}</div>
+          <div class="card-meta">
+            ${typeLabel}
+            <span class="size">${sizeKb} KB</span>
+          </div>
+          ${f.title ? `<div class="card-filename">${escapeHtml(f.name)}</div>` : ''}
+        </a>`;
+        })
+        .join('\n');
+
+      const dirLabel = dir === '(root)' ? 'Files' : dir;
+      return `<section>
+        <h2>${escapeHtml(dirLabel)}<span class="count">${dirFiles.length}</span></h2>
+        <div class="grid">${cards}</div>
+      </section>`;
+    })
+    .join('\n');
+
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>${escapeHtml(title)}</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+      background: #f8f9fa; color: #1a1a2e; padding: 32px;
+      max-width: 960px; margin: 0 auto;
+    }
+    h1 { font-size: 24px; font-weight: 600; margin-bottom: 8px; }
+    .subtitle { color: #666; font-size: 14px; margin-bottom: 32px; }
+    section { margin-bottom: 32px; }
+    h2 {
+      font-size: 14px; font-weight: 600; text-transform: uppercase;
+      letter-spacing: 0.05em; color: #666; margin-bottom: 12px;
+      display: flex; align-items: center; gap: 8px;
+    }
+    .count {
+      background: #e2e8f0; color: #475569; border-radius: 10px;
+      padding: 1px 8px; font-size: 12px; font-weight: 500;
+    }
+    .grid {
+      display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+      gap: 12px;
+    }
+    .card {
+      display: block; background: #fff; border: 1px solid #e2e8f0;
+      border-radius: 8px; padding: 16px; text-decoration: none; color: inherit;
+      transition: border-color 0.15s, box-shadow 0.15s;
+    }
+    .card:hover {
+      border-color: #3b82f6; box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
+    }
+    .card-title { font-size: 14px; font-weight: 500; margin-bottom: 8px; }
+    .card-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; }
+    .card-filename { font-size: 11px; color: #94a3b8; margin-top: 6px; }
+    .badge {
+      padding: 2px 8px; border-radius: 4px; font-size: 11px;
+      font-weight: 500; text-transform: uppercase; letter-spacing: 0.03em;
+    }
+    .badge-genogram { background: #fef3c7; color: #92400e; }
+    .badge-orgchart { background: #dbeafe; color: #1e40af; }
+    .badge-process { background: #d1fae5; color: #065f46; }
+    .badge-bpmn { background: #ede9fe; color: #5b21b6; }
+    .size { color: #94a3b8; }
+  </style>
+</head>
+<body>
+  <h1>${escapeHtml(title)}</h1>
+  <p class="subtitle">${files.length} diagram${files.length !== 1 ? 's' : ''}</p>
+  ${sections}
+</body>
+</html>`;
+}
+
+function escapeHtml(str: string): string {
+  return str
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;');
+}