marp-dev-preview 0.1.4 → 0.1.6

package/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env"]
+}

package/README.md

@@ -1,52 +1,62 @@
 # marp-dev-preview
 
-A CLI tool to preview Marp markdown files with live reloading and navigation features.
+A lightweight CLI tool for previewing **Marp markdown slide decks** with live reloading, navigation, and development-focused features.  
 
-The tool is mainly intended for slide deck authors who want to preview their slides in a web browser during development. In fact, while marp-cli provides a `-s` option to serve the slides, it is mainly intended for presenting the slides, not for development. This tool fills that gap by providing a live preview server presenting the slides similarly to how they are presented in the marp vs-code extension. 
+Unlike the `marp-cli -s` option—which is primarily meant for presenting—this tool is designed specifically for **authoring and iterating** on slides. It provides a live preview server similar to the Marp VS Code extension, but in a terminal-friendly, editor-agnostic way.  
 
-## Features
+Originally built as a dependency for the [marp-dev-preview.nvim](https://github.com/boborbt/marp-dev-preview.nvim) NeoVim plugin, it can also be used **standalone** or as a dependency in other projects.
 
-*   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.
-*   Also installs and uses the following markdown-it plugins (it's easy to add more if needed):
-    *   `markdown-it-container`
-    *   `markdown-it-mark`
-    *   `markdown-it-footnote`
- 
-## Usage via npx
+---
 
-The simplest way to start the previewer is via npx:
+## ✨ Features
+
+- **Live preview** of Marp markdown files, with position syncing  
+- **Incremental updates API** for fast reloads  
+- **Automatic browser reload** on file changes  
+- **Custom theme support** (CSS-based themes)  
+- **Keyboard navigation** for slides  
+- Includes several **markdown-it plugins** (easy to extend):
+  - `markdown-it-container`
+  - `markdown-it-mark`
+  - `markdown-it-footnote`
+
+---
+
+## 🚦 Quick Start (via `npx`)
+
+The simplest way to run the previewer:  
 
 ```bash
-npx marp-dev-preview --theme-dir <dir containing your themes> <your presentation>.md
+npx marp-dev-preview --theme-dir <themes-dir> <presentation.md>
 ```
 
-## Installation
+---
+
+## 📦 Installation
 
-To install the package globally (recommended for CLI tools):
+Global install (recommended for CLI use):  
 
 ```bash
 npm install -g marp-dev-preview
 ```
 
-Alternatively, you can install it as a local dependency in your project:
+Or as a local project dependency:  
 
 ```bash
 npm install marp-dev-preview
 ```
 
-## Usage
+---
+
+## ▶️ Usage
 
-To start the preview server, run the `mdp` command followed by your markdown file path:
+Start the preview server with:  
 
 ```bash
-mdp <path-to-your-markdown-file> [options]
+mdp <path-to-markdown-file> [options]
 ```
 
-**Example:**
+**Example:**  
 
 ```bash
 mdp my-slides/presentation.md --port 3000 --theme-dir my-themes
@@ -54,34 +64,87 @@ mdp my-slides/presentation.md --port 3000 --theme-dir my-themes
 
 ### Options
 
-*   `-t, --theme-dir <path>`: Specify a directory for custom Marp themes (e.g., CSS files).
-*   `-p, --port <number>`: Specify the port for the preview server to listen on (default: `8080`).
+- `-t, --theme-dir <path>` — Path to custom Marp themes (CSS files)  
+- `-p, --port <number>` — Port for the preview server (default: `8080`)  
 
-## Keyboard Shortcuts
+---
 
-While viewing the presentation in your browser, in addition to the usual browser controls (page-up, page-down, home, end, etc.), you can use the following key bindings:
+## ⌨️ Keyboard Shortcuts
 
-*   <kbd>gg</kbd>: Go to the first slide.
-*   <kbd>G</kbd>: Go to the last slide.
-*   <kbd>:&lt;number&gt;</kbd>: Go to the specified slide number.
-*   <kbd>?</kbd>: Toggle the help box displaying key bindings.
+In addition to normal browser navigation keys (`Page Up`, `Page Down`, `Home`, `End`), the following bindings are available:
 
-## Integration with other tools
+- **Ctrl+f** — Forward one page  
+- **Ctrl+b** — Backward one page  
+- **Ctrl+d** — Forward half a page  
+- **Ctrl+u** — Backward half a page  
+- **gg** — First slide  
+- **G** — Last slide  
+- **:number** — Jump to slide `{number}`  
+- **?** — Toggle help overlay  
 
-The tool can respond to http requests to change slides and to scroll to a slide containing a given text. Any http client can be used to send such requests, e.g.:
+---
 
-```bash
-curl -X POST -H "Content-Type: application/json" -d '{"command": "find", "string": "my awesome text"}' http://localhost:8080/api/command
-```
-would scroll to the first slide containing "my awesome text".
+## 🔗 API Endpoints
 
-```bash
-curl -X POST -H "Content-Type: application/json" -d '{"command": "goto", "slide": 3}' http://localhost:8080/api/command
-````
+The preview server exposes a simple **HTTP API** for controlling slides and content.
+
+### `POST /api/reload`
+
+Reloads the presentation with new markdown content. The server parses the received markdown, renders it into HTML, and broadcasts the changes to all connected clients. This is ideal for tools that need to push updates without requiring a full page refresh.
+
+- **Request**:
+  - **Headers**: `Content-Type: text/markdown`
+  - **Body**: Raw markdown content.
+
+- **Response**:
+  - `200 OK`: `{ "status": "ok" }` on success.
+  - `500 Internal Server Error`: `{ "status": "error", "message": "..." }` on failure.
+
+- **Example**:
+  ```bash
+  curl -X POST \
+       -H "Content-Type: text/markdown" \
+       -d "$(cat path/to/your/slides.md)" \
+       http://localhost:8080/api/reload
+  ```
+
+### `POST /api/command`
+
+Sends a command to the browser to control the presentation's navigation. This allows external tools to programmatically change the visible slide.
+
+- **Request**:
+  - **Headers**: `Content-Type: application/json`
+  - **Body**: A JSON object describing the command.
+
+- **Response**:
+  - `200 OK`: `{ "status": "ok", "command": { ... } }` on success.
+  - `400 Bad Request`: `{ "status": "error", "message": "Invalid JSON" }` if the body is malformed.
+
+#### Supported Commands
+
+1.  **`goto`**: Jumps to a specific slide number.
+    - **Payload**: `{ "command": "goto", "slide": <number> }`
+    - **Example**:
+      ```bash
+      curl -X POST \
+           -H "Content-Type: application/json" \
+           -d '{"command": "goto", "slide": 5}' \
+           http://localhost:8080/api/command
+      ```
+
+2.  **`find`**: Searches for a string and jumps to the first slide containing it. The search is case-insensitive.
+    - **Payload**: `{ "command": "find", "string": "<search-term>" }`
+    - **Example**:
+      ```bash
+      curl -X POST \
+           -H "Content-Type: application/json" \
+           -d '{"command": "find", "string": "My Awesome Slide"}' \
+           http://localhost:8080/api/command
+      ```
 
-would go to slide 3.
 
+---
 
-## License
+## 📄 License
 
-This project is licensed under the MIT License - see the `LICENSE` file for details.
+Licensed under the [MIT License](./LICENSE).  

package/jest.config.mjs

@@ -0,0 +1,11 @@
+export default {
+  transform: {
+    '^.+\.m?js'
+: 'babel-jest',
+  },
+  testEnvironment: 'node',
+  moduleFileExtensions: ['js', 'mjs'],
+  transformIgnorePatterns: [
+    '/node_modules/(?!yargs|yargs-parser)/',
+  ],
+};

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "marp-dev-preview",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "A CLI tool to preview Marp markdown files.",
-  "main": "marp-dev-preview.mjs",
+  "main": "src/marp-dev-preview.mjs",
   "type": "module",
   "bin": {
-    "mdp": "marp-dev-preview.mjs"
+    "mdp": "src/marp-dev-preview.mjs"
   },
   "scripts": {
-    "start": "node marp-dev-preview.mjs"
+    "start": "node src/marp-dev-preview.mjs",
+    "test": "jest"
   },
   "keywords": [
     "marp",
@@ -32,5 +33,12 @@
     "morphdom": "^2.7.7",
     "ws": "^8.18.3",
     "yargs": "^18.0.0"
+  },
+  "devDependencies": {
+    "@babel/preset-env": "^7.28.3",
+    "babel-jest": "^30.1.2",
+    "jest": "^30.1.3",
+    "jest-esm-transformer": "^1.0.0",
+    "ts-jest": "^29.4.1"
   }
 }

package/src/args.mjs

@@ -0,0 +1,32 @@
+import yargs from 'yargs';
+import { hideBin } from 'yargs/helpers';
+
+export function parseArgs() {
+  return 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
+    })
+    .option('verbose', {
+      alias: 'v',
+      describe: 'Enable verbose logging',
+      type: 'boolean',
+      default: false
+    })
+    .config('config', 'Path to a JSON config file')
+    .default('config', '.mp-config.json')
+    .demandCommand(1, 'You must provide a markdown file.')
+    .argv;
+}

