host-mdx 2.1.0 → 2.2.0

package/README.md

@@ -1,7 +1,6 @@
 # host-mdx
 
-[![Version](https://img.shields.io/npm/v/host-mdx.svg)](https://www.npmjs.com/package/host-mdx )
-
+[![Version](https://img.shields.io/npm/v/host-mdx.svg)](https://www.npmjs.com/package/host-mdx)\
 A cli tool to create and serve a static html website from a given mdx directory
 
 ## 🛠️ Usage
@@ -18,38 +17,45 @@ 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)) 
+> 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
 
+You can 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 input folder as a config file with the following:
+You can also add a file by the name `host-mdx.js` at the root of your input folder as a config file with access to the following:
 
 ```js
-// Modify
-modBundleMDXSettings(settings)
-
-
-// Hooks
 onSiteCreateStart(inputPath, outputPath)
 onSiteCreateEnd(inputPath, outputPath, wasInterrupted)
-onFileCreateStart(inputFilePath, outputFilePath)
-onFileCreateEnd(inputFilePath, outputFilePath)
+onFileCreateStart(inputPath, outputPath, inFilePath, outFilePath)
+onFileCreateEnd(inputPath, outputPath, inFilePath, outFilePath, result)
+modBundleMDXSettings(inputPath, outputPath, settings)
+modGlobalArgs(inputPath, outputPath, globalArgs)
+toTriggerRecreate(event, path)
+```
+
+> **Note:** Any changes made to `host-mdx.js` or any new package added requires complete restart otherwise changes will not reflect due to [this bug](https://github.com/nodejs/node/issues/49442)
+
+Default global variables you can use inside any .mdx files:
+
+```
+hostmdxCwd 
+hostmdxInputPath 
+hostmdxOutputPath
 ```
-> Note: Any changes made to `host-mdx.js` require complete restart otherwise changes will not reflect
 
 ## 📖 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/
 ├─ index.mdx
@@ -73,6 +79,7 @@ my-website-template/
 ```
 
 `.hostmdxignore` file content:
+
 ```sh
 *.jsx
 blog/page2/
@@ -81,32 +88,42 @@ static/temp.jpg
 ```
 
 `host-mdx.js` file content:
+
 ```js
 export function onSiteCreateStart(inputPath, outputPath) {
    console.log("onSiteCreateStart", inputPath, outputPath)
 }
-export function onSiteCreateEnd(inputPath, outputPath, wasSuccessful){
+export function onSiteCreateEnd(inputPath, outputPath, wasSuccessful) {
    console.log("onSiteCreateEnd", inputPath, outputPath, wasSuccessful)
 }
-export function onFileCreateStart(inputFilePath, outputFilePath){
+export function onFileCreateStart(inputFilePath, outputFilePath) {
    console.log("onFileCreateStart", inputFilePath, outputFilePath)
 }
-export function onFileCreateEnd(inputFilePath, outputFilePath){
+export function onFileCreateEnd(inputFilePath, outputFilePath) {
    console.log("onFileCreateEnd", inputFilePath, outputFilePath)
 }
-export function onHostStart(port){
+export function onHostStart(port) {
    console.log("onHostStart", port)
 }
-export function onHostEnd(port){
+export function onHostEnd(port) {
    console.log("onHostEnd", port)
 }
-export function modBundleMDXSettings(settings){
+export function modBundleMDXSettings(inputPath, outputPath, settings) {
    // Modify settings ...
    return settings
 }
+export function toTriggerRecreate(event, path) {
+   const isGOutputStream = /\.goutputstream-\w+$/.test(path);
+   if (isGOutputStream) {
+      return false;
+   }
+   
+   return true;
+}
 ```
 
 Output Directory:
+
 ```
 my-website/
 ├─ index.html
@@ -124,7 +141,6 @@ my-website/
 
 The site will now be visible in the browser at `localhost:3113`
 
-
 ## 🔑 License
 
 MIT © [Manas Ravindra Makde](https://manasmakde.github.io/)

package/index.js

@@ -1,24 +1,26 @@
 #!/usr/bin/env node
 
-import fs from 'fs'
-import os from 'os'
+import fs from 'fs';
+import os from 'os';
+import net from 'net';
 import path from 'path'
-import polka from 'polka';
 import sirv from 'sirv';
-import ignore from "ignore";
+import polka from 'polka';
+import ignore from 'ignore';
 import chokidar from 'chokidar';
 import * as readline from 'readline';
 import { pathToFileURL } from 'url';
-import { mdxToHtml } from './mdx-to-html.js'
+import { mdxToHtml } from './mdx-to-html.js';
 
 
 // To-Set Properties
 const APP_NAME = "host-mdx";
 const DEFAULT_PORT = 3000;
+const MAX_PORT = 3002;
 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 FILE_404 = "404.html";
+const NOT_FOUND_404_MESSAGE = "404";
 const DEFAULT_IGNORES = `
 ${IGNORE_FILE_NAME}
 ${CONFIG_FILE_NAME}
@@ -26,6 +28,8 @@ node_modules
 package-lock.json
 package.json
 .git
+.github
+.gitignore
 `;
 
 
@@ -135,17 +139,9 @@ async function createSite(inputPath, outputPath) {
     isCreateSitePending = false
 
 
-    // Get config properties
-    let configFilePath = path.join(inputPath, `./${CONFIG_FILE_NAME}`)
-    if (fs.existsSync(configFilePath)) {
-
-        configs = await import(pathToFileURL(configFilePath).href);
-    }
-
-
     // Broadcast site creation started
     log("Creating site...")
-    configs?.onSiteCreateStart?.(inputPath, outputPath)
+    await configs?.onSiteCreateStart?.(inputPath, outputPath)
 
 
     // Remove html folder if it already exists
@@ -186,9 +182,9 @@ async function createSite(inputPath, outputPath) {
         // Make dir
         if (isDir) {
             log(`${currentPath} ---> ${absToOutput}`, true)
-            configs?.onFileCreateStart?.(currentPath, absToOutput)
+            await configs?.onFileCreateStart?.(inputPath, outputPath, currentPath, absToOutput)
             fs.mkdirSync(absToOutput, { recursive: true });
-            configs?.onFileCreateEnd?.(currentPath, absToOutput)
+            await configs?.onFileCreateEnd?.(inputPath, outputPath, currentPath, absToOutput, undefined)
         }
         // Make html file from mdx
         else if (!isDir && isMdx) {
@@ -196,25 +192,32 @@ async function createSite(inputPath, outputPath) {
             // Broadcast file creation started
             let absHtmlPath = path.format({ ...path.parse(absToOutput), base: '', ext: '.html' })
             log(`${currentPath} ---> ${absHtmlPath}`, true)
-            configs?.onFileCreateStart?.(currentPath, absHtmlPath)
+            await configs?.onFileCreateStart?.(inputPath, outputPath, currentPath, absHtmlPath, undefined)
 
 
             // convert mdx code into html & paste into file
             let mdxCode = fs.readFileSync(currentPath, 'utf8');
             let parentDir = path.dirname(currentPath)
-            let htmlCode = await mdxToHtml(mdxCode, parentDir, configs?.modBundleMDXSettings);
-            createFile(absHtmlPath, `<!DOCTYPE html>\n${htmlCode}`);
+            let globalArgs = {
+                hostmdxCwd: parentDir,
+                hostmdxInputPath: inputPath,
+                hostmdxOutputPath: outputPath
+            };
+            globalArgs = await configs?.modGlobalArgs?.(inputPath, outputPath, globalArgs) ?? globalArgs;
+            let result = await mdxToHtml(mdxCode, parentDir, globalArgs, async (settings) => { return await configs?.modBundleMDXSettings?.(inputPath, outputPath, settings) ?? settings });
+            let htmlCode = result.html;
+            createFile(absHtmlPath, `<!DOCTYPE html>${htmlCode}`);
 
 
             // Broadcast file creation ended
-            configs?.onFileCreateEnd?.(currentPath, absHtmlPath)
+            await configs?.onFileCreateEnd?.(inputPath, outputPath, currentPath, absHtmlPath, result)
         }
         // Copy paste file
         else if (!isDir) {
             log(`${currentPath} ---> ${absToOutput}`, true)
-            configs?.onFileCreateStart?.(currentPath, absToOutput)
+            await configs?.onFileCreateStart?.(inputPath, outputPath, currentPath, absToOutput)
             fs.copyFileSync(currentPath, absToOutput)
-            configs?.onFileCreateEnd?.(currentPath, absToOutput)
+            await configs?.onFileCreateEnd?.(inputPath, outputPath, currentPath, absToOutput, undefined)
         }
 
 
@@ -237,16 +240,75 @@ async function createSite(inputPath, outputPath) {
 
 
     // Broadcast site creation ended
-    log(`Created site at ${outputPath}`)
-    configs?.onSiteCreateEnd?.(inputPath, outputPath, isCreateSitePending)
+    if (isCreateSitePending) {
+        log(`Restarting site creation...`)
+    }
+    else {
+        log(`Created site at ${outputPath}`)
+    }
+    await configs?.onSiteCreateEnd?.(inputPath, outputPath, isCreateSitePending)
 
 
     // Reinvoke creation
-    if(isCreateSitePending){
+    if (isCreateSitePending) {
         await createSite(inputPath, outputPath);
     }
 }
-function filterArgs(rawArgs) {
+async function isPortAvailable(port) {
+    const server = net.createServer();
+    server.unref();
+
+    return new Promise((resolve) => {
+        server.once('error', () => {
+            server.close();
+            resolve(false);
+        });
+
+        server.once('listening', () => {
+            server.close(() => resolve(true));
+        });
+
+        server.listen(port);
+    });
+}
+async function getAvailablePort(startPort, maxPort) {
+    let currentPort = startPort;
+    while (currentPort <= maxPort) {
+        if (await isPortAvailable(currentPort)) {
+            return currentPort;
+        }
+
+        currentPort++;
+    }
+
+    return -1;
+}
+function stripTrailingSep(thePath) {
+    if (thePath[thePath.length - 1] === path.sep) {
+        return thePath.slice(0, -1);
+    }
+    return thePath;
+}
+function isSubPath(potentialParent, thePath) {
+    // For inside-directory checking, we want to allow trailing slashes, so normalize.
+    thePath = stripTrailingSep(thePath);
+    potentialParent = stripTrailingSep(potentialParent);
+
+
+    // Node treats only Windows as case-insensitive in its path module; we follow those conventions.
+    if (process.platform === "win32") {
+        thePath = thePath.toLowerCase();
+        potentialParent = potentialParent.toLowerCase();
+    }
+
+
+    return thePath.lastIndexOf(potentialParent, 0) === 0 &&
+        (
+            thePath[potentialParent.length] === path.sep ||
+            thePath[potentialParent.length] === undefined
+        );
+}
+async function filterArgs(rawArgs) {
     // Assign to create
     let toCreateOnly = rawArgs.includes(CREATE_FLAG) || rawArgs.includes(CREATE_SHORT_FLAG)
 
@@ -283,14 +345,25 @@ function filterArgs(rawArgs) {
     }
 
 
+    // Check if output path is inside input path (causing infinite loop)
+    if (isSubPath(inputPath, outputPath)) {
+        log(`Output path "${outputPath}" cannot be inside or same as input path "${inputPath}"`);
+        return null;
+    }
+
+
     // Assign port
     let port = rawArgs.find(val => val.startsWith(PORT_FLAG));
     let portProvided = port !== undefined;
-    port = portProvided ? Number(port.split('=')[1]) : DEFAULT_PORT;
+    port = portProvided ? Number(port.split('=')[1]) : (await getAvailablePort(DEFAULT_PORT, MAX_PORT));
 
 
     // Check port
-    if (!Number.isInteger(port)) {
+    if (port === -1) {
+        log(`Could not find any available ports between ${DEFAULT_PORT} to ${MAX_PORT}, Try manually passing ${PORT_FLAG}=... flag`);
+        return null;
+    }
+    else if (!Number.isInteger(port)) {
         log(`Invalid port`)
         return null;
     }
@@ -314,7 +387,7 @@ async function createSiteSafe(...args) {
     catch (err) {
         success = false;
         isCreatingSite = false;
-        log(`Failed to create site!\n${err}`);
+        log(`Failed to create site!\n${err.stack}`);
     }
 
     return success;
@@ -332,27 +405,31 @@ async function listenForKey(createSiteCallback) {
             createSiteCallback();
         }
         else if (key && key.sequence == '\x03') {
-            app.server.close((e) => { process.exit() })
+            app?.server?.close((e) => { process.exit() })
         }
     });
 }
-function startServer(htmlDir, port) {  // Starts server at given port
+async function watchForChanges(pathTowatch, callback) {
+    chokidar.watch(pathTowatch, {
+        ignoreInitial: true
+    }).on('all', callback);
+}
+async function startServer(htmlDir, port) {  // Starts server at given port
 
     // Broadcast server starting
-    configs?.onHostStart?.(port)
+    await configs?.onHostStart?.(port)
 
 
     // Start Server
     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);
+            // Send 404 file if found else not found message
+            const errorFile = path.join(htmlDir, FILE_404);
             if (fs.existsSync(errorFile)) {
                 res.setHeader('Content-Type', 'text/html');
                 res.end(fs.readFileSync(errorFile));
@@ -360,10 +437,18 @@ function startServer(htmlDir, port) {  // Starts server at given port
                 res.end(NOT_FOUND_404_MESSAGE);
             }
         }
+    }).use((req, res, next) => {  // Add trailing slash
+        if (1 < req.path.length && !req.path.endsWith('/') && !path.extname(req.path)) {
+            res.writeHead(301, { Location: req.path + '/' });
+            return res.end();
+        }
+        next();
     }).use(assets)
 
+
+    // Start listening
     newApp.listen(port)
-    newApp.server.on("close", () => { configs?.onHostEnd?.(port) });
+    newApp.server.on("close", async () => { await 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)`)
 
@@ -371,6 +456,7 @@ function startServer(htmlDir, port) {  // Starts server at given port
     return newApp
 }
 async function Main() {
+
     // Get all arguments
     const rawArgs = process.argv.slice(2);
 
@@ -387,12 +473,20 @@ async function Main() {
 
 
     // Filter arguments
-    let args = filterArgs(rawArgs);
+    let args = await filterArgs(rawArgs);
     if (args === null) {
         return;
     }
 
 
+    // Get config
+    let configFilePath = path.join(args.inputPath, `./${CONFIG_FILE_NAME}`)
+    if (fs.existsSync(configFilePath)) {
+        log(`Importing config file ${CONFIG_FILE_NAME}`);
+        configs = await import(pathToFileURL(configFilePath).href);
+    }
+
+
     // Create site from mdx & return if only needed to create site
     let wasCreated = await createSiteSafe(args.inputPath, args.outputPath);
     if (args.toCreateOnly) {
@@ -407,16 +501,19 @@ async function Main() {
 
     // Watch for changes
     if (args.toTrackChanges) {
-        chokidar.watch(args.inputPath, {
-            ignoreInitial: true
-        }).on('all', (event, path) => {
+        watchForChanges(args.inputPath, async (event, path) => {
+            if (typeof configs?.toTriggerRecreate === 'function' && !(await configs?.toTriggerRecreate(event, path))) {
+                return;
+            }
+
+            log(`Recreating site, Event: ${event}, Path: ${path}`, true)
             createSiteSafe(args.inputPath, args.outputPath)
         });
     }
 
 
     // Start server
-    app = startServer(args.outputPath, args.port);
+    app = await startServer(args.outputPath, args.port);
 
 
     // Handle quit
@@ -425,6 +522,8 @@ async function Main() {
         if (!args.outputPathProvided && fs.existsSync(args.outputPath)) {
             fs.rmSync(args.outputPath, { recursive: true, force: true })
         }
+
+        process.stdin.setRawMode(false);
     }
     process.on("exit", cleanup);
     process.on("SIGINT", cleanup);

package/mdx-to-html.js

@@ -27,12 +27,11 @@ const jsxBundlerConfig = {
 
 
 // Methods
-function getMDXComponent(code, globals) {
+function getMDXExport(code, globals) {
   const fn = new Function(...Object.keys(globals), code);
-  const mdxExport = fn(...Object.values(globals));
-  return mdxExport.default;
+  return fn(...Object.values(globals));
 }
-export async function mdxToHtml(mdxCode, baseUrl, modSettingsCallback = undefined) {
+export async function mdxToHtml(mdxCode, baseUrl, globalArgs = {}, modSettingsCallback = undefined) {
 
   // Assign default settings
   let settings = {
@@ -55,14 +54,18 @@ export async function mdxToHtml(mdxCode, baseUrl, modSettingsCallback = undefine
 
   // Modify settings
   if (modSettingsCallback !== undefined) {
-    settings = modSettingsCallback(settings)
+    settings = await modSettingsCallback(settings)
   }
 
 
   // Generate html
   const { code } = await bundleMDX(settings);
-  const Component = getMDXComponent(code, { Preact, PreactDOM, _jsx_runtime, require: nativeRequire, cwd: baseUrl })
+  const Exports = getMDXExport(code, { Preact, PreactDOM, _jsx_runtime, require: nativeRequire, ...globalArgs });
+  const Component = Exports.default;
 
 
-  return renderToString(Preact.h(Component, {}));
+  return {
+    html: renderToString(Preact.h(Component, {})),
+    exports: Exports
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "host-mdx",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "A cli tool to create and serve a static html website from a given mdx directory",
   "main": "index.js",
   "type": "module",
@@ -10,6 +10,13 @@
   "bin": {
     "host-mdx": "index.js"
   },
+  "bugs": {
+    "url": "https://github.com/ManasMakde/host-mdx/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ManasMakde/host-mdx.git"
+  },
   "dependencies": {
     "chokidar": "^5.0.0",
     "ignore": "^7.0.5",
@@ -25,7 +32,7 @@
     "mdx"
   ],
   "author": "Manas Makde",
-  "license": "ISC",
+  "license": "MIT",
   "devDependencies": {
     "@babel/preset-react": "^7.28.5",
     "@babel/register": "^7.28.3"