ensure transformed link tags don't remove chlidren

Author: pngwn

src/format/links.test.ts

@@ -4,51 +4,67 @@ import * as assert from "uvu/assert";
 import { Root, Paragraph } from "mdast";
 import unified from "unified";
 import markdown from "remark-parse";
+import rehype from "remark-rehype";
+import stringify from "rehype-stringify";
 
 import { set_link_attributes } from "./links";
 
-const processor = unified().use(markdown).use(set_link_attributes);
+const { process } = unified()
+	.use(markdown)
+	.use(rehype)
+	.use(set_link_attributes)
+	.use(stringify);
 
 const _links = suite("links");
 
 _links("renders link", async () => {
 	const src = `[a link](/local/path/to/file)`;
-	const output = (await processor.run(processor.parse(src))) as Root;
+	const output = await process(src);
 
-	assert.is((output.children[0] as Paragraph).children[0].type, "html");
 	assert.is(
-		(output.children[0] as Paragraph).children[0].value,
-		'<a href="http://github.com/local/path/to/file" rel="noopener noreferrer">a link</a>'
+		output.contents,
+		'<p><a href="http://github.com/local/path/to/file" rel="noopener noreferrer">a link</a></p>'
 	);
 });
 
 _links("renders link with title attribute", async () => {
 	const src = `[a link](/local/path/to/file "about my link")`;
-	const output = (await processor.run(processor.parse(src))) as Root;
+	const output = await process(src);
 
 	assert.is(
-		(output.children[0] as Paragraph).children[0].value,
-		'<a href="http://github.com/local/path/to/file" title="about my link" rel="noopener noreferrer">a link</a>'
+		output.contents,
+		'<p><a href="http://github.com/local/path/to/file" title="about my link" rel="noopener noreferrer">a link</a></p>'
 	);
 });
 
 _links("renders external links with target _blank: no title", async () => {
 	const src = `[a link](https://google.com)`;
-	const output = (await processor.run(processor.parse(src))) as Root;
+	const output = await process(src);
 
 	assert.is(
-		(output.children[0] as Paragraph).children[0].value,
-		'<a href="https://google.com/" target="_blank" rel="noopener noreferrer">a link</a>'
+		output.contents,
+		'<p><a href="https://google.com/" target="_blank" rel="noopener noreferrer">a link</a></p>'
 	);
 });
 
-_links("renders external links with target _blank: no title", async () => {
+_links("renders external links with target _blank: title", async () => {
 	const src = `[a link](https://google.com "a search engine")`;
-	const output = (await processor.run(processor.parse(src))) as Root;
+	const output = await process(src);
+
+	assert.is(
+		output.contents,
+		'<p><a href="https://google.com" title="a search engine" target="_blank" rel="noopener noreferrer">a link</a></p>'
+	);
+});
+
+_links("renders links containing multiple child nodes", async () => {
+	const src =
+		"[CommonJS packages in `noExternal`](https://github.com/vitejs/vite/issues/2579)";
+	const output = await process(src);
 
 	assert.is(
-		(output.children[0] as Paragraph).children[0].value,
-		'<a href="https://google.com" target="_blank" title="a search engine" rel="noopener noreferrer">a link</a>'
+		output.contents,
+		'<p><a href="https://github.com/vitejs/vite/issues/2579" target="_blank" rel="noopener noreferrer">CommonJS packages in <code>noExternal</code></a></p>'
 	);
 });
 

src/format/links.ts

@@ -1,28 +1,31 @@
 import type { Transformer } from "unified";
-import type { Link, HTML } from "mdast";
+import type { Node } from "unist";
+import type { Link, HTML, Parent } from "mdast";
 
 import visit from "unist-util-visit";
 
+interface Element extends Node {
+	properties: {
+		href?: string;
+		target?: string;
+		rel?: string;
+	};
+}
 /**
  * All links must have `rel="noopener noreferrer"` and external attributes
  * 				must open in a new window.
  */
 export function set_link_attributes(): Transformer {
 	return function transformer(tree) {
-		visit(tree, "link", (node: Link) => {
-			let target_attr = "";
-			let title_attr = "";
+		visit<Element>(tree, "element", (node) => {
+			// console.log(node);
+			if (node.tagName === "a") {
+				if (node.properties.href && node.properties.href.startsWith("http")) {
+					node.properties.target = "_blank";
+				}
 
-			if (node.url.startsWith("http")) {
-				target_attr = ' target="_blank"';
+				node.properties.rel = "noopener noreferrer";
 			}
-
-			if (node.title !== null) {
-				title_attr = ` title="${node.title}"`;
-			}
-
-			((node as unknown) as HTML).type = "html";
-			((node as unknown) as HTML).value = `<a href="${node.url}"${target_attr}${title_attr} rel="noopener noreferrer">${node.children[0].value}</a>`;
 		});
 	};
 }