mdv-live 0.3.9 → 0.4.0

package/bin/mdv.js

@@ -23,6 +23,10 @@ const OPTIONS = {
     type: 'string',
     short: 'p',
   },
+  depth: {
+    type: 'string',
+    short: 'd',
+  },
   'no-browser': {
     type: 'boolean',
     default: false
@@ -76,6 +80,7 @@ Arguments:
 
 Server Options:
   -p, --port <n>      Server port (default: ${DEFAULT_PORT})
+  -d, --depth <n>     Directory watch depth (default: 3, prevents EMFILE errors)
   --no-browser        Don't open browser automatically
 
 Server Management:
@@ -382,8 +387,9 @@ async function resolveTargetPath(targetPath) {
  * @param {string} targetPath - Target directory or file path
  * @param {number} startPort - Starting port number
  * @param {boolean} openBrowser - Whether to open browser automatically
+ * @param {number} depth - Directory watch depth
  */
-async function startViewer(targetPath, startPort, openBrowser) {
+async function startViewer(targetPath, startPort, openBrowser, depth) {
   const { rootDir, initialFile } = await resolveTargetPath(targetPath);
 
   const port = await findAvailablePort(startPort);
@@ -396,11 +402,11 @@ async function startViewer(targetPath, startPort, openBrowser) {
     console.log(`ポート ${startPort} は使用中のため、${port} で起動します`);
   }
 
-  const mdv = createMdvServer({ rootDir, port });
+  const mdv = createMdvServer({ rootDir, port, depth });
   await mdv.start();
 
   const url = initialFile
-    ? `http://localhost:${port}?file=${encodeURIComponent(initialFile)}`
+    ? `http://localhost:${port}?path=${encodeURIComponent(initialFile)}`
     : `http://localhost:${port}`;
 
   console.log(`
@@ -472,9 +478,10 @@ async function main() {
   // Default: start viewer
   const targetPath = positionals[0] || '.';
   const port = parseInt(values.port, 10) || DEFAULT_PORT;
+  const depth = parseInt(values.depth, 10) || 3;
   const openBrowser = !values['no-browser'];
 
-  await startViewer(targetPath, port, openBrowser);
+  await startViewer(targetPath, port, openBrowser, depth);
 }
 
 main().catch(err => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mdv-live",
-  "version": "0.3.9",
+  "version": "0.4.0",
   "description": "Markdown Viewer - File tree + Live preview + Marp support + Hot reload",
   "main": "src/server.js",
   "bin": {

package/scripts/setup-macos-app.sh

@@ -77,7 +77,7 @@ for i in {1..25}; do
         echo "Found port: $PORT"
         echo "Opening browser..."
         # Use osascript to open URL (works better from AppleScript context)
-        osascript -e "open location \"http://localhost:$PORT?file=$FILE_NAME\""
+        osascript -e "open location \"http://localhost:$PORT?path=$FILE_NAME\""
         echo "Done"
         exit 0
     fi
@@ -85,7 +85,7 @@ done
 
 echo "Timeout - using fallback"
 # Fallback
-osascript -e "open location \"http://localhost:8642?file=$FILE_NAME\""
+osascript -e "open location \"http://localhost:8642?path=$FILE_NAME\""
 LAUNCHSCRIPT
 
 # Replace placeholder with actual path

package/src/server.js

@@ -47,10 +47,11 @@ function setupApiRoutes(app) {
  * @param {Object} options - Server options
  * @param {string} options.rootDir - Root directory to serve
  * @param {number} [options.port=8080] - Port to listen on
+ * @param {number} [options.depth=3] - Directory watch depth (prevents EMFILE errors)
  * @returns {{ app: express.Application, server: http.Server, watcher: FSWatcher, wss: WebSocketServer, port: number, start: () => Promise<{port: number}>, stop: () => Promise<void> }}
  */
 export function createMdvServer(options) {
-  const { rootDir, port = 8080 } = options;
+  const { rootDir, port = 8080, depth = 3 } = options;
 
   const app = express();
   const server = createServer(app);
@@ -68,7 +69,7 @@ export function createMdvServer(options) {
   });
 
   const wss = setupWebSocket(server);
-  const watcher = setupWatcher(app.locals.rootDir, wss);
+  const watcher = setupWatcher(app.locals.rootDir, wss, { depth });
 
   app.locals.watcher = watcher;
   app.locals.wss = wss;

package/src/static/app.js

@@ -88,6 +88,21 @@
         rootPath: ''
     };
 
+    // ============================================================
+    // URL State Management
+    // ============================================================
+
+    function updateUrlPath(path) {
+        const url = new URL(window.location);
+        if (path) {
+            // パスの/をエンコードせずに表示
+            url.search = '?path=' + encodeURIComponent(path).replace(/%2F/g, '/');
+        } else {
+            url.search = '';
+        }
+        history.replaceState(null, '', url);
+    }
+
     // ============================================================
     // DOM Elements
     // ============================================================
@@ -477,6 +492,35 @@
             }
         },
 
+        async expandToPath(filePath) {
+            // パスを分割して親フォルダのリストを作成
+            const parts = filePath.split('/');
+            parts.pop(); // ファイル名を除外
+
+            let currentPath = '';
+            for (const part of parts) {
+                currentPath = currentPath ? `${currentPath}/${part}` : part;
+
+                const item = document.querySelector(`.tree-item[data-path="${currentPath}"]`);
+                if (!item) continue;
+
+                const children = item.querySelector('.tree-children');
+                const chevron = item.querySelector('.chevron');
+
+                if (children && children.classList.contains('collapsed')) {
+                    // 未読み込みの場合は子要素を取得
+                    if (item.dataset.loaded !== 'true') {
+                        await this.expandDirectory(currentPath, children);
+                    }
+                    children.classList.remove('collapsed');
+                    if (chevron) chevron.classList.add('expanded');
+                }
+            }
+
+            // ファイルをハイライト
+            this.updateHighlight();
+        },
+
         renderFile(item) {
             const iconClass = item.icon ? `icon-${item.icon}` : '';
             const iconSvg = getFileIcon(item.icon);
@@ -835,7 +879,7 @@
             elements.content.innerHTML = `
                 <div class="html-preview">
                     <iframe src="${htmlUrl}" title="${name}"
-                        sandbox="allow-scripts allow-same-origin allow-forms">
+                        sandbox="allow-scripts allow-same-origin allow-forms allow-modals">
                     </iframe>
                 </div>
             `;
@@ -935,6 +979,7 @@
             this.renderActive();
             WebSocketManager.watchFile(path);
             FileTreeManager.updateHighlight();
+            updateUrlPath(path);
         },
 
         switch(index) {
@@ -965,6 +1010,7 @@
             this.renderActive();
             WebSocketManager.watchFile(state.tabs[index].path);
             FileTreeManager.updateHighlight();
+            updateUrlPath(state.tabs[index].path);
         },
 
         close(index) {
@@ -975,6 +1021,7 @@
                 this.render();
                 ContentRenderer.showWelcome();
                 FileTreeManager.updateHighlight();
+                updateUrlPath(null);
                 return;
             }
 
@@ -986,6 +1033,7 @@
             this.render();
             this.renderActive();
             FileTreeManager.updateHighlight();
+            updateUrlPath(state.tabs[state.activeTabIndex].path);
         },
 
         render() {
@@ -1271,6 +1319,10 @@
             return !!elements.content.querySelector('.marpit');
         },
 
+        isHtmlPreview() {
+            return !!elements.content.querySelector('.html-preview iframe');
+        },
+
         async print() {
             if (state.activeTabIndex < 0) return;
 
@@ -1278,6 +1330,8 @@
 
             if (this.isMarpPresentation()) {
                 await this.exportMarpPdf(tab.path);
+            } else if (this.isHtmlPreview()) {
+                this.printHtmlPreview(tab.name);
             } else {
                 this.browserPrint(tab.name);
             }
@@ -1292,6 +1346,13 @@
             document.title = originalTitle;
         },
 
+        printHtmlPreview(fileName) {
+            const iframe = elements.content.querySelector('.html-preview iframe');
+            if (iframe && iframe.contentWindow) {
+                iframe.contentWindow.print();
+            }
+        },
+
         async exportMarpPdf(filePath) {
             const statusText = elements.statusText;
             const originalStatus = statusText.textContent;
@@ -1945,9 +2006,10 @@
         });
         window.addEventListener('focus', handleFocusChange);
 
-        const initialFile = new URLSearchParams(window.location.search).get('file');
-        if (initialFile) {
-            TabManager.open(initialFile);
+        const initialPath = new URLSearchParams(window.location.search).get('path');
+        if (initialPath) {
+            await FileTreeManager.expandToPath(initialPath);
+            await TabManager.open(initialPath);
         }
     }
 

package/src/watcher.js

@@ -34,13 +34,18 @@ const TREE_CHANGE_EVENTS = ['add', 'unlink', 'addDir', 'unlinkDir'];
  * Setup file watcher
  * @param {string} rootDir - Root directory to watch
  * @param {WebSocketServer} wss - WebSocket server for broadcasting
+ * @param {Object} [options] - Watcher options
+ * @param {number} [options.depth=3] - Directory depth to watch (prevents EMFILE errors)
  * @returns {FSWatcher} Chokidar watcher instance
  */
-export function setupWatcher(rootDir, wss) {
+export function setupWatcher(rootDir, wss, options = {}) {
+  const { depth = 3 } = options;
+
   const watcher = chokidar.watch(rootDir, {
     ignored: IGNORED_PATTERNS,
     persistent: true,
     ignoreInitial: true,
+    depth,
     awaitWriteFinish: {
       stabilityThreshold: 100,
       pollInterval: 50