host-mdx 2.0.1 → 2.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) Manas Ravindra Makde <manasmakde@gmail.com> (https://manasmakde.github.io/)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -4,7 +4,7 @@
 
 A cli tool to create and serve a static html website from a given mdx directory
 
-## Usage
+## 🛠️ Usage
 
 ```
 host-mdx [options]
@@ -18,12 +18,15 @@ Options:
 --track-changes, -t   Tracks any changes made & auto reloads
 --verobse, -v         Shows additional log messages
 ```
+  
+> If `--input-path` is not provided it will default to `./` i.e. current working directory  
+> If `--output-path` is not provided a temp folder will be created automatically & deleted upon exit
 
 Add a file by the name `.hostmdxignore` at the root of your project to filter out which files/folders to skip while generating html
 (similar to [.gitignore](https://git-scm.com/docs/gitignore)) 
 
 
-Add a file by the name `host-mdx.js` at the root of your project as a config file with the following:
+Add a file by the name `host-mdx.js` at the root of your input folder as a config file with the following:
 
 ```js
 // Modify
@@ -32,19 +35,20 @@ modBundleMDXSettings(settings)
 
 // Hooks
 onSiteCreateStart(inputPath, outputPath)
-onSiteCreateEnd(inputPath, outputPath)
+onSiteCreateEnd(inputPath, outputPath, wasInterrupted)
 onFileCreateStart(inputFilePath, outputFilePath)
 onFileCreateEnd(inputFilePath, outputFilePath)
 ```
 > Note: Any changes made to `host-mdx.js` require complete restart otherwise changes will not reflect
 
-## Example
+## 📖 Example
 
 Command:
 ```bash
 npx host-mdx --input-path="path/to/my-website-template" --output-path="path/to/my-website" --port=3113 -t
 ```
 
+
 Input Directory:
 ```
 my-website-template/
@@ -82,7 +86,7 @@ export function onSiteCreateStart(inputPath, outputPath) {
    console.log("onSiteCreateStart", inputPath, outputPath)
 }
 export function onSiteCreateEnd(inputPath, outputPath, wasSuccessful){
-   console.log("onSiteCreateEnd", inputPath, outputPath)
+   console.log("onSiteCreateEnd", inputPath, outputPath, wasSuccessful)
 }
 export function onFileCreateStart(inputFilePath, outputFilePath){
    console.log("onFileCreateStart", inputFilePath, outputFilePath)
@@ -120,4 +124,7 @@ my-website/
 
 The site will now be visible in the browser at `localhost:3113`
 
-> For a live example take a look at [sourcesnippet.github.io](https://sourcesnippet.github.io/)
+
+## 🔑 License
+
+MIT © [Manas Ravindra Makde](https://manasmakde.github.io/)

package/index.js

@@ -3,18 +3,22 @@
 import fs from 'fs'
 import os from 'os'
 import path from 'path'
-import http from 'http'
+import polka from 'polka';
+import sirv from 'sirv';
 import ignore from "ignore";
 import chokidar from 'chokidar';
 import * as readline from 'readline';
+import { pathToFileURL } from 'url';
 import { mdxToHtml } from './mdx-to-html.js'
 
 
 // To-Set Properties
-const APP_NAME = "host-mdx"
-const DEFAULT_PORT = 3000
-const IGNORE_FILE_NAME = ".hostmdxignore"
-const CONFIG_FILE_NAME = "host-mdx.js"
+const APP_NAME = "host-mdx";
+const DEFAULT_PORT = 3000;
+const IGNORE_FILE_NAME = ".hostmdxignore";
+const CONFIG_FILE_NAME = "host-mdx.js";
+const NOT_FOUND_404_FILE = "404.html"
+const NOT_FOUND_404_MESSAGE = "404"
 const DEFAULT_IGNORES = `
 ${IGNORE_FILE_NAME}
 ${CONFIG_FILE_NAME}
@@ -22,21 +26,21 @@ node_modules
 package-lock.json
 package.json
 .git
-`
+`;
 
 
 // Flags
-const CREATE_FLAG = "--create-only"
-const CREATE_SHORT_FLAG = "-c"
-const HELP_FLAG = "--help"
-const HELP_SHORT_FLAG = "-h"
-const INPUT_PATH_FLAG = "--input-path"
-const OUTPUT_PATH_FLAG = "--output-path"
-const PORT_FLAG = "--port"
-const VERBOSE_FLAG = "--verobse"
-const VERBOSE_SHORT_FLAG = "-v"
-const TRACK_CHANGES_FLAG = "--track-changes"
-const TRACK_CHANGES_SHORT_FLAG = "-t"
+const CREATE_FLAG = "--create-only";
+const CREATE_SHORT_FLAG = "-c";
+const HELP_FLAG = "--help";
+const HELP_SHORT_FLAG = "-h";
+const INPUT_PATH_FLAG = "--input-path";
+const OUTPUT_PATH_FLAG = "--output-path";
+const PORT_FLAG = "--port";
+const VERBOSE_FLAG = "--verbose";
+const VERBOSE_SHORT_FLAG = "-v";
+const TRACK_CHANGES_FLAG = "--track-changes";
+const TRACK_CHANGES_SHORT_FLAG = "-t";
 
 
 // Messages & Errors
@@ -50,15 +54,16 @@ ${OUTPUT_PATH_FLAG}=...     The path to which all html files will be generated
 ${PORT_FLAG}=...            Localhost port number on which to host 
 ${TRACK_CHANGES_FLAG}, ${TRACK_CHANGES_SHORT_FLAG}   Tracks any changes made & auto reloads
 ${VERBOSE_FLAG}, ${VERBOSE_SHORT_FLAG}         Shows additional log messages
-`
+`;
 
 
 // Private Properties
-let isCreatingSite = false  // Prevents site from being recreated if creation is already ongoing
-let isVerbose = false
-let configs
-let server
-const TEMP_HTML_DIR = path.join(os.tmpdir(), `${APP_NAME}`)
+let isCreatingSite = false;  // Prevents site from being recreated if creation is already ongoing
+let isCreateSitePending = false  // Keeps track if files have been modified and site needs to be recreated
+let isVerbose = false;
+let configs;
+let app;
+const TEMP_HTML_DIR = path.join(os.tmpdir(), `${APP_NAME}`);
 const TIME_OPTIONS = {
     year: 'numeric',
     month: 'long',
@@ -68,23 +73,7 @@ const TIME_OPTIONS = {
     second: 'numeric',
     hour12: false,
     fractionalSecondDigits: 3
-}
-const MIME_TYPE = {  // Maps extensions to mime protocol
-    '.html': 'text/html',
-    '.css': 'text/css',
-    '.js': 'text/javascript',
-    '.json': 'application/json',
-    '.png': 'image/png',
-    '.jpg': 'image/jpeg',
-    '.ico': 'image/x-icon',
-    '.wav': 'audio/wav',
-    '.webp': 'image/webp',
-    '.mp3': 'audio/mpeg',
-    '.mp4': 'video/mp4',
-    '.svg': 'image/svg+xml',
-    '.pdf': 'application/pdf',
-    '.zip': 'application/zip',
-}
+};
 
 
 // Utility Methods
@@ -97,18 +86,16 @@ function log(msg, checkVerbose = false) {
     console.log(`[${APP_NAME} ${timestamp}] ${msg}`)
 }
 function createTempDir() {
-
-    // Delete existing temp dir
-    if (fs.existsSync(TEMP_HTML_DIR)) {
-        fs.rmSync(TEMP_HTML_DIR, { recursive: true, force: true })
-    }
+    // Create default temp html dir
+    fs.mkdirSync(TEMP_HTML_DIR, { recursive: true });
 
 
-    // Create default temp html dir
-    fs.mkdirSync(TEMP_HTML_DIR, { recursive: true })
+    // Generate time stamp
+    const now = new Date()
+    const timestamp = `${now.getFullYear()}-${String(now.getMonth() + 1)}-${now.getDate()}T${now.getHours()}_${now.getMinutes()}_${now.getSeconds()}`
 
 
-    return fs.mkdtempSync(path.join(TEMP_HTML_DIR, `/html-`));
+    return fs.mkdtempSync(path.join(TEMP_HTML_DIR, `html-${timestamp}-`));
 }
 function getIgnore(ignoreFilePath) {
     const ig = ignore();
@@ -137,19 +124,22 @@ function createFile(filePath, fileContent = "") {
 async function createSite(inputPath, outputPath) {
     // Exit if already creating
     if (isCreatingSite) {
-        log("site creation already ongoing!")
+        log("Site creation already ongoing! Added to pending")
+        isCreateSitePending = true
         return
     }
 
 
     // Set creating status to ongoing
     isCreatingSite = true
+    isCreateSitePending = false
 
 
     // Get config properties
     let configFilePath = path.join(inputPath, `./${CONFIG_FILE_NAME}`)
     if (fs.existsSync(configFilePath)) {
-        configs = await import(configFilePath);
+
+        configs = await import(pathToFileURL(configFilePath).href);
     }
 
 
@@ -171,20 +161,20 @@ async function createSite(inputPath, outputPath) {
 
     // Iterate through all folders & files
     const stack = [inputPath];
-    while (stack.length > 0) {
+    while (stack.length > 0 && !isCreateSitePending) {
         // Continue if path does not exist
         const currentPath = stack.pop()
-        if(!fs.existsSync(currentPath)){
+        if (!fs.existsSync(currentPath)) {
             continue;
         }
 
-        
+
         // Get essentials
         const relToInput = path.relative(inputPath, currentPath)
         const toIgnore = inputPath != currentPath && ig.ignores(relToInput)
         const absToOutput = path.join(outputPath, relToInput)
         const isDir = fs.statSync(currentPath).isDirectory()
-        const isMdx = !isDir && absToOutput.endsWith(".mdx")
+        const isMdx = !isDir && currentPath.endsWith(".mdx")
 
 
         // Skip if to ignore this path
@@ -247,21 +237,87 @@ async function createSite(inputPath, outputPath) {
 
 
     // Broadcast site creation ended
-    log("Created site")
-    configs?.onSiteCreateEnd?.(inputPath, outputPath)
+    log(`Created site at ${outputPath}`)
+    configs?.onSiteCreateEnd?.(inputPath, outputPath, isCreateSitePending)
+
+
+    // Reinvoke creation
+    if(isCreateSitePending){
+        await createSite(inputPath, outputPath);
+    }
+}
+function filterArgs(rawArgs) {
+    // Assign to create
+    let toCreateOnly = rawArgs.includes(CREATE_FLAG) || rawArgs.includes(CREATE_SHORT_FLAG)
+
+
+    // Assign input path
+    let inputPath = rawArgs.find(val => val.startsWith(INPUT_PATH_FLAG));
+    let inputPathProvided = inputPath !== undefined;
+    inputPath = inputPathProvided ? inputPath.split('=')[1] : process.cwd();
+
+
+    // Check input path
+    if (!fs.existsSync(inputPath) || !fs.lstatSync(inputPath).isDirectory()) {
+        log(`Invalid input path "${inputPath}"`)
+        return null;
+    }
+    else {
+        inputPath = inputPath !== "" ? path.resolve(inputPath) : inputPath;  // To ensure input path is absolute
+    }
+
+
+    // Assign output path
+    let outputPath = rawArgs.find(val => val.startsWith(OUTPUT_PATH_FLAG));
+    let outputPathProvided = outputPath !== undefined;
+    outputPath = outputPathProvided ? outputPath.split('=')[1] : createTempDir();
+
+
+    // Check output path
+    if (!fs.existsSync(outputPath) || !fs.lstatSync(outputPath).isDirectory()) {
+        log(`Invalid output path "${outputPath}"`)
+        return null;
+    }
+    else {
+        outputPath = outputPath !== "" ? path.resolve(outputPath) : outputPath;  // To ensure output path is absolute
+    }
+
+
+    // Assign port
+    let port = rawArgs.find(val => val.startsWith(PORT_FLAG));
+    let portProvided = port !== undefined;
+    port = portProvided ? Number(port.split('=')[1]) : DEFAULT_PORT;
+
+
+    // Check port
+    if (!Number.isInteger(port)) {
+        log(`Invalid port`)
+        return null;
+    }
+
+
+    // Assign tracking changes
+    let toTrackChanges = rawArgs.includes(TRACK_CHANGES_FLAG) || rawArgs.includes(TRACK_CHANGES_SHORT_FLAG);
+
+
+    return { toCreateOnly, inputPath, inputPathProvided, outputPath, outputPathProvided, toTrackChanges, port, portProvided, };
 }
 
 
 // Main Methods
 async function createSiteSafe(...args) {
+
+    let success = true;
     try {
         await createSite(...args);
     }
     catch (err) {
-        isCreatingSite = false
-        console.log(err);
-        log("Failed to create site!");
+        success = false;
+        isCreatingSite = false;
+        log(`Failed to create site!\n${err}`);
     }
+
+    return success;
 }
 async function listenForKey(createSiteCallback) {
 
@@ -276,144 +332,103 @@ async function listenForKey(createSiteCallback) {
             createSiteCallback();
         }
         else if (key && key.sequence == '\x03') {
-            server.close((e) => { process.exit() })
+            app.server.close((e) => { process.exit() })
         }
     });
 }
 function startServer(htmlDir, port) {  // Starts server at given port
-    
+
     // Broadcast server starting
     configs?.onHostStart?.(port)
 
 
     // Start Server
-    const newServer = http.createServer((req, res) => {
-
-        // Parse & Sanitize URL
-        let parsedUrl = new URL("http://" + req.headers.host + req.url)
-        let sanitizedUrl = path.normalize(parsedUrl.pathname).replace(/^(\.\.[\/\\])+/, '')
-        let isDirectory = !Boolean(path.parse(sanitizedUrl).ext)
-        let relativeFilePath = path.normalize(sanitizedUrl + (isDirectory ? "/index.html" : ""))
-        let absoluteFilePath = path.join(path.resolve(htmlDir), relativeFilePath)
-        let pathExists = fs.existsSync(absoluteFilePath)
-
-        // Respondes with content of file
-        if (pathExists)
-            // read file from file system
-            fs.readFile(absoluteFilePath, function (err, data) {
-                if (err) {
-                    res.statusCode = 500
-                    res.end(`Error getting the file: ${err}.`)
-                }
-                else {
-                    // Based on the URL path, extract the file extention. e.g. .js, .doc, ...
-                    const ext = path.parse(absoluteFilePath).ext
-                    res.setHeader('Content-type', MIME_TYPE[ext] || 'text/plain') // if the file is found, set Content-type and send data
-                    res.end(data)
-                }
-
-            })
-        else { // Respondes with 404 if file not found
-            res.statusCode = 404
-            res.end(`404 Invalid url not found!`)
+    const assets = sirv(htmlDir, { dev: true });
+    const newApp = polka({
+        onNoMatch: (req, res) => {
+
+            // Set status code to 404
+            res.statusCode = 404;
+
+
+            // Send 404 file if found otherwise default not found message
+            const errorFile = path.join(htmlDir, NOT_FOUND_404_FILE);
+            if (fs.existsSync(errorFile)) {
+                res.setHeader('Content-Type', 'text/html');
+                res.end(fs.readFileSync(errorFile));
+            } else {
+                res.end(NOT_FOUND_404_MESSAGE);
+            }
         }
-    })
-    newServer.listen(port, () => { log(`Server listening at ${port} ... (Press 'r' to manually reload, Press 'Ctrl+c' to exit)`) })
-    newServer.on("close", () => { configs?.onHostEnd?.(port) });
-    newServer.on("error", (e) => { log(`Error Starting server ${e.message}`); throw e; });
+    }).use(assets)
+
+    newApp.listen(port)
+    newApp.server.on("close", () => { configs?.onHostEnd?.(port) });
+    newApp.server.on("error", (e) => { log(`Failed to start server: ${e.message}`); throw e; });
+    log(`Server listening at ${port} ... (Press 'r' to manually reload, Press 'Ctrl+c' to exit)`)
 
 
-    return newServer
+    return newApp
 }
 async function Main() {
     // Get all arguments
-    const args = process.argv.slice(2)
+    const rawArgs = process.argv.slice(2);
+
+
+    // Check if verbose
+    isVerbose = rawArgs.includes(VERBOSE_FLAG) || rawArgs.includes(VERBOSE_SHORT_FLAG);
 
 
     // Check if asked for help
-    if (args.includes(HELP_FLAG) || args.includes(HELP_SHORT_FLAG)) {
+    if (rawArgs.includes(HELP_FLAG) || rawArgs.includes(HELP_SHORT_FLAG)) {
         console.log(HELP_MESSAGE)
         return;
     }
 
 
-    // Assign to create
-    let toCreateOnly = args.includes(CREATE_FLAG) || args.includes(CREATE_SHORT_FLAG)
-
-    // Assign input path
-    let inputPath = args.find(val => val.startsWith(INPUT_PATH_FLAG))
-    inputPath = inputPath !== undefined ? inputPath.split('=')[1] : process.cwd()
-
-    // Assign output path
-    let outputPath = args.find(val => val.startsWith(OUTPUT_PATH_FLAG))
-    let outputPathProvided = outputPath !== undefined
-    outputPath = outputPathProvided ? outputPath.split('=')[1] : createTempDir()
-
-    // Assign tracking changes
-    let toTrackChanges = args.includes(TRACK_CHANGES_FLAG) || args.includes(TRACK_CHANGES_SHORT_FLAG)
-
-    // Assign port
-    let port = args.find(val => val.startsWith(PORT_FLAG))
-    port = port !== undefined ? Number(port.split('=')[1]) : DEFAULT_PORT
-
-    // Assign verbose
-    isVerbose = args.includes(VERBOSE_FLAG) || args.includes(VERBOSE_SHORT_FLAG)
-
-
-    // Check input path
-    if (!fs.existsSync(inputPath) || !fs.lstatSync(inputPath).isDirectory()) {
-        log(`Invalid input path "${inputPath}"`)
-        return
-    }
-
-    // Check output path
-    if (!fs.existsSync(outputPath) || !fs.lstatSync(outputPath).isDirectory()) {
-        log(`Invalid output path "${outputPath}"`)
-        return
-    }
-
-    // Check port
-    if (!Number.isInteger(port)) {
-        log(`Invalid port`)
-        return
+    // Filter arguments
+    let args = filterArgs(rawArgs);
+    if (args === null) {
+        return;
     }
 
 
     // Create site from mdx & return if only needed to create site
-    await createSiteSafe(inputPath, outputPath)
-    if (toCreateOnly) {
+    let wasCreated = await createSiteSafe(args.inputPath, args.outputPath);
+    if (args.toCreateOnly) {
+        process.exitCode = !wasCreated ? 1 : 0;  // Exit with error code if not created successfully
         return;
     }
 
 
     // Watch for key presses
-    listenForKey(() => createSiteSafe(inputPath, outputPath))
+    listenForKey(() => createSiteSafe(args.inputPath, args.outputPath));
 
 
     // Watch for changes
-    if (toTrackChanges) {
-        chokidar.watch(inputPath, { 
-            ignoreInitial: true,
-            ignored: (path, stats) => isCreatingSite  // Ignore if site creation is ongoing
+    if (args.toTrackChanges) {
+        chokidar.watch(args.inputPath, {
+            ignoreInitial: true
         }).on('all', (event, path) => {
-            createSiteSafe(inputPath, outputPath)
+            createSiteSafe(args.inputPath, args.outputPath)
         });
     }
 
 
     // Start server
-    server = startServer(outputPath, port)
+    app = startServer(args.outputPath, args.port);
 
 
     // Handle quit
-    process.on("exit", () => {
+    const cleanup = () => {
         // Remove html path
-        if (!outputPathProvided && fs.existsSync(outputPath)) {
-            fs.rmSync(outputPath, { recursive: true, force: true })
+        if (!args.outputPathProvided && fs.existsSync(args.outputPath)) {
+            fs.rmSync(args.outputPath, { recursive: true, force: true })
         }
-
-        process.exit(0);
-    });
+    }
+    process.on("exit", cleanup);
+    process.on("SIGINT", cleanup);
+    process.on("SIGTERM", cleanup);
 }
 
 Main()

package/mdx-to-html.js

@@ -1,19 +1,43 @@
-import React from 'react';
-import rehypeHighlight from "rehype-highlight";
-import * as _jsx_runtime from 'react/jsx-runtime';
+import * as Preact from "preact";
+import * as PreactDOM from "preact/compat";
+import * as _jsx_runtime from 'preact/jsx-runtime';
+import { renderToString } from 'preact-render-to-string';
 import { common } from 'lowlight';
 import { bundleMDX } from 'mdx-bundler';
-import { getMDXComponent } from 'mdx-bundler/client/index.js'
-import { renderToString } from 'react-dom/server';
 import { createRequire } from 'module';
+import rehypeHighlight from "rehype-highlight";
 
+
+// Constants
 const nativeRequire = createRequire(import.meta.url);
+const jsxBundlerConfig = {
+  jsxLib: {
+    varName: 'Preact',
+    package: 'preact',
+  },
+  jsxDom: {
+    varName: 'PreactDom',
+    package: 'preact/compat',
+  },
+  jsxRuntime: {
+    varName: '_jsx_runtime',
+    package: 'preact/jsx-runtime',
+  },
+}
+
 
+// Methods
+function getMDXComponent(code, globals) {
+  const fn = new Function(...Object.keys(globals), code);
+  const mdxExport = fn(...Object.values(globals));
+  return mdxExport.default;
+}
 export async function mdxToHtml(mdxCode, baseUrl, modSettingsCallback = undefined) {
-  
+
   // Assign default settings
   let settings = {
     source: mdxCode,
+    jsxConfig: jsxBundlerConfig,
     cwd: baseUrl,
     esbuildOptions: (options) => {
       options.platform = 'node'
@@ -30,13 +54,15 @@ export async function mdxToHtml(mdxCode, baseUrl, modSettingsCallback = undefine
 
 
   // Modify settings
-  if(modSettingsCallback !== undefined){
+  if (modSettingsCallback !== undefined) {
     settings = modSettingsCallback(settings)
   }
 
 
   // Generate html
   const { code } = await bundleMDX(settings);
-  const Component = getMDXComponent(code, { require: nativeRequire, cwd: baseUrl })
-  return renderToString(React.createElement(Component));
+  const Component = getMDXComponent(code, { Preact, PreactDOM, _jsx_runtime, require: nativeRequire, cwd: baseUrl })
+
+
+  return renderToString(Preact.h(Component, {}));
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "host-mdx",
-  "version": "2.0.1",
-  "description": "Creates and serves a github pages style html directory from a corresponding mdx directory",
+  "version": "2.1.0",
+  "description": "A cli tool to create and serve a static html website from a given mdx directory",
   "main": "index.js",
   "type": "module",
   "scripts": {
@@ -15,9 +15,11 @@
     "ignore": "^7.0.5",
     "lowlight": "^3.3.0",
     "mdx-bundler": "^10.1.1",
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3",
-    "rehype-highlight": "^7.0.2"
+    "polka": "^0.5.2",
+    "preact": "^10.28.2",
+    "preact-render-to-string": "^6.6.5",
+    "rehype-highlight": "^7.0.2",
+    "sirv": "^3.0.2"
   },
   "keywords": [
     "mdx"