package/{client.js → src/client.js}

@@ -133,6 +133,24 @@ document.addEventListener('DOMContentLoaded', () => {
       command = '';
       lastKey = '';
       updatePrompt(':' + command);
+    } else if (e.key === 'j') {
+      window.scrollBy({ top: window.innerHeight * 0.1, behavior: 'smooth' });
+      lastKey = '';
+    } else if (e.key === 'k') {
+      window.scrollBy({ top: -window.innerHeight * 0.1, behavior: 'smooth' });
+      lastKey = '';
+    } else if (e.key === 'u' && e.ctrlKey) {
+      window.scrollBy({ top: -window.innerHeight * 0.5, behavior: 'smooth' });
+      lastKey = '';
+    } else if (e.key === 'd' && e.ctrlKey) {
+      window.scrollBy({ top: window.innerHeight * 0.5, behavior: 'smooth' });
+      lastKey = '';
+    } else if (e.key === 'f' && e.ctrlKey) {
+      window.scrollBy({ top: window.innerHeight * 0.9, behavior: 'smooth' });
+      lastKey = '';
+    } else if (e.key === 'b' && e.ctrlKey) {
+      window.scrollBy({ top: -window.innerHeight * 0.9, behavior: 'smooth' });
+      lastKey = '';
     } else if (e.key === '?') {
       helpBox.style.display = helpBox.style.display === 'none' ? 'block' : 'none';
       lastKey = ''; // Reset lastKey to prevent unintended 'gg'

package/src/marp-dev-preview.mjs

@@ -0,0 +1,158 @@
+#!/usr/bin/env node
+import { promises as fs } from 'fs';
+import path from 'path';
+import chokidar from 'chokidar';
+import { WebSocketServer } from 'ws';
+import { fileURLToPath } from 'url';
+
+/* Sub-modules */
+import { createServer } from './server.mjs';
+import { initializeMarp, renderMarp as renderMarpInternal } from './marp-utils.mjs';
+import { parseArgs } from './args.mjs';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const argv = parseArgs();
+
+const markdownFile = argv._[0]
+const themeDir = argv.themeDir;
+const port = argv.port;
+const verbose = argv.verbose;
+
+if (argv.version) {
+  const pkg = JSON.parse(await fs.readFile(path.join(__dirname, '..', 'package.json'), 'utf8'));
+  console.log(`marp-dev-preview version ${pkg.version}`);
+  process.exit(0);
+}
+
+if (verbose) {
+  console.debug = console.log;
+} else {
+  console.debug = () => { };
+}
+
+if (!markdownFile) {
+  console.error('Error: You must provide a path to a markdown file.');
+  process.exit(1);
+}
+
+const markdownDir = path.dirname(markdownFile);
+
+const wss = new WebSocketServer({ port: port + 1 });
+
+async function renderMarp() {
+  const md = await fs.readFile(markdownFile, 'utf8');
+  const { html, css } = renderMarpInternal(md);
+  const customCss = `
+	svg[data-marpit-svg] {
+	  margin-bottom:20px !important;
+	  border: 1px solid gray;
+	  border-radius: 10px;
+	  box-shadow: 2px 2px 6px rgba(0,0,0,0.3); 
+	}
+	#help-box table td, #help-box table th {
+	  padding: 0 15px 0 15px;
+	}
+	#help-box {
+	  position: fixed;
+	  top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          background-color: rgba(0, 0, 0, 0.8);
+          color: white;
+          padding: 20px;
+          border-radius: 10px;
+          font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+          z-index: 1001;
+          display: none; /* Initially hidden */
+          box-shadow: 0 4px 12px rgba(0,0,0,0.5);
+          max-width: 400px;
+          text-align: left;
+	}
+        #command-prompt {
+          position: fixed;
+          bottom: 20px;
+          left: 50%;
+          transform: translateX(-50%);
+          background-color: #333;
+          color: white;
+          padding: 10px 20px;
+          border-radius: 8px;
+          font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+          font-size: 1.2em;
+          z-index: 1000;
+          display: none;
+          box-shadow: 0 4px 8px rgba(0,0,0,0.3);
+        }
+  `;
+
+  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>
+      <div id="marp-container">
+        ${html}
+      </div>
+      <div id="help-box">
+        <h3>Key Bindings</h3>
+        <p>In addition to standard key bindings (e.g., Space, Page Down, Arrow Down, Page Up, Arrow Up), the following key bindings are available:</p>
+	<table>
+	<tr><th>Key</th><th>Action</th></tr> 
+        <tr><td><kbd>gg</kbd> or <kbd>Home</kbd></td><td>Go to first slide</td></tr>
+        <tr><td><kbd>G</kbd> or <kbd>End</kbd></td><td>Go to last slide</td></tr>
+        <tr><td><kbd>:&lt;number&gt</kbd></td><td>Go to the given slide number</td></tr> 
+        <tr><td><kbd>^f</kbd></td><td>Forward one page</td></tr>
+        <tr><td><kbd>^b</kbd></td><td>Back one page</td></tr>
+        <tr><td><kbd>^d</kbd></td><td>Forward half a page</td></tr>
+        <tr><td><kbd>^u</kbd></td><td>Back half a page</td></tr>
+        <tr><td><kbd>?</kbd></td><td>Show/hide help</td></tr>
+	</table>
+      </div>
+      <div id="command-prompt"></div>
+    </body>
+    </html>
+  `;
+}
+
+async function reload(markdown) {
+  try {
+    const { html, css } = renderMarpInternal(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.debug(`File ${markdownFile} changed, updating...`);
+  const md = await fs.readFile(markdownFile, 'utf8');
+  await reload(md);
+});
+
+initializeMarp(themeDir).then(() => {
+  createServer(port, markdownFile, markdownDir, renderMarp, reload, wss, __dirname);
+  if (themeDir) {
+    console.log(`Using custom themes from ${themeDir}`);
+  }
+}).catch(error => {
+  console.error("Failed to initialize Marp:", error);
+  process.exit(1);
+});

package/src/marp-utils.mjs

@@ -0,0 +1,33 @@
+
+import { Marp } from '@marp-team/marp-core';
+import { promises as fs } from 'fs';
+import path from 'path';
+import markdownItFootnote from 'markdown-it-footnote';
+import markdownItMark from 'markdown-it-mark';
+import markdownItContainer from 'markdown-it-container';
+
+let marp;
+
+export async function initializeMarp(themeDir) {
+  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);
+      }
+    }
+  }
+  return marp;
+}
+
+export function renderMarp(markdown) {
+  const { html, css } = marp.render(markdown);
+  return { html, css };
+}

package/src/server.mjs

@@ -0,0 +1,99 @@
+
+import http from 'http';
+import { promises as fs } from 'fs';
+import path from 'path';
+
+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'
+};
+
+export function createServer(port, markdownFile, markdownDir, renderMarp, reload, wss, __dirname) {
+  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 === '/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');
+    }
+  });
+
+  server.listen(port, () => {
+    console.log(`Server listening on http://localhost:${port} for ${markdownFile}`);
+  });
+
+  return server;
+}

