feat: enable support for exports condition

.changeset/curly-readers-invite.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': minor
+---
+
+Enable resolving via "svelte" exports condition

packages/e2e-tests/_test_dependencies/svelte-exports-simple/index.js

@@ -0,0 +1 @@
+export { default as Dependency } from './src/components/Dependency.svelte';

packages/e2e-tests/_test_dependencies/svelte-exports-simple/package.json

@@ -0,0 +1,17 @@
+{
+  "version": "1.0.0",
+  "private": true,
+  "name": "e2e-test-dep-svelte-exports-simple",
+  "dependencies": {
+    "e2e-test-dep-cjs-only": "file:../cjs-only"
+  },
+  "type": "module",
+	"exports": {
+		"./*": {
+			"svelte": "./src/components/*"
+		},
+		".": {
+			"svelte": "./index.js"
+		}
+	}
+}

packages/e2e-tests/_test_dependencies/svelte-exports-simple/src/components/Dependency.svelte

@@ -0,0 +1,18 @@
+<script>
+	const label = 'dependency-import';
+	import * as cjsOnly from 'e2e-test-dep-cjs-only';
+	const { cjs } = cjsOnly;
+</script>
+
+<div id="dependency-import"><span class="label">{label}</span></div>
+<div id="sticky-dep" class="sticky-dep">sticky-dep</div>
+<div id="cjs-only-dependency">{cjs()}</div>
+
+<style>
+	.label {
+		color: green;
+	}
+	.sticky-dep {
+		position: sticky;
+	}
+</style>

packages/e2e-tests/prebundle-svelte-deps/__tests__/prebundle-svelte-deps.spec.ts

@@ -11,7 +11,11 @@ test('should render Hybrid import', async () => {
 });
 
 test('should render Simple import', async () => {
-	expect(await getText('#hybrid .label')).toBe('dependency-import');
+	expect(await getText('#simple .label')).toBe('dependency-import');
+});
+
+test('should render Exports Simple import', async () => {
+	expect(await getText('#exports-simple .label')).toBe('dependency-import');
 });
 
 test('should render Nested import', async () => {
@@ -29,6 +33,7 @@ if (!isBuild) {
 		const metadata = JSON.parse(metadataFile);
 		const optimizedPaths = Object.keys(metadata.optimized);
 		expect(optimizedPaths).toContain('e2e-test-dep-svelte-simple');
+		expect(optimizedPaths).toContain('e2e-test-dep-svelte-exports-simple');
 		expect(optimizedPaths).toContain('e2e-test-dep-svelte-api-only');
 		expect(optimizedPaths).toContain('e2e-test-dep-svelte-nested');
 	});

packages/e2e-tests/prebundle-svelte-deps/package.json

@@ -12,7 +12,8 @@
     "e2e-test-dep-svelte-api-only": "file:../_test_dependencies/svelte-api-only",
     "e2e-test-dep-svelte-hybrid": "file:../_test_dependencies/svelte-hybrid",
     "e2e-test-dep-svelte-nested": "file:../_test_dependencies/svelte-nested",
-    "e2e-test-dep-svelte-simple": "file:../_test_dependencies/svelte-simple"
+    "e2e-test-dep-svelte-simple": "file:../_test_dependencies/svelte-simple",
+    "e2e-test-dep-svelte-exports-simple": "file:../_test_dependencies/svelte-exports-simple"
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:*",

packages/e2e-tests/prebundle-svelte-deps/src/App.svelte

@@ -1,6 +1,7 @@
 <script>
 	import Hybrid from 'e2e-test-dep-svelte-hybrid';
 	import Simple from 'e2e-test-dep-svelte-simple';
+	import { Dependency } from 'e2e-test-dep-svelte-exports-simple';
 	import { Message as Nested } from 'e2e-test-dep-svelte-nested';
 	import { setSomeContext } from 'e2e-test-dep-svelte-api-only';
 	import { getContext } from 'svelte';
@@ -19,4 +20,7 @@
 		<Nested id="message" message="nested" />
 	</div>
 	<div id="api-only">api loaded: {apiOnlyLoaded}</div>
+	<div id="exports-simple">
+		<Dependency />
+	</div>
 </main>

packages/e2e-tests/resolve-exports-svelte/__tests__/resolve-exports-svelte.spec.ts

@@ -0,0 +1,15 @@
+import { browserLogs, page } from '~utils';
+
+test('should not have failed requests', async () => {
+	browserLogs.forEach((msg) => {
+		expect(msg).not.toMatch('404');
+	});
+});
+
+test('should load dependency with exports svelte condition', async () => {
+	for (const parent of ['#index-import', '#deep-import']) {
+		expect(await page.textContent(`${parent} #dependency-import`)).toBe('dependency-import');
+		expect(await page.textContent(`${parent} #sticky-dep`)).toBe('sticky-dep');
+		expect(await page.textContent(`${parent} #cjs-only-dependency`)).toBe('cjs');
+	}
+});

packages/e2e-tests/resolve-exports-svelte/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width,initial-scale=1" />
+
+		<title>Svelte app</title>
+
+		<script type="module" src="/src/main.js"></script>
+	</head>
+
+	<body></body>
+</html>

packages/e2e-tests/resolve-exports-svelte/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "e2e-tests-css-none",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+	"dependencies": {
+		"e2e-test-dep-svelte-exports-simple": "file:../_test_dependencies/svelte-exports-simple"
+	},
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "workspace:*",
+    "svelte": "3.53.1",
+    "vite": "^3.2.3"
+  }
+}

