Skip to content

Commit 0e21152

Browse files
dtinthdtinth
committed
Initial commit
0 parents  commit 0e21152

16 files changed

+955
-0
lines changed

‎.gitignore

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎.vscode/extensions.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"recommendations": ["svelte.svelte-vscode"]
3+
}

‎README.md

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
# Svelte + TS + Vite
2+
3+
This template should help get you started developing with Svelte and TypeScript in Vite.
4+
5+
## Recommended IDE Setup
6+
7+
[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
8+
9+
## Need an official Svelte framework?
10+
11+
Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its serverless-first approach and adapt to various platforms, with out of the box support for TypeScript, SCSS, and Less, and easily-added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more.
12+
13+
## Technical considerations
14+
15+
**Why use this over SvelteKit?**
16+
17+
- It brings its own routing solution which might not be preferable for some users.
18+
- It is first and foremost a framework that just happens to use Vite under the hood, not a Vite app.
19+
`vite dev` and `vite build` wouldn't work in a SvelteKit environment, for example.
20+
21+
This template contains as little as possible to get started with Vite + TypeScript + Svelte, while taking into account the developer experience with regards to HMR and intellisense. It demonstrates capabilities on par with the other `create-vite` templates and is a good starting point for beginners dipping their toes into a Vite + Svelte project.
22+
23+
Should you later need the extended capabilities and extensibility provided by SvelteKit, the template has been structured similarly to SvelteKit so that it is easy to migrate.
24+
25+
**Why `global.d.ts` instead of `compilerOptions.types` inside `jsconfig.json` or `tsconfig.json`?**
26+
27+
Setting `compilerOptions.types` shuts out all other types not explicitly listed in the configuration. Using triple-slash references keeps the default TypeScript setting of accepting type information from the entire workspace, while also adding `svelte` and `vite/client` type information.
28+
29+
**Why include `.vscode/extensions.json`?**
30+
31+
Other templates indirectly recommend extensions via the README, but this file allows VS Code to prompt the user to install the recommended extension upon opening the project.
32+
33+
**Why enable `allowJs` in the TS template?**
34+
35+
While `allowJs: false` would indeed prevent the use of `.js` files in the project, it does not prevent the use of JavaScript syntax in `.svelte` files. In addition, it would force `checkJs: false`, bringing the worst of both worlds: not being able to guarantee the entire codebase is TypeScript, and also having worse typechecking for the existing JavaScript. In addition, there are valid use cases in which a mixed codebase may be relevant.
36+
37+
**Why is HMR not preserving my local component state?**
38+
39+
HMR state preservation comes with a number of gotchas! It has been disabled by default in both `svelte-hmr` and `@sveltejs/vite-plugin-svelte` due to its often surprising behavior. You can read the details [here](https://github.com/rixo/svelte-hmr#svelte-hmr).
40+
41+
If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR.
42+
43+
```ts
44+
// store.ts
45+
// An extremely simple external store
46+
import { writable } from 'svelte/store'
47+
export default writable(0)
48+
```

‎index.html

+13
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.ico" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Svelte + TS + Vite App</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/src/main.ts"></script>
12+
</body>
13+
</html>

‎package.json

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"name": "fresh-app",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "vite build",
9+
"preview": "vite preview",
10+
"check": "svelte-check --tsconfig ./tsconfig.json"
11+
},
12+
"devDependencies": {
13+
"@sveltejs/vite-plugin-svelte": "^1.0.0-next.30",
14+
"@tsconfig/svelte": "^2.0.1",
15+
"svelte": "^3.44.0",
16+
"svelte-check": "^2.2.7",
17+
"svelte-preprocess": "^4.9.8",
18+
"tslib": "^2.3.1",
19+
"typescript": "^4.5.4",
20+
"vite": "^2.9.5"
21+
}
22+
}

‎public/favicon.ico

1.12 KB
Binary file not shown.

