feat: enable support for exports condition (#502)

dominikg · web-flow · commit 25009f22ba1d · 2022-11-21T23:31:30.000+01:00
* feat: enable support for exports condition

* fix: use const instead of hardcoded string

* fix: don't pass export condition to esbuild as it defers resolve to vite anyways
diff --git a/.changeset/curly-readers-invite.md b/.changeset/curly-readers-invite.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': minor
+---
+
+Enable resolving via "svelte" exports condition
diff --git a/packages/e2e-tests/_test_dependencies/svelte-exports-simple/index.js b/packages/e2e-tests/_test_dependencies/svelte-exports-simple/index.js
@@ -0,0 +1 @@
+export { default as Dependency } from './src/components/Dependency.svelte';
diff --git a/packages/e2e-tests/_test_dependencies/svelte-exports-simple/package.json b/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"
+		}
+	}
+}
diff --git a/packages/e2e-tests/_test_dependencies/svelte-exports-simple/src/components/Dependency.svelte b/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>
diff --git a/packages/e2e-tests/prebundle-svelte-deps/__tests__/prebundle-svelte-deps.spec.ts b/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');
 	});
diff --git a/packages/e2e-tests/prebundle-svelte-deps/package.json b/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:*",
diff --git a/packages/e2e-tests/prebundle-svelte-deps/src/App.svelte b/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>
diff --git a/packages/e2e-tests/resolve-exports-svelte/__tests__/resolve-exports-svelte.spec.ts b/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');
+	}
+});
diff --git a/packages/e2e-tests/resolve-exports-svelte/index.html b/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>
diff --git a/packages/e2e-tests/resolve-exports-svelte/package.json b/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"
+  }
+}
diff --git a/packages/e2e-tests/resolve-exports-svelte/src/App.svelte b/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>
diff --git a/packages/e2e-tests/resolve-exports-svelte/src/main.js b/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;
diff --git a/packages/e2e-tests/resolve-exports-svelte/src/vite-env.d.ts b/packages/e2e-tests/resolve-exports-svelte/src/vite-env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />
diff --git a/packages/e2e-tests/resolve-exports-svelte/vite.config.js b/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' } })]
+});
diff --git a/packages/vite-plugin-svelte/src/utils/constants.ts b/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'];
diff --git a/packages/vite-plugin-svelte/src/utils/options.ts b/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;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@sveltejs/vite-plugin-svelte': minor
 +---
++
 +Enable resolving via "svelte" exports condition
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export { default as Dependency } from './src/components/Dependency.svelte';`