packages/e2e-tests/resolve-exports-svelte/src/App.svelte

@@ -0,0 +1,11 @@
+<script>
+	import { Dependency } from 'e2e-test-dep-svelte-exports-simple';
+	import DeepDependency from 'e2e-test-dep-svelte-exports-simple/Dependency.svelte';
+</script>
+
+<div id="index-import">
+	<Dependency />
+</div>
+<div id="deep-import">
+	<DeepDependency />
+</div>

packages/e2e-tests/resolve-exports-svelte/src/main.js

@@ -0,0 +1,7 @@
+import App from './App.svelte';
+
+const app = new App({
+	target: document.body
+});
+
+export default app;

packages/e2e-tests/resolve-exports-svelte/src/vite-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />

packages/e2e-tests/resolve-exports-svelte/vite.config.js

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import { svelte } from '@sveltejs/vite-plugin-svelte';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+	plugins: [svelte({ compilerOptions: { css: 'none' } })]
+});

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

@@ -18,3 +18,5 @@ export const SVELTE_HMR_IMPORTS = [
 	'svelte-hmr/runtime/proxy-adapter-dom.js',
 	'svelte-hmr'
 ];
+
+export const SVELTE_EXPORT_CONDITIONS = ['svelte'];

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

@@ -2,7 +2,12 @@
 import { ConfigEnv, ResolvedConfig, 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';
+import {
+	SVELTE_EXPORT_CONDITIONS,
+	SVELTE_HMR_IMPORTS,
+	SVELTE_IMPORTS,
+	SVELTE_RESOLVE_MAIN_FIELDS
+} from './constants';
 // eslint-disable-next-line node/no-missing-import
 import type { CompileOptions, Warning } from 'svelte/types/compiler/interfaces';
 import type {
@@ -315,7 +320,8 @@ export async function buildExtraViteConfig(
 	const extraViteConfig: Partial<UserConfig> = {
 		resolve: {
 			mainFields: [...SVELTE_RESOLVE_MAIN_FIELDS],
-			dedupe: [...SVELTE_IMPORTS, ...SVELTE_HMR_IMPORTS]
+			dedupe: [...SVELTE_IMPORTS, ...SVELTE_HMR_IMPORTS],
+			conditions: [...SVELTE_EXPORT_CONDITIONS]
 		}
 		// this option is still awaiting a PR in vite to be supported
 		// see https://github.com/sveltejs/vite-plugin-svelte/issues/60
@@ -387,7 +393,17 @@ async function buildExtraConfigForDependencies(options: PreResolvedOptions, conf
 		isBuild: options.isBuild,
 		viteUserConfig: config,
 		isFrameworkPkgByJson(pkgJson) {
-			return !!pkgJson.svelte;
+			let hasSvelteCondition = false;
+			if (typeof pkgJson.exports === 'object') {
+				// use replacer as a simple way to iterate over nested keys
+				JSON.stringify(pkgJson.exports, (key, value) => {
+					if (SVELTE_EXPORT_CONDITIONS.includes(key)) {
+						hasSvelteCondition = true;
+					}
+					return value;
+				});
+			}
+			return hasSvelteCondition || !!pkgJson.svelte;
 		},
 		isSemiFrameworkPkgByJson(pkgJson) {
 			return !!pkgJson.dependencies?.svelte || !!pkgJson.peerDependencies?.svelte;