@astrojs/markdown-remark 0.9.4 → 0.10.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @astrojs/markdown-remark
 
+## 0.10.0
+
+### Minor Changes
+
+- [#3410](https://github.com/withastro/astro/pull/3410) [`cfae9760`](https://github.com/withastro/astro/commit/cfae9760b252052b6189e96398b819a4337634a8) Thanks [@natemoo-re](https://github.com/natemoo-re)! - Significantally more stable behavior for "Markdown + Components" usage, which now handles component serialization much more similarly to MDX. Also supports switching between Components and Markdown without extra newlines, removes wrapping `<p>` tags from standalone components, and improves JSX expression handling.
+
 ## 0.9.4
 
 ### Patch Changes

package/dist/index.d.ts

@@ -2,5 +2,6 @@ import type { MarkdownRenderingOptions, MarkdownRenderingResult } from './types'
 export * from './types.js';
 export declare const DEFAULT_REMARK_PLUGINS: string[];
 export declare const DEFAULT_REHYPE_PLUGINS: never[];
+export declare function slug(value: string): string;
 /** Shared utility for rendering markdown */
-export declare function renderMarkdown(content: string, opts: MarkdownRenderingOptions): Promise<MarkdownRenderingResult>;
+export declare function renderMarkdown(content: string, opts?: MarkdownRenderingOptions): Promise<MarkdownRenderingResult>;

package/dist/index.js

@@ -1,9 +1,9 @@
 import createCollectHeaders from "./rehype-collect-headers.js";
 import scopedStyles from "./remark-scoped-styles.js";
-import { remarkExpressions, loadRemarkExpressions } from "./remark-expressions.js";
 import rehypeExpressions from "./rehype-expressions.js";
 import rehypeIslands from "./rehype-islands.js";
-import { remarkJsx, loadRemarkJsx } from "./remark-jsx.js";
+import remarkMdxish from "./remark-mdxish.js";
+import remarkMarkAndUnravel from "./remark-mark-and-unravel.js";
 import rehypeJsx from "./rehype-jsx.js";
 import rehypeEscape from "./rehype-escape.js";
 import remarkPrism from "./remark-prism.js";
@@ -15,17 +15,30 @@ import markdown from "remark-parse";
 import markdownToHtml from "remark-rehype";
 import rehypeStringify from "rehype-stringify";
 import rehypeRaw from "rehype-raw";
+import Slugger from "github-slugger";
+import { VFile } from "vfile";
 export * from "./types.js";
 const DEFAULT_REMARK_PLUGINS = ["remark-gfm", "remark-smartypants"];
 const DEFAULT_REHYPE_PLUGINS = [];
-async function renderMarkdown(content, opts) {
+const slugger = new Slugger();
+function slug(value) {
+  return slugger.slug(value);
+}
+async function renderMarkdown(content, opts = {}) {
   var _a;
-  let { mode, syntaxHighlight, shikiConfig, remarkPlugins, rehypePlugins } = opts;
+  let {
+    fileURL,
+    mode = "mdx",
+    syntaxHighlight = "shiki",
+    shikiConfig = {},
+    remarkPlugins = [],
+    rehypePlugins = []
+  } = opts;
+  const input = new VFile({ value: content, path: fileURL });
   const scopedClassName = (_a = opts.$) == null ? void 0 : _a.scopedClassName;
   const isMDX = mode === "mdx";
   const { headers, rehypeCollectHeaders } = createCollectHeaders();
-  await Promise.all([loadRemarkExpressions(), loadRemarkJsx()]);
-  let parser = unified().use(markdown).use(isMDX ? [remarkJsx, remarkExpressions] : []).use([remarkUnwrap]);
+  let parser = unified().use(markdown).use(isMDX ? [remarkMdxish, remarkMarkAndUnravel] : []).use([remarkUnwrap]);
   if (remarkPlugins.length === 0 && rehypePlugins.length === 0) {
     remarkPlugins = [...DEFAULT_REMARK_PLUGINS];
     rehypePlugins = [...DEFAULT_REHYPE_PLUGINS];
@@ -48,7 +61,13 @@ async function renderMarkdown(content, opts) {
       markdownToHtml,
       {
         allowDangerousHtml: true,
-        passThrough: ["raw", "mdxTextExpression", "mdxJsxTextElement", "mdxJsxFlowElement"]
+        passThrough: [
+          "raw",
+          "mdxFlowExpression",
+          "mdxJsxFlowElement",
+          "mdxJsxTextElement",
+          "mdxTextExpression"
+        ]
       }
     ]
   ]);
@@ -58,7 +77,7 @@ async function renderMarkdown(content, opts) {
   parser.use(isMDX ? [rehypeJsx, rehypeExpressions] : [rehypeRaw]).use(rehypeEscape).use(rehypeIslands);
   let result;
   try {
-    const vfile = await parser.use([rehypeCollectHeaders]).use(rehypeStringify, { allowDangerousHtml: true }).process(content);
+    const vfile = await parser.use([rehypeCollectHeaders]).use(rehypeStringify, { allowDangerousHtml: true }).process(input);
     result = vfile.toString();
   } catch (err) {
     console.error(err);
@@ -72,5 +91,6 @@ async function renderMarkdown(content, opts) {
 export {
   DEFAULT_REHYPE_PLUGINS,
   DEFAULT_REMARK_PLUGINS,
-  renderMarkdown
+  renderMarkdown,
+  slug
 };

package/dist/mdast-util-mdxish.d.ts

@@ -0,0 +1,2 @@
+export declare function mdxFromMarkdown(): any;
+export declare function mdxToMarkdown(): any;

package/dist/mdast-util-mdxish.js

@@ -0,0 +1,14 @@
+import { mdxExpressionFromMarkdown, mdxExpressionToMarkdown } from "mdast-util-mdx-expression";
+import { mdxJsxFromMarkdown, mdxJsxToMarkdown } from "mdast-util-mdx-jsx";
+function mdxFromMarkdown() {
+  return [mdxExpressionFromMarkdown, mdxJsxFromMarkdown];
+}
+function mdxToMarkdown() {
+  return {
+    extensions: [mdxExpressionToMarkdown, mdxJsxToMarkdown]
+  };
+}
+export {
+  mdxFromMarkdown,
+  mdxToMarkdown
+};

package/dist/rehype-collect-headers.js

@@ -15,13 +15,34 @@ function createCollectHeaders() {
         if (!level)
           return;
         const depth = Number.parseInt(level);
+        let raw = "";
         let text = "";
-        visit(node, "text", (child) => {
-          text += child.value;
+        let isJSX = false;
+        visit(node, (child) => {
+          if (child.type === "element") {
+            return;
+          }
+          if (child.type === "raw") {
+            if (child.value.startsWith("\n<") || child.value.endsWith(">\n")) {
+              raw += child.value.replace(/^\n|\n$/g, "");
+              return;
+            }
+          }
+          if (child.type === "text" || child.type === "raw") {
+            raw += child.value;
+            text += child.value;
+            isJSX = isJSX || child.value.includes("{");
+          }
         });
         node.properties = node.properties || {};
         if (typeof node.properties.id !== "string") {
-          node.properties.id = slugger.slug(text);
+          if (isJSX) {
+            node.properties.id = `$$slug(\`${text.replace(/\{/g, "${")}\`)`;
+            node.type = "raw";
+            node.value = `<${node.tagName} id={${node.properties.id}}>${raw}</${node.tagName}>`;
+          } else {
+            node.properties.id = slugger.slug(text);
+          }
         }
         headers.push({ depth, slug: node.properties.id, text });
       });

package/dist/rehype-expressions.js

@@ -1,9 +1,34 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import { map } from "unist-util-map";
 function rehypeExpressions() {
   return function(node) {
     return map(node, (child) => {
+      if (child.type === "text") {
+        return __spreadProps(__spreadValues({}, child), { type: "raw" });
+      }
       if (child.type === "mdxTextExpression") {
-        return { type: "text", value: `{${child.value}}` };
+        return { type: "raw", value: `{${child.value}}` };
+      }
+      if (child.type === "mdxFlowExpression") {
+        return { type: "raw", value: `{${child.value}}` };
       }
       return child;
     });

package/dist/rehype-jsx.js

@@ -26,18 +26,41 @@ function rehypeJsx() {
         return __spreadProps(__spreadValues({}, child), { tagName: `${child.tagName}` });
       }
       if (MDX_ELEMENTS.has(child.type)) {
+        const attrs = child.attributes.reduce((acc, entry) => {
+          let attr = entry.value;
+          if (attr && typeof attr === "object") {
+            attr = `{${attr.value}}`;
+          } else if (attr && entry.type === "mdxJsxExpressionAttribute") {
+            attr = `{${attr}}`;
+          } else if (attr === null) {
+            attr = "";
+          } else if (typeof attr === "string") {
+            attr = `"${attr}"`;
+          }
+          if (!entry.name) {
+            return acc + ` ${attr}`;
+          }
+          return acc + ` ${entry.name}${attr ? "=" : ""}${attr}`;
+        }, "");
+        if (child.children.length === 0) {
+          return {
+            type: "raw",
+            value: `<${child.name}${attrs} />`
+          };
+        }
+        child.children.splice(0, 0, {
+          type: "raw",
+          value: `
+<${child.name}${attrs}>`
+        });
+        child.children.push({
+          type: "raw",
+          value: `</${child.name}>
+`
+        });
         return __spreadProps(__spreadValues({}, child), {
           type: "element",
-          tagName: `${child.name}`,
-          properties: child.attributes.reduce((acc, entry) => {
-            let attr = entry.value;
-            if (attr && typeof attr === "object") {
-              attr = `{${attr.value}}`;
-            } else if (attr === null) {
-              attr = `{true}`;
-            }
-            return Object.assign(acc, { [entry.name]: attr });
-          }, {})
+          tagName: `Fragment`
         });
       }
       return child;

package/dist/remark-mark-and-unravel.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @typedef {import('mdast').Root} Root
+ * @typedef {import('mdast').Content} Content
+ * @typedef {Root|Content} Node
+ * @typedef {Extract<Node, import('unist').Parent>} Parent
+ *
+ * @typedef {import('remark-mdx')} DoNotTouchAsThisImportItIncludesMdxInTree
+ */
+/**
+ * A tiny plugin that unravels `<p><h1>x</h1></p>` but also
+ * `<p><Component /></p>` (so it has no knowledge of “HTML”).
+ * It also marks JSX as being explicitly JSX, so when a user passes a `h1`
+ * component, it is used for `# heading` but not for `<h1>heading</h1>`.
+ *
+ * @type {import('unified').Plugin<Array<void>, Root>}
+ */
+export default function remarkMarkAndUnravel(): (tree: any) => void;

package/dist/remark-mark-and-unravel.js

@@ -0,0 +1,45 @@
+import { visit } from "unist-util-visit";
+function remarkMarkAndUnravel() {
+  return (tree) => {
+    visit(tree, (node, index, parent_) => {
+      const parent = parent_;
+      let offset = -1;
+      let all = true;
+      let oneOrMore;
+      if (parent && typeof index === "number" && node.type === "paragraph") {
+        const children = node.children;
+        while (++offset < children.length) {
+          const child = children[offset];
+          if (child.type === "mdxJsxTextElement" || child.type === "mdxTextExpression") {
+            oneOrMore = true;
+          } else if (child.type === "text" && /^[\t\r\n ]+$/.test(String(child.value))) {
+          } else {
+            all = false;
+            break;
+          }
+        }
+        if (all && oneOrMore) {
+          offset = -1;
+          while (++offset < children.length) {
+            const child = children[offset];
+            if (child.type === "mdxJsxTextElement") {
+              child.type = "mdxJsxFlowElement";
+            }
+            if (child.type === "mdxTextExpression") {
+              child.type = "mdxFlowExpression";
+            }
+          }
+          parent.children.splice(index, 1, ...children);
+          return index;
+        }
+      }
+      if (node.type === "mdxJsxFlowElement" || node.type === "mdxJsxTextElement") {
+        const data = node.data || (node.data = {});
+        data._mdxExplicitJsx = true;
+      }
+    });
+  };
+}
+export {
+  remarkMarkAndUnravel as default
+};

package/dist/remark-mdxish.d.ts

@@ -0,0 +1 @@
+export default function remarkMdxish(this: any, options?: {}): void;

package/dist/remark-mdxish.js

@@ -0,0 +1,15 @@
+import { mdxjs } from "micromark-extension-mdxjs";
+import { mdxFromMarkdown, mdxToMarkdown } from "./mdast-util-mdxish.js";
+function remarkMdxish(options = {}) {
+  const data = this.data();
+  add("micromarkExtensions", mdxjs(options));
+  add("fromMarkdownExtensions", mdxFromMarkdown());
+  add("toMarkdownExtensions", mdxToMarkdown());
+  function add(field, value) {
+    const list = data[field] ? data[field] : data[field] = [];
+    list.push(value);
+  }
+}
+export {
+  remarkMdxish as default
+};

package/dist/remark-shiki.js

@@ -1,7 +1,7 @@
 import { getHighlighter } from "shiki";
 import { visit } from "unist-util-visit";
 const highlighterCacheAsync = /* @__PURE__ */ new Map();
-const remarkShiki = async ({ langs, theme, wrap }, scopedClassName) => {
+const remarkShiki = async ({ langs = [], theme = "github-dark", wrap = false }, scopedClassName) => {
   const cacheID = typeof theme === "string" ? theme : theme.name;
   let highlighterAsync = highlighterCacheAsync.get(cacheID);
   if (!highlighterAsync) {

package/dist/types.d.ts

@@ -8,19 +8,21 @@ export declare type RemarkPlugins = (string | [string, any] | RemarkPlugin | [Re
 export declare type RehypePlugin<PluginParameters extends any[] = any[]> = unified.Plugin<PluginParameters, hast.Root>;
 export declare type RehypePlugins = (string | [string, any] | RehypePlugin | [RehypePlugin, any])[];
 export interface ShikiConfig {
-    langs: ILanguageRegistration[];
-    theme: Theme | IThemeRegistration;
-    wrap: boolean | null;
+    langs?: ILanguageRegistration[];
+    theme?: Theme | IThemeRegistration;
+    wrap?: boolean | null;
 }
 export interface AstroMarkdownOptions {
-    mode: 'md' | 'mdx';
-    drafts: boolean;
-    syntaxHighlight: 'shiki' | 'prism' | false;
-    shikiConfig: ShikiConfig;
-    remarkPlugins: RemarkPlugins;
-    rehypePlugins: RehypePlugins;
+    mode?: 'md' | 'mdx';
+    drafts?: boolean;
+    syntaxHighlight?: 'shiki' | 'prism' | false;
+    shikiConfig?: ShikiConfig;
+    remarkPlugins?: RemarkPlugins;
+    rehypePlugins?: RehypePlugins;
 }
 export interface MarkdownRenderingOptions extends AstroMarkdownOptions {
+    /** @internal */
+    fileURL?: URL;
     /** @internal */
     $?: {
         scopedClassName: string | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astrojs/markdown-remark",
-  "version": "0.9.4",
+  "version": "0.10.0",
   "type": "module",
   "author": "withastro",
   "license": "MIT",
@@ -23,6 +23,7 @@
     "mdast-util-mdx-jsx": "^1.2.0",
     "mdast-util-to-string": "^3.1.0",
     "micromark-extension-mdx-jsx": "^1.0.3",
+    "micromark-extension-mdxjs": "^1.0.0",
     "prismjs": "^1.28.0",
     "rehype-raw": "^6.1.1",
     "rehype-stringify": "^9.0.3",
@@ -32,22 +33,28 @@
     "remark-smartypants": "^2.0.0",
     "shiki": "^0.10.1",
     "unified": "^10.1.2",
-    "unist-util-map": "^3.0.1",
-    "unist-util-visit": "^4.1.0"
+    "unist-util-map": "^3.1.1",
+    "unist-util-visit": "^4.1.0",
+    "vfile": "^5.3.2"
   },
   "devDependencies": {
+    "@types/chai": "^4.3.1",
     "@types/github-slugger": "^1.3.0",
     "@types/hast": "^2.3.4",
     "@types/mdast": "^3.0.10",
+    "@types/mocha": "^9.1.1",
     "@types/prismjs": "^1.26.0",
     "@types/unist": "^2.0.6",
-    "astro-scripts": "0.0.3"
+    "astro-scripts": "0.0.4",
+    "chai": "^4.3.6",
+    "mocha": "^9.2.2"
   },
   "scripts": {
     "prepublish": "pnpm build",
     "build": "astro-scripts build \"src/**/*.ts\" && tsc -p tsconfig.json",
     "build:ci": "astro-scripts build \"src/**/*.ts\"",
     "postbuild": "astro-scripts copy \"src/**/*.js\"",
-    "dev": "astro-scripts dev \"src/**/*.ts\""
+    "dev": "astro-scripts dev \"src/**/*.ts\"",
+    "test": "mocha --exit --timeout 20000"
   }
 }

package/src/index.ts

@@ -2,10 +2,10 @@ import type { MarkdownRenderingOptions, MarkdownRenderingResult } from './types'
 
 import createCollectHeaders from './rehype-collect-headers.js';
 import scopedStyles from './remark-scoped-styles.js';
-import { remarkExpressions, loadRemarkExpressions } from './remark-expressions.js';
 import rehypeExpressions from './rehype-expressions.js';
 import rehypeIslands from './rehype-islands.js';
-import { remarkJsx, loadRemarkJsx } from './remark-jsx.js';
+import remarkMdxish from './remark-mdxish.js';
+import remarkMarkAndUnravel from './remark-mark-and-unravel.js';
 import rehypeJsx from './rehype-jsx.js';
 import rehypeEscape from './rehype-escape.js';
 import remarkPrism from './remark-prism.js';
@@ -18,27 +18,40 @@ import markdown from 'remark-parse';
 import markdownToHtml from 'remark-rehype';
 import rehypeStringify from 'rehype-stringify';
 import rehypeRaw from 'rehype-raw';
+import Slugger from 'github-slugger';
+import { VFile } from 'vfile';
 
 export * from './types.js';
 
 export const DEFAULT_REMARK_PLUGINS = ['remark-gfm', 'remark-smartypants'];
 export const DEFAULT_REHYPE_PLUGINS = [];
 
+const slugger = new Slugger();
+export function slug(value: string): string {
+	return slugger.slug(value);
+}
+
 /** Shared utility for rendering markdown */
 export async function renderMarkdown(
 	content: string,
-	opts: MarkdownRenderingOptions
+	opts: MarkdownRenderingOptions = {}
 ): Promise<MarkdownRenderingResult> {
-	let { mode, syntaxHighlight, shikiConfig, remarkPlugins, rehypePlugins } = opts;
+	let {
+		fileURL,
+		mode = 'mdx',
+		syntaxHighlight = 'shiki',
+		shikiConfig = {},
+		remarkPlugins = [],
+		rehypePlugins = [],
+	} = opts;
+	const input = new VFile({ value: content, path: fileURL });
 	const scopedClassName = opts.$?.scopedClassName;
 	const isMDX = mode === 'mdx';
 	const { headers, rehypeCollectHeaders } = createCollectHeaders();
 
-	await Promise.all([loadRemarkExpressions(), loadRemarkJsx()]); // Vite bug: dynamically import() these because of CJS interop (this will cache)
-
 	let parser = unified()
 		.use(markdown)
-		.use(isMDX ? [remarkJsx, remarkExpressions] : [])
+		.use(isMDX ? [remarkMdxish, remarkMarkAndUnravel] : [])
 		.use([remarkUnwrap]);
 
 	if (remarkPlugins.length === 0 && rehypePlugins.length === 0) {
@@ -68,7 +81,13 @@ export async function renderMarkdown(
 			markdownToHtml as any,
 			{
 				allowDangerousHtml: true,
-				passThrough: ['raw', 'mdxTextExpression', 'mdxJsxTextElement', 'mdxJsxFlowElement'],
+				passThrough: [
+					'raw',
+					'mdxFlowExpression',
+					'mdxJsxFlowElement',
+					'mdxJsxTextElement',
+					'mdxTextExpression',
+				],
 			},
 		],
 	]);
@@ -87,7 +106,7 @@ export async function renderMarkdown(
 		const vfile = await parser
 			.use([rehypeCollectHeaders])
 			.use(rehypeStringify, { allowDangerousHtml: true })
-			.process(content);
+			.process(input);
 		result = vfile.toString();
 	} catch (err) {
 		console.error(err);

package/src/mdast-util-mdxish.ts

@@ -0,0 +1,12 @@
+import { mdxExpressionFromMarkdown, mdxExpressionToMarkdown } from 'mdast-util-mdx-expression';
+import { mdxJsxFromMarkdown, mdxJsxToMarkdown } from 'mdast-util-mdx-jsx';
+
+export function mdxFromMarkdown(): any {
+	return [mdxExpressionFromMarkdown, mdxJsxFromMarkdown];
+}
+
+export function mdxToMarkdown(): any {
+	return {
+		extensions: [mdxExpressionToMarkdown, mdxJsxToMarkdown],
+	};
+}

package/src/rehype-collect-headers.ts

@@ -17,15 +17,39 @@ export default function createCollectHeaders() {
 				if (!level) return;
 				const depth = Number.parseInt(level);
 
+				let raw = '';
 				let text = '';
-
-				visit(node, 'text', (child) => {
-					text += child.value;
+				let isJSX = false;
+				visit(node, (child) => {
+					if (child.type === 'element') {
+						return;
+					}
+					if (child.type === 'raw') {
+						// HACK: serialized JSX from internal plugins, ignore these for slug
+						if (child.value.startsWith('\n<') || child.value.endsWith('>\n')) {
+							raw += child.value.replace(/^\n|\n$/g, '');
+							return;
+						}
+					}
+					if (child.type === 'text' || child.type === 'raw') {
+						raw += child.value;
+						text += child.value;
+						isJSX = isJSX || child.value.includes('{');
+					}
 				});
 
 				node.properties = node.properties || {};
 				if (typeof node.properties.id !== 'string') {
-					node.properties.id = slugger.slug(text);
+					if (isJSX) {
+						// HACK: for ids that have JSX content, use $$slug helper to generate slug at runtime
+						node.properties.id = `$$slug(\`${text.replace(/\{/g, '${')}\`)`;
+						(node as any).type = 'raw';
+						(
+							node as any
+						).value = `<${node.tagName} id={${node.properties.id}}>${raw}</${node.tagName}>`;
+					} else {
+						node.properties.id = slugger.slug(text);
+					}
 				}
 
 				headers.push({ depth, slug: node.properties.id, text });

package/src/rehype-expressions.ts

@@ -3,8 +3,14 @@ import { map } from 'unist-util-map';
 export default function rehypeExpressions(): any {
 	return function (node: any): any {
 		return map(node, (child) => {
+			if (child.type === 'text') {
+				return { ...child, type: 'raw' };
+			}
 			if (child.type === 'mdxTextExpression') {
-				return { type: 'text', value: `{${(child as any).value}}` };
+				return { type: 'raw', value: `{${(child as any).value}}` };
+			}
+			if (child.type === 'mdxFlowExpression') {
+				return { type: 'raw', value: `{${(child as any).value}}` };
 			}
 			return child;
 		});

package/src/rehype-jsx.ts

@@ -8,19 +8,41 @@ export default function rehypeJsx(): any {
 				return { ...child, tagName: `${child.tagName}` };
 			}
 			if (MDX_ELEMENTS.has(child.type)) {
+				const attrs = child.attributes.reduce((acc: any[], entry: any) => {
+					let attr = entry.value;
+					if (attr && typeof attr === 'object') {
+						attr = `{${attr.value}}`;
+					} else if (attr && entry.type === 'mdxJsxExpressionAttribute') {
+						attr = `{${attr}}`;
+					} else if (attr === null) {
+						attr = '';
+					} else if (typeof attr === 'string') {
+						attr = `"${attr}"`;
+					}
+					if (!entry.name) {
+						return acc + ` ${attr}`;
+					}
+					return acc + ` ${entry.name}${attr ? '=' : ''}${attr}`;
+				}, '');
+
+				if (child.children.length === 0) {
+					return {
+						type: 'raw',
+						value: `<${child.name}${attrs} />`,
+					};
+				}
+				child.children.splice(0, 0, {
+					type: 'raw',
+					value: `\n<${child.name}${attrs}>`,
+				});
+				child.children.push({
+					type: 'raw',
+					value: `</${child.name}>\n`,
+				});
 				return {
 					...child,
 					type: 'element',
-					tagName: `${child.name}`,
-					properties: child.attributes.reduce((acc: any[], entry: any) => {
-						let attr = entry.value;
-						if (attr && typeof attr === 'object') {
-							attr = `{${attr.value}}`;
-						} else if (attr === null) {
-							attr = `{true}`;
-						}
-						return Object.assign(acc, { [entry.name]: attr });
-					}, {}),
+					tagName: `Fragment`,
 				};
 			}
 			return child;

package/src/remark-mark-and-unravel.ts

@@ -0,0 +1,72 @@
+//  https://github.com/mdx-js/mdx/blob/main/packages/mdx/lib/plugin/remark-mark-and-unravel.js
+/**
+ * @typedef {import('mdast').Root} Root
+ * @typedef {import('mdast').Content} Content
+ * @typedef {Root|Content} Node
+ * @typedef {Extract<Node, import('unist').Parent>} Parent
+ *
+ * @typedef {import('remark-mdx')} DoNotTouchAsThisImportItIncludesMdxInTree
+ */
+
+import { visit } from 'unist-util-visit';
+
+/**
+ * A tiny plugin that unravels `<p><h1>x</h1></p>` but also
+ * `<p><Component /></p>` (so it has no knowledge of “HTML”).
+ * It also marks JSX as being explicitly JSX, so when a user passes a `h1`
+ * component, it is used for `# heading` but not for `<h1>heading</h1>`.
+ *
+ * @type {import('unified').Plugin<Array<void>, Root>}
+ */
+export default function remarkMarkAndUnravel() {
+	return (tree: any) => {
+		visit(tree, (node, index, parent_) => {
+			const parent = /** @type {Parent} */ parent_;
+			let offset = -1;
+			let all = true;
+			/** @type {boolean|undefined} */
+			let oneOrMore;
+
+			if (parent && typeof index === 'number' && node.type === 'paragraph') {
+				const children = node.children;
+
+				while (++offset < children.length) {
+					const child = children[offset];
+
+					if (child.type === 'mdxJsxTextElement' || child.type === 'mdxTextExpression') {
+						oneOrMore = true;
+					} else if (child.type === 'text' && /^[\t\r\n ]+$/.test(String(child.value))) {
+						// Empty.
+					} else {
+						all = false;
+						break;
+					}
+				}
+
+				if (all && oneOrMore) {
+					offset = -1;
+
+					while (++offset < children.length) {
+						const child = children[offset];
+
+						if (child.type === 'mdxJsxTextElement') {
+							child.type = 'mdxJsxFlowElement';
+						}
+
+						if (child.type === 'mdxTextExpression') {
+							child.type = 'mdxFlowExpression';
+						}
+					}
+
+					parent.children.splice(index, 1, ...children);
+					return index;
+				}
+			}
+
+			if (node.type === 'mdxJsxFlowElement' || node.type === 'mdxJsxTextElement') {
+				const data = node.data || (node.data = {});
+				data._mdxExplicitJsx = true;
+			}
+		});
+	};
+}

package/src/remark-mdxish.ts

@@ -0,0 +1,15 @@
+import { mdxjs } from 'micromark-extension-mdxjs';
+import { mdxFromMarkdown, mdxToMarkdown } from './mdast-util-mdxish.js';
+
+export default function remarkMdxish(this: any, options = {}) {
+	const data = this.data();
+
+	add('micromarkExtensions', mdxjs(options));
+	add('fromMarkdownExtensions', mdxFromMarkdown());
+	add('toMarkdownExtensions', mdxToMarkdown());
+
+	function add(field: string, value: unknown) {
+		const list = data[field] ? data[field] : (data[field] = []);
+		list.push(value);
+	}
+}

package/src/remark-shiki.ts

@@ -11,7 +11,7 @@ import type { ShikiConfig } from './types.js';
 const highlighterCacheAsync = new Map<string, Promise<shiki.Highlighter>>();
 
 const remarkShiki = async (
-	{ langs, theme, wrap }: ShikiConfig,
+	{ langs = [], theme = 'github-dark', wrap = false }: ShikiConfig,
 	scopedClassName?: string | null
 ) => {
 	const cacheID: string = typeof theme === 'string' ? theme : theme.name;

package/src/types.ts

@@ -20,21 +20,23 @@ export type RehypePlugin<PluginParameters extends any[] = any[]> = unified.Plugi
 export type RehypePlugins = (string | [string, any] | RehypePlugin | [RehypePlugin, any])[];
 
 export interface ShikiConfig {
-	langs: ILanguageRegistration[];
-	theme: Theme | IThemeRegistration;
-	wrap: boolean | null;
+	langs?: ILanguageRegistration[];
+	theme?: Theme | IThemeRegistration;
+	wrap?: boolean | null;
 }
 
 export interface AstroMarkdownOptions {
-	mode: 'md' | 'mdx';
-	drafts: boolean;
-	syntaxHighlight: 'shiki' | 'prism' | false;
-	shikiConfig: ShikiConfig;
-	remarkPlugins: RemarkPlugins;
-	rehypePlugins: RehypePlugins;
+	mode?: 'md' | 'mdx';
+	drafts?: boolean;
+	syntaxHighlight?: 'shiki' | 'prism' | false;
+	shikiConfig?: ShikiConfig;
+	remarkPlugins?: RemarkPlugins;
+	rehypePlugins?: RehypePlugins;
 }
 
 export interface MarkdownRenderingOptions extends AstroMarkdownOptions {
+	/** @internal */
+	fileURL?: URL;
 	/** @internal */
 	$?: {
 		scopedClassName: string | null;

package/test/components.test.js

@@ -0,0 +1,71 @@
+import { renderMarkdown } from '../dist/index.js';
+import chai from 'chai';
+
+describe('components', () => {
+	it('should be able to serialize string', async () => {
+		const { code } = await renderMarkdown(`<Component str="cool!" />`, {});
+
+		chai.expect(code).to.equal(`<Component str="cool!" />`);
+	});
+
+	it('should be able to serialize boolean attribute', async () => {
+		const { code } = await renderMarkdown(`<Component bool={true} />`, {});
+
+		chai.expect(code).to.equal(`<Component bool={true} />`);
+	});
+
+	it('should be able to serialize array', async () => {
+		const { code } = await renderMarkdown(`<Component prop={["a", "b", "c"]} />`, {});
+
+		chai.expect(code).to.equal(`<Component prop={["a", "b", "c"]} />`);
+	});
+
+	it('should be able to serialize object', async () => {
+		const { code } = await renderMarkdown(`<Component prop={{ a: 0, b: 1, c: 2 }} />`, {});
+
+		chai.expect(code).to.equal(`<Component prop={{ a: 0, b: 1, c: 2 }} />`);
+	});
+
+	it('should be able to serialize empty attribute', async () => {
+		const { code } = await renderMarkdown(`<Component empty />`, {});
+
+		chai.expect(code).to.equal(`<Component empty />`);
+	});
+
+	// Notable omission: shorthand attribute
+
+	it('should be able to serialize spread attribute', async () => {
+		const { code } = await renderMarkdown(`<Component {...spread} />`, {});
+
+		chai.expect(code).to.equal(`<Component {...spread} />`);
+	});
+
+	it('should allow client:* directives', async () => {
+		const { code } = await renderMarkdown(`<Component client:load />`, {});
+
+		chai.expect(code).to.equal(`<Component client:load />`);
+	});
+
+	it('should normalize children', async () => {
+		const { code } = await renderMarkdown(`<Component bool={true}>Hello world!</Component>`, {});
+
+		chai
+			.expect(code)
+			.to.equal(`<Fragment>\n<Component bool={true}>Hello world!</Component>\n</Fragment>`);
+	});
+
+	it('should allow markdown without many spaces', async () => {
+		const { code } = await renderMarkdown(
+			`<Component>
+# Hello world!
+</Component>`,
+			{}
+		);
+
+		chai
+			.expect(code)
+			.to.equal(
+				`<Fragment>\n<Component><h1 id="hello-world">Hello world!</h1></Component>\n</Fragment>`
+			);
+	});
+});

package/test/expressions.test.js

@@ -0,0 +1,51 @@
+import { renderMarkdown } from '../dist/index.js';
+import chai from 'chai';
+
+describe('expressions', () => {
+	it('should be able to serialize bare expession', async () => {
+		const { code } = await renderMarkdown(`{a}`, {});
+
+		chai.expect(code).to.equal(`{a}`);
+	});
+
+	it('should be able to serialize expression inside component', async () => {
+		const { code } = await renderMarkdown(`<Component>{a}</Component>`, {});
+
+		chai.expect(code).to.equal(`<Fragment>\n<Component>{a}</Component>\n</Fragment>`);
+	});
+
+	it('should be able to serialize expression inside markdown', async () => {
+		const { code } = await renderMarkdown(`# {frontmatter.title}`, {});
+
+		chai
+			.expect(code)
+			.to.equal(`<h1 id={$$slug(\`\${frontmatter.title}\`)}>{frontmatter.title}</h1>`);
+	});
+
+	it('should be able to serialize complex expression inside markdown', async () => {
+		const { code } = await renderMarkdown(`# Hello {frontmatter.name}`, {});
+
+		chai
+			.expect(code)
+			.to.equal(`<h1 id={$$slug(\`Hello \${frontmatter.name}\`)}>Hello {frontmatter.name}</h1>`);
+	});
+
+	it('should be able to serialize complex expression with markup inside markdown', async () => {
+		const { code } = await renderMarkdown(`# Hello <span>{frontmatter.name}</span>`, {});
+
+		chai
+			.expect(code)
+			.to.equal(
+				`<h1 id={$$slug(\`Hello \${frontmatter.name}\`)}>Hello <span>{frontmatter.name}</span></h1>`
+			);
+	});
+
+	it('should be able to serialize function expression', async () => {
+		const { code } = await renderMarkdown(
+			`{frontmatter.list.map(item => <p id={item}>{item}</p>)}`,
+			{}
+		);
+
+		chai.expect(code).to.equal(`{frontmatter.list.map(item => <p id={item}>{item}</p>)}`);
+	});
+});

package/test/plugins.test.js

@@ -0,0 +1,26 @@
+import { renderMarkdown } from '../dist/index.js';
+import chai from 'chai';
+
+import { fileURLToPath } from 'node:url';
+
+describe('plugins', () => {
+	// https://github.com/withastro/astro/issues/3264
+	it('should be able to get file path when passing fileURL', async () => {
+		let context;
+		await renderMarkdown(`test`, {
+			fileURL: new URL('virtual.md', import.meta.url),
+			remarkPlugins: [
+				function () {
+					const transformer = (tree, file) => {
+						context = file;
+					};
+
+					return transformer;
+				},
+			],
+		});
+
+		chai.expect(typeof context).to.equal('object');
+		chai.expect(context.path).to.equal(fileURLToPath(new URL('virtual.md', import.meta.url)));
+	});
+});

package/dist/remark-expressions.d.ts

@@ -1,2 +0,0 @@
-export declare function remarkExpressions(this: any, options: any): void;
-export declare function loadRemarkExpressions(): Promise<void>;

package/dist/remark-expressions.js

@@ -1,25 +0,0 @@
-let mdxExpressionFromMarkdown;
-let mdxExpressionToMarkdown;
-function remarkExpressions(options) {
-  let settings = options || {};
-  let data = this.data();
-  add("fromMarkdownExtensions", mdxExpressionFromMarkdown);
-  add("toMarkdownExtensions", mdxExpressionToMarkdown);
-  function add(field, value) {
-    if (data[field])
-      data[field].push(value);
-    else
-      data[field] = [value];
-  }
-}
-async function loadRemarkExpressions() {
-  if (!mdxExpressionFromMarkdown || !mdxExpressionToMarkdown) {
-    const mdastUtilMdxExpression = await import("mdast-util-mdx-expression");
-    mdxExpressionFromMarkdown = mdastUtilMdxExpression.mdxExpressionFromMarkdown;
-    mdxExpressionToMarkdown = mdastUtilMdxExpression.mdxExpressionToMarkdown;
-  }
-}
-export {
-  loadRemarkExpressions,
-  remarkExpressions
-};

package/dist/remark-jsx.d.ts

@@ -1,2 +0,0 @@
-export declare function remarkJsx(this: any, options: any): void;
-export declare function loadRemarkJsx(): Promise<void>;

package/dist/remark-jsx.js

@@ -1,30 +0,0 @@
-let mdxJsx;
-let mdxJsxFromMarkdown;
-let mdxJsxToMarkdown;
-function remarkJsx(options) {
-  let settings = options || {};
-  let data = this.data();
-  add("fromMarkdownExtensions", mdxJsxFromMarkdown);
-  add("toMarkdownExtensions", mdxJsxToMarkdown);
-  function add(field, value) {
-    if (data[field])
-      data[field].push(value);
-    else
-      data[field] = [value];
-  }
-}
-async function loadRemarkJsx() {
-  if (!mdxJsx) {
-    const micromarkMdxJsx = await import("micromark-extension-mdx-jsx");
-    mdxJsx = micromarkMdxJsx.mdxJsx;
-  }
-  if (!mdxJsxFromMarkdown || !mdxJsxToMarkdown) {
-    const mdastUtilMdxJsx = await import("mdast-util-mdx-jsx");
-    mdxJsxFromMarkdown = mdastUtilMdxJsx.mdxJsxFromMarkdown;
-    mdxJsxToMarkdown = mdastUtilMdxJsx.mdxJsxToMarkdown;
-  }
-}
-export {
-  loadRemarkJsx,
-  remarkJsx
-};

package/src/remark-expressions.ts

@@ -1,25 +0,0 @@
-// Vite bug: dynamically import() modules needed for CJS. Cache in memory to keep side effects
-let mdxExpressionFromMarkdown: any;
-let mdxExpressionToMarkdown: any;
-
-export function remarkExpressions(this: any, options: any) {
-	let settings = options || {};
-	let data = this.data();
-
-	add('fromMarkdownExtensions', mdxExpressionFromMarkdown);
-	add('toMarkdownExtensions', mdxExpressionToMarkdown);
-
-	function add(field: any, value: any) {
-		/* istanbul ignore if - other extensions. */
-		if (data[field]) data[field].push(value);
-		else data[field] = [value];
-	}
-}
-
-export async function loadRemarkExpressions() {
-	if (!mdxExpressionFromMarkdown || !mdxExpressionToMarkdown) {
-		const mdastUtilMdxExpression = await import('mdast-util-mdx-expression');
-		mdxExpressionFromMarkdown = mdastUtilMdxExpression.mdxExpressionFromMarkdown;
-		mdxExpressionToMarkdown = mdastUtilMdxExpression.mdxExpressionToMarkdown;
-	}
-}

package/src/remark-jsx.ts

@@ -1,31 +0,0 @@
-// Vite bug: dynamically import() modules needed for CJS. Cache in memory to keep side effects
-let mdxJsx: any;
-let mdxJsxFromMarkdown: any;
-let mdxJsxToMarkdown: any;
-
-export function remarkJsx(this: any, options: any) {
-	let settings = options || {};
-	let data = this.data();
-
-	// TODO this seems to break adding slugs, no idea why add('micromarkExtensions', mdxJsx({}));
-	add('fromMarkdownExtensions', mdxJsxFromMarkdown);
-	add('toMarkdownExtensions', mdxJsxToMarkdown);
-
-	function add(field: any, value: any) {
-		/* istanbul ignore if - other extensions. */
-		if (data[field]) data[field].push(value);
-		else data[field] = [value];
-	}
-}
-
-export async function loadRemarkJsx() {
-	if (!mdxJsx) {
-		const micromarkMdxJsx = await import('micromark-extension-mdx-jsx');
-		mdxJsx = micromarkMdxJsx.mdxJsx;
-	}
-	if (!mdxJsxFromMarkdown || !mdxJsxToMarkdown) {
-		const mdastUtilMdxJsx = await import('mdast-util-mdx-jsx');
-		mdxJsxFromMarkdown = mdastUtilMdxJsx.mdxJsxFromMarkdown;
-		mdxJsxToMarkdown = mdastUtilMdxJsx.mdxJsxToMarkdown;
-	}
-}