test(e2e): add mdx + framework tests

packages/astro/e2e/fixtures/preact-component/astro.config.mjs

@@ -1,7 +1,8 @@
 import { defineConfig } from 'astro/config';
 import preact from '@astrojs/preact';
+import mdx from '@astrojs/mdx';
 
 // https://astro.build/config
 export default defineConfig({
-	integrations: [preact()],
+	integrations: [preact(), mdx()],
 });

packages/astro/e2e/fixtures/preact-component/package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@astrojs/preact": "workspace:*",
+    "@astrojs/mdx": "workspace:*",
     "astro": "workspace:*",
     "preact": "^10.7.3"
   }

packages/astro/e2e/fixtures/preact-component/src/pages/mdx.mdx

@@ -0,0 +1,29 @@
+
+import Counter from '../components/Counter.jsx';
+import PreactComponent from '../components/JSXComponent.jsx';
+
+export const someProps = {
+	count: 0,
+};
+
+<Counter id="server-only" {...someProps}>
+	# Hello, server!
+</Counter>
+
+<Counter id="client-idle" {...someProps} client:idle>
+	# Hello, client:idle!
+</Counter>
+
+<Counter id="client-load" {...someProps} client:load>
+	# Hello, client:load!
+</Counter>
+
+<Counter id="client-visible" {...someProps} client:visible>
+	# Hello, client:visible!
+</Counter>
+
+<Counter id="client-media" {...someProps} client:media="(max-width: 50em)">
+	# Hello, client:media!
+</Counter>
+
+<PreactComponent id="client-only" client:only="preact" />

packages/astro/e2e/fixtures/react-component/astro.config.mjs

@@ -1,7 +1,8 @@
 import { defineConfig } from 'astro/config';
 import react from '@astrojs/react';
+import mdx from '@astrojs/mdx';
 
 // https://astro.build/config
 export default defineConfig({
-	integrations: [react()],
+	integrations: [react(), mdx()],
 });

packages/astro/e2e/fixtures/react-component/package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "@astrojs/react": "workspace:*",
     "astro": "workspace:*",
+    "@astrojs/mdx": "workspace:*",
     "react": "^18.1.0",
     "react-dom": "^18.1.0"
   }

packages/astro/e2e/fixtures/react-component/src/pages/mdx.mdx

@@ -0,0 +1,28 @@
+import Counter from '../components/Counter.jsx';
+import ReactComponent from '../components/JSXComponent.jsx';
+
+export const someProps = {
+	count: 0,
+};
+
+<Counter id="server-only" {...someProps}>
+	# Hello, server!
+</Counter>
+
+<Counter id="client-idle" {...someProps} client:idle>
+	# Hello, client:idle!
+</Counter>
+
+<Counter id="client-load" {...someProps} client:load>
+	# Hello, client:load!
+</Counter>
+
+<Counter id="client-visible" {...someProps} client:visible>
+	# Hello, client:visible!
+</Counter>
+
+<Counter id="client-media" {...someProps} client:media="(max-width: 50em)">
+	# Hello, client:media!
+</Counter>
+
+<ReactComponent id="client-only" client:only="react" />

packages/astro/e2e/fixtures/solid-component/astro.config.mjs

@@ -1,7 +1,8 @@
 import { defineConfig } from 'astro/config';
+import mdx from '@astrojs/mdx';
 import solid from '@astrojs/solid-js';
 
 // https://astro.build/config
 export default defineConfig({
-	integrations: [solid()],
+	integrations: [solid(), mdx()],
 });

packages/astro/e2e/fixtures/solid-component/package.json

@@ -4,7 +4,8 @@
   "private": true,
   "dependencies": {
     "@astrojs/solid-js": "workspace:*",
-    "astro": "workspace:*"
+    "astro": "workspace:*",
+    "@astrojs/mdx": "workspace:*"
   },
   "devDependencies": {
     "solid-js": "^1.4.3"

packages/astro/e2e/fixtures/solid-component/src/pages/mdx.mdx

@@ -0,0 +1,28 @@
+import Counter from '../components/Counter.jsx';
+import SolidComponent from '../components/SolidComponent.jsx';
+
+export const someProps = {
+	count: 0,
+};
+
+<Counter id="server-only" {...someProps}>
+	# Hello, server!
+</Counter>
+
+<Counter id="client-idle" {...someProps} client:idle>
+	# Hello, client:idle!
+</Counter>
+
+<Counter id="client-load" {...someProps} client:load>
+	# Hello, client:load!
+</Counter>
+
+<Counter id="client-visible" {...someProps} client:visible>
+	# Hello, client:visible!
+</Counter>
+
+<Counter id="client-media" {...someProps} client:media="(max-width: 50em)">
+	# Hello, client:media!
+</Counter>
+
+<SolidComponent id="client-only" client:only="solid" />

packages/astro/e2e/fixtures/svelte-component/astro.config.mjs

@@ -1,7 +1,8 @@
 import { defineConfig } from 'astro/config';
 import svelte from '@astrojs/svelte';
+import mdx from '@astrojs/mdx';
 
 // https://astro.build/config
 export default defineConfig({
-	integrations: [svelte()],
+	integrations: [svelte(), mdx()],
 });

packages/astro/e2e/fixtures/svelte-component/package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "@astrojs/svelte": "workspace:*",
     "astro": "workspace:*",
+    "@astrojs/mdx": "workspace:*",
     "svelte": "^3.48.0"
   }
 }

