nwc tooling 2023
#nwc_tooling
sosukesuzuki（セッションオーナー）
nissy_dev
sapphi_red
omoteota
どういうことやってるか
omoteota
ESLintコミッター
eslint-plugin-vue
Stylelint幽霊部員
sapphi_red
Viteコントリビューター
nissy_dev
Biomeコントリビューター
sosukesuzuki
prettierメンテナー、Babel幽霊部員
Viteとは何なのか
rollup、esbuild
Frontend Tooling
バンドラーではない
じゃあ何だよって話になるが…
バンドラーの上のよくあるベストプラクティス集を詰め込んだやつ
補完する開発サーバー部分
バンドルのアルゴリズムは担ってない
HMRはViteの仕事
どういうことをやってるのか
割と幅広くやってる
開発サーバー側、パンドラのつなぎこみ部分
CSSのハンドルする部分、Workerのハンドルする部分
SSR対応
今後やりたい話
裏側をRolldownに変える仕事
Rust化
パフォーマンス
esbuildと揃ってないのがつらいやつ
rspackを作ってた人たちと協業していく
ByteDance
リポジトリ自体はまだプライベート
近々公開
Viteの開発時のSSRはNode.js上でしか実行できないのでCloudflare Workersで動くようにしたい（別ランタイムで動かせるようにしたい）
Biomeはバンドルやらない？
内部ではやらない方針
LintやFormatまわりでサポートしていくのに注力していきたい
大きな互換のあるものを作っていく
Romeとは違う
４年経ってる
思想が変わってる
スコープが小さくなってしまった感
なんでもやれるのに憧れはあったたが
会社がなくなってしまった
CSSのフォーマットは来年以降
ロードマップも来年の頭で考えてみてる
HTMLはどうする？
プライオリティは高い
しかし人が足りない
astroも考えている
ASTも一から定義している
各言語の知識が必要
Angularの複雑さについて
prettierは対応している
パーサーを魔改造してる
謎のワークアラウンドで頑張ってる
ASTはそこまで大変じゃなかった
Biomeはそれをやるのは大変ではないか
Vue.jsのSFCのASTはあったはず
パースファイルだと重複した属性では難しかった
HTMLの仕様を見て作り直してた
正規表現のパーサーの対応
vflagはuflagのスーパーセット
https://github.com/tc39/proposal-regexp-v-flag
UniCode周りつれぇ
JSはutf-16で大変
Rustの文字列は違う（utf-8）
SWCでバグ踏み抜いたときに知った
Rollupの話
SWCに送る時に文字列とマッピング変える関数があった
SWCはacorn使ってたときより速い？
デカいファイル使うときは速い
細かいやつの集合は…？
https://github.com/meriyah/meriyah
OXCの速度が２倍になった
FlatBuffersに変換する
/deno-ja/FlatBuffers
ESTreeとは違う
Rollupの速度はパースの問題？
それもあるが全てではない
大きいものを処理しない限りはそこまで変わらないのかな？
ツールの高度化により修正がしづらくなる？
Rust化
風潮としてはそこまで好きではない
ただそこまで問題はないと思ってる
やる人はやるじゃん
エコシステム側は厳しくなるのでは
BiomeはPRがいっぱいきててパンクしてる
APIがわかりやすいのがあるのかな
プラグイン向きでやりやすくなってる
JSでプラグイン書けるようにはさせてない
そもそも実現できないのでは
rspackはloaderがJSなのでは？
パンドラはJavaScriptでやれそう
しかしLinterは辛い
それはVueやSvelteの人は辛いのではないか
BiomeにはAstroの中の人おるし
パースだけJSにするのはどうだろう？という提案
新しい言語をサポートをするのは大変だ
CSSのパーサーは難しい（仕様自体が難しい）
Prettierはトークン列を雰囲気で構文として読んでやってる（適当）
フォーマット用のパーサーは適当でもいける
Minifyつらい
font-familyはグローバルで定義されているのはクォーテーションで囲わなくない
ただその定義はバラバラに仕様書に書いてたので死ぬほど大変だった
esbuildでも同じように失敗してるやん
CSSの仕様書が見づらい問題をIssueにしてくれた
Rust
Biomeが早くてPrettierが負けたやつ
【翻訳】Prettier を Rust で書き換えたプロジェクトに $20k の報奨金を支払うプログラムは Biome が勝ちました
sosukesuzukiは知らなかった
prettierのTypeScriptのパーサーを変えたい
https://github.com/typescript-eslint/typescript-eslint のものを使っている
Babelのやつを使うと早くなる
デフォルトのが変わってないのはなぜ
変えたいですよね
v4.0で変わるらしい
ESLint
DenoのLintは脅威？
別に
潰すなら勝手にどうぞ感
Rustで書き換えたいのは？
コミュニティのプラグインを潰してしまうのでそれはやりたくない
Flat configどうなる？
移行期間がある
flat-compat次第
バラバラでサポートされている
typescript-eslintを参考にしたい
インポートは決まってるがエクスポートのさせ方は自由
ESMのサポートがきつい
ESLint's new config system, Part 2: Introduction to flat config - ESLint - Pluggable JavaScript Linter
設定だけはCJSになる
PrettierもESM対応大変だった
Prettier 3.0: Hello, ECMAScript Modules! · Prettier
Prettierはコンフィグが混沌としている
prettier-cliの対応した人（非メンテナ）が設定多くて驚愕した
toml使う人おるんけ…？
Biomeの設定はtoml、JSONが人気
ymlは効かない
JSONCが使えない
ViteはJSだけ
CJSでもやれる（deprecatedにはなってる）
postcss は .cjs書かないといけない
依存関係
pnpm でパッケージにパッチを当てる
https://pnpm.io/cli/patch
ESM移行は無理だけどおれもSindreのライブラリが使いたい！ - Google Slides
Biomeは必要であるものは基本取り込んでいく
プラグイン受け入れざるを得ない
一度受け入れたら出すのが大変じゃないか
この部分は正解はない
Biome入れときゃいいじゃん、で済む
バイナリサイズがでかくなる
https://gyazo.com/bd25afd02583002c91f56acedab3eb89
フォーマッターとかLinterとかで分けていくのはどうかという提案
ESLintのルールはシビア
Stage4に上がったものは消していく
フォーマット系は消していく流れ（Stylelint）
Prettierはモノレポにしたい
言語・パースごととか
Jestはモノレポになってるのでその形式にしたい
embedded formatting
Next.jsのServer ActionsでのSQL書くデモでそこもフォーマットしてくれって要望が出てきた
GraphQLと何が違うんだ！
自分が入ってた時にサポート入ってるので知らん
GitHub - trivago/prettier-plugin-sort-imports: A prettier plugin to sort imports in typescript and javascript files by the provided RegEx order.
ハックしているプラグイン
Biomeはimportをソートする
https://biomejs.dev/ja/analyzer/
ただ新しい概念としてソートしてる
importのソートはESLintの仕事
ASTが変わっちゃうので