feat: enable nested optimization (#157)

* wip: enable nested optimization - reorganized test dependencies and added cjs/esm deps

* fix: process cjs-only on vite build

* chore: add optimization test

* chore: update vite peer dep

* chore: improve code formatting in _test_dependencies

Co-authored-by: Ben McCann <[email protected]>

* fix: update vite to 2.5.3 to consume fix for windows problem

Co-authored-by: bluwy <[email protected]>
Co-authored-by: Ben McCann <[email protected]>

.changeset/chatty-lemons-yell.md

@@ -0,0 +1,7 @@
+---
+'@sveltejs/vite-plugin-svelte': major
+---
+
+Enable optimization for nested dependencies of excluded svelte dependencies
+
+Vite 2.5.3 and above is needed to support this feature.

package.json

@@ -65,7 +65,7 @@
     "svelte": "^3.42.4",
     "ts-jest": "^27.0.5",
     "typescript": "^4.4.2",
-    "vite": "^2.5.2"
+    "vite": "^2.5.3"
   },
   "lint-staged": {
     "*.{js,ts,svelte,html,md,svx}": "eslint --fix",

packages/e2e-tests/_test_dependencies/README.md

@@ -0,0 +1 @@
+This directory contains packages that are used as dependencies in various e2e tests

packages/e2e-tests/_test_dependencies/cjs-and-esm/index.cjs

@@ -0,0 +1,3 @@
+module.exports = {
+	cjs_and_esm: () => 'cjs'
+}

packages/e2e-tests/_test_dependencies/cjs-and-esm/index.mjs

@@ -0,0 +1 @@
+export function cjs_and_esm() { return 'esm' };

packages/e2e-tests/_test_dependencies/cjs-and-esm/package.json

@@ -0,0 +1,19 @@
+{
+  "version": "1.0.0",
+  "private": true,
+  "name": "e2e-test-dep-cjs-and-esm",
+  "main": "index.cjs",
+  "module": "index.mjs",
+  "files": [
+    "package.json",
+    "index.mjs",
+    "index.cjs"
+  ],
+  "exports":{
+    ".": {
+      "import": "./index.mjs",
+      "require": "./index.cjs"
+    },
+    "./package.json": "./package.json"
+  }
+}

packages/e2e-tests/_test_dependencies/cjs-only/index.js

@@ -0,0 +1,3 @@
+module.exports = {
+	cjs: () => 'cjs'
+};

packages/e2e-tests/_test_dependencies/cjs-only/package.json

@@ -0,0 +1,11 @@
+{
+  "version": "1.0.0",
+  "private": true,
+  "name": "e2e-test-dep-cjs-only",
+  "main": "index.js",
+  "files": [
+    "package.json",
+    "index.js"
+  ],
+  "type": "commonjs"
+}

packages/e2e-tests/_test_dependencies/esm-only/index.js

@@ -0,0 +1,3 @@
+export function esm() {
+	return 'esm';
+}

packages/e2e-tests/_test_dependencies/esm-only/package.json

@@ -0,0 +1,18 @@
+{
+  "version": "1.0.0",
+  "private": true,
+  "name": "e2e-test-dep-esm-only",
+  "main": "index.js",
+  "module": "index.js",
+  "files": [
+    "package.json",
+    "index.cjs"
+  ],
+  "exports":{
+    ".": {
+      "import": "./index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "type": "module"
+}

packages/e2e-tests/_test_dependencies/svelte-nested/package.json

@@ -0,0 +1,18 @@
+{
+  "version": "1.0.0",
+  "private": true,
+  "name": "e2e-test-dep-svelte-nested",
+  "svelte": "src/index.js",
+  "main": "src/index.js",
+  "files": [
+    "src",
+    "package.json"
+  ],
+  "exports": {
+    "./package.json": "./package.json"
+  },
+  "dependencies": {
+    "e2e-test-dep-svelte-simple": "workspace:*",
+    "e2e-test-dep-cjs-and-esm": "workspace:*"
+  }
+}

packages/e2e-tests/_test_dependencies/svelte-nested/src/components/Message.svelte

@@ -0,0 +1,8 @@
+<script>
+	export let id = 'id';
+	export let message = '';
+	import { cjs_and_esm } from 'e2e-test-dep-cjs-and-esm';
+</script>
+
+<div {id}>{message}</div>
+<div id="cjs-and-esm">{cjs_and_esm()}</div>

packages/e2e-tests/_test_dependencies/svelte-nested/src/index.js

@@ -0,0 +1,2 @@
+import Message from './components/Message.svelte';
+export { Message };

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

@@ -0,0 +1,10 @@
+{
+  "version": "1.0.0",
+  "private": true,
+  "name": "e2e-test-dep-svelte-simple",
+  "main": "index.js",
+  "svelte": "index.js",
+  "dependencies": {
+    "e2e-test-dep-cjs-only": "workspace:*"
+  }
+}

packages/e2e-tests/hmr-test-dependency/src/components/Dependency.svelte → packages/e2e-tests/_test_dependencies/svelte-simple/src/components/Dependency.svelte

@@ -1,9 +1,12 @@
 <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 {

packages/e2e-tests/autoprefixer-browerslist/package.json

@@ -8,7 +8,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "e2e-tests-hmr-test-dependency": "workspace:*"
+    "e2e-test-dep-svelte-simple": "workspace:*"
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:*",
@@ -17,6 +17,6 @@
     "postcss-load-config": "^3.1.0",
     "svelte": "^3.42.4",
     "svelte-preprocess": "^4.8.0",
-    "vite": "^2.5.2"
+    "vite": "^2.5.3"
   }
 }

packages/e2e-tests/autoprefixer-browerslist/src/App.svelte

@@ -1,5 +1,5 @@
 <script>
-	import Dependency from 'e2e-tests-hmr-test-dependency';
+	import Dependency from 'e2e-test-dep-svelte-simple';
 </script>
 
 <div class="sticky" id="#sticky">sticky-div</div>

packages/e2e-tests/autoprefixer-browerslist/vite.config.js

@@ -7,7 +7,12 @@ module.exports = defineConfig(() => {
 		build: {
 			// make build faster by skipping transforms and minification
 			target: 'esnext',
-			minify: false
+			minify: false,
+			commonjsOptions: {
+				// pnpm only symlinks packages, and vite wont process cjs deps not in
+				// node_modules, so we add the cjs dep here
+				include: [/node_modules/, /cjs-only/]
+			}
 		},
 		server: {
 			watch: {

packages/e2e-tests/configfile-custom/package.json

@@ -8,11 +8,11 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "e2e-tests-hmr-test-dependency": "workspace:*"
+    "e2e-test-dep-svelte-simple": "workspace:*"
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:*",
     "svelte": "^3.42.4",
-    "vite": "^2.5.2"
+    "vite": "^2.5.3"
   }
 }

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

@@ -1,5 +1,5 @@
 <script>
-	import Dependency from 'e2e-tests-hmr-test-dependency';
+	import Dependency from 'e2e-test-dep-svelte-simple';
 	import Child from './lib/Child.svelte';
 </script>
 

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

@@ -8,7 +8,12 @@ module.exports = defineConfig(() => {
 		build: {
 			// make build faster by skipping transforms and minification
 			target: 'esnext',
-			minify: false
+			minify: false,
+			commonjsOptions: {
+				// pnpm only symlinks packages, and vite wont process cjs deps not in
+				// node_modules, so we add the cjs dep here
+				include: [/node_modules/, /cjs-only/]
+			}
 		},
 		server: {
 			watch: {

packages/e2e-tests/configfile-esm/package.json

@@ -8,13 +8,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "e2e-tests-hmr-test-dependency": "workspace:*"
+    "e2e-test-dep-svelte-simple": "workspace:*"
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:*",
     "svelte": "^3.42.4",
     "svelte-preprocess": "^4.8.0",
-    "vite": "^2.5.2"
+    "vite": "^2.5.3"
   },
   "type": "module"
 }

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

@@ -1,5 +1,5 @@
 <script>
-	import Dependency from 'e2e-tests-hmr-test-dependency';
+	import Dependency from 'e2e-test-dep-svelte-simple';
 	import Child from './lib/Child.svelte';
 </script>
 

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

@@ -8,7 +8,12 @@ export default defineConfig(({ command, mode }) => {
 		build: {
 			// make build faster by skipping transforms and minification
 			target: 'esnext',
-			minify: false
+			minify: false,
+			commonjsOptions: {
+				// pnpm only symlinks packages, and vite wont process cjs deps not in
+				// node_modules, so we add the cjs dep here
+				include: [/node_modules/, /cjs-only/]
+			}
 		},
 		server: {
 			watch: {

packages/e2e-tests/custom-extensions/package.json

@@ -10,6 +10,6 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:*",
     "svelte": "^3.42.4",
-    "vite": "^2.5.2"
+    "vite": "^2.5.3"
   }
 }

packages/e2e-tests/hmr/package.json

@@ -8,12 +8,12 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "e2e-tests-hmr-test-dependency": "workspace:*"
+    "e2e-test-dep-svelte-simple": "workspace:*"
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:*",
     "node-fetch": "^2.6.1",
     "svelte": "^3.42.4",
-    "vite": "^2.5.2"
+    "vite": "^2.5.3"
   }
 }

packages/e2e-tests/hmr/src/App.svelte

@@ -1,6 +1,6 @@
 <script>
 	import StaticImport from './components/StaticImport.svelte';
-	import Dependency from 'e2e-tests-hmr-test-dependency';
+	import Dependency from 'e2e-test-dep-svelte-simple';
 	import HmrTest from './components/HmrTest.svelte';
 	let dynamicImportComponent;
 	function importDynamic() {

packages/e2e-tests/hmr/vite.config.js

@@ -3,13 +3,15 @@ const { svelte } = require('@sveltejs/vite-plugin-svelte');
 
 module.exports = defineConfig(({ command, mode }) => {
 	return {
-		optimizeDeps: {
-			exclude: ['e2e-tests-hmr-test-dependency']
-		},
 		plugins: [svelte()],
 		build: {
 			minify: false,
-			target: 'esnext'
+			target: 'esnext',
+			commonjsOptions: {
+				// pnpm only symlinks packages, and vite wont process cjs deps not in
+				// node_modules, so we add the cjs dep here
+				include: [/node_modules/, /cjs-only/]
+			}
 		},
 		server: {
 			watch: {

packages/e2e-tests/package-json-svelte-field/__tests__/package-json-svelte-field.spec.ts

@@ -1,5 +1,22 @@
-import { getText } from '../../testUtils';
+import fs from 'fs';
+import path from 'path';
+import { getText, isBuild } from '../../testUtils';
 
 test('should render component imported via svelte field in package.json', async () => {
 	expect(await getText('#test-id')).toBe('svelte field works');
 });
+
+if (!isBuild) {
+	test('should optimize nested deps of excluded svelte deps', () => {
+		const vitePrebundleMetadata = path.resolve(__dirname, '../node_modules/.vite/_metadata.json');
+		const metadataFile = fs.readFileSync(vitePrebundleMetadata, 'utf8');
+		const metadata = JSON.parse(metadataFile);
+		const optimizedPaths = Object.keys(metadata.optimized);
+		expect(optimizedPaths).not.toContain('e2e-test-dep-svelte-nested');
+		expect(optimizedPaths).not.toContain('e2e-test-dep-svelte-simple');
+		expect(optimizedPaths).toContain('e2e-test-dep-svelte-nested > e2e-test-dep-cjs-and-esm');
+		expect(optimizedPaths).toContain(
+			'e2e-test-dep-svelte-nested > e2e-test-dep-svelte-simple > e2e-test-dep-cjs-only'
+		);
+	});
+}

packages/e2e-tests/package-json-svelte-field/package.json

@@ -8,11 +8,11 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "e2e-tests-test-dependency-svelte-field": "workspace:*"
+    "e2e-test-dep-svelte-nested": "workspace:*"
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:*",
     "svelte": "^3.42.4",
-    "vite": "^2.5.2"
+    "vite": "^2.5.3"
   }
 }

packages/e2e-tests/package-json-svelte-field/src/App.svelte

@@ -1,6 +1,5 @@
 <script>
-	// eslint-disable-next-line node/no-missing-import
-	import { Message } from 'e2e-tests-test-dependency-svelte-field';
+	import { Message } from 'e2e-test-dep-svelte-nested';
 </script>
 
 <Message id="test-id" message="svelte field works" />

packages/e2e-tests/svelte-preprocess/package.json

@@ -12,6 +12,6 @@
     "svelte": "^3.42.4",
     "svelte-preprocess": "^4.8.0",
     "typescript": "^4.4.2",
-    "vite": "^2.5.2"
+    "vite": "^2.5.3"
   }
 }

packages/e2e-tests/ts-type-import/package.json

@@ -12,6 +12,6 @@
     "@tsconfig/svelte": "^2.0.1",
     "@types/node": "^16.7.8",
     "svelte-preprocess": "^4.8.0",
-    "vite": "^2.5.2"
+    "vite": "^2.5.3"
   }
 }