@astrojs/markdown-remark 0.10.1 → 0.11.1

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @astrojs/markdown-remark
 
+## 0.11.1
+
+### Patch Changes
+
+- [#3564](https://github.com/withastro/astro/pull/3564) [`76fb01cf`](https://github.com/withastro/astro/commit/76fb01cff1002f2a37e93869378802156c4eca7c) Thanks [@hippotastic](https://github.com/hippotastic)! - Fix autolinking of URLs inside links
+
+* [#3554](https://github.com/withastro/astro/pull/3554) [`c549f161`](https://github.com/withastro/astro/commit/c549f161cadd76a666672556f2c2d63b5f97f00d) Thanks [@hippotastic](https://github.com/hippotastic)! - Allow AlpineJS syntax extensions in Markdown
+
+## 0.11.0
+
+### Minor Changes
+
+- [#3502](https://github.com/withastro/astro/pull/3502) [`939fe159`](https://github.com/withastro/astro/commit/939fe159255cecf1cab5c1b3da2670d30ac8e4a7) Thanks [@nokazn](https://github.com/nokazn)! - Fix cases for JSX-like expressions in code blocks of headings
+
+### Patch Changes
+
+- [#3514](https://github.com/withastro/astro/pull/3514) [`6c955ca6`](https://github.com/withastro/astro/commit/6c955ca643a7a071609ce8a5258cc7faf5a636b2) Thanks [@hippotastic](https://github.com/hippotastic)! - Fix Markdown errors missing source filename
+
+* [#3516](https://github.com/withastro/astro/pull/3516) [`30578015`](https://github.com/withastro/astro/commit/30578015919e019cd8dd354288a45c1fc63bd01f) Thanks [@hippotastic](https://github.com/hippotastic)! - Fix: Allow self-closing tags in Markdown
+
+## 0.10.2
+
+### Patch Changes
+
+- [#3486](https://github.com/withastro/astro/pull/3486) [`119ecf8d`](https://github.com/withastro/astro/commit/119ecf8d469f034eaf1b1217523954d29f492cb6) Thanks [@hippotastic](https://github.com/hippotastic)! - Fix components in markdown regressions
+
 ## 0.10.1
 
 ### Patch Changes

package/dist/index.js

@@ -1,21 +1,21 @@
+import { loadPlugins } from "./load-plugins.js";
 import createCollectHeaders from "./rehype-collect-headers.js";
-import scopedStyles from "./remark-scoped-styles.js";
+import rehypeEscape from "./rehype-escape.js";
 import rehypeExpressions from "./rehype-expressions.js";
 import rehypeIslands from "./rehype-islands.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 remarkMarkAndUnravel from "./remark-mark-and-unravel.js";
+import remarkMdxish from "./remark-mdxish.js";
 import remarkPrism from "./remark-prism.js";
+import scopedStyles from "./remark-scoped-styles.js";
 import remarkShiki from "./remark-shiki.js";
 import remarkUnwrap from "./remark-unwrap.js";
-import { loadPlugins } from "./load-plugins.js";
-import { unified } from "unified";
+import Slugger from "github-slugger";
+import rehypeRaw from "rehype-raw";
+import rehypeStringify from "rehype-stringify";
 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 { unified } from "unified";
 import { VFile } from "vfile";
 export * from "./types.js";
 const DEFAULT_REMARK_PLUGINS = ["remark-gfm", "remark-smartypants"];
@@ -74,12 +74,13 @@ async function renderMarkdown(content, opts = {}) {
   loadedRehypePlugins.forEach(([plugin, opts2]) => {
     parser.use([[plugin, opts2]]);
   });
-  parser.use(isMDX ? [rehypeJsx, rehypeExpressions] : [rehypeRaw]).use(rehypeEscape).use(rehypeIslands);
+  parser.use(isMDX ? [rehypeJsx, rehypeExpressions] : [rehypeRaw]).use(rehypeEscape).use(rehypeIslands).use([rehypeCollectHeaders]).use(rehypeStringify, { allowDangerousHtml: true });
   let result;
   try {
-    const vfile = await parser.use([rehypeCollectHeaders]).use(rehypeStringify, { allowDangerousHtml: true }).process(input);
+    const vfile = await parser.process(input);
     result = vfile.toString();
   } catch (err) {
+    err = prefixError(err, `Failed to parse Markdown file "${input.path}"`);
     console.error(err);
     throw err;
   }
@@ -88,6 +89,23 @@ async function renderMarkdown(content, opts = {}) {
     code: result.toString()
   };
 }
+function prefixError(err, prefix) {
+  if (err && err.message) {
+    try {
+      err.message = `${prefix}:
+${err.message}`;
+      return err;
+    } catch (error) {
+    }
+  }
+  const wrappedError = new Error(`${prefix}${err ? `: ${err}` : ""}`);
+  try {
+    wrappedError.stack = err.stack;
+    wrappedError.cause = err;
+  } catch (error) {
+  }
+  return wrappedError;
+}
 export {
   DEFAULT_REHYPE_PLUGINS,
   DEFAULT_REMARK_PLUGINS,

package/dist/mdxjs.d.ts

@@ -0,0 +1,3 @@
+import type { Options } from 'micromark-extension-mdx-expression';
+import type { Extension } from 'micromark-util-types';
+export declare function mdxjs(options: Options): Extension;

package/dist/mdxjs.js

@@ -0,0 +1,17 @@
+import { mdxJsx } from "@astrojs/micromark-extension-mdx-jsx";
+import { Parser } from "acorn";
+import acornJsx from "acorn-jsx";
+import { mdxExpression } from "micromark-extension-mdx-expression";
+import { mdxMd } from "micromark-extension-mdx-md";
+import { combineExtensions } from "micromark-util-combine-extensions";
+function mdxjs(options) {
+  const settings = Object.assign({
+    acorn: Parser.extend(acornJsx()),
+    acornOptions: { ecmaVersion: 2020, sourceType: "module" },
+    addResult: true
+  }, options);
+  return combineExtensions([mdxExpression(settings), mdxJsx(settings), mdxMd]);
+}
+export {
+  mdxjs
+};

package/dist/rehype-collect-headers.js

@@ -1,5 +1,6 @@
-import { visit } from "unist-util-visit";
 import Slugger from "github-slugger";
+import { toHtml } from "hast-util-to-html";
+import { visit } from "unist-util-visit";
 function createCollectHeaders() {
   const headers = [];
   const slugger = new Slugger();
@@ -15,29 +16,31 @@ function createCollectHeaders() {
         if (!level)
           return;
         const depth = Number.parseInt(level);
-        let raw = "";
         let text = "";
         let isJSX = false;
-        visit(node, (child) => {
-          if (child.type === "element") {
+        visit(node, (child, _2, parent) => {
+          if (child.type === "element" || parent == null) {
             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("{");
+            if ((/* @__PURE__ */ new Set(["code", "pre"])).has(parent.tagName)) {
+              text += child.value;
+            } else {
+              text += child.value.replace(/\{/g, "${");
+              isJSX = isJSX || child.value.includes("{");
+            }
           }
         });
         node.properties = node.properties || {};
         if (typeof node.properties.id !== "string") {
           if (isJSX) {
-            node.properties.id = `$$slug(\`${text.replace(/\{/g, "${")}\`)`;
+            const raw = toHtml(node.children, { allowDangerousHtml: true }).replace(/\n(<)/g, "<").replace(/(>)\n/g, ">");
+            node.properties.id = `$$slug(\`${text}\`)`;
             node.type = "raw";
             node.value = `<${node.tagName} id={${node.properties.id}}>${raw}</${node.tagName}>`;
           } else {

package/dist/rehype-escape.js

@@ -4,6 +4,9 @@ function rehypeEscape() {
     return visit(node, "element", (el) => {
       if (el.tagName === "code" || el.tagName === "pre") {
         el.properties["is:raw"] = true;
+        visit(el, "raw", (raw) => {
+          raw.value = raw.value.replace(/</g, "&lt;").replace(/>/g, "&gt;");
+        });
       }
       return el;
     });

package/dist/rehype-jsx.d.ts

@@ -1 +1,2 @@
-export default function rehypeJsx(): any;
+import type { RehypePlugin } from './types.js';
+export default function rehypeJsx(): ReturnType<RehypePlugin>;

package/dist/rehype-jsx.js

@@ -1,69 +1,50 @@
-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";
-const MDX_ELEMENTS = /* @__PURE__ */ new Set(["mdxJsxFlowElement", "mdxJsxTextElement"]);
+import { visit } from "unist-util-visit";
+const MDX_ELEMENTS = ["mdxJsxFlowElement", "mdxJsxTextElement"];
 function rehypeJsx() {
-  return function(node) {
-    return map(node, (child) => {
-      if (child.type === "element") {
-        return __spreadProps(__spreadValues({}, child), { tagName: `${child.tagName}` });
+  return function(tree) {
+    visit(tree, MDX_ELEMENTS, (node, index, parent) => {
+      if (index === null || !Boolean(parent))
+        return;
+      const attrs = node.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 (node.children.length === 0) {
+        node.type = "raw";
+        node.value = `<${node.name}${attrs} />`;
+        return;
       }
-      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 (node.name === "a") {
+        visit(node, "element", (el, elIndex, elParent) => {
+          const isAutolink = el.tagName === "a" && el.children.length === 1 && el.children[0].type === "text" && el.children[0].value.match(/^(https?:\/\/|www\.)/i);
+          if (isAutolink) {
+            elParent.children.splice(elIndex, 1, el.children[0]);
           }
-          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: `Fragment`
         });
       }
-      return child;
+      const openingTag = {
+        type: "raw",
+        value: `
+<${node.name}${attrs}>`
+      };
+      const closingTag = {
+        type: "raw",
+        value: `</${node.name}>
+`
+      };
+      parent.children.splice(index, 1, openingTag, ...node.children, closingTag);
     });
   };
 }

package/dist/remark-mdxish.js

@@ -1,15 +1,50 @@
-import { mdxjs } from "micromark-extension-mdxjs";
 import { mdxFromMarkdown, mdxToMarkdown } from "./mdast-util-mdxish.js";
+import { mdxjs } from "./mdxjs.js";
 function remarkMdxish(options = {}) {
   const data = this.data();
   add("micromarkExtensions", mdxjs(options));
-  add("fromMarkdownExtensions", mdxFromMarkdown());
+  add("fromMarkdownExtensions", makeFromMarkdownLessStrict(mdxFromMarkdown()));
   add("toMarkdownExtensions", mdxToMarkdown());
   function add(field, value) {
     const list = data[field] ? data[field] : data[field] = [];
     list.push(value);
   }
 }
+function makeFromMarkdownLessStrict(extensions) {
+  extensions.forEach((extension) => {
+    ["mdxJsxFlowTag", "mdxJsxTextTag"].forEach((exitHandler) => {
+      if (!extension.exit || !extension.exit[exitHandler])
+        return;
+      extension.exit[exitHandler] = chainHandlers(fixSelfClosing, extension.exit[exitHandler]);
+    });
+  });
+  return extensions;
+}
+const selfClosingTags = /* @__PURE__ */ new Set([
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "link",
+  "meta",
+  "source",
+  "track",
+  "wbr"
+]);
+function fixSelfClosing() {
+  const tag = this.getData("mdxJsxTag");
+  if (tag.name && selfClosingTags.has(tag.name))
+    tag.selfClosing = true;
+}
+function chainHandlers(...handlers) {
+  return function handlerChain(token) {
+    handlers.forEach((handler) => handler.call(this, token));
+  };
+}
 export {
   remarkMdxish as default
 };

package/dist/remark-prism.js

@@ -1,7 +1,7 @@
-import { visit } from "unist-util-visit";
-import Prism from "prismjs";
 import { addAstro } from "@astrojs/prism/internal";
+import Prism from "prismjs";
 import loadLanguages from "prismjs/components/index.js";
+import { visit } from "unist-util-visit";
 const noVisit = /* @__PURE__ */ new Set(["root", "html", "text"]);
 const languageMap = /* @__PURE__ */ new Map([["ts", "typescript"]]);
 function runHighlighter(lang, code) {

package/dist/remark-shiki.d.ts

@@ -1,3 +1,3 @@
 import type { ShikiConfig } from './types.js';
-declare const remarkShiki: ({ langs, theme, wrap }: ShikiConfig, scopedClassName?: string | null | undefined) => Promise<() => (tree: any) => void>;
+declare const remarkShiki: ({ langs, theme, wrap }: ShikiConfig, scopedClassName?: string | null) => Promise<() => (tree: any) => void>;
 export default remarkShiki;

package/dist/remark-unwrap.js

@@ -1,4 +1,4 @@
-import { visit as _visit, SKIP } from "unist-util-visit";
+import { SKIP, visit as _visit } from "unist-util-visit";
 const visit = _visit;
 function remarkUnwrap() {
   const astroRootNodes = /* @__PURE__ */ new Set();

package/dist/types.d.ts

@@ -1,7 +1,7 @@
-import type * as unified from 'unified';
-import type * as mdast from 'mdast';
 import type * as hast from 'hast';
+import type * as mdast from 'mdast';
 import type { ILanguageRegistration, IThemeRegistration, Theme } from 'shiki';
+import type * as unified from 'unified';
 export type { Node } from 'unist';
 export declare type RemarkPlugin<PluginParameters extends any[] = any[]> = unified.Plugin<PluginParameters, mdast.Root>;
 export declare type RemarkPlugins = (string | [string, any] | RemarkPlugin | [RemarkPlugin, any])[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astrojs/markdown-remark",
-  "version": "0.10.1",
+  "version": "0.11.1",
   "type": "module",
   "author": "withastro",
   "license": "MIT",
@@ -16,14 +16,18 @@
     ".": "./dist/index.js"
   },
   "dependencies": {
+    "@astrojs/micromark-extension-mdx-jsx": "^1.0.3",
     "@astrojs/prism": "^0.4.1",
+    "acorn": "^8.7.1",
+    "acorn-jsx": "^5.3.2",
     "assert": "^2.0.0",
     "github-slugger": "^1.4.0",
     "mdast-util-mdx-expression": "^1.2.0",
     "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",
+    "micromark-extension-mdx-expression": "^1.0.3",
+    "micromark-extension-mdx-md": "^1.0.0",
+    "micromark-util-combine-extensions": "^1.0.0",
     "prismjs": "^1.28.0",
     "rehype-raw": "^6.1.1",
     "rehype-stringify": "^9.0.3",
@@ -47,6 +51,7 @@
     "@types/unist": "^2.0.6",
     "astro-scripts": "0.0.4",
     "chai": "^4.3.6",
+    "micromark-util-types": "^1.0.2",
     "mocha": "^9.2.2"
   },
   "scripts": {

package/src/index.ts

@@ -1,24 +1,24 @@
 import type { MarkdownRenderingOptions, MarkdownRenderingResult } from './types';
 
+import { loadPlugins } from './load-plugins.js';
 import createCollectHeaders from './rehype-collect-headers.js';
-import scopedStyles from './remark-scoped-styles.js';
+import rehypeEscape from './rehype-escape.js';
 import rehypeExpressions from './rehype-expressions.js';
 import rehypeIslands from './rehype-islands.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 remarkMarkAndUnravel from './remark-mark-and-unravel.js';
+import remarkMdxish from './remark-mdxish.js';
 import remarkPrism from './remark-prism.js';
+import scopedStyles from './remark-scoped-styles.js';
 import remarkShiki from './remark-shiki.js';
 import remarkUnwrap from './remark-unwrap.js';
-import { loadPlugins } from './load-plugins.js';
 
-import { unified } from 'unified';
+import Slugger from 'github-slugger';
+import rehypeRaw from 'rehype-raw';
+import rehypeStringify from 'rehype-stringify';
 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 { unified } from 'unified';
 import { VFile } from 'vfile';
 
 export * from './types.js';
@@ -99,16 +99,18 @@ export async function renderMarkdown(
 	parser
 		.use(isMDX ? [rehypeJsx, rehypeExpressions] : [rehypeRaw])
 		.use(rehypeEscape)
-		.use(rehypeIslands);
+		.use(rehypeIslands)
+		.use([rehypeCollectHeaders])
+		.use(rehypeStringify, { allowDangerousHtml: true });
 
 	let result: string;
 	try {
-		const vfile = await parser
-			.use([rehypeCollectHeaders])
-			.use(rehypeStringify, { allowDangerousHtml: true })
-			.process(input);
+		const vfile = await parser.process(input);
 		result = vfile.toString();
 	} catch (err) {
+		// Ensure that the error message contains the input filename
+		// to make it easier for the user to fix the issue
+		err = prefixError(err, `Failed to parse Markdown file "${input.path}"`);
 		console.error(err);
 		throw err;
 	}
@@ -118,3 +120,27 @@ export async function renderMarkdown(
 		code: result.toString(),
 	};
 }
+
+function prefixError(err: any, prefix: string) {
+	// If the error is an object with a `message` property, attempt to prefix the message
+	if (err && err.message) {
+		try {
+			err.message = `${prefix}:\n${err.message}`;
+			return err;
+		} catch (error) {
+			// Any errors here are ok, there's fallback code below
+		}
+	}
+
+	// If that failed, create a new error with the desired message and attempt to keep the stack
+	const wrappedError = new Error(`${prefix}${err ? `: ${err}` : ''}`);
+	try {
+		wrappedError.stack = err.stack;
+		// @ts-ignore
+		wrappedError.cause = err;
+	} catch (error) {
+		// It's ok if we could not set the stack or cause - the message is the most important part
+	}
+
+	return wrappedError;
+}

package/src/mdxjs.ts

@@ -0,0 +1,27 @@
+// Note: The code in this file is based on `micromark-extension-mdxjs`
+// and was adapted to use our fork `@astrojs/micromark-extension-mdx-jsx`
+// instead of `micromark-extension-mdx-jsx` to allow some extended syntax.
+// See `@astrojs/micromark-extension-mdx-jsx` on NPM for more details.
+// Also, support for ESM imports & exports in Markdown content was removed.
+
+import { mdxJsx } from '@astrojs/micromark-extension-mdx-jsx';
+import { Parser } from 'acorn';
+import acornJsx from 'acorn-jsx';
+import type { Options } from 'micromark-extension-mdx-expression';
+import { mdxExpression } from 'micromark-extension-mdx-expression';
+import { mdxMd } from 'micromark-extension-mdx-md';
+import { combineExtensions } from 'micromark-util-combine-extensions';
+import type { Extension } from 'micromark-util-types';
+
+export function mdxjs(options: Options): Extension {
+	const settings: any = Object.assign(
+		{
+			acorn: Parser.extend(acornJsx()),
+			acornOptions: { ecmaVersion: 2020, sourceType: 'module' },
+			addResult: true,
+		},
+		options
+	);
+
+	return combineExtensions([mdxExpression(settings), mdxJsx(settings), mdxMd]);
+}

package/src/rehype-collect-headers.ts

@@ -1,5 +1,6 @@
-import { visit } from 'unist-util-visit';
 import Slugger from 'github-slugger';
+import { toHtml } from 'hast-util-to-html';
+import { visit } from 'unist-util-visit';
 
 import type { MarkdownHeader, RehypePlugin } from './types.js';
 
@@ -17,32 +18,36 @@ export default function createCollectHeaders() {
 				if (!level) return;
 				const depth = Number.parseInt(level);
 
-				let raw = '';
 				let text = '';
 				let isJSX = false;
-				visit(node, (child) => {
-					if (child.type === 'element') {
+				visit(node, (child, _, parent) => {
+					if (child.type === 'element' || parent == null) {
 						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('{');
+						if (new Set(['code', 'pre']).has(parent.tagName)) {
+							text += child.value;
+						} else {
+							text += child.value.replace(/\{/g, '${');
+							isJSX = isJSX || child.value.includes('{');
+						}
 					}
 				});
 
 				node.properties = node.properties || {};
 				if (typeof node.properties.id !== 'string') {
 					if (isJSX) {
+						// HACK: serialized JSX from internal plugins, ignore these for slug
+						const raw = toHtml(node.children, { allowDangerousHtml: true })
+							.replace(/\n(<)/g, '<')
+							.replace(/(>)\n/g, '>');
 						// HACK: for ids that have JSX content, use $$slug helper to generate slug at runtime
-						node.properties.id = `$$slug(\`${text.replace(/\{/g, '${')}\`)`;
+						node.properties.id = `$$slug(\`${text}\`)`;
 						(node as any).type = 'raw';
 						(
 							node as any

package/src/rehype-escape.ts

@@ -1,10 +1,15 @@
-import { SKIP, visit } from 'unist-util-visit';
+import { visit } from 'unist-util-visit';
 
 export default function rehypeEscape(): any {
 	return function (node: any): any {
 		return visit(node, 'element', (el) => {
 			if (el.tagName === 'code' || el.tagName === 'pre') {
 				el.properties['is:raw'] = true;
+				// Visit all raw children and escape HTML tags to prevent Markdown code
+				// like "This is a `<script>` tag" from actually opening a script tag
+				visit(el, 'raw', (raw) => {
+					raw.value = raw.value.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+				});
 			}
 			return el;
 		});

package/src/rehype-jsx.ts

@@ -1,51 +1,65 @@
-import { map } from 'unist-util-map';
+import { visit } from 'unist-util-visit';
+import type { RehypePlugin } from './types.js';
 
-const MDX_ELEMENTS = new Set(['mdxJsxFlowElement', 'mdxJsxTextElement']);
-export default function rehypeJsx(): any {
-	return function (node: any): any {
-		return map(node, (child: any) => {
-			if (child.type === 'element') {
-				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}`;
-				}, '');
+const MDX_ELEMENTS = ['mdxJsxFlowElement', 'mdxJsxTextElement'];
 
-				if (child.children.length === 0) {
-					return {
-						type: 'raw',
-						value: `<${child.name}${attrs} />`,
-					};
+export default function rehypeJsx(): ReturnType<RehypePlugin> {
+	return function (tree) {
+		visit(tree, MDX_ELEMENTS, (node: any, index: number | null, parent: any) => {
+			if (index === null || !Boolean(parent)) return;
+
+			const attrs = node.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}"`;
 				}
-				child.children.splice(0, 0, {
-					type: 'raw',
-					value: `\n<${child.name}${attrs}>`,
-				});
-				child.children.push({
-					type: 'raw',
-					value: `</${child.name}>\n`,
+				if (!entry.name) {
+					return acc + ` ${attr}`;
+				}
+				return acc + ` ${entry.name}${attr ? '=' : ''}${attr}`;
+			}, '');
+
+			if (node.children.length === 0) {
+				node.type = 'raw';
+				node.value = `<${node.name}${attrs} />`;
+				return;
+			}
+
+			// If the current node is a JSX <a> element, remove autolinks from its children
+			// to prevent Markdown code like `<a href="/">**Go to www.example.com now!**</a>`
+			// from creating a nested link to `www.example.com`
+			if (node.name === 'a') {
+				visit(node, 'element', (el, elIndex, elParent) => {
+					const isAutolink =
+						el.tagName === 'a' &&
+						el.children.length === 1 &&
+						el.children[0].type === 'text' &&
+						el.children[0].value.match(/^(https?:\/\/|www\.)/i);
+
+					// If we found an autolink, remove it by replacing it with its text-only child
+					if (isAutolink) {
+						elParent.children.splice(elIndex, 1, el.children[0]);
+					}
 				});
-				return {
-					...child,
-					type: 'element',
-					tagName: `Fragment`,
-				};
 			}
-			return child;
+
+			// Replace the current node with its children
+			// wrapped by raw opening and closing tags
+			const openingTag = {
+				type: 'raw',
+				value: `\n<${node.name}${attrs}>`,
+			};
+			const closingTag = {
+				type: 'raw',
+				value: `</${node.name}>\n`,
+			};
+			parent.children.splice(index, 1, openingTag, ...node.children, closingTag);
 		});
 	};
 }

package/src/remark-mdxish.ts

@@ -1,11 +1,13 @@
-import { mdxjs } from 'micromark-extension-mdxjs';
+import type * as fromMarkdown from 'mdast-util-from-markdown';
+import type { Tag } from 'mdast-util-mdx-jsx';
 import { mdxFromMarkdown, mdxToMarkdown } from './mdast-util-mdxish.js';
+import { mdxjs } from './mdxjs.js';
 
 export default function remarkMdxish(this: any, options = {}) {
 	const data = this.data();
 
 	add('micromarkExtensions', mdxjs(options));
-	add('fromMarkdownExtensions', mdxFromMarkdown());
+	add('fromMarkdownExtensions', makeFromMarkdownLessStrict(mdxFromMarkdown()));
 	add('toMarkdownExtensions', mdxToMarkdown());
 
 	function add(field: string, value: unknown) {
@@ -13,3 +15,42 @@ export default function remarkMdxish(this: any, options = {}) {
 		list.push(value);
 	}
 }
+
+function makeFromMarkdownLessStrict(extensions: fromMarkdown.Extension[]) {
+	extensions.forEach((extension) => {
+		// Fix exit handlers that are too strict
+		['mdxJsxFlowTag', 'mdxJsxTextTag'].forEach((exitHandler) => {
+			if (!extension.exit || !extension.exit[exitHandler]) return;
+			extension.exit[exitHandler] = chainHandlers(fixSelfClosing, extension.exit[exitHandler]);
+		});
+	});
+
+	return extensions;
+}
+
+const selfClosingTags = new Set([
+	'area',
+	'base',
+	'br',
+	'col',
+	'embed',
+	'hr',
+	'img',
+	'input',
+	'link',
+	'meta',
+	'source',
+	'track',
+	'wbr',
+]);
+
+function fixSelfClosing(this: fromMarkdown.CompileContext) {
+	const tag = this.getData('mdxJsxTag') as Tag;
+	if (tag.name && selfClosingTags.has(tag.name)) tag.selfClosing = true;
+}
+
+function chainHandlers(...handlers: fromMarkdown.Handle[]) {
+	return function handlerChain(this: fromMarkdown.CompileContext, token: fromMarkdown.Token) {
+		handlers.forEach((handler) => handler.call(this, token));
+	};
+}

package/src/remark-prism.ts

@@ -1,7 +1,7 @@
-import { visit } from 'unist-util-visit';
-import Prism from 'prismjs';
 import { addAstro } from '@astrojs/prism/internal';
+import Prism from 'prismjs';
 import loadLanguages from 'prismjs/components/index.js';
+import { visit } from 'unist-util-visit';
 const noVisit = new Set(['root', 'html', 'text']);
 
 const languageMap = new Map([['ts', 'typescript']]);

package/src/remark-unwrap.ts

@@ -1,4 +1,4 @@
-import { visit as _visit, SKIP } from 'unist-util-visit';
+import { SKIP, visit as _visit } from 'unist-util-visit';
 
 // This is a workaround.
 // It fixes a compatibility issue between different, incompatible ASTs given by plugins to Unist

package/src/types.ts

@@ -1,7 +1,7 @@
-import type * as unified from 'unified';
-import type * as mdast from 'mdast';
 import type * as hast from 'hast';
+import type * as mdast from 'mdast';
 import type { ILanguageRegistration, IThemeRegistration, Theme } from 'shiki';
+import type * as unified from 'unified';
 
 export type { Node } from 'unist';
 

package/test/autolinking.test.js

@@ -0,0 +1,92 @@
+import { renderMarkdown } from '../dist/index.js';
+import chai from 'chai';
+
+describe('autolinking', () => {
+	it('autolinks URLs starting with a protocol in plain text', async () => {
+		const { code } = await renderMarkdown(`See https://example.com for more.`, {});
+
+		chai
+			.expect(code.replace(/\n/g, ''))
+			.to.equal(`<p>See <a href="https://example.com">https://example.com</a> for more.</p>`);
+	});
+
+	it('autolinks URLs starting with "www." in plain text', async () => {
+		const { code } = await renderMarkdown(`See www.example.com for more.`, {});
+
+		chai
+			.expect(code.trim())
+			.to.equal(`<p>See <a href="http://www.example.com">www.example.com</a> for more.</p>`);
+	});
+
+	it('does not autolink URLs in code blocks', async () => {
+		const { code } = await renderMarkdown(
+			'See `https://example.com` or `www.example.com` for more.',
+			{}
+		);
+
+		chai
+			.expect(code.trim())
+			.to.equal(
+				`<p>See <code is:raw>https://example.com</code> or ` +
+					`<code is:raw>www.example.com</code> for more.</p>`
+			);
+	});
+
+	it('does not autolink URLs in fenced code blocks', async () => {
+		const { code } = await renderMarkdown(
+			'Example:\n```\nGo to https://example.com or www.example.com now.\n```',
+			{}
+		);
+
+		chai
+			.expect(code)
+			.to.contain(`<pre is:raw`)
+			.to.contain(`Go to https://example.com or www.example.com now.`);
+	});
+
+	it('does not autolink URLs starting with a protocol when nested inside links', async () => {
+		const { code } = await renderMarkdown(
+			`See [http://example.com](http://example.com) or ` +
+				`<a test href="https://example.com">https://example.com</a>`,
+			{}
+		);
+
+		chai
+			.expect(code.replace(/\n/g, ''))
+			.to.equal(
+				`<p>See <a href="http://example.com">http://example.com</a> or ` +
+					`<a test href="https://example.com">https://example.com</a></p>`
+			);
+	});
+
+	it('does not autolink URLs starting with "www." when nested inside links', async () => {
+		const { code } = await renderMarkdown(
+			`See [www.example.com](https://www.example.com) or ` +
+				`<a test href="https://www.example.com">www.example.com</a>`,
+			{}
+		);
+
+		chai
+			.expect(code.replace(/\n/g, ''))
+			.to.equal(
+				`<p>See <a href="https://www.example.com">www.example.com</a> or ` +
+					`<a test href="https://www.example.com">www.example.com</a></p>`
+			);
+	});
+
+	it('does not autolink URLs when nested several layers deep inside links', async () => {
+		const { code } = await renderMarkdown(
+			`<a href="https://www.example.com">**Visit _our www.example.com or ` +
+				`http://localhost pages_ for more!**</a>`,
+			{}
+		);
+
+		chai
+			.expect(code.replace(/\n/g, ''))
+			.to.equal(
+				`<a href="https://www.example.com"><strong>` +
+					`Visit <em>our www.example.com or http://localhost pages</em> for more!` +
+					`</strong></a>`
+			);
+	});
+});

package/test/components.test.js

@@ -49,9 +49,18 @@ describe('components', () => {
 	it('should normalize children', async () => {
 		const { code } = await renderMarkdown(`<Component bool={true}>Hello world!</Component>`, {});
 
+		chai.expect(code).to.equal(`\n<Component bool={true}>Hello world!</Component>\n`);
+	});
+
+	it('should be able to nest components', async () => {
+		const { code } = await renderMarkdown(
+			`<Component bool={true}><Component>Hello world!</Component></Component>`,
+			{}
+		);
+
 		chai
 			.expect(code)
-			.to.equal(`<Fragment>\n<Component bool={true}>Hello world!</Component>\n</Fragment>`);
+			.to.equal(`\n<Component bool={true}>\n<Component>Hello world!</Component>\n</Component>\n`);
 	});
 
 	it('should allow markdown without many spaces', async () => {
@@ -62,10 +71,6 @@ describe('components', () => {
 			{}
 		);
 
-		chai
-			.expect(code)
-			.to.equal(
-				`<Fragment>\n<Component><h1 id="hello-world">Hello world!</h1></Component>\n</Fragment>`
-			);
+		chai.expect(code).to.equal(`\n<Component><h1 id="hello-world">Hello world!</h1></Component>\n`);
 	});
 });

package/test/expressions.test.js

@@ -2,7 +2,7 @@ import { renderMarkdown } from '../dist/index.js';
 import chai from 'chai';
 
 describe('expressions', () => {
-	it('should be able to serialize bare expession', async () => {
+	it('should be able to serialize bare expression', async () => {
 		const { code } = await renderMarkdown(`{a}`, {});
 
 		chai.expect(code).to.equal(`{a}`);
@@ -11,7 +11,7 @@ describe('expressions', () => {
 	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>`);
+		chai.expect(code).to.equal(`\n<Component>{a}</Component>\n`);
 	});
 
 	it('should be able to serialize expression inside markdown', async () => {
@@ -40,6 +40,37 @@ describe('expressions', () => {
 			);
 	});
 
+	it('should be able to avoid evaluating JSX-like expressions in an inline code & generate a slug for id', async () => {
+		const { code } = await renderMarkdown(`# \`{frontmatter.title}\``, {});
+
+		chai
+			.expect(code)
+			.to.equal('<h1 id="frontmattertitle"><code is:raw>{frontmatter.title}</code></h1>');
+	});
+
+	it('should be able to avoid evaluating JSX-like expressions in inline codes', async () => {
+		const { code } = await renderMarkdown(`# \`{ foo }\` is a shorthand for \`{ foo: foo }\``, {});
+
+		chai
+			.expect(code)
+			.to.equal(
+				'<h1 id="-foo--is-a-shorthand-for--foo-foo-"><code is:raw>{ foo }</code> is a shorthand for <code is:raw>{ foo: foo }</code></h1>'
+			);
+	});
+
+	it('should be able to avoid evaluating JSX-like expressions & escape HTML tag characters in inline codes', async () => {
+		const { code } = await renderMarkdown(
+			`###### \`{}\` is equivalent to \`Record<never, never>\` <small>(at TypeScript v{frontmatter.version})</small>`,
+			{}
+		);
+
+		chai
+			.expect(code)
+			.to.equal(
+				`<h6 id={$$slug(\`{} is equivalent to Record&lt;never, never&gt; (at TypeScript v\${frontmatter.version})\`)}><code is:raw>{}</code> is equivalent to <code is:raw>Record&lt;never, never&gt;</code> <small>(at TypeScript v{frontmatter.version})</small></h6>`
+			);
+	});
+
 	it('should be able to serialize function expression', async () => {
 		const { code } = await renderMarkdown(
 			`{frontmatter.list.map(item => <p id={item}>{item}</p>)}`,

package/test/strictness.test.js

@@ -0,0 +1,99 @@
+import { renderMarkdown } from '../dist/index.js';
+import chai from 'chai';
+
+describe('strictness', () => {
+	it('should allow self-closing HTML tags (void elements)', async () => {
+		const { code } = await renderMarkdown(
+			`Use self-closing void elements<br>like word<wbr>break and images: <img src="hi.jpg">`,
+			{}
+		);
+
+		chai
+			.expect(code)
+			.to.equal(
+				`<p>Use self-closing void elements<br />like word<wbr />break and images: ` +
+					`<img src="hi.jpg" /></p>`
+			);
+	});
+
+	it('should allow attribute names starting with ":" after element names', async () => {
+		const { code } = await renderMarkdown(`<div :class="open ? '' : 'hidden'">Test</div>`, {});
+
+		chai.expect(code.trim()).to.equal(`<div :class="open ? '' : 'hidden'">Test</div>`);
+	});
+
+	it('should allow attribute names starting with ":" after local element names', async () => {
+		const { code } = await renderMarkdown(`<div.abc :class="open ? '' : 'hidden'">x</div.abc>`, {});
+
+		chai.expect(code.trim()).to.equal(`<div.abc :class="open ? '' : 'hidden'">x</div.abc>`);
+	});
+
+	it('should allow attribute names starting with ":" after attribute names', async () => {
+		const { code } = await renderMarkdown(`<input type="text" disabled :placeholder="hi">`, {});
+
+		chai.expect(code.trim()).to.equal(`<input type="text" disabled :placeholder="hi" />`);
+	});
+
+	it('should allow attribute names starting with ":" after local attribute names', async () => {
+		const { code } = await renderMarkdown(
+			`<input type="text" x-test:disabled :placeholder="hi">`,
+			{}
+		);
+
+		chai.expect(code.trim()).to.equal(`<input type="text" x-test:disabled :placeholder="hi" />`);
+	});
+
+	it('should allow attribute names starting with ":" after attribute values', async () => {
+		const { code } = await renderMarkdown(`<input type="text" :placeholder="placeholder">`, {});
+
+		chai.expect(code.trim()).to.equal(`<input type="text" :placeholder="placeholder" />`);
+	});
+
+	it('should allow attribute names starting with "@" after element names', async () => {
+		const { code } = await renderMarkdown(`<button @click="handleClick">Test</button>`, {});
+
+		chai.expect(code.trim()).to.equal(`<button @click="handleClick">Test</button>`);
+	});
+
+	it('should allow attribute names starting with "@" after local element names', async () => {
+		const { code } = await renderMarkdown(
+			`<button.local @click="handleClick">Test</button.local>`,
+			{}
+		);
+
+		chai.expect(code.trim()).to.equal(`<button.local @click="handleClick">Test</button.local>`);
+	});
+
+	it('should allow attribute names starting with "@" after attribute names', async () => {
+		const { code } = await renderMarkdown(
+			`<button disabled @click="handleClick">Test</button>`,
+			{}
+		);
+
+		chai.expect(code.trim()).to.equal(`<button disabled @click="handleClick">Test</button>`);
+	});
+
+	it('should allow attribute names starting with "@" after local attribute names', async () => {
+		const { code } = await renderMarkdown(
+			`<button x-test:disabled @click="handleClick">Test</button>`,
+			{}
+		);
+
+		chai.expect(code.trim()).to.equal(`<button x-test:disabled @click="handleClick">Test</button>`);
+	});
+
+	it('should allow attribute names starting with "@" after attribute values', async () => {
+		const { code } = await renderMarkdown(
+			`<button type="submit" @click="handleClick">Test</button>`,
+			{}
+		);
+
+		chai.expect(code.trim()).to.equal(`<button type="submit" @click="handleClick">Test</button>`);
+	});
+
+	it('should allow attribute names containing dots', async () => {
+		const { code } = await renderMarkdown(`<input x-on:input.debounce.500ms="fetchResults">`, {});
+
+		chai.expect(code.trim()).to.equal(`<input x-on:input.debounce.500ms="fetchResults" />`);
+	});
+});