アーキテクチャ

English

Koyomi Calendarsは、実行時の依存のない、ESモジュールにコンパイルされるふつうのTypeScriptです。設計の原則は、各部分がそれぞれ単独のインポートであることで、パッケージが育っても、小さなアイコンは小さいままです。

インポート

デザインとは

デザインは、src/themes/にある1つのファイルで、定義をエクスポートします。描画領域（ボックス）、layout（日付がページのどこに入り、年の領域がどこにあるか。年がある場合とない場合）、draw関数、そして必要に応じて、リングを置く位置、週末のページ、日めくりのページが描く追加データです。デザインがインポートするのは、共有の部品（kit.ts：文字、線で描いた数字、図形）と、日めくりのページならtear.tsだけです。ほかのデザインをインポートするデザインはないので、1つだけを単独でインポートできます。

src/icon.tsには、メインのインポート用の18種類の表があります。src/render.tsは、デザインの絵を完全なSVGにするひとつの関数です。オプションを検証し、Intlで日付の言葉を作り、描き、その結果を枠（frame.ts：枠、リング、傾き）で包み、タイトル、ラベル、roleを付けます。

アイコンができるまで

1. オプションを検証し、誤ったものごとにRangeErrorを投げます。プリセットは、渡されたオプションの下に敷かれるので、自分で渡したものが優先されます。
2. 日付の言葉を、ロケールに従ってIntlから作ります（未知のロケールは英語になります）。
3. デザインが、それぞれdata-partを付けた部品を、自分の箱の中に描きます。
4. 枠が、頼まれれば円盤の上に載せ、リングを足し、傾けます。
5. 結果は、大きさ、role="img"、title、aria-labelを持つSVGで包まれます。

どの段階も、オプションだけで決まる関数です。ライブラリは時計を読まず、乱数も使わず、入出力もしないので、同じ引数なら同じバイト列を返します。flipCalendarだけが、ページに触れる関数で、それも渡された要素だけです。

リポジトリが守る決まり

• 出力が意図せず変わることはありません。 test/identical.test.tsは、meigen-sports 0.19.2から来た最初の17のデザインについて、ゴールデンファイルとバイト単位で一致することを保証します。新しいオプションは、それを使わないアイコンの出力を変えません。
• サイズには予算があります。 scripts/check-bytes.tsが各インポートをバンドルし、予算を超えると失敗します。サイズとバンドルを参照してください。
• すべての絵は独自に描いたものです。 公開されている事実から描き、コピーやトレース、ストック素材は使わず、ロゴもなく、デザインの名前に会社名も含みません。
• すべてのデザインに、ライトとダークの2版と、レイアウト（pageとyearZone）があります。 ほかのデザインと同じ規則を満たすことを、テストで確かめています。
• **ドキュメントは、1ページにつき1言語で、**その中の例はpnpm test:readmeが実行します。

月間カレンダー

monthCalendarは、monthGridをもとに自前でレイアウトします。monthGridは単純な算術です。7日ずつの週、1日より前の空きマス、グレゴリオ暦のうるう年の規則です。4つのデザインは、同じ表を描く4つの関数です。表はエクスポートされているので、自分のデザインでも描けます。

ページめくり

flipCalendarは、アイコンの中身を1枚のページに置き換え、選ばれためくり方（FLIP_KEYFRAMES）のWeb Animations APIのキーフレームを再生してから、ふつうのアイコンを1つ戻します。続けて呼ぶと、動いているほうはすぐ終わります。動きの軽減のときは、アイコンを入れ替えるだけです。

テスト

pnpm testは単体テストを実行します（ゴールデンとの比較、各デザインのレイアウト、日本の暦、月の日付の表、ドキュメントの言語）。pnpm test:demoはデモをビルドしてChromiumとWebKitで動かし、pnpm test:readmeはREADMEとガイドのすべての例を実行し、pnpm checkはさらに、lint、型チェック、ビルド、パッケージ内容のチェック、バイトの予算の確認も行います。