MDX remark image props (#9753)

* rearrange plugins and add props to Image component

* add tests and update lockfile

* add changeset

* re-rearrange plugin order, gfm/smartypants then user defined then image related then shiki/prism

* make more generic

* add more/better tests

* remove unused logger

---------

Co-authored-by: Erika <3019731+Princesseuh@users.noreply.github.com>

6 files changed, 93 insertions, 0 deletions

diff --git a/packages/integrations/mdx/test/fixtures/image-remark-imgattr/astro.config.mjs b/packages/integrations/mdx/test/fixtures/image-remark-imgattr/astro.config.mjs
new file mode 100644
index 000000000..1ba809580
--- /dev/null
+++ b/packages/integrations/mdx/test/fixtures/image-remark-imgattr/astro.config.mjs
@@ -0,0 +1,8 @@
+import { defineConfig } from 'astro/config';
+import mdx from '@astrojs/mdx';
+import plugin from "./remarkPlugin"
+
+// https://astro.build/config
+export default defineConfig({
+	integrations: [mdx({remarkPlugins:[plugin]})],
+});
diff --git a/packages/integrations/mdx/test/fixtures/image-remark-imgattr/package.json b/packages/integrations/mdx/test/fixtures/image-remark-imgattr/package.json
new file mode 100644
index 000000000..89868f9f4
--- /dev/null
+++ b/packages/integrations/mdx/test/fixtures/image-remark-imgattr/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "@test/image-remark-imgattr",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@astrojs/mdx": "workspace:*",
+    "astro": "workspace:*"
+  },
+  "scripts": {
+    "dev": "astro dev"
+  }
+}
diff --git a/packages/integrations/mdx/test/fixtures/image-remark-imgattr/remarkPlugin.js b/packages/integrations/mdx/test/fixtures/image-remark-imgattr/remarkPlugin.js
new file mode 100644
index 000000000..f42d9ec52
--- /dev/null
+++ b/packages/integrations/mdx/test/fixtures/image-remark-imgattr/remarkPlugin.js
@@ -0,0 +1,22 @@
+export default function plugin() {
+	return transformer;
+
+	function transformer(tree) {
+		function traverse(node) {
+			if (node.type === "image") {
+				node.data = node.data || {};
+				node.data.hProperties = node.data.hProperties || {};
+				node.data.hProperties.id = "test";
+				node.data.hProperties.width = "300";
+				node.data.hProperties.widths = [300,600];
+				node.data.hProperties.sizes = "(min-width: 600px) 600w, 300w";
+			}
+
+			if (node.children) {
+				node.children.forEach(traverse);
+			}
+		}
+
+		traverse(tree);
+	}
+}
diff --git a/packages/integrations/mdx/test/fixtures/image-remark-imgattr/src/assets/penguin2.jpg b/packages/integrations/mdx/test/fixtures/image-remark-imgattr/src/assets/penguin2.jpg
new file mode 100644
index 000000000..e859ac3c9
--- /dev/null
+++ b/packages/integrations/mdx/test/fixtures/image-remark-imgattr/src/assets/penguin2.jpg
diff --git a/packages/integrations/mdx/test/fixtures/image-remark-imgattr/src/pages/index.mdx b/packages/integrations/mdx/test/fixtures/image-remark-imgattr/src/pages/index.mdx
new file mode 100644
index 000000000..e415e505d
--- /dev/null
+++ b/packages/integrations/mdx/test/fixtures/image-remark-imgattr/src/pages/index.mdx
@@ -0,0 +1 @@
+![alt](../assets/penguin2.jpg)
diff --git a/packages/integrations/mdx/test/remark-imgattr.test.js b/packages/integrations/mdx/test/remark-imgattr.test.js
new file mode 100644
index 000000000..7bedc3e91
--- /dev/null
+++ b/packages/integrations/mdx/test/remark-imgattr.test.js
@@ -0,0 +1,50 @@
+import { expect } from 'chai';
+import * as cheerio from 'cheerio';
+import { loadFixture } from '../../../astro/test/test-utils.js';
+
+const FIXTURE_ROOT = new URL('./fixtures/image-remark-imgattr/', import.meta.url);
+
+describe('Testing remark plugins for image processing', () => {
+	/** @type {import('./test-utils').Fixture} */
+	let fixture;
+
+	describe('start dev server', () => {
+		/** @type {import('./test-utils').DevServer} */
+		let devServer;
+
+		before(async () => {
+			fixture = await loadFixture({
+				root: FIXTURE_ROOT,
+			});
+
+			devServer = await fixture.startDevServer();
+		});
+
+		after(async () => {
+			await devServer.stop();
+		});
+
+		describe('Test image attributes can be added by remark plugins', () => {
+			let $;
+			before(async () => {
+				let res = await fixture.fetch('/');
+				let html = await res.text();
+				$ = cheerio.load(html);
+			});
+
+			it('<img> has correct attributes', async () => {
+				let $img = $('img');
+				expect($img.attr('id')).to.equal('test');
+				expect($img.attr('sizes')).to.equal('(min-width: 600px) 600w, 300w');
+				expect($img.attr('srcset')).to.not.be.empty;
+			});
+
+			it('<img> was processed properly', async () => {
+				let $img = $('img');
+				expect(new URL($img.attr('src'), 'http://example.com').searchParams.get('w')).to.equal(
+					'300'
+				);
+			});
+		});
+	});
+});