fix: remove decodeURI

.eslintrc.cjs

@@ -19,4 +19,18 @@ module.exports = {
     '@typescript-eslint/no-shadow': ['error'],
     'no-only-tests/no-only-tests': 'error',
   },
+  overrides: [
+    {
+      files: ['packages/**/test/*.js', 'packages/**/*.test.js'],
+      env: {
+        mocha: true,
+      },
+      globals: {
+        globalThis: false, // false means read-only
+      },
+      rules: {
+        'no-console': 'off',
+      },
+    },
+  ],
 };

packages/astro/package.json

@@ -86,7 +86,7 @@
     "test:e2e:match": "playwright test -g"
   },
   "dependencies": {
-    "@astrojs/compiler": "^0.23.1",
+    "@astrojs/compiler": "^0.23.3",
     "@astrojs/language-server": "^0.20.0",
     "@astrojs/markdown-remark": "^1.0.0",
     "@astrojs/telemetry": "^1.0.0",

packages/astro/test/.eslintrc.cjs

@@ -1,5 +0,0 @@
-module.exports = {
-  rules: {
-    'no-console': 'off',
-  },
-};

packages/astro/test/fixtures/special-chars-in-component-imports/astro.config.mjs

@@ -0,0 +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(), mdx()],
+});

packages/astro/test/fixtures/special-chars-in-component-imports/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@test/special-chars-in-component-imports",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@astrojs/mdx": "workspace:*",
+    "@astrojs/react": "workspace:*",
+    "astro": "workspace:*",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0"
+  }
+}

packages/astro/test/fixtures/special-chars-in-component-imports/src/components/Counter.tsx

@@ -0,0 +1,12 @@
+import React, { useState } from 'react';
+
+export default function Counter ({ id }) {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div id={id}>
+      <div>{id}: {count}</div>
+      <button type="button" onClick={() => setCount(count+1)}>Increment</button>
+    </div>
+  );
+}

packages/astro/test/fixtures/special-chars-in-component-imports/src/components/^--with-carets/Counter.tsx

@@ -0,0 +1,12 @@
+import React, { useState } from 'react';
+
+export default function Counter ({ id }) {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div id={id}>
+      <div>{id}: {count}</div>
+      <button type="button" onClick={() => setCount(count+1)}>Increment</button>
+    </div>
+  );
+}

packages/astro/test/fixtures/special-chars-in-component-imports/src/components/and-rockets-🚀/Counter.tsx

@@ -0,0 +1,12 @@
+import React, { useState } from 'react';
+
+export default function Counter ({ id }) {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div id={id}>
+      <div>{id}: {count}</div>
+      <button type="button" onClick={() => setCount(count+1)}>Increment</button>
+    </div>
+  );
+}

packages/astro/test/fixtures/special-chars-in-component-imports/src/components/now-100%-better/Counter.tsx

@@ -0,0 +1,12 @@
+import React, { useState } from 'react';
+
+export default function Counter ({ id }) {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div id={id}>
+      <div>{id}: {count}</div>
+      <button type="button" onClick={() => setCount(count+1)}>Increment</button>
+    </div>
+  );
+}

packages/astro/test/fixtures/special-chars-in-component-imports/src/components/with some spaces/Counter.tsx

@@ -0,0 +1,12 @@
+import React, { useState } from 'react';
+
+export default function Counter ({ id }) {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div id={id}>
+      <div>{id}: {count}</div>
+      <button type="button" onClick={() => setCount(count+1)}>Increment</button>
+    </div>
+  );
+}

packages/astro/test/fixtures/special-chars-in-component-imports/src/components/with-(round-brackets)/Counter.tsx

@@ -0,0 +1,12 @@
+import React, { useState } from 'react';
+
+export default function Counter ({ id }) {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div id={id}>
+      <div>{id}: {count}</div>
+      <button type="button" onClick={() => setCount(count+1)}>Increment</button>
+    </div>
+  );
+}

packages/astro/test/fixtures/special-chars-in-component-imports/src/components/with-[square-brackets]/Counter.tsx

@@ -0,0 +1,12 @@
+import React, { useState } from 'react';
+
+export default function Counter ({ id }) {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div id={id}>
+      <div>{id}: {count}</div>
+      <button type="button" onClick={() => setCount(count+1)}>Increment</button>
+    </div>
+  );
+}

