safe-mdx 1.7.0 → 1.9.0

package/src/parse.ts

@@ -5,9 +5,9 @@ import { Root, RootContent } from 'mdast'
 import { remark } from 'remark'
 import remarkGfm from 'remark-gfm'
 import remarkMdx from 'remark-mdx'
-import { parseHtmlToMdxAst, remarkMdxJsxNormalize } from './html/html-to-mdx-ast.ts'
+import { remarkMdxJsxNormalize } from './html/remark-mdx-jsx-normalize.ts'
 
-export { parseHtmlToMdxAst, remarkMdxJsxNormalize }
+export { remarkMdxJsxNormalize }
 
 /* ── Import extraction ──────────────────────────────────────────────── */
 
@@ -34,7 +34,7 @@ export function extractImports(ast: Root): MdxImport[] {
 
     for (const node of ast.children) {
         if (node.type !== 'mdxjsEsm') continue
-        const estree = (node as any).data?.estree
+        const estree = node.data?.estree
         if (!estree) continue
 
         for (const statement of estree.body) {
@@ -70,6 +70,38 @@ export function mdxParse(code: string) {
     return file.data.ast as Root
 }
 
+export type MdxProcessorOptions = {
+    /** Extra remark plugins appended after safe-mdx's default MDX, frontmatter, and GFM parsers. */
+    remarkPlugins?: any[]
+}
+
+export function createMdxProcessor({
+    remarkPlugins = [],
+}: MdxProcessorOptions = {}) {
+    const processor = remark()
+        .use(remarkMdx)
+        .use(remarkFrontmatter, ['yaml', 'toml'])
+        .use(remarkGfm)
+
+    for (const plugin of remarkPlugins) {
+        if (Array.isArray(plugin)) {
+            processor.use(plugin[0], ...plugin.slice(1))
+        } else {
+            processor.use(plugin)
+        }
+    }
+
+    return processor
+        .use(remarkMarkAndUnravel)
+        .use(() => {
+            return (tree, file) => {
+                file.data.ast = tree
+            }
+        })
+}
+
+export type MdxProcessor = ReturnType<typeof createMdxProcessor>
+
 /**
  * https://github.com/mdx-js/mdx/blob/b3351fadcb6f78833a72757b7135dcfb8ab646fe/packages/mdx/lib/plugin/remark-mark-and-unravel.js
  * A tiny plugin that unravels `<p><h1>x</h1></p>` but also
@@ -181,7 +213,6 @@ export function resolveModulePath(
     } else if (source.startsWith('./') || source.startsWith('../')) {
         // Relative import: resolve from baseUrl
         const joined = joinPaths(baseUrl, source)
-        if (!joined) return undefined // .. escaped above root
         normalized = joined
     } else {
         // Bare specifier (npm package etc.) — not resolvable from glob
@@ -200,23 +231,27 @@ export function resolveModulePath(
 }
 
 /** Simple path join that normalizes `./a/b/../c` segments.
- *  Both inputs and output use `./` prefix (matching Vite glob key format).
- *  Returns `undefined` if `..` escapes above the project root. */
-function joinPaths(base: string, relative: string): string | undefined {
+ *  Outputs inside-root paths with `./` prefix and outside-root paths with
+ *  leading `../` segments, matching Vite glob keys from explicit imports. */
+function joinPaths(base: string, relative: string): string {
     // Strip ./ prefix and trailing /
     const baseParts = base.replace(/^\.\//, '').replace(/\/$/, '').split('/').filter(Boolean)
     const relParts = relative.replace(/^\.\//, '').split('/').filter(Boolean)
 
     for (const part of relParts) {
         if (part === '..') {
-            if (baseParts.length === 0) return undefined // escaped above root
-            baseParts.pop()
+            if (baseParts.length > 0 && baseParts[baseParts.length - 1] !== '..') {
+                baseParts.pop()
+            } else {
+                baseParts.push('..')
+            }
         } else if (part !== '.') {
             baseParts.push(part)
         }
     }
 
-    return './' + baseParts.join('/')
+    const joined = baseParts.join('/')
+    return joined.startsWith('../') ? joined : './' + joined
 }
 
 export type LazyGlob = Record<string, () => Promise<Record<string, any>>>
@@ -262,13 +297,4 @@ export async function resolveModules({
     return result
 }
 
-const mdxProcessor = remark()
-    .use(remarkMdx)
-    .use(remarkFrontmatter, ['yaml', 'toml'])
-    .use(remarkGfm)
-    .use(remarkMarkAndUnravel)
-    .use(() => {
-        return (tree, file) => {
-            file.data.ast = tree
-        }
-    })
+export const mdxProcessor = createMdxProcessor()

package/src/safe-mdx.test.tsx

@@ -4197,3 +4197,5 @@ test('scope with tagged template literal without generate', () => {
     expect(errors).toMatchInlineSnapshot(`[]`)
     expect(html).toMatchInlineSnapshot(`"hello WORLD"`)
 })
+
+

package/src/safe-mdx.tsx

@@ -10,8 +10,7 @@ import { Fragment, ReactNode } from 'react'
 import { DynamicEsmComponent } from 'safe-mdx/client'
 import { extractComponentInfo, parseEsmImports } from './esm-parser.ts'
 import { resolveModulePath, type EagerModules } from './parse.ts'
-import { htmlToMdxAst } from './html/html-to-mdx-ast.ts'
-import { validHtmlElements, nativeTags } from './html/valid-html-elements.ts'
+import { nativeTags } from './html/valid-html-elements.ts'
 
 export type MyRootContent = RootContent | Root
 
@@ -1081,30 +1080,11 @@ export class MdastToJsx {
                 return []
             }
             case 'html': {
-                const start = node.position?.start?.offset
-                const end = node.position?.end?.offset
-                const text = this.str.slice(start, end)
-                if (!text) {
-                    return []
-                }
-
-                // Parse HTML to MDX AST using the new approach - always returns an array
-                const mdxAst = htmlToMdxAst({
-                    html: text,
-                    parentType: parentType || 'root',
-                    convertTagName: ({ tagName }) => {
-                        const lowerTag = tagName.toLowerCase()
-                        // Only keep valid HTML elements
-                        if (validHtmlElements.has(lowerTag)) {
-                            return lowerTag
-                        }
-                        // Return empty string for non-HTML elements
-                        return ''
-                    }
-                })
-
-                // Process the MDX AST nodes
-                return mdxAst.map(child => this.mdastTransformer(child, 'html'))
+                // html nodes appear when rendering plain markdown (not MDX) without
+                // the remarkHtmlToMdx pre-processing plugin. They are intentionally
+                // ignored here — use remarkHtmlToMdx from 'safe-mdx/markdown' to convert
+                // them to mdxJsx nodes before passing the AST to MdastToJsx.
+                return []
             }
             case 'imageReference': {
                 return []