marp-dev-preview 0.0.5 → 0.1.0

package/README.md

@@ -6,7 +6,8 @@ The tool is mainly intended for slide deck authors who want to preview their sli
 
 ## Features
 
-*   Live preview of Marp markdown files.
+*   Live preview of Marp markdown files, with position syncing.
+*   API to reload the slides using incremental updates.
 *   Automatic browser reload on file changes.
 *   Custom theme support.
 *   Keyboard navigation for slides.

package/client.js

@@ -0,0 +1,143 @@
+document.addEventListener('DOMContentLoaded', () => {
+  const wsPort = document.querySelector('meta[name="ws-port"]').content;
+  const ws = new WebSocket(`ws://localhost:${wsPort}`);
+
+  let slides = Array.from(document.querySelectorAll('section[id]'));
+  const commandPrompt = document.getElementById('command-prompt');
+  const helpBox = document.getElementById('help-box');
+
+  let lastKey = '';
+  let command = '';
+  let commandMode = false;
+
+  function goToSlide(slideNumber) {
+    if (isNaN(slideNumber)) {
+      console.error('Invalid slide number: ' + slideNumber);
+      return false;
+    }
+
+    if (slideNumber <= 0) {
+      console.error('Slide number must be greater than 0: ' + slideNumber);
+      return false;
+    }
+
+    if (slideNumber > slides.length) {
+      console.error('Slide number exceeds total slides: ' + slideNumber);
+      return false;
+    }
+
+    console.info('Navigating to slide: ' + slideNumber);
+
+    slides[slideNumber - 1].scrollIntoView({ behavior: 'smooth' });
+    return true;
+  }
+
+  function findSlideByString(string) {
+    const lowerString = string.toLowerCase();
+    let found = false;
+    for (let i = 0; i < slides.length && !found; i++) {
+      if (slides[i].textContent.toLowerCase().includes(lowerString)) {
+        slides[i].scrollIntoView({ behavior: 'smooth' });
+        found = true;
+      }
+    }
+    if (!found) {
+      console.error('No slide contains the string: ' + string);
+      return false;
+    }
+
+    return true;
+  }
+
+  ws.onmessage = (event) => {
+    try {
+      const data = JSON.parse(event.data);
+      if (data.type === 'update') {
+        const marpContainer = document.getElementById('marp-container');
+        if (marpContainer) {
+          morphdom(marpContainer, `<div id="marp-container">${data.html}</div>`);
+        }
+        if (document.getElementById('marp-style').innerHTML !== data.css) {
+          document.getElementById('marp-style').innerHTML = data.css;
+        }
+        slides = Array.from(document.querySelectorAll('section[id]'));
+      } else if (data.command === 'goto' && data.slide) {
+        goToSlide(parseInt(data.slide, 10));
+      } else if (data.command === 'find' && data.string) {
+        findSlideByString(data.string);
+      }
+    } catch (e) {
+      console.error('Failed to parse WebSocket message:', e);
+    }
+  };
+
+  function updatePrompt(text, isError = false) {
+    if (commandMode) {
+      commandPrompt.style.display = 'block';
+      commandPrompt.textContent = text;
+      commandPrompt.style.color = isError ? 'red' : 'white';
+    } else {
+      commandPrompt.style.display = 'none';
+      commandPrompt.style.color = 'white'; // Reset color when hidden
+    }
+  }
+
+  document.addEventListener('keydown', (e) => {
+    if (commandMode) {
+      if (e.key === 'Enter') {
+        const slideNumber = parseInt(command, 10);
+        if (goToSlide(slideNumber)) {
+          commandMode = false;
+          command = '';
+          updatePrompt(':' + command);
+        } else {
+          updatePrompt(`Error: Slide not found.`, true); // Pass message and error flag
+          setTimeout(() => {
+            commandMode = false;
+            command = '';
+            updatePrompt(':' + command); // Reset to normal prompt
+          }, 2000);
+        }
+      } else if (e.key === 'Backspace') {
+        command = command.slice(0, -1);
+        updatePrompt(':' + command);
+      } else if (e.key.length === 1 && !isNaN(parseInt(e.key, 10))) {
+        command += e.key;
+        updatePrompt(':' + command);
+      } else if (e.key === 'Escape') {
+        commandMode = false;
+        command = '';
+        updatePrompt(':' + command);
+      }
+      return;
+    }
+
+    if (e.key === 'g') {
+      if (lastKey === 'g') {
+        // gg
+        if (slides.length > 0) {
+          slides[0].scrollIntoView({ behavior: 'smooth' });
+        }
+        lastKey = '';
+      } else {
+        lastKey = 'g';
+        setTimeout(() => { lastKey = '' }, 500); // reset after 500ms
+      }
+    } else if (e.key === 'G') {
+      if (slides.length > 0) {
+        slides[slides.length - 1].scrollIntoView({ behavior: 'smooth' });
+      }
+      lastKey = '';
+    } else if (e.key === ':') {
+      commandMode = true;
+      command = '';
+      lastKey = '';
+      updatePrompt(':' + command);
+    } else if (e.key === '?') {
+      helpBox.style.display = helpBox.style.display === 'none' ? 'block' : 'none';
+      lastKey = ''; // Reset lastKey to prevent unintended 'gg'
+    } else {
+      lastKey = '';
+    }
+  });
+});

