プログラミング/svelte の履歴(No.31)

更新

公開メモ

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)

目次†

いろいろ読んで勉強中†

いよいよやってみる†

ここでの作業内容を収めた GitHub プロジェクト：
https://github.com/osamutake/svelte-authtest

  1. プログラミング/svelte/VSCodeの準備
  2. プログラミング/svelte/テストの仕方を確認
  3. プログラミング/svelte/Prisma と Lucia を使った認証システム
  4. プログラミング/svelte/メールアドレスの確認を行う
  5. プログラミング/svelte/認証機能のテストを追加
  6. プログラミング/svelte/管理者権限を付与する
  7. プログラミング/svelte/ブログ的なもの作り-投稿・表示・編集
  8. プログラミング/svelte/コード配置の整理
  9. プログラミング/svelte/記事の見た目をいじる
  10. プログラミング/svelte/pukiwikiの記事を流し込む

Svelte 5†

小ネタ†

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: 1469 (from 2010/06/03), today: 3, yesterday: 5