hexo-renderer-mdx 1.0.0 → 1.0.1

package/index.js

@@ -1,8 +1,45 @@
 'use strict';
 
-const { compile } = require('@mdx-js/mdx');
 const { renderToString } = require('react-dom/server');
 const React = require('react');
+const fs = require('fs');
+const { createRequire } = require('module');
+
+// Create a require for loading ESM modules
+let compile;
+let compileLoaded = false;
+
+async function loadCompile() {
+  if (!compileLoaded) {
+    try {
+      // Try to load @mdx-js/mdx - it may be CJS or ESM depending on the environment
+      try {
+        // First try: dynamic import with proper error handling
+        const mdxModule = await (async () => {
+          try {
+            return await import('@mdx-js/mdx');
+          } catch (err) {
+            // If dynamic import fails, this might be a require context issue
+            // Return null to trigger fallback
+            return null;
+          }
+        })();
+        
+        if (mdxModule) {
+          compile = mdxModule.compile;
+        } else {
+          throw new Error('Could not load @mdx-js/mdx via dynamic import');
+        }
+      } catch (err) {
+        // Fallback: try to require it directly (in case it's been transpiled)
+        compile = require('@mdx-js/mdx').compile;
+      }
+      compileLoaded = true;
+    } catch (err) {
+      throw new Error(`Failed to load @mdx-js/mdx: ${err.message}`);
+    }
+  }
+}
 
 /**
  * MDX Renderer for Hexo
@@ -22,10 +59,19 @@ async function mdxRenderer(data) {
   const { text, path } = data;
   
   try {
+    // Ensure compile function is loaded
+    await loadCompile();
+    
+    // Read the original file directly to bypass Hexo's template processing
+    let content;
+    try {
+      content = fs.readFileSync(path, 'utf8');
+    } catch (err) {
+      // If reading fails, fall back to the provided text
+      content = text;
+    }
+    
     // Strip YAML front matter if present
-    // Note: Hexo typically strips front matter before passing to renderers,
-    // but we handle it here as a safety measure for edge cases
-    let content = text;
     const frontMatterRegex = /^---\s*\n([\s\S]*?)\n---\s*\n/;
     const match = content.match(frontMatterRegex);
     
@@ -35,17 +81,21 @@ async function mdxRenderer(data) {
     }
     
     // Compile MDX to JavaScript with automatic JSX runtime
+    // Use outputFormat: 'function-body' and development: true to avoid jsxImportSource
     const compiled = await compile(content, {
       outputFormat: 'function-body',
-      development: false,
-      jsxImportSource: 'react'
+      development: true,
+      // remarkRehypeOptions for markdown processing
+      remarkRehypeOptions: {
+        allowDangerousHtml: true
+      }
     });
 
     // Create a function from the compiled code
     const code = String(compiled);
     
-    // The compiled code expects arguments[0] to be the jsx-runtime
-    const jsxRuntime = require('react/jsx-runtime');
+    // When development: true, the compiled code uses jsxDEV from react/jsx-dev-runtime
+    const jsxDevRuntime = require('react/jsx-dev-runtime');
     
     // Create and execute the MDX module function
     // Note: Using new Function() here is safe because:
@@ -53,7 +103,7 @@ async function mdxRenderer(data) {
     // 2. MDX compilation itself validates and sanitizes the content
     // 3. This is a build-time operation, not runtime user input
     const fn = new Function(code);
-    const mdxModule = fn.call(null, jsxRuntime);
+    const mdxModule = fn.call(null, jsxDevRuntime);
     
     // The result has a default export which is the MDX component
     const MDXContent = mdxModule.default;
@@ -65,11 +115,20 @@ async function mdxRenderer(data) {
     
     return html;
   } catch (err) {
-    throw new Error(`MDX compilation failed for ${path}: ${err.message}`);
+    // Provide more detailed error information
+    const errorMsg = `MDX compilation failed for ${path}: ${err.message}`;
+    console.error(errorMsg);
+    if (err.position) {
+      console.error(`Error at line ${err.position.start.line}, column ${err.position.start.column}`);
+    }
+    throw new Error(errorMsg);
   }
 }
 
 /**
  * Register the MDX renderer with Hexo
+ * Note: Using disableNunjucks: true to prevent template processing of {{ }} syntax
  */
-hexo.extend.renderer.register('mdx', 'html', mdxRenderer, true);
+hexo.extend.renderer.register('mdx', 'html', mdxRenderer, {
+  disableNunjucks: true
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hexo-renderer-mdx",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "MDX renderer plugin for Hexo with React component support",
   "main": "index.js",
   "scripts": {

package/test-mdx.js

@@ -0,0 +1,47 @@
+const { compile } = require('@mdx-js/mdx');
+
+const testContent = `---
+title: My First MDX Post
+date: 2026-01-06
+tags: [hexo, mdx]
+---
+
+# Hello
+
+<div style={{ padding: '20px', backgroundColor: '#e3f2fd' }}>
+  🎉 Test
+</div>
+`;
+
+async function test() {
+  try {
+    // Strip front matter like the renderer does
+    let content = testContent;
+    const frontMatterRegex = /^---\s*\n([\s\S]*?)\n---\s*\n/;
+    const match = content.match(frontMatterRegex);
+    
+    if (match) {
+      content = content.slice(match[0].length);
+    }
+    
+    console.log('Content to compile:');
+    console.log(content);
+    console.log('\n---\n');
+    
+    const result = await compile(content, {
+      outputFormat: 'function-body',
+      development: false,
+      jsxImportSource: 'react',
+      format: 'mdx',
+      mdxExtensions: ['.mdx'],
+      remarkRehypeOptions: {
+        allowDangerousHtml: true
+      }
+    });
+    console.log('Success!');
+  } catch (err) {
+    console.error('Error:', err.message);
+  }
+}
+
+test();