プログラミング/svelte

いろいろ読んで勉強中†

• 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
  • svelte での書き方 → https://stackoverflow.com/questions/76285794/svelte-components-intrinsicelements-or-sveltehtmlelements-for-extending-with-ht

typescript + vitest で npm パッケージの開発†

typescript + vitest で npm パッケージの開発 2024

オンプレミスの GitLab サーバーで CI ランナーと npm パッケージサーバーを動かす†

オンプレGitLabでgit+CI+npmサーバー2024

svelte コンポーネントの Re-export†

default に名前を付けて Export すればいい

LANG:html
<script lang='ts'>
  export { default as Component } from 'component.svelte';

+layout.server.ts からの PageData を +page.server.ts で使う†

LANG:ts
export const load = (async (event) => {
  const data = await event.parent();

呼び出し間隔の調整を行う†

主にイベントハンドラからの呼び出しを 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;
}