Correctly escape paths in file names (#4584)

.changeset/slimy-fireants-carry.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Correctly escape paths in file names

packages/astro/src/core/build/vite-plugin-analyzer.ts

@@ -4,7 +4,6 @@ import type { BuildInternals } from '../../core/build/internal.js';
 import type { PluginMetadata as AstroPluginMetadata } from '../../vite-plugin-astro/types';
 
 import { prependForwardSlash } from '../../core/path.js';
-import { resolveClientDevPath } from '../../core/render/dev/resolve.js';
 import { getTopLevelPages } from './graph.js';
 import { getPageDataByViteID, trackClientOnlyPageDatas } from './internal.js';
 
@@ -82,7 +81,7 @@ export function vitePluginAnalyzer(internals: BuildInternals): VitePlugin {
 				const astro = info.meta.astro as AstroPluginMetadata['astro'];
 
 				for (const c of astro.hydratedComponents) {
-					const rid = c.resolvedPath ? resolveClientDevPath(c.resolvedPath) : c.specifier;
+					const rid = c.resolvedPath ? decodeURI(c.resolvedPath) : c.specifier;
 					internals.discoveredHydratedComponents.add(rid);
 				}
 
@@ -93,7 +92,7 @@ export function vitePluginAnalyzer(internals: BuildInternals): VitePlugin {
 					const clientOnlys: string[] = [];
 
 					for (const c of astro.clientOnlyComponents) {
-						const cid = c.resolvedPath ? resolveClientDevPath(c.resolvedPath) : c.specifier;
+						const cid = c.resolvedPath ? decodeURI(c.resolvedPath) : c.specifier;
 						internals.discoveredClientOnlyComponents.add(cid);
 						clientOnlys.push(cid);
 					}

packages/astro/src/jsx/babel.ts

@@ -1,6 +1,7 @@
 import type { PluginObj } from '@babel/core';
 import * as t from '@babel/types';
 import { pathToFileURL } from 'node:url';
+import { resolveClientDevPath } from '../core/render/dev/resolve.js';
 import { HydrationDirectiveProps } from '../runtime/server/hydration.js';
 import type { PluginMetadata } from '../vite-plugin-astro/types';
 
@@ -217,10 +218,7 @@ export default function astroJSX(): PluginObj {
 					let resolvedPath: string;
 					if (meta.path.startsWith('.')) {
 						const fileURL = pathToFileURL(state.filename!);
-						resolvedPath = `/@fs${new URL(meta.path, fileURL).pathname}`;
+						resolvedPath = resolveClientDevPath(`/@fs${new URL(meta.path, fileURL).pathname}`);
-						if (resolvedPath.endsWith('.jsx')) {
-							resolvedPath = resolvedPath.slice(0, -4);
-						}
 					} else {
 						resolvedPath = meta.path;
 					}
@@ -300,10 +298,7 @@ export default function astroJSX(): PluginObj {
 					let resolvedPath: string;
 					if (meta.path.startsWith('.')) {
 						const fileURL = pathToFileURL(state.filename!);
-						resolvedPath = `/@fs${new URL(meta.path, fileURL).pathname}`;
+						resolvedPath = resolveClientDevPath(`/@fs${new URL(meta.path, fileURL).pathname}`);
-						if (resolvedPath.endsWith('.jsx')) {
-							resolvedPath = resolvedPath.slice(0, -4);
-						}
 					} else {
 						resolvedPath = meta.path;
 					}

packages/astro/src/runtime/server/hydration.ts

@@ -140,12 +140,12 @@ export async function generateHydrateScript(
 	}
 
 	// Add component url
-	island.props['component-url'] = await result.resolve(componentUrl);
+	island.props['component-url'] = await result.resolve(decodeURI(componentUrl));
 
 	// Add renderer url
 	if (renderer.clientEntrypoint) {
 		island.props['component-export'] = componentExport.value;
-		island.props['renderer-url'] = await result.resolve(renderer.clientEntrypoint);
+		island.props['renderer-url'] = await result.resolve(decodeURI(renderer.clientEntrypoint));
 		island.props['props'] = escapeHTML(serializeProps(props));
 	}
 

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

@@ -1,17 +1,21 @@
 ---
 import CaretCounter from '../components/^--with-carets/Counter';
 import RocketCounter from '../components/and-rockets-🚀/Counter';
-import PercentCounter from '../components/now-100%-better/Counter';
+// Not supported in Vite
+// 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>
+<head>
+  <meta charset="utf-8" />
+</head>
 <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 />
+  <!-- <PercentCounter id="percent" client:visible /> -->
   <SpaceCounter id="space" client:visible />
   <RoundBracketCounter id="round-bracket" client:visible />
   <SquareBracketCounter id="square-bracket" client:visible />

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

@@ -1,6 +1,7 @@
 import CaretCounter from '../components/^--with-carets/Counter'
 import RocketCounter from '../components/and-rockets-🚀/Counter'
-import PercentCounter from '../components/now-100%-better/Counter'
+// Not supported in Vite
+// 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'
@@ -9,7 +10,7 @@ import SquareBracketCounter from '../components/with-[square-brackets]/Counter'
 
 <CaretCounter id="caret" client:visible />
 <RocketCounter id="rocket" client:visible />
-<PercentCounter id="percent" client:visible />
+{/* <PercentCounter id="percent" 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

@@ -2,11 +2,19 @@ import { expect } from 'chai';
 import { load as cheerioLoad } from 'cheerio';
 import { isWindows, loadFixture } from './test-utils.js';
 
-describe.skip('Special chars in component import paths', () => {
+describe('Special chars in component import paths', () => {
 	/** @type {import('./test-utils').Fixture} */
 	let fixture;
 
-	const componentIds = ['caret', 'rocket', 'percent', 'space', 'round-bracket', 'square-bracket'];
+	const componentIds = [
+		'caret',
+		'rocket',
+		// Not supported as import identifier in Vite
+		// 'percent',
+		'space',
+		'round-bracket',
+		'square-bracket',
+	];
 
 	before(async () => {
 		fixture = await loadFixture({