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.
2024-11-30 15:59:51 +09:00
parent 87547fca86
commit ff9e82091a
7 changed files with 485 additions and 484 deletions
--- a/astro.config.mjs
+++ b/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({
      },
    },
  },
-})
+});
--- a/package.json
+++ b/package.json
@@ -14,23 +14,31 @@
    "lint": "biome check --apply ./src"
  },
  "dependencies": {
-    "@astrojs/check": "^0.9.3",
-    "@astrojs/rss": "^4.0.7",
-    "@astrojs/sitemap": "^3.1.6",
-    "@astrojs/svelte": "^5.7.1",
-    "@astrojs/tailwind": "^5.1.1",
-    "@fontsource-variable/jetbrains-mono": "^5.0.22",
-    "@fontsource/roboto": "^5.0.14",
+    "@astrojs/check": "^0.9.4",
+    "@astrojs/rss": "^4.0.9",
+    "@astrojs/sitemap": "^3.2.1",
+    "@astrojs/svelte": "^6.0.1",
+    "@astrojs/tailwind": "^5.1.2",
+    "@fontsource-variable/jetbrains-mono": "^5.1.1",
+    "@fontsource/roboto": "^5.1.0",
+    "@iconify-json/fa6-brands": "^1.2.1",
+    "@iconify-json/fa6-regular": "^1.2.1",
+    "@iconify-json/fa6-solid": "^1.2.1",
+    "@iconify-json/material-symbols": "^1.2.5",
+    "@iconify/svelte": "^4.0.2",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
    "@swup/astro": "^1.4.1",
-    "astro": "^4.15.9",
-    "astro-compress": "^2.3.1",
+    "@tailwindcss/typography": "^0.5.15",
+    "astro": "^4.16.13",
+    "astro-compress": "^2.3.5",
    "astro-icon": "^1.1.1",
    "colorjs.io": "^0.5.2",
    "hastscript": "^9.0.0",
    "markdown-it": "^14.1.0",
    "mdast-util-to-string": "^4.0.0",
    "overlayscrollbars": "^2.10.0",
-    "pagefind": "^1.1.0",
+    "pagefind": "^1.1.1",
+    "photoswipe": "^5.4.4",
    "reading-time": "^1.5.0",
    "rehype-autolink-headings": "^7.1.0",
    "rehype-components": "^0.3.0",
@@ -38,37 +46,24 @@
    "rehype-slug": "^6.0.0",
    "remark-directive": "^3.0.0",
    "remark-directive-rehype": "^0.4.2",
+    "remark-github-admonitions-to-directives": "^1.0.5",
    "remark-math": "^6.0.0",
-    "sanitize-html": "^2.13.0",
+    "sanitize-html": "^2.13.1",
+    "sass": "^1.80.4",
    "sharp": "^0.33.5",
-    "svelte": "^4.2.19",
-    "tailwindcss": "^3.4.10",
-    "typescript": "^5.5.4",
+    "stylus": "^0.63.0",
+    "svelte": "^5.2.2",
+    "tailwindcss": "^3.4.14",
+    "typescript": "^5.6.3",
    "unist-util-visit": "^5.0.0"
  },
  "devDependencies": {
-    "@astrojs/ts-plugin": "^1.10.2",
+    "@astrojs/ts-plugin": "^1.10.4",
    "@biomejs/biome": "1.8.3",
-    "@iconify-json/fa6-brands": "^1.1.22",
-    "@iconify-json/fa6-regular": "^1.1.22",
-    "@iconify-json/fa6-solid": "^1.1.24",
-    "@iconify-json/material-symbols": "^1.1.89",
-    "@iconify/svelte": "^4.0.2",
    "@rollup/plugin-yaml": "^4.1.2",
-    "@tailwindcss/typography": "^0.5.15",
    "@types/markdown-it": "^14.1.2",
    "@types/mdast": "^4.0.4",
-    "@types/sanitize-html": "^2.13.0",
-    "photoswipe": "^5.4.4",
-    "remark-github-admonitions-to-directives": "^1.0.5",
-    "sass": "^1.77.8",
-    "stylus": "^0.63.0"
-  },
-  "pnpm": {
-    "overrides": {
-      "vite-imagetools": "^6.2.7",
-      "sharp": "^0.33.0"
-    }
+    "@types/sanitize-html": "^2.13.0"
  },
  "packageManager": "pnpm@9.6.0+sha512.38dc6fba8dba35b39340b9700112c2fe1e12f10b17134715a4aa98ccf7bb035e76fd981cf0bb384dfa98f8d6af5481c2bef2f4266a24bfa20c34eb7147ce0b5e"
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/components/LightDarkSwitch.svelte
+++ b/src/components/LightDarkSwitch.svelte
@@ -12,7 +12,7 @@ import {
 import { onMount } from 'svelte'

 const seq: LIGHT_DARK_MODE[] = [LIGHT_MODE, DARK_MODE, AUTO_MODE]
-let mode: LIGHT_DARK_MODE = AUTO_MODE
+let mode: LIGHT_DARK_MODE = $state(AUTO_MODE)

 onMount(() => {
  mode = getStoredTheme()
@@ -58,8 +58,8 @@ function hidePanel() {
 </script>

 <!-- z-50 make the panel higher than other float panels -->
-<div class="relative z-50" role="menu" tabindex="-1" on:mouseleave={hidePanel}>
-    <button aria-label="Light/Dark Mode" role="menuitem" class="relative btn-plain scale-animation rounded-lg h-11 w-11 active:scale-90" id="scheme-switch" on:click={toggleScheme} on:mouseenter={showPanel}>
+<div class="relative z-50" role="menu" tabindex="-1" onmouseleave={hidePanel}>
+    <button aria-label="Light/Dark Mode" role="menuitem" class="relative btn-plain scale-animation rounded-lg h-11 w-11 active:scale-90" id="scheme-switch" onclick={toggleScheme} onmouseenter={showPanel}>
        <div class="absolute" class:opacity-0={mode !== LIGHT_MODE}>
            <Icon icon="material-symbols:wb-sunny-outline-rounded" class="text-[1.25rem]"></Icon>
        </div>
@@ -75,21 +75,21 @@ function hidePanel() {
        <div class="card-base float-panel p-2">
            <button class="flex transition whitespace-nowrap items-center justify-start w-full btn-plain scale-animation rounded-lg h-9 px-3 font-medium active:scale-95 mb-0.5"
                    class:current-theme-btn={mode === LIGHT_MODE}
-                    on:click={() => switchScheme(LIGHT_MODE)}
+                    onclick={() => switchScheme(LIGHT_MODE)}
            >
                <Icon icon="material-symbols:wb-sunny-outline-rounded" class="text-[1.25rem] mr-3"></Icon>
                {i18n(I18nKey.lightMode)}
            </button>
            <button class="flex transition whitespace-nowrap items-center justify-start w-full btn-plain scale-animation rounded-lg h-9 px-3 font-medium active:scale-95 mb-0.5"
                    class:current-theme-btn={mode === DARK_MODE}
-                    on:click={() => switchScheme(DARK_MODE)}
+                    onclick={() => switchScheme(DARK_MODE)}
            >
                <Icon icon="material-symbols:dark-mode-outline-rounded" class="text-[1.25rem] mr-3"></Icon>
                {i18n(I18nKey.darkMode)}
            </button>
            <button class="flex transition whitespace-nowrap items-center justify-start w-full btn-plain scale-animation rounded-lg h-9 px-3 font-medium active:scale-95"
                    class:current-theme-btn={mode === AUTO_MODE}
-                    on:click={() => switchScheme(AUTO_MODE)}
+                    onclick={() => switchScheme(AUTO_MODE)}
            >
                <Icon icon="material-symbols:radio-button-partial-outline" class="text-[1.25rem] mr-3"></Icon>
                {i18n(I18nKey.systemMode)}
--- a/src/components/widget/DisplaySettings.svelte
+++ b/src/components/widget/DisplaySettings.svelte
@@ -38,54 +38,55 @@ $: if (hue || hue === 0) {
    </div>
    <div class="w-full h-6 px-1 bg-[oklch(0.80_0.10_0)] dark:bg-[oklch(0.70_0.10_0)] rounded select-none">
        <input aria-label={i18n(I18nKey.themeColor)} type="range" min="0" max="360" bind:value={hue}
-               class="slider" id="colorSlider" step="5" style="width: 100%;">
+               class="slider" id="colorSlider" step="5" style="width: 100%">
    </div>
 </div>


 <style lang="stylus">
-  #display-setting
-    input[type="range"]
-      -webkit-appearance: none;
-      height: 1.5rem;
-      background-image: var(--color-selection-bar)
-      transition: background-image 0.15s ease-in-out
+    #display-setting
+      input[type="range"]
+        -webkit-appearance none
+        height 1.5rem
+        background-image var(--color-selection-bar)
+        transition background-image 0.15s ease-in-out

-    /* Input Thumb */
-    ::-webkit-slider-thumb
-      -webkit-appearance: none;
-      height: 1rem;
-      width: 0.5rem;
-      border-radius: 0.125rem;
-      background: rgba(255, 255, 255, 0.7);
-      box-shadow: none;
-      &:hover
-        background: rgba(255, 255, 255, 0.8);
-      &:active
-        background: rgba(255, 255, 255, 0.6);
+        /* Input Thumb */
+        &::-webkit-slider-thumb
+          -webkit-appearance none
+          height 1rem
+          width 0.5rem
+          border-radius 0.125rem
+          background rgba(255, 255, 255, 0.7)
+          box-shadow none
+          &:hover
+            background rgba(255, 255, 255, 0.8)
+          &:active
+            background rgba(255, 255, 255, 0.6)

-    ::-moz-range-thumb
-      -webkit-appearance: none;
-      height: 1rem;
-      width: 0.5rem;
-      border-radius: 0.125rem;
-      border-width: 0
-      background: rgba(255, 255, 255, 0.7);
-      box-shadow: none;
-      &:hover
-        background: rgba(255, 255, 255, 0.8);
-      &:active
-        background: rgba(255, 255, 255, 0.6);
+        &::-moz-range-thumb
+          -webkit-appearance none
+          height 1rem
+          width 0.5rem
+          border-radius 0.125rem
+          border-width 0
+          background rgba(255, 255, 255, 0.7)
+          box-shadow none
+          &:hover
+            background rgba(255, 255, 255, 0.8)
+          &:active
+            background rgba(255, 255, 255, 0.6)
+
+        &::-ms-thumb
+          -webkit-appearance none
+          height 1rem
+          width 0.5rem
+          border-radius 0.125rem
+          background rgba(255, 255, 255, 0.7)
+          box-shadow none
+          &:hover
+            background rgba(255, 255, 255, 0.8)
+          &:active
+            background rgba(255, 255, 255, 0.6)

-    &::-ms-thumb
-      -webkit-appearance: none;
-      height: 1rem;
-      width: 0.5rem;
-      border-radius: 0.125rem;
-      background: rgba(255, 255, 255, 0.7);
-      box-shadow: none;
-      &:hover
-        background: rgba(255, 255, 255, 0.8);
-      &:active
-        background: rgba(255, 255, 255, 0.6);
 </style>
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -0,0 +1,5 @@
+import { vitePreprocess } from "@astrojs/svelte";
+
+export default {
+  preprocess: [vitePreprocess({ script: true })],
+};