fix: resolve vite root before using it (fixes #113) (#115)

Author: dominikg

.changeset/fuzzy-bottles-teach.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': patch
+---
+
+resolve vite.root option correctly (fixes #113)

packages/e2e-tests/configfile-custom/__tests__/configfile-custom.spec.ts

@@ -1,3 +1,5 @@
 it('should load config and work', async () => {
 	expect(await page.textContent('h1')).toMatch('Hello world!');
+	expect(await page.textContent('#test-child')).toBe('test-child');
+	expect(await page.textContent('#dependency-import')).toBe('dependency-import');
 });

packages/e2e-tests/configfile-custom/src/App.svelte

@@ -1,9 +1,11 @@
 <script>
 	import Dependency from 'e2e-tests-hmr-test-dependency';
+	import Child from './lib/Child.svelte';
 </script>
 
 <h1>Hello world!</h1>
 <Dependency />
+<Child />
 
 <style>
 	h1 {

packages/e2e-tests/configfile-custom/src/lib/Child.svelte

@@ -0,0 +1 @@
+<h2 id="test-child">test-child</h2>

packages/e2e-tests/configfile-custom/vite.config.js

@@ -3,6 +3,7 @@ const { defineConfig } = require('vite');
 
 module.exports = defineConfig(() => {
 	return {
+		root: './', // ensure custom root works, see https://github.com/sveltejs/vite-plugin-svelte/issues/113
 		plugins: [svelte({ configFile: 'svelte.config.custom.cjs' })],
 		build: {
 			// make build faster by skipping transforms and minification

packages/e2e-tests/configfile-esm/__tests__/configfile-esm.spec.ts

@@ -1,5 +1,5 @@
-// unfortunately this test does not work as jest is not fully compatible with esm
-// wait for jest 27 and see https://github.com/facebook/jest/issues/9430
 it('should load config and work', async () => {
 	expect(await page.textContent('h1')).toMatch('Hello world!');
+	expect(await page.textContent('#test-child')).toBe('test-child');
+	expect(await page.textContent('#dependency-import')).toBe('dependency-import');
 });

packages/e2e-tests/configfile-esm/src/App.svelte

@@ -1,9 +1,11 @@
 <script>
 	import Dependency from 'e2e-tests-hmr-test-dependency';
+	import Child from './lib/Child.svelte';
 </script>
 
 <h1>Hello world!</h1>
 <Dependency />
+<Child />
 
 <style>
 	h1 {

packages/e2e-tests/configfile-esm/src/lib/Child.svelte

@@ -0,0 +1 @@
+<h2 id="test-child">test-child</h2>

packages/e2e-tests/configfile-esm/vite.config.js

@@ -3,6 +3,7 @@ import { defineConfig } from 'vite';
 
 export default defineConfig(({ command, mode }) => {
 	return {
+		root: './', // ensure custom root works, see https://github.com/sveltejs/vite-plugin-svelte/issues/113
 		plugins: [svelte()],
 		build: {
 			// make build faster by skipping transforms and minification

packages/vite-plugin-svelte/src/utils/options.ts

@@ -1,5 +1,5 @@
 /* eslint-disable no-unused-vars */
-import { ConfigEnv, UserConfig, ViteDevServer } from 'vite';
+import { ConfigEnv, UserConfig, ViteDevServer, normalizePath } from 'vite';
 import { log } from './log';
 import { loadSvelteConfig } from './load-svelte-config';
 import { SVELTE_HMR_IMPORTS, SVELTE_IMPORTS, SVELTE_RESOLVE_MAIN_FIELDS } from './constants';
@@ -12,6 +12,7 @@ import {
 	Processed
 	// eslint-disable-next-line node/no-missing-import
 } from 'svelte/types/compiler/preprocess';
+import path from 'path';
 
 const knownOptions = new Set([
 	'configFile',
@@ -131,7 +132,7 @@ function mergeOptions(
 			...(svelteConfig?.experimental || {}),
 			...(inlineOptions?.experimental || {})
 		},
-		root: viteConfig.root || process.cwd(),
+		root: viteConfig.root!,
 		isProduction: viteEnv.mode === 'production',
 		isBuild: viteEnv.command === 'build',
 		isServe: viteEnv.command === 'serve'
@@ -149,13 +150,17 @@ export async function resolveOptions(
 	viteConfig: UserConfig,
 	viteEnv: ConfigEnv
 ): Promise<ResolvedOptions> {
+	const viteConfigWithResolvedRoot = {
+		...viteConfig,
+		root: resolveViteRoot(viteConfig)
+	};
 	const defaultOptions = buildDefaultOptions(viteEnv.mode === 'production', inlineOptions);
-	const svelteConfig = (await loadSvelteConfig(viteConfig, inlineOptions)) || {};
+	const svelteConfig = (await loadSvelteConfig(viteConfigWithResolvedRoot, inlineOptions)) || {};
 	const resolvedOptions = mergeOptions(
 		defaultOptions,
 		svelteConfig,
 		inlineOptions,
-		viteConfig,
+		viteConfigWithResolvedRoot,
 		viteEnv
 	);
 
@@ -164,6 +169,13 @@ export async function resolveOptions(
 	return resolvedOptions;
 }
 
+// vite passes unresolved `root`option to config hook but we need the resolved value, so do it here
+// https://github.com/sveltejs/vite-plugin-svelte/issues/113
+// https://github.com/vitejs/vite/blob/43c957de8a99bb326afd732c962f42127b0a4d1e/packages/vite/src/node/config.ts#L293
+function resolveViteRoot(viteConfig: UserConfig): string | undefined {
+	return normalizePath(viteConfig.root ? path.resolve(viteConfig.root) : process.cwd());
+}
+
 export function buildExtraViteConfig(
 	options: ResolvedOptions,
 	config: UserConfig