Resolve relative imports from hoisted scripts (static build) (withast…

…ro#2581)

* Resolve relative imports from hoisted scripts

* Adds a changeset

* Windows fix

* Set a longer timeout for the Lit test

* blah

* Handle windows properly

* Only if the from is astro

* Windows debugging

* This might fix it

* another try

* use only

* More debugging

* Does this work

* Final cleanup

* Update the lockfile

src/vite-plugin-astro/index.ts

@@ -4,12 +4,14 @@ import type { LogOptions } from '../core/logger.js';
 
 import esbuild from 'esbuild';
 import npath from 'path';
-import { fileURLToPath } from 'url';
+import { fileURLToPath, pathToFileURL } from 'url';
+import slash from 'slash';
 import { getViteTransform, TransformHook } from './styles.js';
 import { parseAstroRequest } from './query.js';
-import { cachedCompilation, invalidateCompilation } from './compile.js';
+import { cachedCompilation } from './compile.js';
 import ancestor from 'common-ancestor-path';
 import { trackCSSDependencies, handleHotUpdate } from './hmr.js';
+import { isRelativePath } from '../core/path.js';
 
 const FRONTMATTER_PARSE_REGEXP = /^\-\-\-(.*)^\-\-\-/ms;
 interface AstroPluginOptions {
@@ -45,16 +47,29 @@ export default function astro({ config, logging }: AstroPluginOptions): vite.Plu
 			viteDevServer = server;
 		},
 		// note: don’t claim .astro files with resolveId() — it prevents Vite from transpiling the final JS (import.meta.globEager, etc.)
-		async resolveId(id) {
+		async resolveId(id, from) {
+			// If resolving from an astro subresource such as a hoisted script,
+			// we need to resolve relative paths ourselves.
+			if(from) {
+				const { query: fromQuery, filename } = parseAstroRequest(from);
+				if(fromQuery.astro && isRelativePath(id)) {
+					const resolvedURL = new URL(id, `file://${filename}`);
+					const resolved = resolvedURL.pathname;
+					if(isBrowserPath(resolved)) {
+						return slash(fileURLToPath(new URL('.' + resolved, config.projectRoot)));
+					}
+					return slash(fileURLToPath(resolvedURL));
+				}
+			}
+
 			// serve sub-part requests (*?astro) as virtual modules
 			const { query } = parseAstroRequest(id);
 			if (query.astro) {
 				// Convert /src/pages/index.astro?astro&type=style to /Users/name/
 				// Because this needs to be the id for the Vite CSS plugin to property resolve
 				// relative @imports.
 				if (query.type === 'style' && isBrowserPath(id)) {
-					const outId = npath.posix.join(config.projectRoot.pathname, id);
-					return outId;
+					return slash(fileURLToPath(new URL('.' + id, config.projectRoot)));
 				}
 
 				return id;

test/fixtures/static build/src/components/InlineHoisted.astro

@@ -1,6 +1,6 @@
 <script type="module" hoist>
 	import { h, render } from 'preact';
-
+	import '../scripts/inline-hoist.js';
 
 	const mount = document.querySelector('#inline-hoist');
 
@@ -11,3 +11,4 @@
 	render(h(App), mount);
 </script>
 <div id="inline-hoist"></div>
+<div id="inline-hoist-two"></div>

test/fixtures/static build/src/scripts/inline-hoist.js

@@ -0,0 +1,2 @@
+const el = document.querySelector('#inline-hoist-two');
+el.textContent = 'works';

test/lit-element.test.js

@@ -2,7 +2,9 @@ import { expect } from 'chai';
 import cheerio from 'cheerio';
 import { loadFixture } from './test-utils.js';
 
-describe('LitElement test', () => {
+describe('LitElement test', function() {
+	this.timeout(30000);
+
 	let fixture;
 
 	const NODE_VERSION = parseFloat(process.versions.node);