package/test/args.test.mjs

@@ -0,0 +1,90 @@
+import { parseArgs } from '../src/args.mjs';
+
+const mockArgv = {};
+const defaultValues = {};
+
+jest.mock('yargs', () => {
+  const yargsMock = jest.fn(() => yargsMock);
+  yargsMock.usage = jest.fn().mockReturnThis();
+  yargsMock.positional = jest.fn().mockReturnThis();
+  yargsMock.option = jest.fn().mockImplementation((name, options) => {
+    if (options.default !== undefined) {
+      defaultValues[name] = options.default;
+    }
+    return yargsMock;
+  });
+  yargsMock.config = jest.fn().mockReturnThis();
+  yargsMock.default = jest.fn().mockImplementation((name, value) => {
+    defaultValues[name] = value;
+    return yargsMock;
+  });
+  yargsMock.demandCommand = jest.fn().mockReturnThis();
+  Object.defineProperty(yargsMock, 'argv', {
+    get: () => ({
+      ...defaultValues,
+      ...mockArgv,
+    }),
+  });
+  return yargsMock;
+});
+
+jest.mock('yargs/helpers', () => ({
+  hideBin: jest.fn(() => ['node', 'marp-dev-preview.mjs']),
+}));
+
+describe('Args', () => {
+  beforeEach(() => {
+    // Reset mockArgv before each test
+    for (const key in mockArgv) {
+      delete mockArgv[key];
+    }
+    // Reset hideBin mock
+    require('yargs/helpers').hideBin.mockReturnValue(['node', 'marp-dev-preview.mjs']);
+  });
+
+  it('should return default port if not specified', () => {
+    mockArgv._ = ['test.md'];
+    const argv = parseArgs();
+    expect(argv.port).toBe(8080);
+  });
+
+  it('should return specified port', () => {
+    mockArgv._ = ['test.md'];
+    mockArgv.port = 3000;
+    const argv = parseArgs();
+    expect(argv.port).toBe(3000);
+  });
+
+  it('should return default verbose as false', () => {
+    mockArgv._ = ['test.md'];
+    const argv = parseArgs();
+    expect(argv.verbose).toBe(false);
+  });
+
+  it('should return verbose as true if specified', () => {
+    mockArgv._ = ['test.md'];
+    mockArgv.verbose = true;
+    const argv = parseArgs();
+    expect(argv.verbose).toBe(true);
+  });
+
+  it('should capture markdown file positional argument', () => {
+    mockArgv._ = ['my-presentation.md'];
+    const argv = parseArgs();
+    expect(argv._[0]).toBe('my-presentation.md');
+  });
+
+  it('should return theme-dir if specified', () => {
+    mockArgv._ = ['test.md'];
+    mockArgv.themeDir = '/path/to/themes';
+    const argv = parseArgs();
+    expect(argv.themeDir).toBe('/path/to/themes');
+  });
+
+  it('should handle config file path', () => {
+    mockArgv._ = ['test.md'];
+    mockArgv.config = './my-config.json';
+    const argv = parseArgs();
+    expect(argv.config).toBe('./my-config.json');
+  });
+});

