プログラミング/svelte
svelte や svelte kit を使いこなしたい†
svelte や svelte kit は Web サイト構築用のライブラリ
Visual Studio Code を最大限活用するために作られた最新のエコシステムの恩恵を受けるために勉強してみよう
以下で学ぶこと:
- データベースの使い方を学ぶ (Prisma)
- フォームのバリデーション (SuperForms, Zod)
- サインアップ・ログイン・ログアウトのできる認証機能 (Lucia)
- その際にメールアドレスの確認を行う (nodemailer)
- css ライブラリを選定する (TailwindCSS, DaisyUI, svelte-french-toast)
- デプロイ方法を学ぶ (node build)
- テストを書く (Playwright, vitest)
目次†
いろいろ読んで勉強中†
- SvelteKit+Superforms+Prisma+Luciaでログイン機能を爆速で実装する
https://zenn.dev/gawarago/articles/f75f5113a3803d - SvelteKitが正式リリースされたのでtRPCとPrismaを使ってWebアプリを開発してみた
https://zenn.dev/kosei28/articles/d965f221a656fd - Vitest / Playwrightを使ってSvelteのコンポーネントをテストする
https://qiita.com/oekazuma/items/925ddbf48870fb999c19#vitest%E3%81%A8%E3%81%AF - TypeScript 4.9のas const satisfiesが便利。型チェックとwidening防止を同時に行う
https://zenn.dev/moneyforward/articles/typescript-as-const-satisfies - コーディング不要でGraphQLサーバが作れるPrismaを触ってみて可能性を感じた - SMARTCAMP Engineer Blog
https://tech.smartcamp.co.jp/entry/started-prisma - worst password list
https://github.com/danielmiessler/SecLists/blob/master/Passwords/Common-Credentials/10-million-password-list-top-100000.txt - 5歳娘「パパ、余分なpropsいっぱい書くんだね!」
https://qiita.com/Yametaro/items/814f40d08e9d30584e20#5%E6%AD%B3%E5%A8%98%E3%83%91%E3%83%91%E4%BD%99%E5%88%86%E3%81%AAprops%E3%81%84%E3%81%A3%E3%81%B1%E3%81%84%E6%9B%B8%E3%81%8F%E3%82%93%E3%81%A0%E3%81%AD
いよいよやってみる†
ここでの作業内容を収めた GitHub プロジェクト:
https://github.com/osamutake/svelte-authtest
Svelte 5†
小ネタ†
typescript + vitest で npm パッケージの開発†
オンプレミスの GitLab サーバーで CI ランナーと npm パッケージサーバーを動かす†
svelte コンポーネントの Re-export†
default に名前を付けて Export すればいい
LANG:html <script lang='ts'> export { default as Component } from 'component.svelte';
+layout.server.ts からの PageData を +page.server.ts で使う†
load 内で使うとき†
load 内で使えればよいのであれば event.parent() を使って
+page.server.ts
LANG:ts export const load = (async (event) => { const data = await event.parent();
とすればよい。
actions で使うとき†
actions が呼ばれるときはページのレンダリングと違って API としての呼び出しになるため layout.server.ts は呼ばれない。
そういうデータはどうやら PageData ではなく Locals に保存されるべきで src/hooks.server.js で設定するのが筋らしい。
呼び出し間隔の調整を行う†
主にイベントハンドラからの呼び出しを UI へフィードバックする際に使うことを想定している。
LANG: ts // const throttled = new Throttle(func, minInterval); // throttled.exec(arg1, arg2); // のように使うと、最低限 interval 空けて実行される // interval 未満の場合には interval だけ待ってから実行 // 実行待ちがあって呼び出されればそちらをキャンセルして新しい方を実行待ちする export class Throttle { lastExecTime = 0; timerId: number | undefined; constructor( private func: (...args: unknown[]) => void, private millisec: number = 50 ) {} exec(...args: unknown[]) { // 実行待ちがあればキャンセル window.clearTimeout(this.timerId); this.timerId = undefined; const execute = () => { this.timerId = undefined; this.func(...args); this.lastExecTime = performance.now(); }; // あとどれだけ待つ必要があるか const wait = this.lastExecTime + this.millisec - performance.now(); if (wait < 0) { // 即実行 execute(); } else { // 実行予約 this.timerId = window.setTimeout(execute, wait); } } }
path へのエイリアスを tsconfig で利かす†
tsx を使うと .ts ファイルを直接実行できて便利なのだけれど、そこから呼ばれる import に $lib などのパスエイリアスが含まれて入れるとエラーになる。
その場合には tsx に --tsconfig を指定して動かすといい
LANG:console $ ./node_modules/.bin/tsx --tsconfig tsconfig.json some-script.ts
grep する†
-r で再帰をかけておき、除外するディレクトリを exclude-dir で指定するといい
LANG:console $ grep --exclude-dir={node_modules,assets,.svelte-kit,build,bower_components} -rl "検索対象"
-l を付けることでファイル名のみを表示させている
VSC の terminal なら表示されたファイル名の Ctrl+Click でファイルを開ける
ZodObject の中身を見る†
LANG:ts export const SettingScheme = z.object({ param1: z.string().default('default1'), param2: z.string().default('default2'), }); // データ型を得る type Setting = z.infer<typeof SettingScheme>; // z.object に渡した { param1: ..., param2: ... } を得る const objectDefinition = SettingScheme.shape; // objectDefinition['param1'] は ZodDefault<ZodString> のようなもの // ZodString を取り出すには let param1def: any = objectDefinition['param1]; while(param1def?._def?.innerType) { // ZodDefault などでラップされているのを剥がす param1def = param1def_def.innerType; }
Counter: 1741 (from 2010/06/03),
today: 1,
yesterday: 1