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": "basic Vite template if you don't need multiple URLs. Most users should use SvelteKit"
+}
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>