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

.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"]
+}

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

@@ -0,0 +1,20 @@
+{
+  "name": "playground-kit-demo-app",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "svelte-kit dev",
+    "build": "svelte-kit build",
+    "preview": "svelte-kit preview"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-node": "^1.0.0-next.29",
+    "@sveltejs/kit": "^1.0.0-next.119",
+    "svelte": "^3.34.0"
+  },
+  "type": "module",
+  "dependencies": {
+    "@fontsource/fira-mono": "^4.2.2",
+    "@lukeed/uuid": "^2.0.0",
+    "cookie": "^0.4.1"
+  }
+}

packages/playground/kit-demo-app/src/app.css

@@ -0,0 +1,108 @@
+@import '@fontsource/fira-mono';
+
+:root {
+	font-family: Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
+		Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+	--font-mono: 'Fira Mono', monospace;
+	--pure-white: #ffffff;
+	--primary-color: #b9c6d2;
+	--secondary-color: #d0dde9;
+	--tertiary-color: #edf0f8;
+	--accent-color: #ff3e00;
+	--heading-color: rgba(0, 0, 0, 0.7);
+	--text-color: #444444;
+	--background-without-opacity: rgba(255, 255, 255, 0.7);
+	--column-width: 42rem;
+	--column-margin-top: 4rem;
+}
+
+body {
+	min-height: 100vh;
+	margin: 0;
+	background-color: var(--primary-color);
+	background: linear-gradient(
+		180deg,
+		var(--primary-color) 0%,
+		var(--secondary-color) 10.45%,
+		var(--tertiary-color) 41.35%
+	);
+}
+
+body::before {
+	content: '';
+	width: 80vw;
+	height: 100vh;
+	position: absolute;
+	top: 0;
+	left: 10vw;
+	z-index: -1;
+	background: radial-gradient(
+		50% 50% at 50% 50%,
+		var(--pure-white) 0%,
+		rgba(255, 255, 255, 0) 100%
+	);
+	opacity: 0.05;
+}
+
+#svelte {
+	min-height: 100vh;
+	display: flex;
+	flex-direction: column;
+}
+
+h1,
+h2,
+p {
+	font-weight: 400;
+	color: var(--heading-color);
+}
+
+p {
+	line-height: 1.5;
+}
+
+a {
+	color: var(--accent-color);
+	text-decoration: none;
+}
+
+a:hover {
+	text-decoration: underline;
+}
+
+h1 {
+	font-size: 2rem;
+	margin-bottom: 0 0 1em 0;
+	text-align: center;
+}
+
+h2 {
+	font-size: 1rem;
+}
+
+pre {
+	font-size: 16px;
+	font-family: var(--font-mono);
+	background-color: rgba(255, 255, 255, 0.45);
+	border-radius: 3px;
+	box-shadow: 2px 2px 6px rgb(255 255 255 / 25%);
+	padding: 0.5em;
+	overflow-x: auto;
+	color: var(--text-color);
+}
+
+input,
+button {
+	font-size: inherit;
+	font-family: inherit;
+}
+
+button:focus:not(:focus-visible) {
+	outline: none;
+}
+
+@media (min-width: 720px) {
+	h1 {
+		font-size: 2.4rem;
+	}
+}

packages/playground/kit-demo-app/src/app.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+
+		%svelte.head%
+	</head>
+	<body>
+		<div id="svelte">%svelte.body%</div>
+	</body>
+</html>

packages/playground/kit-demo-app/src/global.d.ts

@@ -0,0 +1 @@
+/// <reference types="@sveltejs/kit" />

packages/playground/kit-demo-app/src/hooks.js

@@ -0,0 +1,22 @@
+import cookie from 'cookie';
+import { v4 as uuid } from '@lukeed/uuid';
+
+export const handle = async ({ request, resolve }) => {
+	const cookies = cookie.parse(request.headers.cookie || '');
+	request.locals.userid = cookies.userid || uuid();
+
+	// TODO https://github.com/sveltejs/kit/issues/1046
+	if (request.query.has('_method')) {
+		request.method = request.query.get('_method').toUpperCase();
+	}
+
+	const response = await resolve(request);
+
+	if (!cookies.userid) {
+		// if this is the first time the user has visited this app,
+		// set a cookie so that we recognise them when they return
+		response.headers['set-cookie'] = `userid=${request.locals.userid}; Path=/; HttpOnly`;
+	}
+
+	return response;
+};