host-mdx 2.1.1 → 2.2.1

package/README.md

@@ -1,9 +1,10 @@
 # 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
 
+[![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
+
 ```
 host-mdx [options]
 
@@ -16,35 +17,48 @@ 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
+onHostStart(port)
+onHostEnd(port)
+toTriggerRecreate(event, path)
 onSiteCreateStart(inputPath, outputPath)
 onSiteCreateEnd(inputPath, outputPath, wasInterrupted)
-onFileCreateStart(inputFilePath, outputFilePath)
-onFileCreateEnd(inputFilePath, outputFilePath)
+onFileCreateStart(inputPath, outputPath, inFilePath, outFilePath)
+onFileCreateEnd(inputPath, outputPath, inFilePath, outFilePath, result)
+modMDXCode(inputPath, outputPath, inFilePath, outFilePath, code)
+modGlobalArgs(inputPath, outputPath, globalArgs)
 modBundleMDXSettings(inputPath, outputPath, settings)
-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
+```
 
 ## 📖 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
@@ -68,6 +82,7 @@ my-website-template/
 ```
 
 `.hostmdxignore` file content:
+
 ```sh
 *.jsx
 blog/page2/
@@ -76,40 +91,50 @@ static/temp.jpg
 ```
 
 `host-mdx.js` file content:
+
 ```js
-export function onSiteCreateStart(inputPath, outputPath) {
+export async function onHostStart(port) {
+   console.log("onHostStart", port)
+}
+export async function onHostEnd(port) {
+   console.log("onHostEnd", port)
+}
+export async function toTriggerRecreate(event, path) {
+   const isGOutputStream = /\.goutputstream-\w+$/.test(path);
+   if (isGOutputStream) {
+      return false;
+   }
+   
+   return true;
+}
+export async function onSiteCreateStart(inputPath, outputPath) {
    console.log("onSiteCreateStart", inputPath, outputPath)
 }
-export function onSiteCreateEnd(inputPath, outputPath, wasSuccessful) {
+export async function onSiteCreateEnd(inputPath, outputPath, wasSuccessful) {
    console.log("onSiteCreateEnd", inputPath, outputPath, wasSuccessful)
 }
-export function onFileCreateStart(inputFilePath, outputFilePath) {
+export async function onFileCreateStart(inputFilePath, outputFilePath) {
    console.log("onFileCreateStart", inputFilePath, outputFilePath)
 }
-export function onFileCreateEnd(inputFilePath, outputFilePath) {
+export async function onFileCreateEnd(inputFilePath, outputFilePath) {
    console.log("onFileCreateEnd", inputFilePath, outputFilePath)
 }
-export function onHostStart(port) {
-   console.log("onHostStart", port)
+export async function modMDXCode(inputPath, outputPath, inFilePath, outFilePath, code){
+   // Modify code ...
+   return code;
 }
-export function onHostEnd(port) {
-   console.log("onHostEnd", port)
+export async function modGlobalArgs(inputPath, outputPath, globalArgs){
+   // Modify globalArgs ...
+   return globalArgs;
 }
-export function modBundleMDXSettings(inputPath, outputPath, settings) {
+export async 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
@@ -127,6 +152,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

@@ -141,7 +141,7 @@ async function createSite(inputPath, outputPath) {
 
     // Broadcast site creation started
     log("Creating site...")
-    configs?.onSiteCreateStart?.(inputPath, outputPath)
+    await configs?.onSiteCreateStart?.(inputPath, outputPath)
 
 
     // Remove html folder if it already exists
@@ -182,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) {
@@ -192,30 +192,39 @@ 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)
 
 
-            // convert mdx code into html & paste into file
+            // Intercept mdx code
             let mdxCode = fs.readFileSync(currentPath, 'utf8');
-            let parentDir = path.dirname(currentPath)
+            if (typeof configs?.modMDXCode === 'function') {
+                log(`Modifying mdx code of ${currentPath}`, true);
+                mdxCode = await configs?.modMDXCode(inputPath, outputPath, currentPath, absHtmlPath, mdxCode);
+            }
+            
+            
+            // convert mdx code into html & paste into file
+            let parentDir = path.dirname(currentPath);
             let globalArgs = {
                 hostmdxCwd: parentDir,
                 hostmdxInputPath: inputPath,
                 hostmdxOutputPath: outputPath
             };
-            let htmlCode = await mdxToHtml(mdxCode, parentDir, globalArgs, (settings) => { return configs?.modBundleMDXSettings?.(inputPath, outputPath, settings) ?? settings });
-            createFile(absHtmlPath, `<!DOCTYPE html>\n${htmlCode}`);
+            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)
         }
 
 
@@ -244,7 +253,7 @@ async function createSite(inputPath, outputPath) {
     else {
         log(`Created site at ${outputPath}`)
     }
-    configs?.onSiteCreateEnd?.(inputPath, outputPath, isCreateSitePending)
+    await configs?.onSiteCreateEnd?.(inputPath, outputPath, isCreateSitePending)
 
 
     // Reinvoke creation
@@ -305,7 +314,7 @@ function isSubPath(potentialParent, thePath) {
             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)
@@ -412,10 +421,10 @@ async function watchForChanges(pathTowatch, callback) {
         ignoreInitial: true
     }).on('all', callback);
 }
-function startServer(htmlDir, port) {  // Starts server at given port
+async function startServer(htmlDir, port) {  // Starts server at given port
 
     // Broadcast server starting
-    configs?.onHostStart?.(port)
+    await configs?.onHostStart?.(port)
 
 
     // Start Server
@@ -446,7 +455,7 @@ function startServer(htmlDir, port) {  // Starts server at given port
 
     // 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)`)
 
@@ -480,6 +489,7 @@ async function Main() {
     // 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);
     }
 
@@ -498,8 +508,8 @@ async function Main() {
 
     // Watch for changes
     if (args.toTrackChanges) {
-        watchForChanges(args.inputPath, (event, path) => {
-            if (typeof configs.toTriggerRecreate === 'function' && !configs?.toTriggerRecreate(event, path)) {
+        watchForChanges(args.inputPath, async (event, path) => {
+            if (typeof configs?.toTriggerRecreate === 'function' && !(await configs?.toTriggerRecreate(event, path))) {
                 return;
             }
 
@@ -510,7 +520,7 @@ async function Main() {
 
 
     // Start server
-    app = startServer(args.outputPath, args.port);
+    app = await startServer(args.outputPath, args.port);
 
 
     // Handle quit

package/mdx-to-html.js

@@ -27,10 +27,9 @@ 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, globalArgs = {}, modSettingsCallback = undefined) {
 
@@ -55,14 +54,18 @@ export async function mdxToHtml(mdxCode, baseUrl, globalArgs = {}, modSettingsCa
 
   // 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, ...globalArgs })
+  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.1",
+  "version": "2.2.1",
   "description": "A cli tool to create and serve a static html website from a given mdx directory",
   "main": "index.js",
   "type": "module",