MDX integration v3 (#10935)

* fix(mdx): convert remark-images-to-component plugin to a rehype plugin (#10697)

* Remove fs read for MDX transform (#10866)

* Tag MDX component for faster checks when rendering (#10864)

* Use unified plugin only for MDX transform (#10869)

* Only traverse children and handle mdxJsxTextElement when optimizing (#10885)

* Rename to `optimize.ignoreComponentNames` in MDX (#10884)

* Allow remark/rehype plugins added after mdx to work (#10877)

* Improve MDX optimize with sibling nodes (#10887)

* Improve types in rehype-optimize-static.ts

* Rename `ignoreComponentNames` to `ignoreElementNames`

I think this better reflects what it's actually doing

* Simplify plain MDX nodes in optimize option (#10934)

* Format code

* Minimize diff changes

* Update .changeset/slimy-cobras-end.md

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

---------

Co-authored-by: Armand Philippot <59021693+ArmandPhilippot@users.noreply.github.com>
Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

1 files changed, 89 insertions, 0 deletions

diff --git a/packages/integrations/mdx/test/units/rehype-optimize-static.test.js b/packages/integrations/mdx/test/units/rehype-optimize-static.test.js
new file mode 100644
index 000000000..132f3849f
--- /dev/null
+++ b/packages/integrations/mdx/test/units/rehype-optimize-static.test.js
@@ -0,0 +1,89 @@
+import assert from 'node:assert/strict';
+import { describe, it } from 'node:test';
+import { compile as _compile } from '@mdx-js/mdx';
+import { rehypeOptimizeStatic } from '../../dist/rehype-optimize-static.js';
+
+/**
+ * @param {string} mdxCode
+ * @param {Readonly<import('@mdx-js/mdx').CompileOptions>} options
+ */
+async function compile(mdxCode, options) {
+	const result = await _compile(mdxCode, {
+		jsx: true,
+		rehypePlugins: [rehypeOptimizeStatic],
+		...options,
+	});
+	const code = result.toString();
+	// Capture the returned JSX code for testing
+	const jsx = code.match(/return (.+);\n\}\nexport default function MDXContent/s)?.[1];
+	if (jsx == null) throw new Error('Could not find JSX code in compiled MDX');
+	return dedent(jsx);
+}
+
+function dedent(str) {
+	const lines = str.split('\n');
+	if (lines.length <= 1) return str;
+	// Get last line indent, and dedent this amount for the other lines
+	const lastLineIndent = lines[lines.length - 1].match(/^\s*/)[0].length;
+	return lines.map((line, i) => (i === 0 ? line : line.slice(lastLineIndent))).join('\n');
+}
+
+describe('rehype-optimize-static', () => {
+	it('works', async () => {
+		const jsx = await compile(`# hello`);
+		assert.equal(
+			jsx,
+			`\
+<_components.h1 {...{
+  "set:html": "hello"
+}} />`
+		);
+	});
+
+	it('groups sibling nodes as a single Fragment', async () => {
+		const jsx = await compile(`\
+# hello
+
+foo bar
+`);
+		assert.equal(
+			jsx,
+			`\
+<Fragment set:html="<h1>hello</h1>
+<p>foo bar</p>" />`
+		);
+	});
+
+	it('skips optimization of components', async () => {
+		const jsx = await compile(`\
+import Comp from './Comp.jsx';
+
+# hello
+
+This is a <Comp />
+`);
+		assert.equal(
+			jsx,
+			`\
+<><Fragment set:html="<h1>hello</h1>
+" /><_components.p>{"This is a "}<Comp /></_components.p></>`
+		);
+	});
+
+	it('optimizes explicit html elements', async () => {
+		const jsx = await compile(`\
+# hello
+
+foo <strong>bar</strong> baz
+
+<strong>qux</strong>
+`);
+		assert.equal(
+			jsx,
+			`\
+<Fragment set:html="<h1>hello</h1>
+<p>foo <strong>bar</strong> baz</p>
+<strong>qux</strong>" />`
+		);
+	});
+});