依存ゼロで書く、
4 プラットフォーム共通の UI

packages/core

触ってみる

下のものはこのページで実際に動いている <yn-prefecture-picker> です。 地図は公有ドメインのデータから自前で生成しています。

パラメータを全部試す →

npm

使いはじめる

@ynetlabo/ui-core を入れると、データとトークンも一緒に入ります。

npm install @ynetlabo/ui-core

読み込むのは CSS 1 本と module 1 行だけです。import した時点でカスタム要素が登録されます。

<!-- 色・寸法・モーションはすべてトークン経由 -->
<link rel="stylesheet" href="node_modules/@ynetlabo/ui-tokens/dist/tokens.css">

<script type="module">
  import "@ynetlabo/ui-core";
</script>

<yn-prefecture-picker name="pref" code-format="jis"></yn-prefecture-picker>

• form の中に置けばそのまま送信されます（ElementInternals による参加）。
• 値の受け取りは change イベント。event.detail.value に入ります。
• Vue で使うときは isCustomElement の設定と、値の :value.prop 束縛が必要です。

npm

パッケージ

3 つに分かれています。@ynetlabo/ui-core を入れれば残り 2 つも一緒に入ります。

• @ynetlabo/ui-core プレーン Web 実装。素の Custom Elements、ランタイム依存ゼロ
• @ynetlabo/ui-tokens デザイントークン。CSS / TypeScript / Dart / Swift へ変換済み
• @ynetlabo/ui-data 都道府県マスタと日本地図の形状。4 実装が同じ値を見る

docs/specs

対応状況

この表は各 spec の frontmatter から生成しています。手書きの台帳は持ちません。

• none 未着手 / draft 実装中・公開 API は変わりうる / beta 使えるが破壊的変更あり / stable 公開 API 確定

設計

決めていること

• ランタイム依存を持たない。素の Custom Elements で書きます。 利用者側に追加のロードもバージョン衝突もありません。
• トークンは 3 層。primitive → semantic → component の参照方向を ビルド時に検査し、層をまたぐ近道を落とします。
• データは 1 か所で作る。都道府県マスタと地図の形状は生成スクリプトが作り、 Web / Dart / Swift の 3 つの生成物が同じ順序・同じ件数であることをテストが保証します。
• 仕様が先。振る舞いを変えるときは spec を先に直します。 このサイトの表も spec から作っているので、放っておいてもずれません。

判断の経緯は ADR、 今どう動くかは spec にあります。