svelte/コード配置の整理 の履歴(No.1)
更新特定ページでしか使わないものは 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