vimd 0.2.4 → 0.3.1

package/README.md

@@ -68,7 +68,7 @@
 npm install -g vimd
 ```
 
-**現在の安定版: v0.2.4**
+**現在の安定版: v0.3.0**
 
 v0.2.0 からは **pandoc なしで利用可能** になりました。
 高品質な出力が必要な場合のみ pandoc をインストールしてください。
@@ -103,10 +103,11 @@ vimd config
 
 ## バージョン情報
 
-**安定版: v0.2.4**（最新版と同一）
+**安定版: v0.3.0**（最新版と同一）
 
-安定版は十分なテストを経てリリースされたバージョンです。
-最新版と安定版が異なる場合は、両方を記載します。
+v0.3.0 では内部アーキテクチャを刷新し、パフォーマンスを改善しました:
+- WebSocket 直接通信によるライブリロード（live-server 依存を削除）
+- バンドルサイズ 83% 削減
 
 安定版のインストール:
 ```bash
@@ -196,6 +197,7 @@ export default {
 - [APIリファレンス](docs/ja/api.md) - 詳細なオプション
 - [テスト](docs/ja/testing.md) - テスト構成
 - [トラブルシューティング](docs/ja/troubleshooting.md) - よくある問題
+- [v0.3.0 リリースノート](docs/ja/releases/v0.3.0.md) - WebSocket Direct Communication
 - [v0.2.0 リリースノート](docs/ja/releases/v0.2.0.md) - Dual Parser System
 
 ---

package/dist/cli/commands/dev.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dev.d.ts","sourceRoot":"","sources":["../../../src/cli/commands/dev.ts"],"names":[],"mappings":"AAaA,UAAU,UAAU;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,wBAAsB,UAAU,CAC9B,QAAQ,EAAE,MAAM,EAChB,OAAO,EAAE,UAAU,GAClB,OAAO,CAAC,IAAI,CAAC,CA6Jf"}
+{"version":3,"file":"dev.d.ts","sourceRoot":"","sources":["../../../src/cli/commands/dev.ts"],"names":[],"mappings":"AAcA,UAAU,UAAU;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,wBAAsB,UAAU,CAC9B,QAAQ,EAAE,MAAM,EAChB,OAAO,EAAE,UAAU,GAClB,OAAO,CAAC,IAAI,CAAC,CAwKf"}

package/dist/cli/commands/dev.js

@@ -2,7 +2,7 @@
 import { ConfigLoader } from '../../config/loader.js';
 import { FileWatcher } from '../../core/watcher.js';
 import { MarkdownConverter } from '../../core/converter.js';
-import { LiveServer } from '../../core/server.js';
+import { WebSocketServer } from '../../core/websocket-server.js';
 import { PandocDetector } from '../../core/pandoc-detector.js';
 import { ParserFactory } from '../../core/parser/index.js';
 import { Logger } from '../../utils/logger.js';
@@ -10,6 +10,7 @@ import { ProcessManager } from '../../utils/process-manager.js';
 import { SessionManager } from '../../utils/session-manager.js';
 import * as path from 'path';
 import fs from 'fs-extra';
+import open from 'open';
 export async function devCommand(filePath, options) {
     try {
         Logger.info('Starting vimd dev...');
@@ -80,19 +81,29 @@ export async function devCommand(filePath, options) {
         const html = await converter.convertWithTemplate(absolutePath);
         await converter.writeHTML(html, htmlPath);
         Logger.success('Conversion complete');
-        // 11. Start live server from source directory
-        const server = new LiveServer({
+        // 11. Start WebSocket server from source directory
+        const server = new WebSocketServer({
             port: port,
             host: config.host,
-            open: config.open,
             root: sourceDir,
         });
-        const startResult = await server.start(htmlPath);
-        // Update port if live-server used a different one
+        const startResult = await server.start();
+        // Update port if server used a different one
         const actualPort = startResult.actualPort;
         if (startResult.portChanged) {
             port = actualPort;
         }
+        // 11.5. Open browser if configured
+        if (config.open) {
+            const url = `http://${config.host}:${actualPort}/${htmlFileName}`;
+            try {
+                await open(url);
+                Logger.info('Browser opened');
+            }
+            catch {
+                Logger.warn('Failed to open browser automatically');
+            }
+        }
         // 12. Save session with actual port
         await SessionManager.saveSession({
             pid: process.pid,
@@ -110,6 +121,7 @@ export async function devCommand(filePath, options) {
             try {
                 const newHtml = await converter.convertWithTemplate(changedPath);
                 await converter.writeHTML(newHtml, htmlPath);
+                server.broadcast('reload');
                 Logger.success('Reconversion complete');
             }
             catch (error) {

package/dist/core/websocket-server.d.ts

@@ -0,0 +1,51 @@
+/**
+ * WebSocketServer options
+ * Note: 'open' property is not included (handled by dev.ts)
+ */
+export interface WebSocketServerOptions {
+    port: number;
+    root: string;
+    host?: string;
+}
+/**
+ * Result of server start operation
+ * Same interface as previous LiveServer for compatibility
+ */
+export interface ServerStartResult {
+    actualPort: number;
+    requestedPort: number;
+    portChanged: boolean;
+}
+/**
+ * WebSocket server for live reload functionality
+ * Replaces live-server with direct WebSocket control
+ */
+export declare class WebSocketServer {
+    private httpServer;
+    private wsServer;
+    private clients;
+    private options;
+    private _port;
+    constructor(options: WebSocketServerOptions);
+    /**
+     * Get the actual port the server is running on
+     */
+    get port(): number;
+    /**
+     * Start the HTTP and WebSocket servers
+     */
+    start(): Promise<ServerStartResult>;
+    /**
+     * Stop the server
+     */
+    stop(): Promise<void>;
+    /**
+     * Broadcast a message to all connected clients
+     */
+    broadcast(type: string, data?: unknown): void;
+    /**
+     * Inject reload script into HTML content
+     */
+    private injectReloadScript;
+}
+//# sourceMappingURL=websocket-server.d.ts.map

package/dist/core/websocket-server.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"websocket-server.d.ts","sourceRoot":"","sources":["../../src/core/websocket-server.ts"],"names":[],"mappings":"AAUA;;;GAGG;AACH,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;GAGG;AACH,MAAM,WAAW,iBAAiB;IAChC,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,OAAO,CAAC;CACtB;AA0CD;;;GAGG;AACH,qBAAa,eAAe;IAC1B,OAAO,CAAC,UAAU,CAA4B;IAC9C,OAAO,CAAC,QAAQ,CAAyB;IACzC,OAAO,CAAC,OAAO,CAA6B;IAC5C,OAAO,CAAC,OAAO,CAAyB;IACxC,OAAO,CAAC,KAAK,CAAS;gBAEV,OAAO,EAAE,sBAAsB;IAQ3C;;OAEG;IACH,IAAI,IAAI,IAAI,MAAM,CAEjB;IAED;;OAEG;IACG,KAAK,IAAI,OAAO,CAAC,iBAAiB,CAAC;IA4GzC;;OAEG;IACG,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC;IA8B3B;;OAEG;IACH,SAAS,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,OAAO,GAAG,IAAI;IAU7C;;OAEG;IACH,OAAO,CAAC,kBAAkB;CAc3B"}

package/dist/core/websocket-server.js

@@ -0,0 +1,217 @@
+// src/core/websocket-server.ts
+import http from 'http';
+import fs from 'fs';
+import path from 'path';
+import polka from 'polka';
+import sirv from 'sirv';
+import { WebSocketServer as WSServer, WebSocket } from 'ws';
+import { Logger } from '../utils/logger.js';
+import { SessionManager } from '../utils/session-manager.js';
+/**
+ * WebSocket reload script injected into HTML
+ * Features:
+ * - Reconnection with max 5 retries (prevents infinite loop)
+ * - Protocol detection for future HTTPS support
+ */
+const RELOAD_SCRIPT = `
+<script>
+(function() {
+  var protocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
+  var ws = new WebSocket(protocol + '//' + location.host);
+
+  ws.onmessage = function(event) {
+    var data = JSON.parse(event.data);
+    if (data.type === 'reload') {
+      location.reload();
+    }
+  };
+
+  ws.onclose = function() {
+    var retries = 0;
+    var maxRetries = 5;
+
+    function reconnect() {
+      if (retries++ >= maxRetries) {
+        console.log('[vimd] Server disconnected. Please refresh manually.');
+        return;
+      }
+      setTimeout(function() {
+        var newWs = new WebSocket(protocol + '//' + location.host);
+        newWs.onopen = function() { location.reload(); };
+        newWs.onerror = reconnect;
+      }, 1000);
+    }
+    reconnect();
+  };
+})();
+</script>
+`;
+/**
+ * WebSocket server for live reload functionality
+ * Replaces live-server with direct WebSocket control
+ */
+export class WebSocketServer {
+    constructor(options) {
+        this.httpServer = null;
+        this.wsServer = null;
+        this.clients = new Set();
+        this.options = {
+            host: 'localhost',
+            ...options,
+        };
+        this._port = options.port;
+    }
+    /**
+     * Get the actual port the server is running on
+     */
+    get port() {
+        return this._port;
+    }
+    /**
+     * Start the HTTP and WebSocket servers
+     */
+    async start() {
+        const requestedPort = this.options.port;
+        let actualPort = requestedPort;
+        // Check if port is available, find alternative if not
+        if (!(await SessionManager.isPortAvailable(requestedPort))) {
+            actualPort = await SessionManager.findAvailablePort(requestedPort + 1);
+            Logger.warn(`Port ${requestedPort} was unavailable, using port ${actualPort}`);
+        }
+        this._port = actualPort;
+        // Create static file server with sirv
+        const serve = sirv(this.options.root, {
+            dev: true, // Enable dev mode for no caching
+        });
+        // Create polka app with HTML injection middleware
+        const app = polka();
+        // Middleware to inject reload script into HTML
+        // For HTML files, read directly to avoid sirv streaming issues
+        app.use((req, res, next) => {
+            // Only process GET requests for HTML files
+            if (req.method !== 'GET' || !req.url?.endsWith('.html')) {
+                return serve(req, res, next);
+            }
+            // Parse the URL and resolve the file path
+            const urlPath = req.url || '/index.html';
+            const filePath = path.join(this.options.root, urlPath);
+            // Check if file exists
+            if (!fs.existsSync(filePath)) {
+                // Let sirv handle 404
+                return serve(req, res, next);
+            }
+            try {
+                // Read HTML file directly
+                const html = fs.readFileSync(filePath, 'utf8');
+                // Inject reload script
+                const injectedHtml = this.injectReloadScript(html);
+                // Send response with proper headers
+                res.writeHead(200, {
+                    'Content-Type': 'text/html; charset=utf-8',
+                    'Content-Length': Buffer.byteLength(injectedHtml, 'utf8'),
+                    'Cache-Control': 'no-cache, no-store, must-revalidate',
+                });
+                res.end(injectedHtml);
+            }
+            catch (error) {
+                // On error, fall back to sirv
+                Logger.warn(`Failed to read HTML file: ${filePath}`);
+                serve(req, res, next);
+            }
+        });
+        // Create HTTP server
+        this.httpServer = http.createServer(app.handler);
+        // Create WebSocket server attached to HTTP server
+        this.wsServer = new WSServer({ server: this.httpServer });
+        // Handle WebSocket connections
+        this.wsServer.on('connection', (ws) => {
+            this.clients.add(ws);
+            Logger.info(`WebSocket client connected (${this.clients.size} total)`);
+            ws.on('close', () => {
+                this.clients.delete(ws);
+                Logger.info(`WebSocket client disconnected (${this.clients.size} remaining)`);
+            });
+            ws.on('error', (error) => {
+                Logger.warn(`WebSocket error: ${error.message}`);
+                this.clients.delete(ws);
+            });
+        });
+        // Start listening
+        await new Promise((resolve, reject) => {
+            const timeout = setTimeout(() => {
+                reject(new Error('Server start timeout'));
+            }, 10000);
+            this.httpServer.listen(actualPort, this.options.host, () => {
+                clearTimeout(timeout);
+                resolve();
+            });
+            this.httpServer.on('error', (err) => {
+                clearTimeout(timeout);
+                reject(err);
+            });
+        });
+        const url = `http://${this.options.host}:${actualPort}`;
+        Logger.success(`Server started at ${url}`);
+        return {
+            actualPort,
+            requestedPort,
+            portChanged: actualPort !== requestedPort,
+        };
+    }
+    /**
+     * Stop the server
+     */
+    async stop() {
+        // Close all WebSocket connections
+        for (const client of this.clients) {
+            try {
+                client.close();
+            }
+            catch {
+                // Ignore close errors
+            }
+        }
+        this.clients.clear();
+        // Close WebSocket server
+        if (this.wsServer) {
+            await new Promise((resolve) => {
+                this.wsServer.close(() => resolve());
+            });
+            this.wsServer = null;
+        }
+        // Close HTTP server
+        if (this.httpServer) {
+            await new Promise((resolve) => {
+                this.httpServer.close(() => resolve());
+            });
+            this.httpServer = null;
+        }
+        Logger.info('Server stopped');
+    }
+    /**
+     * Broadcast a message to all connected clients
+     */
+    broadcast(type, data) {
+        const message = JSON.stringify({ type, data });
+        for (const client of this.clients) {
+            if (client.readyState === WebSocket.OPEN) {
+                client.send(message);
+            }
+        }
+    }
+    /**
+     * Inject reload script into HTML content
+     */
+    injectReloadScript(html) {
+        // Try to inject before </body>
+        if (html.includes('</body>')) {
+            return html.replace('</body>', `${RELOAD_SCRIPT}</body>`);
+        }
+        // Fallback: inject before </html>
+        if (html.includes('</html>')) {
+            return html.replace('</html>', `${RELOAD_SCRIPT}</html>`);
+        }
+        // Last resort: append to the end
+        return html + RELOAD_SCRIPT;
+    }
+}

package/dist/index.d.ts

@@ -2,7 +2,7 @@ export type { VimdConfig, ThemeInfo } from './config/types.js';
 export { defineConfig } from './config/types.js';
 export { MarkdownConverter } from './core/converter.js';
 export { FileWatcher } from './core/watcher.js';
-export { LiveServer } from './core/server.js';
+export { WebSocketServer } from './core/websocket-server.js';
 export { PandocDetector } from './core/pandoc-detector.js';
 export { ThemeManager } from './themes/index.js';
 export { ConfigLoader } from './config/loader.js';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAIA,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAGjD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAG3D,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAGjD,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAGxD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAIA,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAGjD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAG3D,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAGjD,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAGxD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC"}

package/dist/index.js

@@ -4,7 +4,7 @@ export { defineConfig } from './config/types.js';
 // ==================== コア機能エクスポート ====================
 export { MarkdownConverter } from './core/converter.js';
 export { FileWatcher } from './core/watcher.js';
-export { LiveServer } from './core/server.js';
+export { WebSocketServer } from './core/websocket-server.js';
 export { PandocDetector } from './core/pandoc-detector.js';
 // ==================== テーマ管理エクスポート ====================
 export { ThemeManager } from './themes/index.js';

package/package.json

@@ -1,15 +1,16 @@
 {
   "name": "vimd",
-  "version": "0.2.4",
+  "version": "0.3.1",
   "description": "Real-time Markdown preview tool with pandoc (view markdown)",
   "type": "module",
   "keywords": [
     "markdown",
     "preview",
-    "live-server",
+    "live-reload",
     "pandoc",
     "cli",
-    "viewer"
+    "viewer",
+    "websocket"
   ],
   "author": "notokeishou",
   "license": "MIT",
@@ -53,6 +54,8 @@
     "@types/inquirer": "^9.0.9",
     "@types/markdown-it": "^14.1.2",
     "@types/node": "^20.19.25",
+    "@types/polka": "^0.5.8",
+    "@types/ws": "^8.18.1",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
     "@vitest/coverage-v8": "^1.6.1",
@@ -70,10 +73,12 @@
     "github-markdown-css": "^5.8.1",
     "highlight.js": "^11.11.1",
     "inquirer": "^9.3.8",
-    "live-server": "^1.2.2",
     "markdown-it": "^14.1.0",
     "markdown-it-strikethrough-alt": "^1.0.0",
     "markdown-it-task-lists": "^2.1.1",
-    "open": "^9.1.0"
+    "open": "^9.1.0",
+    "polka": "^0.5.2",
+    "sirv": "^3.0.2",
+    "ws": "^8.18.3"
   }
 }