Skip to content

Commit 6843e87

Browse files
dominikgdominikg
committed
feat: resolve svelte to svelte/ssr when building for ssr (fixes #74)
1 parent 5100376 commit 6843e87

30 files changed

+1070
-18
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/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+
};

‎packages/playground/kit-demo-app/src/lib/Counter/index.svelte

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
<script>
2+
import { spring } from 'svelte/motion';
3+
4+
let count = 0;
5+
6+
const displayed_count = spring();
7+
$: displayed_count.set(count);
8+
$: offset = modulo($displayed_count, 1);
9+
10+
function modulo(n, m) {
11+
// handle negative numbers
12+
return ((n % m) + m) % m;
13+
}
14+
</script>
15+
16+
<div class="counter">
17+
<button on:click={() => (count -= 1)} aria-label="Decrease the counter by one">
18+
<svg aria-hidden="true" viewBox="0 0 1 1">
19+
<path d="M0,0.5 L1,0.5" />
20+
</svg>
21+
</button>
22+
23+
<div class="counter-viewport">
24+
<div class="counter-digits" style="transform: translate(0, {100 * offset}%)">
25+
<strong style="top: -100%" aria-hidden="true">{Math.floor($displayed_count + 1)}</strong>
26+
<strong>{Math.floor($displayed_count)}</strong>
27+
</div>
28+
</div>
29+
30+
<button on:click={() => (count += 1)} aria-label="Increase the counter by one">
31+
<svg aria-hidden="true" viewBox="0 0 1 1">
32+
<path d="M0,0.5 L1,0.5 M0.5,0 L0.5,1" />
33+
</svg>
34+
</button>
35+
</div>
36+
37+
<style>
38+
.counter {
39+
display: flex;
40+
border-top: 1px solid rgba(0, 0, 0, 0.1);
41+
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
42+
margin: 1rem 0;
43+
}
44+
45+
.counter button {
46+
width: 2em;
47+
padding: 0;
48+
display: flex;
49+
align-items: center;
50+
justify-content: center;
51+
border: 0;
52+
background-color: transparent;
53+
color: var(--text-color);
54+
font-size: 2rem;
55+
}
56+
57+
.counter button:hover {
58+
background-color: var(--secondary-color);
59+
}
60+
61+
svg {
62+
width: 25%;
63+
height: 25%;
64+
}
65+
66+
path {
67+
vector-effect: non-scaling-stroke;
68+
stroke-width: 2px;
69+
stroke: var(--text-color);
70+
}
71+
72+
.counter-viewport {
73+
width: 8em;
74+
height: 4em;
75+
overflow: hidden;
76+
text-align: center;
77+
position: relative;
78+
}
79+
80+
.counter-viewport strong {
81+
position: absolute;
82+
display: block;
83+
width: 100%;
84+
height: 100%;
85+
font-weight: 400;
86+
color: var(--accent-color);
87+
font-size: 4rem;
88+
display: flex;
89+
align-items: center;
90+
justify-content: center;
91+
}
92+
93+
.counter-digits {
94+
position: absolute;
95+
width: 100%;
96+
height: 100%;
97+
}
98+
</style>

0 commit comments

Comments
 (0)