feat: resolve svelte to svelte/ssr when building for ssr (fixes #74) (#75)

* feat: resolve svelte to svelte/ssr when building for ssr (fixes #74)

* remove duplicate detection of ssr build, vite already handles this correctly

* add 'svelte' to ssr.noExternal to be able to resolve it to svelte/ssr and add tests. reduce logging

* add 'svelte' to ssr.noExternal to be able to resolve it to svelte/ssr and add tests. reduce logging

* fix: sync pnpm lock

* only try to resolve svelte/ssr once and cache result. disable test until svelte with svelte/ssr is released

* honor svelte in ssr.external to allow user config to override plugin behavior

Author: dominikg

.changeset/angry-laws-refuse.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': minor
+---
+
+resolve svelte to svelte/ssr when building for ssr (see #74)

.eslintrc.js

@@ -150,6 +150,13 @@ module.exports = {
 			settings: {
 				'svelte3/ignore-styles': () => true
 			}
+		},
+		{
+			/* required because $app and $lib are not known */
+			files: ['packages/playground/kit-demo-app/src/**'],
+			rules: {
+				'node/no-missing-import': 'off'
+			}
 		}
 	]
 };

packages/e2e-tests/kit-node/__tests__/kit.spec.ts

@@ -1,4 +1,5 @@
 import {
+	readFileContent,
 	editFile,
 	editFileAndWaitForHmrComplete,
 	getColor,
@@ -9,6 +10,7 @@ import {
 } from '../../testUtils';
 
 import fetch from 'node-fetch';
+import path from 'path';
 
 describe('kit-node', () => {
 	describe('index route', () => {
@@ -47,6 +49,19 @@ describe('kit-node', () => {
 			});
 		});
 
+		it('should load dynamic import in onMount', async () => {
+			// expect log to contain message with dynamic import value from onMount
+			expect(browserLogs.some((x) => x === `onMount dynamic imported isSSR: false`)).toBe(true);
+		});
+
+		if (isBuild) {
+			// disabled until svelte releases svelte/ssr export
+			it.skip('should not include dynamic import from onmount in ssr output', async () => {
+				const app = readFileContent(path.join('.svelte-kit', 'output', 'server', 'app.js'));
+				expect(app.includes('__SHOULD_NOT_BE_IN_SSR_APP_JS')).toBe(false);
+			});
+		}
+
 		if (!isBuild) {
 			describe('hmr', () => {
 				const updateIndexSvelte = editFileAndWaitForHmrComplete.bind(

packages/e2e-tests/kit-node/src/client-only-module.js

@@ -0,0 +1,2 @@
+const __SHOULD_NOT_BE_IN_SSR_APP_JS = import.meta.env.SSR;
+export default __SHOULD_NOT_BE_IN_SSR_APP_JS;

packages/e2e-tests/kit-node/src/routes/index.svelte

@@ -1,6 +1,12 @@
 <script>
+	import { onMount } from 'svelte';
 	// eslint-disable-next-line node/no-missing-import
 	import Counter from '$lib/Counter.svelte';
+
+	onMount(async () => {
+		const isSSR = (await import('../client-only-module.js')).default;
+		console.log(`onMount dynamic imported isSSR: ${isSSR}`);
+	});
 </script>
 
 <main>

packages/e2e-tests/testUtils.ts

@@ -62,6 +62,11 @@ export async function getBg(el: string | ElementHandle) {
 	return el.evaluate((el) => getComputedStyle(el as Element).backgroundImage);
 }
 
+export function readFileContent(filename: string) {
+	filename = path.resolve(testDir, filename);
+	return fs.readFileSync(filename, 'utf-8');
+}
+
 export function editFile(filename: string, replacer: (str: string) => string) {
 	if (isBuild) return;
 	filename = path.resolve(testDir, filename);

packages/playground/kit-demo-app/.gitignore

@@ -0,0 +1,4 @@
+.DS_Store
+node_modules
+/.svelte-kit
+/package

packages/playground/kit-demo-app/.npmrc

@@ -0,0 +1 @@
+engine-strict=true

packages/playground/kit-demo-app/README.md

@@ -0,0 +1,38 @@
+# create-svelte
+
+Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte);
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npm init svelte@next
+
+# create a new project in my-app
+npm init svelte@next my-app
+```
+
+> Note: the `@next` is temporary
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+Before creating a production version of your app, install an [adapter](https://kit.svelte.dev/docs#adapters) for your target environment. Then:
+
+```bash
+npm run build
+```
+
+> You can preview the built app with `npm run preview`, regardless of whether you installed an adapter. This should _not_ be used to serve your app in production.

packages/playground/kit-demo-app/jsconfig.json

@@ -0,0 +1,9 @@
+{
+	"compilerOptions": {
+		"baseUrl": ".",
+		"paths": {
+			"$lib/*": ["src/lib/*"]
+		}
+	},
+	"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
+}