JSer.info #671 - Node.js v18.19.0がリリースされました。
npm 10へアップデート、node:module
にregister
APIの追加、import.meta.resolve
のサポートが追加されています。
また、.js
のデフォルトの扱いをCJSからESMへと変更できる--experimental-default-type
フラグがバックポートされています。
Biome v1.4.0がリリースされました。
PrettierのJS/TS/JSXに関するテストケースを95%以上通すRust実装を募集するThe Prettier Challengeが行われていました。
Biome v1.4.0ではこのチャレンジを達成して、Pretttierのフォーマット結果と96%一致するようになっています。
意図的な差分などについては、次のIssueにまとめられています。
その他には、フォーマットに関するオプション追加、--config-path
フラグの追加、Lintルールの追加などが行われています。
Prettier's CLI: A Performance Deep Dive · Prettierという記事では、PrettierのCLIのパフォーマンス改善について書かれています。
globのファイル探索の改善、INIファイルのパースの改善、キャッシュをデフォルト化、console.log
の出力をバッファリングするように変更などの工夫についてCLIを改善した話が紹介されています。
CSS Hooksというライブラリでは、style
属性でスタイリングができるCSS in JSですが、:hover
などの擬似クラスなどをサポートをしています。
CSS Hooksでは、CSS Custom Propertiesを使うことでstyle属性での擬似クラスやMedia Queryをサポートしています。CSS Custom Propertiesでif文のようなスタイルのトグルをすることで実現しています。
詳しい仕組みは、次の記事などを参照してください。
JSer.infoをサポートするには
- 😘 知り合いにJSer.infoをおすすめする
- ❤️ GitHub Sponsorsで@azuのスポンサーになる
- 🐦 X(Twitter)で@jser_infoをフォローする
JSer.info Sponsors
JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。
ヘッドライン
Release v135 / Introducing esm.sh/run · esm-dev/esm.sh
github.com/esm-dev/esm.sh/releases/tag/v135
esm.sh v135リリース。
JSXやTSのコード変換と実行できる
https://esm.sh/run
の追加など
Biome formatter wins the Prettier challenge |
biomejs.dev/blog/biome-wins-prettier-challenge
Biome v1.4.0リリース。
JS/TS/JSXのフォーマット結果をPrettier互換となるように改善。現時点ではPrettierの結果と96%一致する。いくつかのフォーマットは意図的な差分があることについても書かれている。
フォーマットに関するオプション追加、--config-path
フラグの追加、Lintルールの追加など
Release v9.0.0 · cosmiconfig/cosmiconfig
github.com/cosmiconfig/cosmiconfig/releases/v9.0.0
設定ファイルのローダーライブラリであるcosmiconfig 9.0.0リリース。
searchStrategy
オプションの追加、$import:
のサポート。
ファイルシステムの権限で読み取り失敗したときにクラッシュする問題を修正など
Astro 4.0 Beta Release | Astro
astro.build/blog/astro-4-beta/
Astro 4.0 Betaリリース。
Vite 5へのアップデート、<ViewTransitions />
に関するライフサイクルイベントを追加など
Node v18.19.0 (LTS) | Node.js
nodejs.org/en/blog/release/v18.19.0
Node.js v18.19.0リリース。
npm 10へアップデート、node:module
にregister
APIの追加、import.meta.resolve
のサポート。
.js
のデフォルトの扱いをCJSからESMへと変更できる--experimental-default-type
フラグのサポートなど。
Node.js Downloads
Node.jsのバージョンごとのダウンロード数をビジュアライズするサイト
Storybook 7.6
storybook.js.org/blog/storybook-7-6/
Storybook 7.6リリース。
webpackプロジェクトでもSWCを利用するように変更、@storybook/test
のassertionをVitestのexpectに変更、Test modeの追加。
react-docgenのアップデートによる起動時間の改善、StoryshotsとVue2のサポートを非推奨化するなど
Node v21.3.0 (Current) | Node.js
nodejs.org/en/blog/release/v21.3.0
Node.js v21.3.0リリース。
--disable-warning
フラグの追加、ルート証明書をNSS 3.95に更新、UTF-8の文字列をfs.writeFileSync
で書き込む時のパフォーマンス改善など
tapjs/tsimp
ts-nodeのようにTypeScriptのコードを型チェックしながらコンパイルできるローダー。
Node.js 20からサポートされているModule.register()
を使ってnode --import
で動作する。またデーモンとキャッシュを使うことで、不要な処理をスキップできる。
アーティクル
Prettier's CLI: A Performance Deep Dive · Prettier
prettier.io/blog/2023/11/30/cli-deep-dive
PrettierのCLIのパフォーマンス改善について。
globのファイル探索の改善、INIファイルのパースの改善、キャッシュをデフォルト化、console.log
の出力をバッファリングするように変更など
CSS Containmentの仕組みを理解してレンダリングパフォーマンスをアップする1 概要 | フロントエンドBlog | ミツエーリンクス
www.mitsue.co.jp/knowledge/blog/frontend/202311/28_1448.html
CSS Containmentについて
ソフトウェア、ツール、ライブラリ関係
architect/aws-lite: A simple, fast, extensible AWS client
AWSのAPIクライアントライブラリ。
AWS SDKのパフォーマンスやスタックトレースなどの問題に対応する目的で作成している。
css-hooks/css-hooks: Hooks bring advanced CSS features to native inline styles.
github.com/css-hooks/css-hooks
style属性でスタイリングをするCSS in JSライブラリ。React/Preact/Solidに対応している。
CSS custom propertiesを使って、:hover
などの擬似クラスやMedia Queryに対するスタイルをstyle属性で実現している。
tapjs/tsimp
ts-nodeのようにTypeScriptのコードを型チェックしながらコンパイルできるローダー。
Node.js 20からサポートされているModule.register()
を使ってnode --import
で動作する。またデーモンとキャッシュを使うことで、不要な処理をスキップできる。
書籍関係
Fluent React
learning.oreilly.com/library/view/fluent-react/9781098138707/
2024年3月発売。
Reactについての書籍