fix: add typescript support in .svelte files (#277)

* fix: add typescript support in .svelte files enable and add preprocessor for sveltekit and svelte respectively (fix #276) * Update .changes/fix-typescript-in-svelte-and-sveltekit.md to be more concise Co-authored-by: Amr Bashir <amr.bashir2015@gmail.com> * style: hand-reformat line 7 to be multi-line Signed-off-by: Lukas <65358837+lukthony@users.noreply.github.com> Signed-off-by: Lukas <65358837+lukthony@users.noreply.github.com>
tauri-apps · Dec 31, 2022 · b9034ec · b9034ec
1 parent a525c64
commit b9034ec
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 1 deletion.
diff --git a/.changes/fix-typescript-in-svelte-and-sveltekit.md b/.changes/fix-typescript-in-svelte-and-sveltekit.md
@@ -0,0 +1,5 @@
+---
+"create-tauri-app": patch
+---
+
+Add `svelte-process` preprocessor to `svelte-ts` and `svelte-kit-ts` templates by default so typescript can work correctly inside `.svelte` files.
diff --git a/packages/cli/fragments/fragment-svelte-kit-ts/svelte.config.js b/packages/cli/fragments/fragment-svelte-kit-ts/svelte.config.js
@@ -1,7 +1,9 @@
 import staticAdapter from "@sveltejs/adapter-static";
+import { vitePreprocess } from "@sveltejs/kit/vite";
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
+  preprocess: [vitePreprocess()],
   kit: {
     adapter: staticAdapter(),
   },

diff --git a/packages/cli/fragments/fragment-svelte-ts/package.json b/packages/cli/fragments/fragment-svelte-ts/package.json
@@ -19,6 +19,7 @@
     "@tsconfig/svelte": "^3.0.0",
     "svelte": "^3.54.0",
     "svelte-check": "^2.10.0",
+    "svelte-preprocess": "^5.0.0",
     "tslib": "^2.4.1",
     "typescript": "^4.6.4",
     "vite": "^4.0.0",

diff --git a/packages/cli/fragments/fragment-svelte-ts/vite.config.ts b/packages/cli/fragments/fragment-svelte-ts/vite.config.ts
@@ -1,9 +1,18 @@
 import { defineConfig } from "vite";
 import { svelte } from "@sveltejs/vite-plugin-svelte";
+import sveltePreprocess from "svelte-preprocess";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [svelte()],
+  plugins: [
+    svelte({
+      preprocess: [
+        sveltePreprocess({
+          typescript: true,
+        }),
+      ],
+    }),
+  ],
 
   // Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
   // prevent vite from obscuring rust errors