package/test/marp-dev-preview.test.mjs

@@ -0,0 +1,24 @@
+import { createServer } from '../src/server.mjs';
+import http from 'http';
+
+jest.mock('http', () => ({
+  createServer: jest.fn(() => ({
+    listen: jest.fn(),
+  })),
+}));
+
+describe('Server', () => {
+  it('should create a server', () => {
+    const port = 8080;
+    const markdownFile = 'test.md';
+    const markdownDir = '.';
+    const renderMarp = jest.fn();
+    const reload = jest.fn();
+    const wss = { clients: [] };
+    const __dirname = '.';
+
+    createServer(port, markdownFile, markdownDir, renderMarp, reload, wss, __dirname);
+
+    expect(http.createServer).toHaveBeenCalled();
+  });
+});

package/test/marp-utils.test.mjs

@@ -0,0 +1,29 @@
+import { initializeMarp, renderMarp } from '../src/marp-utils.mjs';
+import { Marp } from '@marp-team/marp-core';
+
+jest.mock('@marp-team/marp-core', () => ({
+  Marp: jest.fn(() => ({
+    use: jest.fn().mockReturnThis(),
+    render: jest.fn(() => ({ html: '', css: '' })),
+    themeSet: {
+      add: jest.fn(),
+    },
+  })),
+}));
+
+describe('Marp Utils', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should initialize Marp', async () => {
+    await initializeMarp();
+    expect(Marp).toHaveBeenCalled();
+  });
+
+  it('should render markdown', async () => {
+    const marp = await initializeMarp();
+    renderMarp('# Hello');
+    expect(marp.render).toHaveBeenCalledWith('# Hello');
+  });
+});

