svelte/コード配置の整理 のバックアップ(No.1)

更新


プログラミング/svelte

特定ページでしか使わないものは src/routes 下に置く

フォームのバリデータとか、ユーティリティ関数とかはなるべく src/lib に入れず、 src/routes 下の、それを使うページがあるあたりに置くのが良さそう。

いろいろ移動しよう。

superforms の zod スキーマ

src/lib/zod/ に置いていたフォームスキーマを、それを使うページのフォルダーへ移して zod-schema.ts という名前にする。

src/lib/zod/account/new.ts を src/routes/account/(logout)/new/zod-schema.ts みたいな

すると、使う側のコードはたいてい同じでいいので楽もできる。

LANG: ts
import { schema } from './zod-schema';

src/lib/zod/lib/passwordAndConfirm.ts と src/lib/zod/lib/emailRegexp.ts も

src/routes/accounts/zod-passwordAndConfirm.ts
src/routes/accounts/zod-emailRegexp.ts とする

src/lib/zod/articles/new.ts は src/routes/articles/zod-schema.ts

これだけ動かしても import は自動的に書き換えてくれるし、 最後に pnpm check でエラーがなければ大抵問題ないというのは本当にすごい。

LANG: console
$ git status
       deleted:    src/lib/zod/account/reset.ts
       modified:   src/routes/account/(login)/edit/+page.server.ts
       renamed:    src/lib/zod/account/edit.ts -> src/routes/account/(login)/edit/zod-schema.ts
       modified:   src/routes/account/(logout)/new/[token]/+page.server.ts
       renamed:    src/lib/zod/account/new.ts -> src/routes/account/(logout)/new/[token]/zod-schema.ts
       modified:   src/routes/account/(logout)/reset/[token]/+page.server.ts
       new file:   src/routes/account/(logout)/reset/[token]/zod-schema.ts
       modified:   src/routes/account/[purpose=emailVerificationPurpose]/+page.server.ts
       renamed:    src/lib/zod/account/emailVerification.ts -> src/routes/account/[purpose=emailVerificationPurpose]/zod-schema.ts
       renamed:    src/lib/zod/lib/emailRegexp.ts -> src/routes/account/zod-emailRegexp.ts
       renamed:    src/lib/zod/lib/passwordAndConfirm.ts -> src/routes/account/zod-passwordAndConfirm.ts
       modified:   src/routes/articles/(login)/new/+page.server.ts
       modified:   src/routes/articles/[...titleOrId]/(login)/edit/+page.server.ts
       renamed:    src/lib/zod/articles/new.ts -> src/routes/articles/zod-schema.ts
       modified:   src/routes/session/(logout)/new/+page.server.ts
       renamed:    src/lib/zod/session/new.ts -> src/routes/session/(logout)/new/zod-schema.ts
$ git commit -m "zod スキーマをフォームと同じフォルダに置くようにした"

db にメソッドを生やすのを止めよう

これも使うコードに近いところに置くべきだ。

$lib/server の path に Article を与えられるというのも所有権がはっきりしないので良くない。

LANG: ts
path('/articles/' + encodeTitle(relative.title))

のようにその場で計算する形に置き換えよう。

lib/server/db にあった articleTitleEncode, articleTitleDecode, newestArticle を移して、

routes/articles/lib.ts

LANG: ts
export function encodeTitle(title: string) {
  return title
    .split('/')
    .map((str) => encodeURIComponent(str).replaceAll('%20', '+'))
    .join('/');
}

export function decodeTitle(encoded: string) {
  return encoded
    .split('/')
    .map((str) => decodeURIComponent(str.replaceAll('+', '%20')))
    .join('/');
}

routes/articles/lib-server.ts

import type { Article, User } from '@prisma/client';
import { db } from '$lib/server/db';
import { path as stringPath } from '$lib/server';
import { encodeTitle } from './lib';

export function path(article: Article) {
  return stringPath('/articles/' + encodeTitle(article.title));
}

export async function getNewest(article: (Article & { author: User }) | number | null) {
  if (!article) {
    return null;
  }
  while (typeof article == 'number' || article?.newRevisionId) {
    article = await db.article.findUnique({
      where: {
        id: typeof article == 'number' ? article : article.newRevisionId!,
        deletedAt: null,
      },
      include: { author: true },
    });
  }
  return article;
}

あとは pnpm check で出てくるエラーをつぶせばOK。

quickfix で必要な import を追加してくれたりするので非常に楽だ。

LANG: console
$ git add . && git commit -m "route/articles/lib.ts, route/articles/lib-server.ts へ処理をまとめた"
       modified:   src/lib/server/db.ts
       modified:   src/lib/server/index.ts
       modified:   src/routes/articles/(login)/new/+page.server.ts
       modified:   src/routes/articles/[...titleOrId]/(login)/edit/+page.server.ts
       modified:   src/routes/articles/[...titleOrId]/+page.server.ts
       modified:   src/routes/articles/[...titleOrId]/articleFromTitleOrId.ts
       new file:   src/routes/articles/lib-server.ts
       new file:   src/routes/articles/lib.ts
       modified:   tests/auth.test.ts

Counter: 243 (from 2010/06/03), today: 3, yesterday: 0