fix: add typescript support in .svelte files

[lumirth]

enable and add preprocessor for sveltekit and svelte respectively

(fix #276)

What kind of change does this PR introduce?

• Bugfix
• Feature
• Docs
• New Binding issue #___
• Code style update
• Refactor
• Build-related changes
• Other, please describe:

Does this PR introduce a breaking change?

• Yes, and the changes were approved in issue #___
• No

Checklist

• When resolving issues, they are referenced in the PR's title (e.g fix: remove a typo, closes #___, #___)
• A change file is added if any packages will require a version bump due to this PR per the instructions in the readme.
• I have added a convincing reason for adding this feature, if necessary

Other information

In the Svelte and SvelteKit TypeScript templates, if TypeScript syntax is used inside a .svelte file, Vite will throw an error. For example, in a fresh SvelteKit project, if the code...

<script lang="ts">
  import { invoke } from "@tauri-apps/api/tauri";

  let name = "";
  let greetMsg = "";

  let myBool: boolean;  // <-- line of interest(line 6)

  async function greet() {
    // Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
    greetMsg = await invoke("greet", { name });
  }
</script>

...is in a .svelte file(here it is specifically line 6), the following error is seen:

2:55:52 PM [vite] Internal server error: /src/lib/Greet.svelte:6:12 Unexpected token
  Plugin: vite-plugin-svelte
  File: /src/lib/Greet.svelte:6:12
   4 |    let name = "";
   5 |    let greetMsg = "";
   6 |    let myBool: boolean;
                    ^
   7 |  
   8 |    async function greet() {

This error appears in both Svelte and SvelteKit, with brand new, freshly-created projects. The fixes I found differ between Svelte and SvelteKit.

---

For SvelteKit, the svelte.config.js must be changed from this:

import staticAdapter from "@sveltejs/adapter-static";

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    adapter: staticAdapter(),
  },
};

export default config;

...to this:

import staticAdapter from "@sveltejs/adapter-static";
import { vitePreprocess } from "@sveltejs/kit/vite"; // <-- added this line

/** @type {import('@sveltejs/kit').Config} */
const config = {
  preprocess: [vitePreprocess()], // <-- and this line
  kit: {
    adapter: staticAdapter(),
  },
};

export default config;

In Svelte, the package.json file must be changed to add

// ...
    "svelte-preprocess": "^5.0.0",
// ...

...to the devDependencies.

Further, the beginning of the vite.config.ts file must be changed from this:

import { defineConfig } from "vite";
import { svelte } from "@sveltejs/vite-plugin-svelte";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [svelte()],
// ...

...to this:

import { defineConfig } from "vite";
import { svelte } from "@sveltejs/vite-plugin-svelte";
import sveltePreprocess from "svelte-preprocess"; // <-- added this

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [svelte({ preprocess: [sveltePreprocess({ typescript: true })] })], // <-- and this
// ...

Once these changes are made, TypeScript can be used as-expected within .svelte files, in both SvelteKit and Svelte.

---

This is my first ever pull request. Please let me know if I have done anything in error.

[amrbashir]

Thanks