package/marp-dev-preview.mjs

@@ -10,6 +10,11 @@ import { hideBin } from 'yargs/helpers';
 import markdownItFootnote from 'markdown-it-footnote';
 import markdownItMark from 'markdown-it-mark';
 import markdownItContainer from 'markdown-it-container';
+import morphdom from 'morphdom';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 
 const argv = yargs(hideBin(process.argv))
   .usage('Usage: $0 <markdown-file> [options]')
@@ -77,8 +82,8 @@ async function initializeMarp() {
     const themeFiles = await fs.readdir(themeDir);
     for (const file of themeFiles) {
       if (path.extname(file) === '.css') {
-	const css = await fs.readFile(path.join(themeDir, file), 'utf8');
-	marp.themeSet.add(css);
+        const css = await fs.readFile(path.join(themeDir, file), 'utf8');
+        marp.themeSet.add(css);
       }
     }
   }
@@ -88,12 +93,7 @@ async function initializeMarp() {
 async function renderMarp() {
   const md = await fs.readFile(markdownFile, 'utf8');
   const { html, css } = marp.render(md);
-  return `
-    <!DOCTYPE html>
-    <html>
-    <head>
-      <style>
-        ${css}
+  const customCss = `
 	svg[data-marpit-svg] {
 	  margin-bottom:20px !important;
 	  border: 1px solid gray;
@@ -134,136 +134,23 @@ async function renderMarp() {
           display: none;
           box-shadow: 0 4px 8px rgba(0,0,0,0.3);
         }
-      </style>
-      <script>
-        const ws = new WebSocket('ws://localhost:${port + 1}');
-
-        document.addEventListener('DOMContentLoaded', () => {
-          const slides = Array.from(document.querySelectorAll('section[id]'));
-          const commandPrompt = document.getElementById('command-prompt');
-	  const helpBox = document.getElementById('help-box');
-
-          let lastKey = '';
-          let command = '';
-          let commandMode = false;
-
-          function goToSlide(slideNumber) {
-            if (!isNaN(slideNumber) && slideNumber > 0 && slideNumber <= slides.length) {
-              slides[slideNumber - 1].scrollIntoView({ behavior: 'smooth' });
-              return true;
-            }
-            return false;
-          }
-
-	  function findSlideByString(string) {
-	    const lowerString = string.toLowerCase();
-	    let found = false;
-	    for (let i = 0; i < slides.length && !found; i++) {
-	      if (slides[i].textContent.toLowerCase().includes(lowerString)) {
-		slides[i].scrollIntoView({ behavior: 'smooth' });
-		found = true;
-	      }
-	    }
-	    if (!found) {
-	      console.error('No slide contains the string: ' + string);
-	      return false; 
-	    }
-
-	    return true;
-	  }
-
-          ws.onmessage = (event) => {
-            if (event.data === 'reload') {
-              window.location.reload();
-              return;
-            }
-            try {
-              const data = JSON.parse(event.data);
-              if (data.command === 'goto' && data.slide) {
-                goToSlide(parseInt(data.slide, 10));
-              } else if (data.command === 'find' && data.string) {
-		findSlideByString(data.string);
-	      }
-            } catch (e) {
-              console.error('Failed to parse WebSocket message:', e);
-            }
-          };
-
-          function updatePrompt(text, isError = false) {
-            if (commandMode) {
-              commandPrompt.style.display = 'block';
-              commandPrompt.textContent = text;
-              commandPrompt.style.color = isError ? 'red' : 'white';
-            } else {
-              commandPrompt.style.display = 'none';
-              commandPrompt.style.color = 'white'; // Reset color when hidden
-            }
-          }
-
-          document.addEventListener('keydown', (e) => {
-            if (commandMode) {
-              if (e.key === 'Enter') {
-                const slideNumber = parseInt(command, 10);
-                if (goToSlide(slideNumber)) {
-                  commandMode = false;
-                  command = '';
-                  updatePrompt(':' + command);
-                } else {
-                  updatePrompt(\`Error: Slide not found.\`, true); // Pass message and error flag
-                  setTimeout(() => {
-                    commandMode = false;
-                    command = '';
-                    updatePrompt(':' + command); // Reset to normal prompt
-                  }, 2000);
-                }
-              } else if (e.key === 'Backspace') {
-                command = command.slice(0, -1);
-                updatePrompt(':' + command);
-              } else if (e.key.length === 1 && !isNaN(parseInt(e.key,10))) {
-                command += e.key;
-                updatePrompt(':' + command);
-              } else if (e.key === 'Escape') {
-                  commandMode = false;
-                  command = '';
-                  updatePrompt(':' + command);
-              }
-              return;
-            }
+  `;
 
-            if (e.key === 'g') {
-              if (lastKey === 'g') {
-                // gg
-                if (slides.length > 0) {
-                  slides[0].scrollIntoView({ behavior: 'smooth' });
-                }
-                lastKey = '';
-              } else {
-                lastKey = 'g';
-                setTimeout(() => { lastKey = '' }, 500); // reset after 500ms
-              }
-            } else if (e.key === 'G') {
-              if (slides.length > 0) {
-                slides[slides.length - 1].scrollIntoView({ behavior: 'smooth' });
-              }
-              lastKey = '';
-            } else if (e.key === ':') {
-              commandMode = true;
-              command = '';
-              lastKey = '';
-              updatePrompt(':' + command);
-	    } else if (e.key === '?') {
-	      helpBox.style.display = helpBox.style.display === 'none' ? 'block' : 'none';
-	      lastKey = ''; // Reset lastKey to prevent unintended 'gg'
-            } else {
-              lastKey = '';
-            }
-          });
-        });
-      </script>
-      <meta charset="UTF-8">
+  return `
+    <!DOCTYPE html>
+    <html>
+    <head>
+      <meta name="ws-port" content="${port + 1}">
+      <style id="marp-style">${css}</style>
+      <style id="custom-style">${customCss}</style>
+      <script src="https://unpkg.com/morphdom@2.7.0/dist/morphdom-umd.min.js"></script>
+      <script src="/client.js"></script>
+       <meta charset="UTF-8">
     </head>
     <body>
-      ${html}
+      <div id="marp-container">
+        ${html}
+      </div>
       <div id="help-box">
         <h3>Key Bindings</h3>
 	<table>
@@ -286,23 +173,43 @@ const server = http.createServer(async (req, res) => {
       const html = await renderMarp();
       res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
       res.end(html);
+    } else if (req.url === '/client.js') {
+      const clientJs = await fs.readFile(path.join(__dirname, 'client.js'), 'utf8');
+      res.writeHead(200, { 'Content-Type': 'text/javascript' });
+      res.end(clientJs);
+    } else if (req.url === '/api/reload' && req.method === 'POST') {
+      let body = '';
+      req.on('data', chunk => {
+        body += chunk.toString();
+      });
+      req.on('end', async () => {
+	console.debug("Reload request received");
+        const success = await reload(body);
+        if (success) {
+          res.writeHead(200, { 'Content-Type': 'application/json' });
+          res.end(JSON.stringify({ status: 'ok' }));
+        } else {
+          res.writeHead(500, { 'Content-Type': 'application/json' });
+          res.end(JSON.stringify({ status: 'error', message: 'Failed to render markdown' }));
+        }
+      });
     } else if (req.url === '/api/command' && req.method === 'POST') {
       let body = '';
       req.on('data', chunk => {
-	body += chunk.toString();
+        body += chunk.toString();
       });
       req.on('end', () => {
-	try {
-	  const command = JSON.parse(body);
-	  for (const ws of wss.clients) {
-	    ws.send(JSON.stringify(command));
-	  }
-	  res.writeHead(200, { 'Content-Type': 'application/json' });
-	  res.end(JSON.stringify({ status: 'ok', command }));
-	} catch (e) {
-	  res.writeHead(400, { 'Content-Type': 'application/json' });
-	  res.end(JSON.stringify({ status: 'error', message: 'Invalid JSON' }));
-	}
+        try {
+          const command = JSON.parse(body);
+          for (const ws of wss.clients) {
+            ws.send(JSON.stringify(command));
+          }
+          res.writeHead(200, { 'Content-Type': 'application/json' });
+          res.end(JSON.stringify({ status: 'ok', command }));
+        } catch (e) {
+          res.writeHead(400, { 'Content-Type': 'application/json' });
+          res.end(JSON.stringify({ status: 'error', message: 'Invalid JSON' }));
+        }
       });
     } else {
       const assetPath = path.join(markdownDir, req.url);
@@ -310,16 +217,16 @@ const server = http.createServer(async (req, res) => {
       const contentType = mimeTypes[ext] || 'application/octet-stream';
 
       try {
-	const content = await fs.readFile(assetPath);
-	res.writeHead(200, { 'Content-Type': contentType });
-	res.end(content);
+        const content = await fs.readFile(assetPath);
+        res.writeHead(200, { 'Content-Type': contentType });
+        res.end(content);
       } catch (error) {
-	if (error.code === 'ENOENT') {
-	  res.writeHead(404);
-	  res.end('Not Found');
-	} else {
-	  throw error;
-	}
+        if (error.code === 'ENOENT') {
+          res.writeHead(404);
+          res.end('Not Found');
+        } else {
+          throw error;
+        }
       }
     }
   } catch (error) {
@@ -329,11 +236,28 @@ const server = http.createServer(async (req, res) => {
   }
 });
 
-chokidar.watch(markdownFile).on('change', () => {
-  console.log(`File ${markdownFile} changed, reloading...`);
-  for (const ws of wss.clients) {
-    ws.send('reload');
+async function reload(markdown) {
+  try {
+    const { html, css } = marp.render(markdown);
+    const message = JSON.stringify({
+      type: 'update',
+      html: html,
+      css: css
+    });
+    for (const ws of wss.clients) {
+      ws.send(message);
+    }
+    return true;
+  } catch (error) {
+    console.error('Error rendering or sending update:', error);
+    return false;
   }
+}
+
+chokidar.watch(markdownFile).on('change', async () => {
+  console.log(`File ${markdownFile} changed, updating...`);
+  const md = await fs.readFile(markdownFile, 'utf8');
+  await reload(md);
 });
 
 initializeMarp().then(() => {
@@ -344,6 +268,6 @@ initializeMarp().then(() => {
     }
   });
 }).catch(error => {
-    console.error("Failed to initialize Marp:", error);
-    process.exit(1);
+  console.error("Failed to initialize Marp:", error);
+  process.exit(1);
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "marp-dev-preview",
-  "version": "0.0.5",
+  "version": "0.1.0",
   "description": "A CLI tool to preview Marp markdown files.",
   "main": "marp-dev-preview.mjs",
   "type": "module",
@@ -29,6 +29,7 @@
     "markdown-it-container": "^4.0.0",
     "markdown-it-footnote": "^4.0.0",
     "markdown-it-mark": "^4.0.0",
+    "morphdom": "^2.7.7",
     "ws": "^8.18.3",
     "yargs": "^18.0.0"
   }