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>

Author: lumirth

.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.

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(),
   },

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",

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