@astrojs/markdown-remark 0.10.2 → 0.11.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @astrojs/markdown-remark
 
+## 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

package/dist/index.js

@@ -80,6 +80,7 @@ async function renderMarkdown(content, opts = {}) {
     const vfile = await parser.use([rehypeCollectHeaders]).use(rehypeStringify, { allowDangerousHtml: true }).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/rehype-collect-headers.js

@@ -1,4 +1,5 @@
 import { visit } from "unist-util-visit";
+import { toHtml } from "hast-util-to-html";
 import Slugger from "github-slugger";
 function createCollectHeaders() {
   const headers = [];
@@ -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/remark-mdxish.js

@@ -3,13 +3,48 @@ import { mdxFromMarkdown, mdxToMarkdown } from "./mdast-util-mdxish.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astrojs/markdown-remark",
-  "version": "0.10.2",
+  "version": "0.11.0",
   "type": "module",
   "author": "withastro",
   "license": "MIT",

package/src/index.ts

@@ -109,6 +109,9 @@ export async function renderMarkdown(
 			.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 +121,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/rehype-collect-headers.ts

@@ -1,4 +1,5 @@
 import { visit } from 'unist-util-visit';
+import { toHtml } from 'hast-util-to-html';
 import Slugger from 'github-slugger';
 
 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/remark-mdxish.ts

@@ -1,11 +1,13 @@
 import { mdxjs } from 'micromark-extension-mdxjs';
 import { mdxFromMarkdown, mdxToMarkdown } from './mdast-util-mdxish.js';
+import type * as fromMarkdown from 'mdast-util-from-markdown';
+import type { Tag } from 'mdast-util-mdx-jsx';
 
 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/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}`);
@@ -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,18 @@
+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>`
+			);
+	});
+});