sveltejs · manuel3108 · Oct 18, 2024 · Oct 18, 2024 · Oct 18, 2024 · Oct 18, 2024
diff --git a/.changeset/gentle-kiwis-exercise.md b/.changeset/gentle-kiwis-exercise.md
@@ -0,0 +1,5 @@
+---
+'sv': patch
+---
+
+feat: basic `svelte` templates
diff --git a/packages/create/README.md b/packages/create/README.md
@@ -1,3 +1,3 @@
 # @sveltejs/create
 
-An internal package for scaffolding SvelteKit projects.
+An internal package for scaffolding (Svelte)Kit projects.
diff --git a/packages/create/index.ts b/packages/create/index.ts
@@ -5,7 +5,7 @@ import { mkdirp, copy, dist } from './utils.ts';
 export type TemplateType = (typeof templateTypes)[number];
 export type LanguageType = 'typescript' | 'checkjs' | 'none';
 
-const templateTypes = ['minimal', 'demo', 'library'] as const;
+const templateTypes = ['minimal', 'demo', 'svelte', 'library'] as const;
 
 export type Options = {
 	name: string;
@@ -18,7 +18,7 @@ export type File = {
 	contents: string;
 };
 
-export type Condition = Exclude<TemplateType | LanguageType, 'none'>;
+export type Condition = Exclude<TemplateType | LanguageType, 'none'> | 'kit';
 
 export type Common = {
 	files: Array<{
@@ -95,7 +95,19 @@ function write_common_files(cwd: string, options: Options, name: string) {
 }
 
 function matches_condition(condition: Condition, options: Options) {
-	if (condition === 'demo' || condition === 'minimal' || condition === 'library') {
+	if (condition == 'kit') {
+		return (
+			options.template === 'library' ||
+			options.template === 'demo' ||
+			options.template === 'minimal'
+		);
+	}
+	if (
+		condition === 'demo' ||
+		condition === 'minimal' ||
+		condition === 'library' ||
+		condition === 'svelte'
+	) {
 		return options.template === condition;
 	}
 	if (condition === 'typescript' || condition === 'checkjs') {

diff --git a/packages/create/scripts/build-templates.js b/packages/create/scripts/build-templates.js
@@ -109,7 +109,8 @@ async function generate_templates(dist, shared) {
 				const contents = fs.readFileSync(path.join(cwd, name), 'utf8');
 
 				if (name.endsWith('.d.ts')) {
-					if (name.endsWith('app.d.ts')) types.checkjs.push({ name, contents });
+					if (name.endsWith('app.d.ts') || name.endsWith('vite-env.d.ts'))
+						types.checkjs.push({ name, contents });
 					types.typescript.push({ name, contents });
 				} else if (name.endsWith('.ts')) {
 					const js = await convert_typescript(contents);

diff --git a/...ages/create/shared/+checkjs/jsconfig.json → .../create/shared/+kit+checkjs/jsconfig.json b/...ages/create/shared/+checkjs/jsconfig.json → .../create/shared/+kit+checkjs/jsconfig.json
diff --git a/packages/create/shared/+checkjs/package.json → ...s/create/shared/+kit+checkjs/package.json b/packages/create/shared/+checkjs/package.json → ...s/create/shared/+kit+checkjs/package.json
diff --git a/...ate/shared/+demo+checkjs/svelte.config.js → ...shared/+kit+demo+checkjs/svelte.config.js b/...ate/shared/+demo+checkjs/svelte.config.js → ...shared/+kit+demo+checkjs/svelte.config.js
diff --git a/.../shared/+demo+typescript/svelte.config.js → ...red/+kit+demo+typescript/svelte.config.js b/.../shared/+demo+typescript/svelte.config.js → ...red/+kit+demo+typescript/svelte.config.js
diff --git a/.../shared/+demo-typescript/svelte.config.js → ...red/+kit+demo-typescript/svelte.config.js b/.../shared/+demo-typescript/svelte.config.js → ...red/+kit+demo-typescript/svelte.config.js
diff --git a/.../shared/+library+typescript/tsconfig.json → ...red/+kit+library+typescript/tsconfig.json b/.../shared/+library+typescript/tsconfig.json → ...red/+kit+library+typescript/tsconfig.json
diff --git a/.../shared/+library-typescript/jsconfig.json → ...red/+kit+library-typescript/jsconfig.json b/.../shared/+library-typescript/jsconfig.json → ...red/+kit+library-typescript/jsconfig.json
diff --git a/packages/create/shared/+library/README.md → ...ages/create/shared/+kit+library/README.md b/packages/create/shared/+library/README.md → ...ages/create/shared/+kit+library/README.md
diff --git a/...es/create/shared/+typescript/package.json → ...reate/shared/+kit+typescript/package.json b/...es/create/shared/+typescript/package.json → ...reate/shared/+kit+typescript/package.json
diff --git a/...reate/shared/+typescript/svelte.config.js → ...e/shared/+kit+typescript/svelte.config.js b/...reate/shared/+typescript/svelte.config.js → ...e/shared/+kit+typescript/svelte.config.js
diff --git a/...s/create/shared/+typescript/tsconfig.json → ...eate/shared/+kit+typescript/tsconfig.json b/...s/create/shared/+typescript/tsconfig.json → ...eate/shared/+kit+typescript/tsconfig.json
diff --git a/...reate/shared/-typescript/svelte.config.js → ...e/shared/+kit-typescript/svelte.config.js b/...reate/shared/-typescript/svelte.config.js → ...e/shared/+kit-typescript/svelte.config.js
diff --git a/packages/create/shared/vite.config.ts → packages/create/shared/+kit/vite.config.ts b/packages/create/shared/vite.config.ts → packages/create/shared/+kit/vite.config.ts
diff --git a/packages/create/shared/+svelte+typescript/index.html b/packages/create/shared/+svelte+typescript/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<link rel="icon" type="image/svg+xml" href="/vite.svg" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Vite + Svelte + TS</title>
+	</head>
+	<body>
+		<div id="app"></div>
+		<script type="module" src="/src/main.ts"></script>
+	</body>
+</html>
diff --git a/packages/create/shared/+svelte+typescript/package.json b/packages/create/shared/+svelte+typescript/package.json
@@ -0,0 +1,10 @@
+{
+	"scripts": {
+		"check": "svelte-check --tsconfig ./tsconfig.json && tsc -p tsconfig.node.json"
+	},
+	"devDependencies": {
+		"svelte-check": "^4.0.5",
+		"tslib": "^2.7.0",
+		"typescript": "^5.6.2"
+	}
+}
diff --git a/packages/create/shared/+svelte+typescript/tsconfig.json b/packages/create/shared/+svelte+typescript/tsconfig.json
@@ -0,0 +1,21 @@
+{
+	"extends": "@tsconfig/svelte/tsconfig.json",
+	"compilerOptions": {
+		"target": "ESNext",
+		"useDefineForClassFields": true,
+		"module": "ESNext",
+		"resolveJsonModule": true,
+		/**
+		 * Typecheck JS in `.svelte` and `.js` files by default.
+		 * Disable checkJs if you'd like to use dynamic types in JS.
+		 * Note that setting allowJs false does not prevent the use
+		 * of JS in `.svelte` files.
+		 */
+		"allowJs": true,
+		"checkJs": true,
+		"isolatedModules": true,
+		"moduleDetection": "force"
+	},
+	"include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"],
+	"references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/packages/create/shared/+svelte+typescript/tsconfig.node.json b/packages/create/shared/+svelte+typescript/tsconfig.node.json
@@ -0,0 +1,13 @@
+{
+	"compilerOptions": {
+		"composite": true,
+		"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+		"skipLibCheck": true,
+		"module": "ESNext",
+		"moduleResolution": "bundler",
+		"strict": true,
+		"noEmit": true,
+		"noUncheckedSideEffectImports": true
+	},
+	"include": ["vite.config.ts"]
+}
diff --git a/packages/create/shared/+svelte-typescript/index.html b/packages/create/shared/+svelte-typescript/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<link rel="icon" type="image/svg+xml" href="/vite.svg" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Vite + Svelte</title>
+	</head>
+	<body>
+		<div id="app"></div>
+		<script type="module" src="/src/main.js"></script>
+	</body>
+</html>
diff --git a/packages/create/shared/+svelte-typescript/jsconfig.json b/packages/create/shared/+svelte-typescript/jsconfig.json
@@ -0,0 +1,32 @@
+{
+	"compilerOptions": {
+		"moduleResolution": "bundler",
+		"target": "ESNext",
+		"module": "ESNext",
+		/**
+		 * svelte-preprocess cannot figure out whether you have
+		 * a value or a type, so tell TypeScript to enforce using
+		 * `import type` instead of `import` for Types.
+		 */
+		"verbatimModuleSyntax": true,
+		"isolatedModules": true,
+		"resolveJsonModule": true,
+		/**
+		 * To have warnings / errors of the Svelte compiler at the
+		 * correct position, enable source maps by default.
+		 */
+		"sourceMap": true,
+		"esModuleInterop": true,
+		"skipLibCheck": true,
+		/**
+		 * Typecheck JS in `.svelte` and `.js` files by default.
+		 * Disable this if you'd like to use dynamic types.
+		 */
+		"checkJs": true
+	},
+	/**
+	 * Use global.d.ts instead of compilerOptions.types
+	 * to avoid limiting type declarations.
+	 */
+	"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
+}
diff --git a/packages/create/shared/+svelte/svelte.config.js b/packages/create/shared/+svelte/svelte.config.js
@@ -0,0 +1,7 @@
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+export default {
+	// Consult https://svelte.dev/docs#compile-time-svelte-preprocess
+	// for more information about preprocessors
+	preprocess: vitePreprocess()
+};
diff --git a/packages/create/shared/+svelte/vite.config.ts b/packages/create/shared/+svelte/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import { svelte } from '@sveltejs/vite-plugin-svelte';
+
+// https://vite.dev/config/
+export default defineConfig({
+	plugins: [svelte()]
+});
diff --git a/packages/create/shared/README.md b/packages/create/shared/README.md
@@ -1,6 +1,6 @@
 # create-svelte
 
-Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
+Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/cli/tree/main/packages/sv).
 
 ## Creating a project
 

diff --git a/packages/create/templates/svelte/.gitignore b/packages/create/templates/svelte/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/packages/create/templates/svelte/.ignore b/packages/create/templates/svelte/.ignore
@@ -0,0 +1,3 @@
+package.json
+.meta.json
+.turbo
diff --git a/packages/create/templates/svelte/.meta.json b/packages/create/templates/svelte/.meta.json
@@ -0,0 +1,4 @@
+{
+	"title": "Svelte minimal",
+	"description": "barebones scaffolding for your new app"
+}
diff --git a/packages/create/templates/svelte/README.md b/packages/create/templates/svelte/README.md
@@ -0,0 +1,47 @@
+# Svelte + TS + Vite
+
+This template should help get you started developing with Svelte and TypeScript in Vite.
+
+## Recommended IDE Setup
+
+[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
+
+## Need an official Svelte framework?
+
+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.
+
+## Technical considerations
+
+**Why use this over SvelteKit?**
+
+- It brings its own routing solution which might not be preferable for some users.
+- It is first and foremost a framework that just happens to use Vite under the hood, not a Vite app.
+
+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.
+
+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.
+
+**Why `global.d.ts` instead of `compilerOptions.types` inside `jsconfig.json` or `tsconfig.json`?**
+
+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.
+
+**Why include `.vscode/extensions.json`?**
+
+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.
+
+**Why enable `allowJs` in the TS template?**
+
+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.
+
+**Why is HMR not preserving my local component state?**
+
+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).
+
+If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR.
+
+```ts
+// store.ts
+// An extremely simple external store
+import { writable } from 'svelte/store';
+export default writable(0);
+```
diff --git a/packages/create/templates/svelte/index.html b/packages/create/templates/svelte/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<link rel="icon" type="image/svg+xml" href="/vite.svg" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Vite + Svelte + TS</title>
+	</head>
+	<body>
+		<div id="app"></div>
+		<script type="module" src="/src/main.ts"></script>
+	</body>
+</html>
diff --git a/packages/create/templates/svelte/package.template.json b/packages/create/templates/svelte/package.template.json
@@ -0,0 +1,17 @@
+{
+	"name": "vite-svelte-ts-starter",
+	"private": true,
+	"version": "0.0.0",
+	"type": "module",
+	"scripts": {
+		"dev": "vite",
+		"build": "vite build",
+		"preview": "vite preview"
+	},
+	"devDependencies": {
+		"@sveltejs/vite-plugin-svelte": "^4.0.0-next.6",
+		"@tsconfig/svelte": "^5.0.4",
+		"svelte": "^5.0.0-next.1",
+		"vite": "^5.4.9"
+	}
+}
diff --git a/packages/create/templates/svelte/public/vite.svg b/packages/create/templates/svelte/public/vite.svg
diff --git a/packages/create/templates/svelte/src/App.svelte b/packages/create/templates/svelte/src/App.svelte
@@ -0,0 +1,47 @@
+<script lang="ts">
+	import svelteLogo from './assets/svelte.svg';
+	import viteLogo from '/vite.svg';
+	import Counter from './lib/Counter.svelte';
+</script>
+
+<main>
+	<div>
+		<a href="https://vite.dev" target="_blank" rel="noreferrer">
+			<img src={viteLogo} class="logo" alt="Vite Logo" />
+		</a>
+		<a href="https://svelte.dev" target="_blank" rel="noreferrer">
+			<img src={svelteLogo} class="logo svelte" alt="Svelte Logo" />
+		</a>
+	</div>
+	<h1>Vite + Svelte</h1>
+
+	<div class="card">
+		<Counter />
+	</div>
+
+	<p>
+		Check out <a href="https://github.com/sveltejs/kit#readme" target="_blank" rel="noreferrer"
+			>SvelteKit</a
+		>, the official Svelte app framework powered by Vite!
+	</p>
+
+	<p class="read-the-docs">Click on the Vite and Svelte logos to learn more</p>
+</main>
+
+<style>
+	.logo {
+		height: 6em;
+		padding: 1.5em;
+		will-change: filter;
+		transition: filter 300ms;
+	}
+	.logo:hover {
+		filter: drop-shadow(0 0 2em #646cffaa);
+	}
+	.logo.svelte:hover {
+		filter: drop-shadow(0 0 2em #ff3e00aa);
+	}
+	.read-the-docs {
+		color: #888;
+	}
+</style>