‎src/App.svelte

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<script lang="ts">
2+
import logo from './assets/svelte.png'
3+
import Counter from './lib/Counter.svelte'
4+
</script>
5+
6+
<main>
7+
<img src={logo} alt="Svelte Logo" />
8+
<h1>Hello Typescript!</h1>
9+
10+
<Counter />
11+
12+
<p>
13+
Visit <a href="https://svelte.dev">svelte.dev</a> to learn how to build Svelte
14+
apps.
15+
</p>
16+
17+
<p>
18+
Check out <a href="https://github.com/sveltejs/kit#readme">SvelteKit</a> for
19+
the officially supported framework, also powered by Vite!
20+
</p>
21+
</main>
22+
23+
<style>
24+
:root {
25+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
26+
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
27+
}
28+
29+
main {
30+
text-align: center;
31+
padding: 1em;
32+
margin: 0 auto;
33+
}
34+
35+
img {
36+
height: 16rem;
37+
width: 16rem;
38+
}
39+
40+
h1 {
41+
color: #ff3e00;
42+
text-transform: uppercase;
43+
font-size: 4rem;
44+
font-weight: 100;
45+
line-height: 1.1;
46+
margin: 2rem auto;
47+
max-width: 14rem;
48+
}
49+
50+
p {
51+
max-width: 14rem;
52+
margin: 1rem auto;
53+
line-height: 1.35;
54+
}
55+
56+
@media (min-width: 480px) {
57+
h1 {
58+
max-width: none;
59+
}
60+
61+
p {
62+
max-width: none;
63+
}
64+
}
65+
</style>

‎src/assets/svelte.png

5.06 KB
Loading

‎src/lib/Counter.svelte

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<script lang="ts">
2+
let count: number = 0
3+
const increment = () => {
4+
count += 1
5+
}
6+
</script>
7+
8+
<button on:click={increment}>
9+
Clicks: {count}
10+
</button>
11+
12+
<style>
13+
button {
14+
font-family: inherit;
15+
font-size: inherit;
16+
padding: 1em 2em;
17+
color: #ff3e00;
18+
background-color: rgba(255, 62, 0, 0.1);
19+
border-radius: 2em;
20+
border: 2px solid rgba(255, 62, 0, 0);
21+
outline: none;
22+
width: 200px;
23+
font-variant-numeric: tabular-nums;
24+
cursor: pointer;
25+
}
26+
27+
button:focus {
28+
border: 2px solid #ff3e00;
29+
}
30+
31+
button:active {
32+
background-color: rgba(255, 62, 0, 0.2);
33+
}
34+
</style>

‎src/main.ts

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import App from './App.svelte'
2+
3+
const app = new App({
4+
target: document.getElementById('app')
5+
})
6+
7+
export default app

‎src/vite-env.d.ts

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
/// <reference types="svelte" />
2+
/// <reference types="vite/client" />

‎svelte.config.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import sveltePreprocess from 'svelte-preprocess'
2+
3+
export default {
4+
// Consult https://github.com/sveltejs/svelte-preprocess
5+
// for more information about preprocessors
6+
preprocess: sveltePreprocess()
7+
}

‎tsconfig.json

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"extends": "@tsconfig/svelte/tsconfig.json",
3+
"compilerOptions": {
4+
"target": "esnext",
5+
"useDefineForClassFields": true,
6+
"module": "esnext",
7+
"resolveJsonModule": true,
8+
"baseUrl": ".",
9+
/**
10+
* Typecheck JS in `.svelte` and `.js` files by default.
11+
* Disable checkJs if you'd like to use dynamic types in JS.
12+
* Note that setting allowJs false does not prevent the use
13+
* of JS in `.svelte` files.
14+
*/
15+
"allowJs": true,
16+
"checkJs": true,
17+
"isolatedModules": true
18+
},
19+
"include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"],
20+
"references": [{ "path": "./tsconfig.node.json" }]
21+
}

‎tsconfig.node.json

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"compilerOptions": {
3+
"composite": true,
4+
"module": "esnext",
5+
"moduleResolution": "node"
6+
},
7+
"include": ["vite.config.ts"]
8+
}

‎vite.config.ts

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { defineConfig } from 'vite'
2+
import { svelte } from '@sveltejs/vite-plugin-svelte'
3+
4+
// https://vitejs.dev/config/
5+
export default defineConfig({
6+
plugins: [svelte()]
7+
})

0 commit comments

Comments
 (0)