marp-dev-preview 0.0.4 → 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,56 +10,61 @@ 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]')
-	.positional('markdown-file', {
-		describe: 'Path to the markdown file to preview',
-		type: 'string'
-	})
-	.option('theme-dir', {
-		alias: 't',
-		describe: 'Directory for custom themes',
-		type: 'string'
-	})
-	.option('port', {
-		alias: 'p',
-		describe: 'Port to listen on',
-		type: 'number',
-		default: 8080
-	})
-	.config('config', 'Path to a JSON config file')
-	.default('config', '.mp-config.json')
-	.demandCommand(1, 'You must provide a markdown file.')
-	.argv;
+  .usage('Usage: $0 <markdown-file> [options]')
+  .positional('markdown-file', {
+    describe: 'Path to the markdown file to preview',
+    type: 'string'
+  })
+  .option('theme-dir', {
+    alias: 't',
+    describe: 'Directory for custom themes',
+    type: 'string'
+  })
+  .option('port', {
+    alias: 'p',
+    describe: 'Port to listen on',
+    type: 'number',
+    default: 8080
+  })
+  .config('config', 'Path to a JSON config file')
+  .default('config', '.mp-config.json')
+  .demandCommand(1, 'You must provide a markdown file.')
+  .argv;
 
 const markdownFile = argv._[0]
 const themeDir = argv.themeDir;
 const port = argv.port;
 
 if (!markdownFile) {
-	console.error('Error: You must provide a path to a markdown file.');
-	process.exit(1);
+  console.error('Error: You must provide a path to a markdown file.');
+  process.exit(1);
 }
 
 const markdownDir = path.dirname(markdownFile);
 
 const mimeTypes = {
-	'.html': 'text/html',
-	'.js': 'text/javascript',
-	'.css': 'text/css',
-	'.json': 'application/json',
-	'.png': 'image/png',
-	'.jpg': 'image/jpeg',
-	'.gif': 'image/gif',
-	'.svg': 'image/svg+xml',
-	'.wav': 'audio/wav',
-	'.mp4': 'video/mp4',
-	'.woff': 'application/font-woff',
-	'.ttf': 'application/font-ttf',
-	'.eot': 'application/vnd.ms-fontobject',
-	'.otf': 'application/font-otf',
-	'.wasm': 'application/wasm'
+  '.html': 'text/html',
+  '.js': 'text/javascript',
+  '.css': 'text/css',
+  '.json': 'application/json',
+  '.png': 'image/png',
+  '.jpg': 'image/jpeg',
+  '.gif': 'image/gif',
+  '.svg': 'image/svg+xml',
+  '.wav': 'audio/wav',
+  '.mp4': 'video/mp4',
+  '.woff': 'application/font-woff',
+  '.ttf': 'application/font-ttf',
+  '.eot': 'application/vnd.ms-fontobject',
+  '.otf': 'application/font-otf',
+  '.wasm': 'application/wasm'
 };
 
 const wss = new WebSocketServer({ port: port + 1 });
@@ -67,33 +72,28 @@ const wss = new WebSocketServer({ port: port + 1 });
 let marp;
 
 async function initializeMarp() {
-	const options = { html: true, linkify: true, };
-	marp = new Marp(options)
-		.use(markdownItFootnote)
-		.use(markdownItMark)
-		.use(markdownItContainer, 'note');
+  const options = { html: true, linkify: true, };
+  marp = new Marp(options)
+    .use(markdownItFootnote)
+    .use(markdownItMark)
+    .use(markdownItContainer, 'note');
 
-	if (themeDir) {
-		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);
-			}
-		}
-	}
+  if (themeDir) {
+    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);
+      }
+    }
+  }
 }
 
 
 async function renderMarp() {
-	const md = await fs.readFile(markdownFile, 'utf8');
-	const { html, css } = marp.render(md);
-	return `
-    <!DOCTYPE html>
-    <html>
-    <head>
-      <style>
-        ${css}
+  const md = await fs.readFile(markdownFile, 'utf8');
+  const { html, css } = marp.render(md);
+  const customCss = `
 	svg[data-marpit-svg] {
 	  margin-bottom:20px !important;
 	  border: 1px solid gray;
@@ -134,133 +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; 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);
-	    }
-	  }
-
-          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>
@@ -278,69 +168,106 @@ async function renderMarp() {
 }
 
 const server = http.createServer(async (req, res) => {
-	try {
-		if (req.url === '/') {
-			const html = await renderMarp();
-			res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
-			res.end(html);
-		} else if (req.url === '/api/command' && req.method === 'POST') {
-			let body = '';
-			req.on('data', chunk => {
-				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' }));
-				}
-			});
-		} else {
-			const assetPath = path.join(markdownDir, req.url);
-			const ext = path.extname(assetPath);
-			const contentType = mimeTypes[ext] || 'application/octet-stream';
+  try {
+    if (req.url === '/') {
+      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();
+      });
+      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' }));
+        }
+      });
+    } else {
+      const assetPath = path.join(markdownDir, req.url);
+      const ext = path.extname(assetPath);
+      const contentType = mimeTypes[ext] || 'application/octet-stream';
 
-			try {
-				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;
-				}
-			}
-		}
-	} catch (error) {
-		console.error(error);
-		res.writeHead(500);
-		res.end('Internal Server Error');
-	}
+      try {
+        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;
+        }
+      }
+    }
+  } catch (error) {
+    console.error(error);
+    res.writeHead(500);
+    res.end('Internal Server Error');
+  }
 });
 
-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(() => {
-	server.listen(port, () => {
-		console.log(`Server listening on http://localhost:${port} for ${markdownFile}`);
-		if (themeDir) {
-			console.log(`Using custom themes from ${themeDir}`);
-		}
-	});
+  server.listen(port, () => {
+    console.log(`Server listening on http://localhost:${port} for ${markdownFile}`);
+    if (themeDir) {
+      console.log(`Using custom themes from ${themeDir}`);
+    }
+  });
 }).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.4",
+  "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"
   }