Allow AlpineJS syntax extensions in Markdown (#3554)

* Allow AlpineJS syntax extensions in Markdown

* Remove unwanted MDX ESM import/export support

2 files changed, 32 insertions, 1 deletions

diff --git a/packages/markdown/remark/src/mdxjs.ts b/packages/markdown/remark/src/mdxjs.ts
new file mode 100644
index 000000000..b00c3eb80
--- /dev/null
+++ b/packages/markdown/remark/src/mdxjs.ts
@@ -0,0 +1,31 @@
+// 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 { Parser } from 'acorn';
+import acornJsx from 'acorn-jsx';
+import { combineExtensions } from 'micromark-util-combine-extensions';
+import { mdxExpression } from 'micromark-extension-mdx-expression';
+import { mdxJsx } from '@astrojs/micromark-extension-mdx-jsx';
+import { mdxMd } from 'micromark-extension-mdx-md';
+import type { Options } from 'micromark-extension-mdx-expression';
+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
+	]);
+}
diff --git a/packages/markdown/remark/src/remark-mdxish.ts b/packages/markdown/remark/src/remark-mdxish.ts
index 71f36042a..7911f5ec9 100644
--- a/packages/markdown/remark/src/remark-mdxish.ts
+++ b/packages/markdown/remark/src/remark-mdxish.ts
@@ -1,6 +1,6 @@
 import type * as fromMarkdown from 'mdast-util-from-markdown';
 import type { Tag } from 'mdast-util-mdx-jsx';
-import { mdxjs } from 'micromark-extension-mdxjs';
+import { mdxjs } from './mdxjs.js';
 import { mdxFromMarkdown, mdxToMarkdown } from './mdast-util-mdxish.js';
 
 export default function remarkMdxish(this: any, options = {}) {