refactor: upgrade to Svelte v5 (#212)

* upgrade astro dependencies

* migration to Svelte 5

* Resolution of module version

* fix migrate script error

* fix migrate error comment

* fix Stylus format

* add intellisense for typescript

* Upgrading astrojs/svelte and svelte, and organizing dependencies

* Delete the incorrect settings.

* upgrade astro

* Fixed an error that occurred due to svelte.config.ts using unsupported features.

astro.config.mjs

@@ -1,47 +1,47 @@
-import sitemap from '@astrojs/sitemap'
-import svelte from '@astrojs/svelte'
-import tailwind from '@astrojs/tailwind'
-import swup from '@swup/astro'
-import Compress from 'astro-compress'
-import icon from 'astro-icon'
-import { defineConfig } from 'astro/config'
-import Color from 'colorjs.io'
-import rehypeAutolinkHeadings from 'rehype-autolink-headings'
-import rehypeComponents from 'rehype-components' /* Render the custom directive content */
-import rehypeKatex from 'rehype-katex'
-import rehypeSlug from 'rehype-slug'
-import remarkDirective from 'remark-directive' /* Handle directives */
-import remarkGithubAdmonitionsToDirectives from 'remark-github-admonitions-to-directives'
-import remarkMath from 'remark-math'
-import { AdmonitionComponent } from './src/plugins/rehype-component-admonition.mjs'
-import { GithubCardComponent } from './src/plugins/rehype-component-github-card.mjs'
-import { parseDirectiveNode } from './src/plugins/remark-directive-rehype.js'
-import { remarkExcerpt } from './src/plugins/remark-excerpt.js'
-import { remarkReadingTime } from './src/plugins/remark-reading-time.mjs'
+import sitemap from "@astrojs/sitemap";
+import svelte from "@astrojs/svelte";
+import tailwind from "@astrojs/tailwind";
+import swup from "@swup/astro";
+import Compress from "astro-compress";
+import icon from "astro-icon";
+import { defineConfig } from "astro/config";
+import Color from "colorjs.io";
+import rehypeAutolinkHeadings from "rehype-autolink-headings";
+import rehypeComponents from "rehype-components"; /* Render the custom directive content */
+import rehypeKatex from "rehype-katex";
+import rehypeSlug from "rehype-slug";
+import remarkDirective from "remark-directive"; /* Handle directives */
+import remarkGithubAdmonitionsToDirectives from "remark-github-admonitions-to-directives";
+import remarkMath from "remark-math";
+import { AdmonitionComponent } from "./src/plugins/rehype-component-admonition.mjs";
+import { GithubCardComponent } from "./src/plugins/rehype-component-github-card.mjs";
+import { parseDirectiveNode } from "./src/plugins/remark-directive-rehype.js";
+import { remarkExcerpt } from "./src/plugins/remark-excerpt.js";
+import { remarkReadingTime } from "./src/plugins/remark-reading-time.mjs";
 
-const oklchToHex = str => {
-  const DEFAULT_HUE = 250
-  const regex = /-?\d+(\.\d+)?/g
-  const matches = str.string.match(regex)
-  const lch = [matches[0], matches[1], DEFAULT_HUE]
-  return new Color('oklch', lch).to('srgb').toString({
-    format: 'hex',
-  })
-}
+const oklchToHex = (str) => {
+  const DEFAULT_HUE = 250;
+  const regex = /-?\d+(\.\d+)?/g;
+  const matches = str.string.match(regex);
+  const lch = [matches[0], matches[1], DEFAULT_HUE];
+  return new Color("oklch", lch).to("srgb").toString({
+    format: "hex",
+  });
+};
 
 // https://astro.build/config
 export default defineConfig({
-  site: 'https://fuwari.vercel.app/',
-  base: '/',
-  trailingSlash: 'always',
+  site: "https://fuwari.vercel.app/",
+  base: "/",
+  trailingSlash: "always",
   integrations: [
     tailwind(),
     swup({
       theme: false,
-      animationClass: 'transition-swup-',   // see https://swup.js.org/options/#animationselector
-                                            // the default value `transition-` cause transition delay
-                                            // when the Tailwind class `transition-all` is used
-      containers: ['main', '#toc'],
+      animationClass: "transition-swup-", // see https://swup.js.org/options/#animationselector
+      // the default value `transition-` cause transition delay
+      // when the Tailwind class `transition-all` is used
+      containers: ["main", "#toc"],
       smoothScrolling: true,
       cache: true,
       preload: true,
@@ -52,10 +52,10 @@ export default defineConfig({
     }),
     icon({
       include: {
-        'material-symbols': ['*'],
-        'fa6-brands': ['*'],
-        'fa6-regular': ['*'],
-        'fa6-solid': ['*'],
+        "preprocess: vitePreprocess(),": ["*"],
+        "fa6-brands": ["*"],
+        "fa6-regular": ["*"],
+        "fa6-solid": ["*"],
       },
     }),
     svelte(),
@@ -85,32 +85,32 @@ export default defineConfig({
         {
           components: {
             github: GithubCardComponent,
-            note: (x, y) => AdmonitionComponent(x, y, 'note'),
-            tip: (x, y) => AdmonitionComponent(x, y, 'tip'),
-            important: (x, y) => AdmonitionComponent(x, y, 'important'),
-            caution: (x, y) => AdmonitionComponent(x, y, 'caution'),
-            warning: (x, y) => AdmonitionComponent(x, y, 'warning'),
+            note: (x, y) => AdmonitionComponent(x, y, "note"),
+            tip: (x, y) => AdmonitionComponent(x, y, "tip"),
+            important: (x, y) => AdmonitionComponent(x, y, "important"),
+            caution: (x, y) => AdmonitionComponent(x, y, "caution"),
+            warning: (x, y) => AdmonitionComponent(x, y, "warning"),
           },
         },
       ],
       [
         rehypeAutolinkHeadings,
         {
-          behavior: 'append',
+          behavior: "append",
           properties: {
-            className: ['anchor'],
+            className: ["anchor"],
           },
           content: {
-            type: 'element',
-            tagName: 'span',
+            type: "element",
+            tagName: "span",
             properties: {
-              className: ['anchor-icon'],
-              'data-pagefind-ignore': true,
+              className: ["anchor-icon"],
+              "data-pagefind-ignore": true,
             },
             children: [
               {
-                type: 'text',
-                value: '#',
+                type: "text",
+                value: "#",
               },
             ],
           },
@@ -124,12 +124,12 @@ export default defineConfig({
         onwarn(warning, warn) {
           // temporarily suppress this warning
           if (
-            warning.message.includes('is dynamically imported by') &&
-            warning.message.includes('but also statically imported by')
+            warning.message.includes("is dynamically imported by") &&
+            warning.message.includes("but also statically imported by")
           ) {
-            return
+            return;
           }
-          warn(warning)
+          warn(warning);
         },
       },
     },
@@ -143,4 +143,4 @@ export default defineConfig({
       },
     },
   },
-})
+});