💥 Force compiler into runes mode and replace UI library from Flowbite Svelte to Svelte 5 UI lib (#1619)

Author: KATO-Hiro

CONTRIBUTING.md

@@ -26,10 +26,10 @@
 - JavaScriptのランタイム
   - [Node.js](https://nodejs.org): v22.x
 - 汎用フレームワーク
-  - [Svelte](https://svelte.dev/): v5.x。後方互換性を優先しているが、Runes が利用できるように破壊的な変更が含まれる箇所を段階的に移行予定
+  - [Svelte](https://svelte.dev/): v5.x。Runes mode で運用中
   - [SvelteKit](https://svelte.dev/): v2.x
 - UIライブラリ
-  - [Flowbite Svelte](https://flowbite-svelte.com/)
+  - [Svelte 5 UI lib](https://svelte-5-ui-lib.codewithshin.com/) - Svelte v5.xにおける[Flowbite Svelte](https://flowbite-svelte.com/)の代替ライブラリ。一部の属性名・値などが変更されていることに注意が必要。コンポーネントが未実装である場合は、[Flowbite](https://flowbite.com/)を暫定的に利用する
   - [STWUI](https://stwui.vercel.app/): 開発が事実上終了した可能性が高いため、使用しているコンポーネントを調べて別のライブラリに移行する
 - テスティングフレームワーク
   - [Vitest](https://vitest.dev/): 単体テスト (ユーティリティ、コンポーネント)
@@ -120,18 +120,17 @@
 
   `docker compose exec web pnpm exec playwright install-deps`
 
-  `docker compose exec -e DATABASE_URL=postgresql://db_user:db_password@db:5432/test_db web pnpm prisma db push`
+  `docker compose exec -e DATABASE_URL=postgresql://db_user:db_password@db:5432/test_db?pgbouncer=true&connection_limit=10&connect_timeout=60&statement_timeout=60000 -e DIRECT_URL=postgresql://db_user:db_password@db:5432/test_db web pnpm prisma db push`
 
   `docker compose exec web pnpm prisma generate`
 
-- 開発サーバ(port番号: 5173)を起動します。その後、以下のリンクを順番にクリックしてください。
+- 開発サーバ(port番号: 5174)を起動します。その後、以下のリンクを順番にクリックしてください。
 
   - Note: リンクのアドレス・ポート番号は、環境によって変わる可能性もあります。
 
   `docker compose exec web pnpm dev --host`
 
-  http://172.18.0.3:5173
-  http://127.0.0.1:5173/
+  http://localhost:5174/
 
 - ホーム画面が起動し、ユーザの登録・ログインができれば、環境構築は完了です。
 
@@ -166,11 +165,11 @@
 
 - 以下のリンクをクリックしてください。
 
-  <http://127.0.0.1:5173/>
+  <http://localhost:5174/>
 
 - また、開発サーバの起動と同時に新しいブラウザタブでアプリを開くこともできます。
 
-  `pnpm dev -- --open`
+  `pnpm dev --open`
 
 - 先ほどとは異なるターミナルで以下のコマンドをそれぞれ実行すると、データベースの初期データ投入やローカル環境でのテーブル・サンプルデータが閲覧できます。
 
@@ -268,6 +267,17 @@
 
 ### トラブルシューティング
 
+- エラー: ローカル環境で開発用サーバを立ち上げても、ブラウザに表示されない
+
+  - 前提条件: Docker Desktop 4.30.0 以上、かつ、VSCode DevContainer で Vite を動かす場合。Windows、macOS で発生する
+  - 原因: Dockerで、ホストが IPv4 のみを使用している場合でも、`::1` を返すようになったため
+  - 対処方法: `vite.config` に、server の host を追記する
+  - 参考資料
+    - [Docker の Issues](https://github.com/docker/for-mac/issues/7276)
+    - [Vite の Issues](https://github.com/vitejs/vite/issues/16522#issuecomment-2432846922)
+    - [Zenn の記事](https://zenn.dev/onozaty/articles/docker-desktop-portforward-not-working)
+    - [本プロジェクトでの対処状況](https://github.com/AtCoder-NoviSteps/AtCoderNoviSteps/issues/814#issuecomment-2131173142)
+
 - エラー: Docker Desktop で Vite を利用したときに Segmentation Fault が発生
 
   - 対処方法: Docker Desktopで「Use Visualization Framework」のチェックを外す

package.json

@@ -48,7 +48,6 @@
     "eslint": "9.20.0",
     "eslint-config-prettier": "10.0.1",
     "eslint-plugin-svelte": "2.46.1",
-    "flowbite-svelte": "0.47.4",
     "flowbite-svelte-icons": "2.0.2",
     "globals": "15.14.0",
     "husky": "9.1.7",
@@ -64,6 +63,7 @@
     "svelte": "5.19.9",
     "svelte-check": "4.1.4",
     "svelte-meta-tags": "4.1.0",
+    "svelte-5-ui-lib": "0.12.2",
     "sveltekit-superforms": "2.23.1",
     "tslib": "2.8.1",
     "typescript": "5.6.3",
@@ -82,6 +82,8 @@
     "@types/node": "22.13.1",
     "autoprefixer": "10.4.20",
     "debug": "4.4.0",
+    "embla-carousel-autoplay": "8.5.2",
+    "embla-carousel-svelte": "8.5.2",
     "flowbite": "2.5.2",
     "lucia": "2.7.7",
     "playwright": "1.50.1",
@@ -93,5 +95,5 @@
     "vercel": "41.0.3",
     "xss": "1.0.15"
   },
-  "packageManager": "pnpm@9.15.2"
+  "packageManager": "pnpm@10.2.1"
 }

pnpm-lock.yaml

@@ -1,27 +1,27 @@
 <script lang="ts">
-  import { Label, Input, P } from 'flowbite-svelte';
-  // @ts-ignore
+  import { Label, Input, P } from 'svelte-5-ui-lib';
   import ClipboardOutline from 'flowbite-svelte-icons/ClipboardOutline.svelte';
+  // FIXME: stwui は事実上開発が終了しているので、別のライブラリに置き換える
   import { copyToClipboard } from 'stwui/utils/copyToClipboard';
-  //import type { ActionForm } from './$types';
 
   import ContainerWrapper from '$lib/components/ContainerWrapper.svelte';
   import FormWrapper from '$lib/components/FormWrapper.svelte';
   import LabelWrapper from '$lib/components/LabelWrapper.svelte';
   import SubmissionButton from '$lib/components/SubmissionButton.svelte';
 
-  export let username: string;
-  export let atcoder_username: string;
-  export let atcoder_validationcode: string;
+  interface Props {
+    username: string;
+    atcoder_username: string;
+    atcoder_validationcode: string;
+    status: string;
+  }
 
-  // status = notiong : username = "hogehoge" and atcoder_username = "" and atcoder_validationcode = "" and atcoder_validated = false
-  // status = generated : username = "hogehoge" and atcoder_username = "fugafuga" and atcoder_validationcode = "xxxxxx" and validated = false
-  // status = validated =  username = "hogehoge" and atcoder_username = "fugafuga" and atcoder_validationcode = "" and validated = true
-  // for noting -> generated, push "generate" button (only "generate" button is aveilable)
-  // for generated -> validated, push "validate" button ( "validate" and "edit" button is available )
-
-  // for generated/validated -> notiong, push "edit" button ( "edit" is available)
-  export let status: string;
+  let {
+    username = $bindable(),
+    atcoder_username = $bindable(),
+    atcoder_validationcode = $bindable(),
+    status,
+  }: Props = $props();
 
   // TODO: クリックしたときに、Copied!といったメッセージを表示できるようにしたい。
   // WHY: コピーができているか、確認できるようにするため
@@ -37,7 +37,7 @@
         本人確認の準備中
       </h3>
 
-      <P PsizeType="md" class="mt-6">AtCoder IDを入力し、本人確認用の文字列を生成してください。</P>
+      <P size="base" class="mt-6">AtCoder IDを入力し、本人確認用の文字列を生成してください。</P>
 
       <!-- hiddenでusernameを持つのは共通-->
       <Input size="md" type="hidden" name="username" bind:value={username} />
@@ -48,7 +48,6 @@
         <span>AtCoder ID</span>
         <Input
           size="md"
-          label="atcoder_username"
           name="atcoder_username"
           placeholder="chokudai"
           bind:value={atcoder_username}
@@ -63,7 +62,7 @@
     <FormWrapper action="?/validate" marginTop="">
       <h3 class="text-xl text-center mt-6 font-medium text-gray-900 dark:text-white">本人確認中</h3>
 
-      <P PsizeType="md" class="mt-6">
+      <P size="base" class="mt-6">
         AtCoderの所属欄に生成した文字列を貼り付けてから、「本人確認」ボタンを押してください。
       </P>
 
@@ -86,7 +85,9 @@
         <span>本人確認用の文字列</span>
         <div>
           <Input size="md" bind:value={atcoder_validationcode}>
-            <ClipboardOutline slot="right" class="w-5 h-5" on:click={handleClick} />
+            {#snippet right()}
+              <ClipboardOutline class="w-5 h-5" onclick={handleClick} />
+            {/snippet}
           </Input>
         </div>
       </Label>