feat: add Sveltekit templates (#200)

* feat: 🔥 initial Sveltekit JS template * feat: 📝 add to readme * feat: 🔥 initial Sveltekit TS template * fix: 🎨 use a middle dash in name? * feat: ⚡️ register the templates * style: ✨ pnpm format * fix: ✨ match the other boilerplates * fix: 🐛 add changes * fix: ⚡️ simplify routes - Remove unused route group - Should fix the CI - Closer to the barebones SK template. * fix: 🚑️ apply feedbacks from @amrbashir * fix: ⚡️ enable CSR * fix: ⚡️ move to end of lists * fix: 🎨 remove template comments * fix: 🎨 missed edits * favicon.png -> svelte.png * readme
tauri-apps · Oct 4, 2022 · 0b09cc1 · 0b09cc1
1 parent dcc3db2
commit 0b09cc1
Show file tree

Hide file tree

Showing 37 changed files with 476 additions and 0 deletions.
diff --git a/.changes/svelte-kit-templates.md b/.changes/svelte-kit-templates.md
@@ -0,0 +1,6 @@
+---
+"create-tauri-app": minor
+"create-tauri-app-js": minor
+---
+
+Add `svelte-kit` and `svelte-kit-ts` template.
diff --git a/.scripts/generate-templates-matrix.js b/.scripts/generate-templates-matrix.js
@@ -17,6 +17,8 @@ const nodeJsTemplates = [
   "preact",
   "preact-ts",
   "clojurescript",
+  "svelte-kit",
+  "svelte-kit-ts",
 ];
 
 const matrixConfig = [

diff --git a/README.md b/README.md
@@ -92,6 +92,8 @@ Currently supported template presets include:
 - `preact-ts`
 - `angular`
 - `clojurescript`
+- `svelte-kit`
+- `svelte-kit-ts`
 
 You can use `.` for the project name to scaffold in the current directory.
 

diff --git a/packages/cli/fragments/_assets_/svelte.png b/packages/cli/fragments/_assets_/svelte.png
diff --git a/packages/cli/fragments/fragment-svelte-kit-ts/.npmrc b/packages/cli/fragments/fragment-svelte-kit-ts/.npmrc
@@ -0,0 +1 @@
+engine-strict=true
diff --git a/packages/cli/fragments/fragment-svelte-kit-ts/.vscode/extensions.json b/packages/cli/fragments/fragment-svelte-kit-ts/.vscode/extensions.json
@@ -0,0 +1,7 @@
+{
+  "recommendations": [
+    "svelte.svelte-vscode",
+    "tauri-apps.tauri-vscode",
+    "rust-lang.rust-analyzer"
+  ]
+}
diff --git a/packages/cli/fragments/fragment-svelte-kit-ts/README.md b/packages/cli/fragments/fragment-svelte-kit-ts/README.md
@@ -0,0 +1,8 @@
+# Svelte-Kit + Vite
+
+This template should help get you started developing with Tauri and Svelte-Kit in Vite.
+
+## Recommended IDE Setup
+
+[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) + [Tauri](https://marketplace.visualstudio.com/items?itemName=tauri-apps.tauri-vscode) + [rust-analyzer](https://marketplace.visualstudio.com/items?itemName=rust-lang.rust-analyzer).
+
diff --git a/packages/cli/fragments/fragment-svelte-kit-ts/_cta_manifest_ b/packages/cli/fragments/fragment-svelte-kit-ts/_cta_manifest_
@@ -0,0 +1,15 @@
+# Copyright 2019-2022 Tauri Programme within The Commons Conservancy
+# SPDX-License-Identifier: Apache-2.0
+# SPDX-License-Identifier: MIT
+
+beforeDevCommand = {{pkg_manager_run_command}} dev
+beforeBuildCommand = {{pkg_manager_run_command}} build
+devPath = http://localhost:1420
+distDir = ../build
+
+[files]
+vite.svg = static/vite.svg
+tauri.svg = static/tauri.svg
+svelte.svg = static/svelte.svg
+style.css = src/app.css
+svelte.png = static/favicon.png
diff --git a/packages/cli/fragments/fragment-svelte-kit-ts/_gitignore b/packages/cli/fragments/fragment-svelte-kit-ts/_gitignore
@@ -0,0 +1,31 @@
+# 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?
+
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
diff --git a/packages/cli/fragments/fragment-svelte-kit-ts/package.json b/packages/cli/fragments/fragment-svelte-kit-ts/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "{{package_name}}",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
+    "tauri": "tauri"
+  },
+  "dependencies": {
+    "@tauri-apps/api": "^1.1.0"
+  },
+  "devDependencies": {
+    "@sveltejs/kit": "next",
+    "@sveltejs/adapter-static": "next",
+    "svelte": "^3.49.0",
+    "svelte-check": "^2.7.1",
+    "svelte-preprocess": "^4.10.6",
+    "@tauri-apps/cli": "^1.1.0",
+    "tslib": "^2.3.1",
+    "typescript": "^4.8.4",
+    "vite": "^3.1.0"
+  }
+}
diff --git a/packages/cli/fragments/fragment-svelte-kit-ts/src/app.d.ts b/packages/cli/fragments/fragment-svelte-kit-ts/src/app.d.ts
@@ -0,0 +1,4 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+// and what to do when importing types
+declare namespace App {}
diff --git a/packages/cli/fragments/fragment-svelte-kit-ts/src/app.html b/packages/cli/fragments/fragment-svelte-kit-ts/src/app.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
+    <meta name="viewport" content="width=device-width" />
+    %sveltekit.head%
+  </head>
+  <body>
+    <div>%sveltekit.body%</div>
+  </body>
+</html>
diff --git a/packages/cli/fragments/fragment-svelte-kit-ts/src/lib/Greet.svelte b/packages/cli/fragments/fragment-svelte-kit-ts/src/lib/Greet.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { invoke } from "@tauri-apps/api/tauri";
+
+  let name = "";
+  let greetMsg = "";
+
+  async function greet() {
+    // Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
+    greetMsg = await invoke("greet", { name });
+  }
+</script>
+
+<div>
+  <div class="row">
+    <input id="greet-input" placeholder="Enter a name..." bind:value={name} />
+    <button on:click={greet}> Greet </button>
+  </div>
+  <p>{greetMsg}</p>
+</div>
diff --git a/packages/cli/fragments/fragment-svelte-kit-ts/src/routes/+layout.svelte b/packages/cli/fragments/fragment-svelte-kit-ts/src/routes/+layout.svelte
@@ -0,0 +1,7 @@
+<script>
+  import "../app.css";
+</script>
+
+<main class="container">
+  <slot />
+</main>
diff --git a/packages/cli/fragments/fragment-svelte-kit-ts/src/routes/+layout.ts b/packages/cli/fragments/fragment-svelte-kit-ts/src/routes/+layout.ts
@@ -0,0 +1,2 @@
+export const prerender = true;
+export const csr = true;
diff --git a/packages/cli/fragments/fragment-svelte-kit-ts/src/routes/+page.svelte b/packages/cli/fragments/fragment-svelte-kit-ts/src/routes/+page.svelte
@@ -0,0 +1,33 @@
+<script>
+  import Greet from "$lib/Greet.svelte";
+</script>
+
+<h1>Welcome to Tauri!</h1>
+
+<div class="row">
+  <a href="https://vitejs.dev" target="_blank">
+    <img src="/vite.svg" class="logo vite" alt="Vite Logo" />
+  </a>
+  <a href="https://tauri.app" target="_blank">
+    <img src="/tauri.svg" class="logo tauri" alt="Tauri Logo" />
+  </a>
+  <a href="https://kit.svelte.dev" target="_blank">
+    <img src="/svelte.svg" class="logo svelte" alt="Svelte Logo" />
+  </a>
+</div>
+
+<p>Click on the Tauri, Vite, and Svelte logos to learn more.</p>
+
+<div class="row">
+  <Greet />
+</div>
+
+<style>
+  .logo.vite:hover {
+    filter: drop-shadow(0 0 2em #747bff);
+  }
+
+  .logo.svelte:hover {
+    filter: drop-shadow(0 0 2em #ff3e00);
+  }
+</style>
diff --git a/packages/cli/fragments/fragment-svelte-kit-ts/svelte.config.js b/packages/cli/fragments/fragment-svelte-kit-ts/svelte.config.js
@@ -0,0 +1,15 @@
+import staticAdapter from "@sveltejs/adapter-static";
+import preprocess from "svelte-preprocess";
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+  // Consult https://github.com/sveltejs/svelte-preprocess
+  // for more information about preprocessors
+  preprocess: preprocess(),
+
+  kit: {
+    adapter: staticAdapter(),
+  },
+};
+
+export default config;
diff --git a/packages/cli/fragments/fragment-svelte-kit-ts/tsconfig.json b/packages/cli/fragments/fragment-svelte-kit-ts/tsconfig.json
@@ -0,0 +1,17 @@
+{
+  "extends": "./.svelte-kit/tsconfig.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "checkJs": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "strict": true
+  }
+  // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
+  //
+  // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+  // from the referenced tsconfig.json - TypeScript does not merge them in
+}
diff --git a/packages/cli/fragments/fragment-svelte-kit-ts/vite.config.js b/packages/cli/fragments/fragment-svelte-kit-ts/vite.config.js
@@ -0,0 +1,27 @@
+import { defineConfig } from "vite";
+import { sveltekit } from "@sveltejs/kit/vite";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [sveltekit()],
+
+  // Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
+  // prevent vite from obscuring rust errors
+  clearScreen: false,
+  // tauri expects a fixed port, fail if that port is not available
+  server: {
+    port: 1420,
+    strictPort: true,
+  },
+  // to make use of `TAURI_DEBUG` and other env variables
+  // https://tauri.studio/v1/api/config#buildconfig.beforedevcommand
+  envPrefix: ["VITE_", "TAURI_"],
+  build: {
+    // Tauri supports es2021
+    target: ["es2021", "chrome100", "safari13"],
+    // don't minify for debug builds
+    minify: !process.env.TAURI_DEBUG ? "esbuild" : false,
+    // produce sourcemaps for debug builds
+    sourcemap: !!process.env.TAURI_DEBUG,
+  },
+});
diff --git a/packages/cli/fragments/fragment-svelte-kit/.npmrc b/packages/cli/fragments/fragment-svelte-kit/.npmrc
@@ -0,0 +1 @@
+engine-strict=true
diff --git a/packages/cli/fragments/fragment-svelte-kit/.vscode/extensions.json b/packages/cli/fragments/fragment-svelte-kit/.vscode/extensions.json
@@ -0,0 +1,7 @@
+{
+  "recommendations": [
+    "svelte.svelte-vscode",
+    "tauri-apps.tauri-vscode",
+    "rust-lang.rust-analyzer"
+  ]
+}
diff --git a/packages/cli/fragments/fragment-svelte-kit/README.md b/packages/cli/fragments/fragment-svelte-kit/README.md
@@ -0,0 +1,8 @@
+# Svelte-Kit + Vite
+
+This template should help get you started developing with Tauri and Svelte-Kit in Vite.
+
+## Recommended IDE Setup
+
+[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) + [Tauri](https://marketplace.visualstudio.com/items?itemName=tauri-apps.tauri-vscode) + [rust-analyzer](https://marketplace.visualstudio.com/items?itemName=rust-lang.rust-analyzer).
+
diff --git a/packages/cli/fragments/fragment-svelte-kit/_cta_manifest_ b/packages/cli/fragments/fragment-svelte-kit/_cta_manifest_
@@ -0,0 +1,15 @@
+# Copyright 2019-2022 Tauri Programme within The Commons Conservancy
+# SPDX-License-Identifier: Apache-2.0
+# SPDX-License-Identifier: MIT
+
+beforeDevCommand = {{pkg_manager_run_command}} dev
+beforeBuildCommand = {{pkg_manager_run_command}} build
+devPath = http://localhost:1420
+distDir = ../build
+
+[files]
+vite.svg = static/vite.svg
+tauri.svg = static/tauri.svg
+svelte.svg = static/svelte.svg
+style.css = src/app.css
+svelte.png = static/favicon.png
diff --git a/packages/cli/fragments/fragment-svelte-kit/_gitignore b/packages/cli/fragments/fragment-svelte-kit/_gitignore
@@ -0,0 +1,31 @@
+# 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?
+
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
diff --git a/packages/cli/fragments/fragment-svelte-kit/jsconfig.json b/packages/cli/fragments/fragment-svelte-kit/jsconfig.json
@@ -0,0 +1,17 @@
+{
+  "extends": "./.svelte-kit/tsconfig.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "checkJs": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "strict": true
+  }
+  // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias and https://kit.svelte.dev/docs/configuration#files
+  //
+  // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+  // from the referenced tsconfig.json - TypeScript does not merge them in
+}
diff --git a/packages/cli/fragments/fragment-svelte-kit/package.json b/packages/cli/fragments/fragment-svelte-kit/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "{{package_name}}",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
+    "tauri": "tauri"
+  },
+  "dependencies": {
+    "@tauri-apps/api": "^1.1.0"
+  },
+  "devDependencies": {
+    "@sveltejs/kit": "next",
+    "@sveltejs/adapter-static": "next",
+    "svelte-preprocess": "^4.10.6",
+    "svelte": "^3.49.0",
+    "svelte-check": "^2.7.1",
+    "@tauri-apps/cli": "^1.1.0",
+    "typescript": "^4.8.4",
+    "vite": "^3.1.0"
+  }
+}
diff --git a/packages/cli/fragments/fragment-svelte-kit/src/app.d.ts b/packages/cli/fragments/fragment-svelte-kit/src/app.d.ts
@@ -0,0 +1,4 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+// and what to do when importing types
+declare namespace App {}
diff --git a/packages/cli/fragments/fragment-svelte-kit/src/app.html b/packages/cli/fragments/fragment-svelte-kit/src/app.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
+    <meta name="viewport" content="width=device-width" />
+    %sveltekit.head%
+  </head>
+  <body>
+    <div>%sveltekit.body%</div>
+  </body>
+</html>