package/marp-dev-preview.mjs

@@ -1,314 +0,0 @@
-#!/usr/bin/env node
-import { Marp } from '@marp-team/marp-core';
-import { promises as fs } from 'fs';
-import http from 'http';
-import path from 'path';
-import chokidar from 'chokidar';
-import { WebSocketServer } from 'ws';
-import yargs from 'yargs';
-import { hideBin } from 'yargs/helpers';
-import markdownItFootnote from 'markdown-it-footnote';
-import markdownItMark from 'markdown-it-mark';
-import markdownItContainer from 'markdown-it-container';
-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
-  })
-  .option('verbose', {
-    alias: 'v',
-    describe: 'Enable verbose logging',
-    type: 'boolean',
-    default: false
-  })
-  .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;
-const verbose = argv.verbose;
-
-async function findPackageJson(startDir) {
-  let dir = startDir;
-  while (dir !== path.parse(dir).root) {
-    const pkgPath = path.join(dir, 'package.json');
-    try {
-      await fs.access(pkgPath);
-      return pkgPath;
-    } catch {
-      dir = path.dirname(dir);
-    }
-  }
-  return null;
-}
-
-// Version reporting block (replace your current version block)
-if (argv.version || argv.v) {
-  const __filename = fileURLToPath(import.meta.url);
-  const __dirname = dirname(__filename);
-  const pkgPath = await findPackageJson(__dirname);
-  if (pkgPath) {
-    const pkg = JSON.parse(await fs.readFile(pkgPath, 'utf8'));
-    console.log(`marp-dev-preview version ${pkg.version}`);
-  } else {
-    console.error('Could not find package.json for version info.');
-  }
-  process.exit(0);
-}
-
-if (verbose) {
-  console.debug = console.log;
-} else {
-  console.debug = () => { };
-}
-
-if (!markdownFile) {
-  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'
-};
-
-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');
-
-  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);
-  const customCss = `
-	svg[data-marpit-svg] {
-	  margin-bottom:20px !important;
-	  border: 1px solid gray;
-	  border-radius: 10px;
-	  box-shadow: 2px 2px 6px rgba(0,0,0,0.3); 
-	}
-	#help-box table td, #help-box table th {
-	  padding: 0 15px 0 15px;
-	}
-	#help-box {
-	  position: fixed;
-	  top: 50%;
-          left: 50%;
-          transform: translate(-50%, -50%);
-          background-color: rgba(0, 0, 0, 0.8);
-          color: white;
-          padding: 20px;
-          border-radius: 10px;
-          font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-          z-index: 1001;
-          display: none; /* Initially hidden */
-          box-shadow: 0 4px 12px rgba(0,0,0,0.5);
-          max-width: 400px;
-          text-align: left;
-	}
-        #command-prompt {
-          position: fixed;
-          bottom: 20px;
-          left: 50%;
-          transform: translateX(-50%);
-          background-color: #333;
-          color: white;
-          padding: 10px 20px;
-          border-radius: 8px;
-          font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-          font-size: 1.2em;
-          z-index: 1000;
-          display: none;
-          box-shadow: 0 4px 8px rgba(0,0,0,0.3);
-        }
-  `;
-
-  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>
-      <div id="marp-container">
-        ${html}
-      </div>
-      <div id="help-box">
-        <h3>Key Bindings</h3>
-	<table>
-	<tr><th>Key</th><th>Action</th></tr> 
-        <tr><td><kbd>gg</kbd> or <kbd>Home</kbd></td><td>Go to first slide</td></tr>
-        <tr><td><kbd>G</kbd> or <kbd>End</kbd></td><td>Go to last slide</td></tr>
-        <tr><td><kbd>:&lt;number&gt</kbd></td><td>Go to the given slide number</td></tr> 
-        <tr><td><kbd>?</kbd></td><td>Show/hide help</td></tr>
-	</table>
-      </div>
-      <div id="command-prompt"></div>
-    </body>
-    </html>
-  `;
-}
-
-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 === '/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');
-  }
-});
-
-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}`);
-    }
-  });
-}).catch(error => {
-  console.error("Failed to initialize Marp:", error);
-  process.exit(1);
-});