mdv-live 0.3.8 → 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.8",
+  "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/api/file.js

@@ -89,6 +89,32 @@ function buildBinaryFileResponse(name, fileType, downloadUrl) {
 export function setupFileRoutes(app) {
   const { rootDir } = app.locals;
 
+  // Serve raw files (for HTML preview with relative paths)
+  app.get('/raw/*', async (req, res) => {
+    const relativePath = req.params[0];
+    const { valid, fullPath } = resolveAndValidate(relativePath, rootDir);
+
+    if (!relativePath || !valid) {
+      return res.status(403).json({ error: 'Access denied' });
+    }
+
+    try {
+      const stat = await fs.stat(fullPath);
+      if (!stat.isFile()) {
+        return res.status(400).json({ error: 'Not a file' });
+      }
+
+      const mimeType = mime.lookup(fullPath) || 'application/octet-stream';
+      res.setHeader('Content-Type', mimeType);
+      res.sendFile(fullPath);
+    } catch (err) {
+      if (err.code === 'ENOENT') {
+        return res.status(404).json({ error: 'File not found' });
+      }
+      res.status(500).json({ error: err.message });
+    }
+  });
+
   // Get file content
   app.get('/api/file', async (req, res) => {
     const { path: relativePath } = req.query;
@@ -115,6 +141,25 @@ export function setupFileRoutes(app) {
         return res.json(buildBinaryFileResponse(name, fileType, downloadUrl));
       }
 
+      // HTML files: return htmlUrl for iframe preview + raw content for editing
+      if (fileType.type === 'html') {
+        const content = await fs.readFile(fullPath, 'utf-8');
+        const escaped = content
+          .replace(/&/g, '&')
+          .replace(/</g, '&lt;')
+          .replace(/>/g, '&gt;')
+          .replace(/"/g, '&quot;')
+          .replace(/'/g, '&#x27;');
+        return res.json({
+          name,
+          fileType: 'html',
+          icon: 'html',
+          htmlUrl: `/raw/${relativePath}`,
+          content: `<pre><code class="language-html">${escaped}</code></pre>`,
+          raw: content
+        });
+      }
+
       const rendered = await renderFile(fullPath);
       res.json({ name, ...rendered });
     } catch (err) {

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);
@@ -830,6 +874,17 @@
             `;
         },
 
+        renderHTML(htmlUrl, name) {
+            elements.content.style.padding = '0';
+            elements.content.innerHTML = `
+                <div class="html-preview">
+                    <iframe src="${htmlUrl}" title="${name}"
+                        sandbox="allow-scripts allow-same-origin allow-forms allow-modals">
+                    </iframe>
+                </div>
+            `;
+        },
+
         renderVideo(mediaUrl, name) {
             elements.content.innerHTML = `
                 <div class="video-preview">
@@ -908,6 +963,7 @@
                 css: data.css || null,  // Marp CSS from marp-core
                 imageUrl: data.imageUrl,
                 pdfUrl: data.pdfUrl,
+                htmlUrl: data.htmlUrl,
                 mediaUrl: data.mediaUrl,
                 downloadUrl: data.downloadUrl,
                 scrollTop: 0
@@ -923,6 +979,7 @@
             this.renderActive();
             WebSocketManager.watchFile(path);
             FileTreeManager.updateHighlight();
+            updateUrlPath(path);
         },
 
         switch(index) {
@@ -953,6 +1010,7 @@
             this.renderActive();
             WebSocketManager.watchFile(state.tabs[index].path);
             FileTreeManager.updateHighlight();
+            updateUrlPath(state.tabs[index].path);
         },
 
         close(index) {
@@ -963,6 +1021,7 @@
                 this.render();
                 ContentRenderer.showWelcome();
                 FileTreeManager.updateHighlight();
+                updateUrlPath(null);
                 return;
             }
 
@@ -974,6 +1033,7 @@
             this.render();
             this.renderActive();
             FileTreeManager.updateHighlight();
+            updateUrlPath(state.tabs[state.activeTabIndex].path);
         },
 
         render() {
@@ -1018,6 +1078,8 @@
                 ContentRenderer.renderImage(tab.imageUrl, tab.name);
             } else if (fileType === 'pdf') {
                 ContentRenderer.renderPDF(tab.pdfUrl, tab.name);
+            } else if (fileType === 'html' && tab.htmlUrl && !state.isEditMode) {
+                ContentRenderer.renderHTML(tab.htmlUrl, tab.name);
             } else if (fileType === 'video') {
                 ContentRenderer.renderVideo(tab.mediaUrl, tab.name);
             } else if (fileType === 'audio') {
@@ -1257,6 +1319,10 @@
             return !!elements.content.querySelector('.marpit');
         },
 
+        isHtmlPreview() {
+            return !!elements.content.querySelector('.html-preview iframe');
+        },
+
         async print() {
             if (state.activeTabIndex < 0) return;
 
@@ -1264,6 +1330,8 @@
 
             if (this.isMarpPresentation()) {
                 await this.exportMarpPdf(tab.path);
+            } else if (this.isHtmlPreview()) {
+                this.printHtmlPreview(tab.name);
             } else {
                 this.browserPrint(tab.name);
             }
@@ -1278,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;
@@ -1931,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/static/styles.css

@@ -520,6 +520,22 @@ body {
     text-align: center;
 }
 
+/* ============================================================
+   HTML Preview
+   ============================================================ */
+
+.html-preview {
+    width: 100%;
+    height: 100%;
+}
+
+.html-preview iframe {
+    width: 100%;
+    height: 100%;
+    border: none;
+    background: white;
+}
+
 /* ============================================================
    Editor Mode
    ============================================================ */

package/src/utils/fileTypes.js

@@ -29,8 +29,8 @@ const FILE_TYPES = {
   jsx: code('react', 'jsx'),
 
   // Code - Web
-  html: code('html', 'html'),
-  htm: code('html', 'html'),
+  html: { type: 'html', icon: 'html', lang: 'html', binary: false },
+  htm: { type: 'html', icon: 'html', lang: 'html', binary: false },
   css: code('css', 'css'),
   scss: code('css', 'scss'),
   less: code('css', 'less'),

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