@astrojs/markdown-remark 0.10.1 → 0.10.2

package/CHANGELOG.md

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

@@ -1,69 +1,45 @@
-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}` });
-      }
-      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} />`
-          };
+    visit(node, "element", (child) => {
+      child.tagName = `${child.tagName}`;
+    });
+    visit(node, MDX_ELEMENTS, (child, index, parent) => {
+      if (index === null || !Boolean(parent))
+        return;
+      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}"`;
         }
-        child.children.splice(0, 0, {
-          type: "raw",
-          value: `
+        if (!entry.name) {
+          return acc + ` ${attr}`;
+        }
+        return acc + ` ${entry.name}${attr ? "=" : ""}${attr}`;
+      }, "");
+      if (child.children.length === 0) {
+        child.type = "raw";
+        child.value = `<${child.name}${attrs} />`;
+        return;
+      }
+      const openingTag = {
+        type: "raw",
+        value: `
 <${child.name}${attrs}>`
-        });
-        child.children.push({
-          type: "raw",
-          value: `</${child.name}>
+      };
+      const closingTag = {
+        type: "raw",
+        value: `</${child.name}>
 `
-        });
-        return __spreadProps(__spreadValues({}, child), {
-          type: "element",
-          tagName: `Fragment`
-        });
-      }
-      return child;
+      };
+      parent.children.splice(index, 1, openingTag, ...child.children, closingTag);
     });
   };
 }

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/package.json

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

package/src/rehype-escape.ts

@@ -5,6 +5,11 @@ export default function rehypeEscape(): 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,48 @@
-import { map } from 'unist-util-map';
+import { visit } from 'unist-util-visit';
 
-const MDX_ELEMENTS = new Set(['mdxJsxFlowElement', 'mdxJsxTextElement']);
+const MDX_ELEMENTS = ['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}`;
-				}, '');
+		visit(node, 'element', (child: any) => {
+			child.tagName = `${child.tagName}`;
+		});
+		visit(node, MDX_ELEMENTS, (child: any, index: number | null, parent: any) => {
+			if (index === null || !Boolean(parent)) return;
 
-				if (child.children.length === 0) {
-					return {
-						type: 'raw',
-						value: `<${child.name}${attrs} />`,
-					};
+			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}`;
 				}
-				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: `Fragment`,
-				};
+				return acc + ` ${entry.name}${attr ? '=' : ''}${attr}`;
+			}, '');
+
+			if (child.children.length === 0) {
+				child.type = 'raw';
+				child.value = `<${child.name}${attrs} />`;
+				return;
 			}
-			return child;
+
+			// Replace the current child node with its children
+			// wrapped by raw opening and closing tags
+			const openingTag = {
+				type: 'raw',
+				value: `\n<${child.name}${attrs}>`,
+			};
+			const closingTag = {
+				type: 'raw',
+				value: `</${child.name}>\n`,
+			};
+			parent.children.splice(index, 1, openingTag, ...child.children, closingTag);
 		});
 	};
 }

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

@@ -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 () => {