Skip to content

Commit e441f23

Browse files
GrygrFlzrGrygrFlzr
authored
feat(create-app): add 'svelte' and 'svelte-ts' options (#2537)
1 parent c433236 commit e441f23

31 files changed

+459
-1
lines changed

‎packages/create-app/README.md

+2
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,8 @@ Currently supported template presets include:
4343
- `preact-ts`
4444
- `lit-element`
4545
- `lit-element-ts`
46+
- `svelte`
47+
- `svelte-ts`
4648

4749
## Community Templates
4850

‎packages/create-app/index.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ const {
1111
cyan,
1212
magenta,
1313
lightRed,
14+
red,
1415
stripColors
1516
} = require('kolorist')
1617

@@ -25,7 +26,9 @@ const TEMPLATES = [
2526
magenta('preact'),
2627
magenta('preact-ts'),
2728
lightRed('lit-element'),
28-
lightRed('lit-element-ts')
29+
lightRed('lit-element-ts'),
30+
red('svelte'),
31+
red('svelte-ts')
2932
]
3033

3134
const renameFiles = {

‎packages/create-app/template-svelte-ts/.vscode/extensions.json

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

‎packages/create-app/template-svelte-ts/README.md

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
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+
[VSCode](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.

‎packages/create-app/template-svelte-ts/_gitignore

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
/node_modules/
2+
/dist/
3+
/.vscode/
4+
.DS_Store

‎packages/create-app/template-svelte-ts/globals.d.ts

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

‎packages/create-app/template-svelte-ts/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>

‎packages/create-app/template-svelte-ts/package.json

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"name": "vite-svelte-ts-starter",
3+
"version": "0.0.0",
4+
"scripts": {
5+
"dev": "vite",
6+
"build": "vite build",
7+
"serve": "vite preview"
8+
},
9+
"devDependencies": {
10+
"@svitejs/vite-plugin-svelte": "^0.11.1",
11+
"svelte": "^3.35.0",
12+
"svelte-preprocess": "^4.6.9",
13+
"typescript": "^4.2.3",
14+
"vite": "^2.1.0"
15+
}
16+
}

‎packages/create-app/template-svelte-ts/public/favicon.ico

1.12 KB
Binary file not shown.

‎packages/create-app/template-svelte-ts/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 id="0" />
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>

‎packages/create-app/template-svelte-ts/src/assets/svelte.png

5.06 KB
Loading

‎packages/create-app/template-svelte-ts/src/lib/Counter.svelte

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

‎packages/create-app/template-svelte-ts/src/lib/hmr-stores.ts

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
// Customized HMR-safe stores
2+
// Based off https://github.com/svitejs/svite/blob/ddec6b9/packages/playground/hmr/src/stores/hmr-stores.js
3+
import { writable } from 'svelte/store'
4+
import type { Writable } from 'svelte/store'
5+
6+
let stores: Record<string, Writable<any>> = {}
7+
8+
export function getStore<T>(id: string, initialValue: T): Writable<T> {
9+
return stores[id] || (stores[id] = writable(initialValue))
10+
}
11+
12+
// preserve the store across HMR updates
13+
if (import.meta.hot) {
14+
if (import.meta.hot.data.stores) {
15+
stores = import.meta.hot.data.stores
16+
}
17+
import.meta.hot.accept()
18+
import.meta.hot.dispose(() => {
19+
import.meta.hot.data.stores = stores
20+
})
21+
}

‎packages/create-app/template-svelte-ts/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.body
5+
})
6+
7+
export default app

‎packages/create-app/template-svelte-ts/svelte.config.cjs

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

‎packages/create-app/template-svelte-ts/tsconfig.json

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{
2+
"compilerOptions": {
3+
"moduleResolution": "node",
4+
"target": "esnext",
5+
"module": "esnext",
6+
/**
7+
* svelte-preprocess cannot figure out whether you have
8+
* a value or a type, so tell TypeScript to enforce using
9+
* `import type` instead of `import` for Types.
10+
*/
11+
"importsNotUsedAsValues": "error",
12+
"isolatedModules": true,
13+
/**
14+
* To have warnings / errors of the Svelte compiler at the
15+
* correct position, enable source maps by default.
16+
*/
17+
"sourceMap": true,
18+
"esModuleInterop": true,
19+
"skipLibCheck": true,
20+
"forceConsistentCasingInFileNames": true,
21+
"baseUrl": ".",
22+
/**
23+
* Typecheck JS in `.svelte` and `.js` files by default.
24+
* Disable checkJs if you'd like to use dynamic types in JS.
25+
* Note that setting allowJs false does not prevent the use
26+
* of JS in `.svelte` files.
27+
*/
28+
"allowJs": true,
29+
"checkJs": true
30+
},
31+
/**
32+
* Use globals.d.ts instead of compilerOptions.types
33+
* to avoid limiting type declarations.
34+
*/
35+
"include": ["globals.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"]
36+
}

‎packages/create-app/template-svelte-ts/vite.config.js

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

‎packages/create-app/template-svelte/.vscode/extensions.json

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

‎packages/create-app/template-svelte/README.md

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# Svelte + Vite
2+
3+
This template should help get you started developing with Svelte in Vite.
4+
5+
## Recommended IDE Setup
6+
7+
[VSCode](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.

‎packages/create-app/template-svelte/_gitignore

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
/node_modules/
2+
/dist/
3+
/.vscode/
4+
.DS_Store

‎packages/create-app/template-svelte/globals.d.ts

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

‎packages/create-app/template-svelte/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 + Vite App</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/src/main.js"></script>
12+
</body>
13+
</html>

‎packages/create-app/template-svelte/jsconfig.json

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"compilerOptions": {
3+
"moduleResolution": "node",
4+
"target": "esnext",
5+
"module": "esnext",
6+
/**
7+
* svelte-preprocess cannot figure out whether you have
8+
* a value or a type, so tell TypeScript to enforce using
9+
* `import type` instead of `import` for Types.
10+
*/
11+
"importsNotUsedAsValues": "error",
12+
"isolatedModules": true,
13+
/**
14+
* To have warnings / errors of the Svelte compiler at the
15+
* correct position, enable source maps by default.
16+
*/
17+
"sourceMap": true,
18+
"esModuleInterop": true,
19+
"skipLibCheck": true,
20+
"forceConsistentCasingInFileNames": true,
21+
"baseUrl": ".",
22+
/**
23+
* Typecheck JS in `.svelte` and `.js` files by default.
24+
* Disable this if you'd like to use dynamic types.
25+
*/
26+
"checkJs": true
27+
},
28+
/**
29+
* Use globals.d.ts instead of compilerOptions.types
30+
* to avoid limiting type declarations.
31+
*/
32+
"include": ["globals.d.ts", "src/**/*.js", "src/**/*.svelte"]
33+
}

‎packages/create-app/template-svelte/package.json

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"name": "vite-svelte-starter",
3+
"version": "0.0.0",
4+
"scripts": {
5+
"dev": "vite",
6+
"build": "vite build",
7+
"serve": "vite preview"
8+
},
9+
"devDependencies": {
10+
"@svitejs/vite-plugin-svelte": "^0.11.1",
11+
"svelte": "^3.35.0",
12+
"vite": "^2.1.0"
13+
}
14+
}

‎packages/create-app/template-svelte/public/favicon.ico

1.12 KB
Binary file not shown.

0 commit comments

Comments
 (0)