サイズとバンドル

English

パッケージの各部分は、それぞれ単独のインポートなので、ページは使うものの分だけを負担します。メインのインポートには18種類のデザインがすべて入っています。1つのデザインだけを描くページは、そのデザインを単独でインポートし、残りの17は読み込みません。

サイズは、各エントリーをesbuildでバンドルして最小化し、ほかには何も加えずに測ったものです。日めくりのデザインには、描ける日本の暦のコードが含まれます。デモの表には、現在のビルドの数字が出ています。

デザイン1つだけ

import { calendarIcon } from "@johnmorrisdotca/koyomi-calendars/themes/squircle";

const svg = calendarIcon({ month: 11, day: 2, year: 2026, scheme: "dark" });
console.log(svg.startsWith("<svg"));
// true

true

デザイン自身のcalendarIconは、メインのものと同じオプションをthemeなしで受け取ります。デザインを選べるページはメインのcalendarIconを、デザインが決まっているページはそのデザインをインポートします。

副作用なし

パッケージは"sideEffects": falseなので、バンドラーは使わないものを捨てられ、インポートしてもページには何も起きません。依存も、ネットワークへのリクエストも、保存されるデータもありません。

予算

scripts/check-bytes.tsは、上の各エントリーをバンドルして、予算を超えると失敗します（pinsは10,000バイト、squircleは10,500、sunは27,000、メインのインポートは52,000、/monthは12,500、/animateは3,500）。pnpm checkがこれを実行するので、インポートが大きくなる変更は、予算ファイルを意図的に更新して、そのことを明示する必要があります。

メインのインポートの中身

メインのインポートには、アイコン、補助関数（calendarLayout、calendarThemeOf、calendarWeekend、calendarMoon）、プリセット、枠、日本の暦の関数が入っています。月間カレンダーとページめくりは、わざと別にしてあります。月間カレンダーは多くのアイコンより大きく、ページめくりはブラウザーが必要で、サーバー上のアイコンには要らないからです。

import { CALENDAR_THEMES } from "@johnmorrisdotca/koyomi-calendars/names";
import { japaneseHoliday } from "@johnmorrisdotca/koyomi-calendars/japanese";

console.log(CALENDAR_THEMES.length, japaneseHoliday(2026, 11, 3)?.ja !== undefined);
// 18 true

18 true