packages/astro/test/fixtures/special-chars-in-component-imports/src/pages/index.astro

@@ -0,0 +1,19 @@
+---
+import CaretCounter from '../components/^--with-carets/Counter';
+import RocketCounter from '../components/and-rockets-🚀/Counter';
+import PercentCounter from '../components/now-100%-better/Counter';
+import SpaceCounter from '../components/with some spaces/Counter';
+import RoundBracketCounter from '../components/with-(round-brackets)/Counter';
+import SquareBracketCounter from '../components/with-[square-brackets]/Counter';
+---
+<html>
+<body>
+  <h1>Special chars in component import paths from an .astro file</h1>
+  <CaretCounter id="caret" client:visible />
+  <RocketCounter id="rocket" client:visible />
+  <PercentCounter id="percent" client:visible />
+  <SpaceCounter id="space" client:visible />
+  <RoundBracketCounter id="round-bracket" client:visible />
+  <SquareBracketCounter id="square-bracket" client:visible />
+</body>
+</html>

packages/astro/test/fixtures/special-chars-in-component-imports/src/pages/mdx.mdx

@@ -0,0 +1,13 @@
+import CaretCounter from '../components/^--with-carets/Counter'
+import RocketCounter from '../components/and-rockets-🚀/Counter'
+import SpaceCounter from '../components/with some spaces/Counter'
+import RoundBracketCounter from '../components/with-(round-brackets)/Counter'
+import SquareBracketCounter from '../components/with-[square-brackets]/Counter'
+
+# Special chars in component import paths from an .mdx file
+
+<CaretCounter id="caret" client:visible />
+<RocketCounter id="rocket" client:visible />
+<SpaceCounter id="space" client:visible />
+<RoundBracketCounter id="round-bracket" client:visible />
+<SquareBracketCounter id="square-bracket" client:visible />

packages/astro/test/special-chars-in-component-imports.test.js

@@ -0,0 +1,126 @@
+import { expect } from 'chai';
+import { load as cheerioLoad } from 'cheerio';
+import { isWindows, loadFixture } from './test-utils.js';
+
+describe('Special chars in component import paths', () => {
+	/** @type {import('./test-utils').Fixture} */
+	let fixture;
+
+	const componentIds = ['caret', 'rocket', 'space', 'round-bracket', 'square-bracket'];
+
+	before(async () => {
+		fixture = await loadFixture({
+			root: './fixtures/special-chars-in-component-imports/',
+		});
+	});
+
+	describe('build', () => {
+		before(async () => {
+			await fixture.build();
+		});
+
+		it('Build succeeds', async () => {
+			const html = await fixture.readFile('/index.html');
+			expect(html).to.contain('<html>');
+		});
+
+		it('Special chars in imports work from .astro files', async () => {
+			const html = await fixture.readFile('/index.html');
+			const $ = cheerioLoad(html);
+
+			// Test 1: Correct page
+			expect($('h1').text()).to.contain('.astro');
+
+			// Test 2: All components exist
+			componentIds.forEach((componentId) => {
+				expect($(`#${componentId}`), `Component #${componentId} does not exist`).to.have.lengthOf(1);
+			});
+
+			// Test 3: Component contents were rendered properly
+			componentIds.forEach((componentId) => {
+				expect($(`#${componentId} > div`).text()).to.equal(`${componentId}: 0`);
+			});
+
+			// Test 4: There is an island for each component
+			expect($('astro-island[uid]')).to.have.lengthOf(componentIds.length);
+		});
+
+		it('Special chars in imports work from .mdx files', async () => {
+			const html = await fixture.readFile('/mdx/index.html');
+			const $ = cheerioLoad(html);
+
+			// Test 1: Correct page
+			expect($('h1').text()).to.contain('.mdx');
+
+			// Test 2: All components exist
+			componentIds.forEach((componentId) => {
+				expect($(`#${componentId}`), `Component #${componentId} does not exist`).to.have.lengthOf(1);
+			});
+
+			// Test 3: Component contents were rendered properly
+			componentIds.forEach((componentId) => {
+				expect($(`#${componentId} > div`).text()).to.equal(`${componentId}: 0`);
+			});
+
+			// Test 4: There is an island for each component
+			expect($('astro-island[uid]')).to.have.lengthOf(componentIds.length);
+		});
+
+	});
+
+	if (isWindows) return;
+
+	describe('dev', () => {
+		let devServer;
+
+		before(async () => {
+			devServer = await fixture.startDevServer();
+		});
+
+		after(async () => {
+			await devServer.stop();
+		});
+
+		it('Special chars in imports work from .astro files', async () => {
+			const html = await fixture.fetch('/').then((res) => res.text());
+			const $ = cheerioLoad(html);
+
+			// Test 1: Correct page
+			expect($('h1').text()).to.contain('.astro');
+
+			// Test 2: All components exist
+			componentIds.forEach((componentId) => {
+				expect($(`#${componentId}`), `Component #${componentId} does not exist`).to.have.lengthOf(1);
+			});
+
+			// Test 3: Component contents were rendered properly
+			componentIds.forEach((componentId) => {
+				expect($(`#${componentId} > div`).text()).to.equal(`${componentId}: 0`);
+			});
+
+			// Test 4: There is an island for each component
+			expect($('astro-island[uid]')).to.have.lengthOf(componentIds.length);
+		});
+
+		it('Special chars in imports work from .mdx files', async () => {
+			const html = await fixture.fetch('/mdx').then((res) => res.text());
+			const $ = cheerioLoad(html);
+
+			// Test 1: Correct page
+			expect($('h1').text()).to.contain('.mdx');
+
+			// Test 2: All components exist
+			componentIds.forEach((componentId) => {
+				expect($(`#${componentId}`), `Component #${componentId} does not exist`).to.have.lengthOf(1);
+			});
+
+			// Test 3: Component contents were rendered properly
+			componentIds.forEach((componentId) => {
+				expect($(`#${componentId} > div`).text()).to.equal(`${componentId}: 0`);
+			});
+
+			// Test 4: There is an island for each component
+			expect($('astro-island[uid]')).to.have.lengthOf(componentIds.length);
+		});
+	});
+});