packages/astro/e2e/fixtures/svelte-component/src/pages/mdx.mdx

@@ -0,0 +1,28 @@
+import Counter from '../components/Counter.svelte';
+import SvelteComponent from '../components/SvelteComponent.svelte';
+
+export const someProps = {
+	count: 0,
+};
+
+<Counter id="server-only" {...someProps}>
+	# Hello, server!
+</Counter>
+
+<Counter id="client-idle" {...someProps} client:idle>
+	# Hello, client:idle!
+</Counter>
+
+<Counter id="client-load" {...someProps} client:load>
+	# Hello, client:load!
+</Counter>
+
+<Counter id="client-visible" {...someProps} client:visible>
+	# Hello, client:visible!
+</Counter>
+
+<Counter id="client-media" {...someProps} client:media="(max-width: 50em)">
+	# Hello, client:media!
+</Counter>
+
+<SvelteComponent id="client-only" client:only="svelte" />

packages/astro/e2e/fixtures/vue-component/astro.config.mjs

@@ -1,13 +1,17 @@
 import { defineConfig } from 'astro/config';
 import vue from '@astrojs/vue';
+import mdx from '@astrojs/mdx';
 
 // https://astro.build/config
 export default defineConfig({
-	integrations: [vue({
-		template: {
-			compilerOptions: {
-				isCustomElement: tag => tag.includes('my-button')
+	integrations: [
+		mdx(),
+		vue({
+			template: {
+				compilerOptions: {
+					isCustomElement: tag => tag.includes('my-button')
+				}
 			}
 		}
-	})],
+	)],
 });

packages/astro/e2e/fixtures/vue-component/package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@astrojs/vue": "workspace:*",
-    "astro": "workspace:*"
+    "astro": "workspace:*",
+    "@astrojs/mdx": "workspace:*"
   }
 }

packages/astro/e2e/preact-component.test.js

@@ -17,3 +17,11 @@ test.describe('Preact components in Markdown files', () => {
 		componentFilePath: './src/components/JSXComponent.jsx',
 	});
 });
+
+test.describe('Preact components in MDX files', () => {
+	createTests({
+		pageUrl: '/mdx/',
+		pageSourceFilePath: './src/pages/mdx.md',
+		componentFilePath: './src/components/JSXComponent.jsx',
+	});
+});

packages/astro/e2e/react-component.test.js

@@ -17,3 +17,11 @@ test.describe('React components in Markdown files', () => {
 		componentFilePath: './src/components/JSXComponent.jsx',
 	});
 });
+
+test.describe('React components in MDX files', () => {
+	createTests({
+		pageUrl: '/mdx/',
+		pageSourceFilePath: './src/pages/mdx.mdx',
+		componentFilePath: './src/components/JSXComponent.jsx',
+	});
+});

packages/astro/e2e/solid-component.test.js

@@ -17,3 +17,11 @@ test.describe('Solid components in Markdown files', () => {
 		componentFilePath: './src/components/SolidComponent.jsx',
 	});
 });
+
+test.describe('Solid components in MDX files', () => {
+	createTests({
+		pageUrl: '/mdx/',
+		pageSourceFilePath: './src/pages/mdx.mdx',
+		componentFilePath: './src/components/SolidComponent.jsx',
+	});
+});

packages/astro/e2e/svelte-component.test.js

@@ -19,3 +19,12 @@ test.describe('Svelte components in Markdown files', () => {
 		counterCssFilePath: './src/components/Counter.svelte',
 	});
 });
+
+test.describe('Svelte components in MDX files', () => {
+	createTests({
+		pageUrl: '/mdx/',
+		pageSourceFilePath: './src/pages/mdx.mdx',
+		componentFilePath: './src/components/SvelteComponent.svelte',
+		counterCssFilePath: './src/components/Counter.svelte',
+	});
+});

packages/astro/e2e/vue-component.test.js

@@ -19,3 +19,12 @@ test.describe('Vue components in Markdown files', () => {
 		counterCssFilePath: './src/components/Counter.vue',
 	});
 });
+
+test.describe('Vue components in MDX files', () => {
+	createTests({
+		pageUrl: '/mdx/',
+		pageSourceFilePath: './src/pages/mdx.mdx',
+		componentFilePath: './src/components/VueComponent.vue',
+		counterCssFilePath: './src/components/Counter.vue',
+	});
+});