Skip to content

Commit f6f56fe

Browse files
dominikgdominikg
authored
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
1 parent c6a7834 commit f6f56fe

34 files changed

+1070
-0
lines changed

‎.changeset/angry-laws-refuse.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@sveltejs/vite-plugin-svelte': minor
3+
---
4+
5+
resolve svelte to svelte/ssr when building for ssr (see #74)

‎.eslintrc.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -150,6 +150,13 @@ module.exports = {
150150
settings: {
151151
'svelte3/ignore-styles': () => true
152152
}
153+
},
154+
{
155+
/* required because $app and $lib are not known */
156+
files: ['packages/playground/kit-demo-app/src/**'],
157+
rules: {
158+
'node/no-missing-import': 'off'
159+
}
153160
}
154161
]
155162
};

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import {
2+
readFileContent,
23
editFile,
34
editFileAndWaitForHmrComplete,
45
getColor,
@@ -9,6 +10,7 @@ import {
910
} from '../../testUtils';
1011

1112
import fetch from 'node-fetch';
13+
import path from 'path';
1214

1315
describe('kit-node', () => {
1416
describe('index route', () => {
@@ -47,6 +49,19 @@ describe('kit-node', () => {
4749
});
4850
});
4951

52+
it('should load dynamic import in onMount', async () => {
53+
// expect log to contain message with dynamic import value from onMount
54+
expect(browserLogs.some((x) => x === `onMount dynamic imported isSSR: false`)).toBe(true);
55+
});
56+
57+
if (isBuild) {
58+
// disabled until svelte releases svelte/ssr export
59+
it.skip('should not include dynamic import from onmount in ssr output', async () => {
60+
const app = readFileContent(path.join('.svelte-kit', 'output', 'server', 'app.js'));
61+
expect(app.includes('__SHOULD_NOT_BE_IN_SSR_APP_JS')).toBe(false);
62+
});
63+
}
64+
5065
if (!isBuild) {
5166
describe('hmr', () => {
5267
const updateIndexSvelte = editFileAndWaitForHmrComplete.bind(

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
const __SHOULD_NOT_BE_IN_SSR_APP_JS = import.meta.env.SSR;
2+
export default __SHOULD_NOT_BE_IN_SSR_APP_JS;

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
11
<script>
2+
import { onMount } from 'svelte';
23
// eslint-disable-next-line node/no-missing-import
34
import Counter from '$lib/Counter.svelte';
5+
6+
onMount(async () => {
7+
const isSSR = (await import('../client-only-module.js')).default;
8+
console.log(`onMount dynamic imported isSSR: ${isSSR}`);
9+
});
410
</script>
511

612
<main>

‎packages/e2e-tests/testUtils.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,11 @@ export async function getBg(el: string | ElementHandle) {
6262
return el.evaluate((el) => getComputedStyle(el as Element).backgroundImage);
6363
}
6464

65+
export function readFileContent(filename: string) {
66+
filename = path.resolve(testDir, filename);
67+
return fs.readFileSync(filename, 'utf-8');
68+
}
69+
6570
export function editFile(filename: string, replacer: (str: string) => string) {
6671
if (isBuild) return;
6772
filename = path.resolve(testDir, filename);

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.DS_Store
2+
node_modules
3+
/.svelte-kit
4+
/package

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
engine-strict=true

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

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
# create-svelte
2+
3+
Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte);
4+
5+
## Creating a project
6+
7+
If you're seeing this, you've probably already done this step. Congrats!
8+
9+
```bash
10+
# create a new project in the current directory
11+
npm init svelte@next
12+
13+
# create a new project in my-app
14+
npm init svelte@next my-app
15+
```
16+
17+
> Note: the `@next` is temporary
18+
19+
## Developing
20+
21+
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
22+
23+
```bash
24+
npm run dev
25+
26+
# or start the server and open the app in a new browser tab
27+
npm run dev -- --open
28+
```
29+
30+
## Building
31+
32+
Before creating a production version of your app, install an [adapter](https://kit.svelte.dev/docs#adapters) for your target environment. Then:
33+
34+
```bash
35+
npm run build
36+
```
37+
38+
> 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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"compilerOptions": {
3+
"baseUrl": ".",
4+
"paths": {
5+
"$lib/*": ["src/lib/*"]
6+
}
7+
},
8+
"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
9+
}

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"name": "playground-kit-demo-app",
3+
"version": "0.0.0",
4+
"scripts": {
5+
"dev": "svelte-kit dev",
6+
"build": "svelte-kit build",
7+
"preview": "svelte-kit preview"
8+
},
9+
"devDependencies": {
10+
"@sveltejs/adapter-node": "^1.0.0-next.29",
11+
"@sveltejs/kit": "^1.0.0-next.119",
12+
"svelte": "^3.34.0"
13+
},
14+
"type": "module",
15+
"dependencies": {
16+
"@fontsource/fira-mono": "^4.2.2",
17+
"@lukeed/uuid": "^2.0.0",
18+
"cookie": "^0.4.1"
19+
}
20+
}

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

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
@import '@fontsource/fira-mono';
2+
3+
:root {
4+
font-family: Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
5+
Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
6+
--font-mono: 'Fira Mono', monospace;
7+
--pure-white: #ffffff;
8+
--primary-color: #b9c6d2;
9+
--secondary-color: #d0dde9;
10+
--tertiary-color: #edf0f8;
11+
--accent-color: #ff3e00;
12+
--heading-color: rgba(0, 0, 0, 0.7);
13+
--text-color: #444444;
14+
--background-without-opacity: rgba(255, 255, 255, 0.7);
15+
--column-width: 42rem;
16+
--column-margin-top: 4rem;
17+
}
18+
19+
body {
20+
min-height: 100vh;
21+
margin: 0;
22+
background-color: var(--primary-color);
23+
background: linear-gradient(
24+
180deg,
25+
var(--primary-color) 0%,
26+
var(--secondary-color) 10.45%,
27+
var(--tertiary-color) 41.35%
28+
);
29+
}
30+
31+
body::before {
32+
content: '';
33+
width: 80vw;
34+
height: 100vh;
35+
position: absolute;
36+
top: 0;
37+
left: 10vw;
38+
z-index: -1;
39+
background: radial-gradient(
40+
50% 50% at 50% 50%,
41+
var(--pure-white) 0%,
42+
rgba(255, 255, 255, 0) 100%
43+
);
44+
opacity: 0.05;
45+
}
46+
47+
#svelte {
48+
min-height: 100vh;
49+
display: flex;
50+
flex-direction: column;
51+
}
52+
53+
h1,
54+
h2,
55+
p {
56+
font-weight: 400;
57+
color: var(--heading-color);
58+
}
59+
60+
p {
61+
line-height: 1.5;
62+
}
63+
64+
a {
65+
color: var(--accent-color);
66+
text-decoration: none;
67+
}
68+
69+
a:hover {
70+
text-decoration: underline;
71+
}
72+
73+
h1 {
74+
font-size: 2rem;
75+
margin-bottom: 0 0 1em 0;
76+
text-align: center;
77+
}
78+
79+
h2 {
80+
font-size: 1rem;
81+
}
82+
83+
pre {
84+
font-size: 16px;
85+
font-family: var(--font-mono);
86+
background-color: rgba(255, 255, 255, 0.45);
87+
border-radius: 3px;
88+
box-shadow: 2px 2px 6px rgb(255 255 255 / 25%);
89+
padding: 0.5em;
90+
overflow-x: auto;
91+
color: var(--text-color);
92+
}
93+
94+
input,
95+
button {
96+
font-size: inherit;
97+
font-family: inherit;
98+
}
99+
100+
button:focus:not(:focus-visible) {
101+
outline: none;
102+
}
103+
104+
@media (min-width: 720px) {
105+
h1 {
106+
font-size: 2.4rem;
107+
}
108+
}

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<link rel="icon" href="/favicon.png" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
8+
%svelte.head%
9+
</head>
10+
<body>
11+
<div id="svelte">%svelte.body%</div>
12+
</body>
13+
</html>

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/// <reference types="@sveltejs/kit" />

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import cookie from 'cookie';
2+
import { v4 as uuid } from '@lukeed/uuid';
3+
4+
export const handle = async ({ request, resolve }) => {
5+
const cookies = cookie.parse(request.headers.cookie || '');
6+
request.locals.userid = cookies.userid || uuid();
7+
8+
// TODO https://github.com/sveltejs/kit/issues/1046
9+
if (request.query.has('_method')) {
10+
request.method = request.query.get('_method').toUpperCase();
11+
}
12+
13+
const response = await resolve(request);
14+
15+
if (!cookies.userid) {
16+
// if this is the first time the user has visited this app,
17+
// set a cookie so that we recognise them when they return
18+
response.headers['set-cookie'] = `userid=${request.locals.userid}; Path=/; HttpOnly`;
19+
}
20+
21+
return response;
22+
};

0 commit comments

Comments
 (0)