pnpm-lock.yaml

@@ -381,7 +381,7 @@ importers:
 
   packages/astro:
     specifiers:
-      '@astrojs/compiler': ^0.23.1
+      '@astrojs/compiler': ^0.23.3
       '@astrojs/language-server': ^0.20.0
       '@astrojs/markdown-remark': ^1.0.0
       '@astrojs/telemetry': ^1.0.0
@@ -464,7 +464,7 @@ importers:
       yargs-parser: ^21.0.1
       zod: ^3.17.3
     dependencies:
-      '@astrojs/compiler': 0.23.1
+      '@astrojs/compiler': 0.23.3
       '@astrojs/language-server': 0.20.3
       '@astrojs/markdown-remark': link:../markdown/remark
       '@astrojs/telemetry': link:../telemetry
@@ -1831,6 +1831,20 @@ importers:
       react: 18.2.0
       react-dom: 18.2.0_react@18.2.0
 
+  packages/astro/test/fixtures/special-chars-in-component-imports:
+    specifiers:
+      '@astrojs/mdx': workspace:*
+      '@astrojs/react': workspace:*
+      astro: workspace:*
+      react: ^18.1.0
+      react-dom: ^18.1.0
+    dependencies:
+      '@astrojs/mdx': link:../../../../integrations/mdx
+      '@astrojs/react': link:../../../../integrations/react
+      astro: link:../../..
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+
   packages/astro/test/fixtures/ssr-api-route:
     specifiers:
       astro: workspace:*
@@ -3079,8 +3093,8 @@ packages:
     resolution: {integrity: sha512-8nvyxZTfCXLyRmYfTttpJT6EPhfBRg0/q4J/Jj3/pNPLzp+vs05ZdktsY6QxAREaOMAnNEtSqcrB4S5DsXOfRg==}
     dev: true
 
-  /@astrojs/compiler/0.23.1:
-    resolution: {integrity: sha512-KsoDrASGwTKZoWXbjy8SlIeoDv7y1OfBJtHVLuPuzhConA8e0SZpGzFqIuVRfG4bhisSTptZLDQZ7oxwgPv2jA==}
+  /@astrojs/compiler/0.23.3:
+    resolution: {integrity: sha512-eBWo0d3DoRDeg2Di1/5YJtOXh5eGFSjJMp1wVoVfoITHR4egdUGgsrDHZTzj0a25M/S9W5S6SpXCyNWcqi8jOA==}
     dev: false
 
   /@astrojs/language-server/0.20.3: