はてなブックマーク

多くのライブラリは利便性のためにたくさんの機能を持っていて、その全てを活用するユーザーはほぼいません。一般的なライブラリにおいては、その中から必要な機能のみをバンドルに含めるための設計プラクティスが普及しており、Firebase JS SDK v9 での変更はその代表例でしょう。しかし、コンポーネントライブラリではそのようなプラクティスが発達しておらず、多くのアプリケーションでバンドルサイズに無視できない影響を与えています[1]。 そこで、バンドルサイズを削りやすいコンポーネント設計を考えます。ここでは例として、以下のようにフェードインするタグコンポーネントを Framer Motion を使って実装することを考えます[2]。フェードインの有無は何らかの方法で切り替えられるものとし、フェードインしない場合に、その関連コードをバンドルから削るようにします。 ❌ Boolean プロパティで切

Dataflow Proposals とは 以下の5つのプロポーザルをまとめて Dataflow Proposals と呼んでいる。 Stage 2: Pipe operator Stage 1: Call-this operator Stage 1: Partial application(PFA) Stage 1: Extensions Stage 0: Function.pipe and flow 例えば Pipe operator, Call-this operator, Partial application を組み合わせると、以下のように書けるようになる。（提案段階なので変わる可能性アリ） import { getAuth, getIdToken } from "firebase/auth"; function isPublic(article) { return articl

Namespace Import に補完を効かせる TypeScript Language Service Plugin[1]、typescript-plugin-namespace-import を作りました。 そのモチベーションと使い方を紹介します。 TL;DR 普通のオブジェクトを名前空間として用いると Tree Shaking が効かずバンドルサイズが膨らむ Namespace Import を用いれば Tree Shaking が効く しかし Namespace Import は Default Export と同様に補完が効かない TypeScript Language Service Plugin でファイル名を用いた補完を効かせていいとこ取り！ モチベーション 大規模なコードベースでは、全ての関数を無邪気に Named Export していると補完に全て出てきて開発体験が悪