Fork me on GitHub

2023-12-01のJS: Node.js v18.19.0(LTS)、BiomeとPrettier、CSS Hooks

Edit on GitHub 編集履歴を見る

JSer.info #671 - Node.js v18.19.0がリリースされました。

npm 10へアップデート、node:moduleregister 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 Sponsors

JSer.info SponsorsGitHub SponsorsとしてJSer.infoを支援してくれている方々です。


ヘッドライン


Release v135 / Introducing esm.sh/run · esm-dev/esm.sh

github.com/esm-dev/esm.sh/releases/tag/v135

JavaScript cdn library ReleaseNote

esm.sh v135リリース。
JSXやTSのコード変換と実行できる
https://esm.sh/runの追加など


Biome formatter wins the Prettier challenge |

biomejs.dev/blog/biome-wins-prettier-challenge

JavaScript Rust Tools ReleaseNote

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

nodejs library ReleaseNote

設定ファイルのローダーライブラリであるcosmiconfig 9.0.0リリース。
searchStrategyオプションの追加、$import:のサポート。
ファイルシステムの権限で読み取り失敗したときにクラッシュする問題を修正など


Astro 4.0 Beta Release | Astro

astro.build/blog/astro-4-beta/

astro ReleaseNote

Astro 4.0 Betaリリース。
Vite 5へのアップデート、<ViewTransitions />に関するライフサイクルイベントを追加など


Node v18.19.0 (LTS) | Node.js

nodejs.org/en/blog/release/v18.19.0

nodejs ReleaseNote

Node.js v18.19.0リリース。
npm 10へアップデート、node:moduleregister APIの追加、import.meta.resolveのサポート。
.jsのデフォルトの扱いをCJSからESMへと変更できる--experimental-default-typeフラグのサポートなど。


Node.js Downloads

nodedownloads.nodeland.dev/

nodejs webservice

Node.jsのバージョンごとのダウンロード数をビジュアライズするサイト


Storybook 7.6

storybook.js.org/blog/storybook-7-6/

Development debug Tools ReleaseNote

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

nodejs ReleaseNote

Node.js v21.3.0リリース。
--disable-warningフラグの追加、ルート証明書をNSS 3.95に更新、UTF-8の文字列をfs.writeFileSyncで書き込む時のパフォーマンス改善など


tapjs/tsimp

github.com/tapjs/tsimp

TypeScript nodejs library

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

nodejs JavaScript performance article

PrettierのCLIのパフォーマンス改善について。
globのファイル探索の改善、INIファイルのパースの改善、キャッシュをデフォルト化、console.logの出力をバッファリングするように変更など


CSS Containmentの仕組みを理解してレンダリングパフォーマンスをアップする1 概要 | フロントエンドBlog | ミツエーリンクス

www.mitsue.co.jp/knowledge/blog/frontend/202311/28_1448.html

CSS article

CSS Containmentについて


ソフトウェア、ツール、ライブラリ関係


architect/aws-lite: A simple, fast, extensible AWS client

github.com/architect/aws-lite

aws JavaScript library

AWSのAPIクライアントライブラリ。
AWS SDKのパフォーマンスやスタックトレースなどの問題に対応する目的で作成している。


css-hooks/css-hooks: Hooks bring advanced CSS features to native inline styles.

github.com/css-hooks/css-hooks

JavaScript CSS React library

style属性でスタイリングをするCSS in JSライブラリ。React/Preact/Solidに対応している。
CSS custom propertiesを使って、:hoverなどの擬似クラスやMedia Queryに対するスタイルをstyle属性で実現している。


tapjs/tsimp

github.com/tapjs/tsimp

TypeScript nodejs Tools library

ts-nodeのようにTypeScriptのコードを型チェックしながらコンパイルできるローダー。
Node.js 20からサポートされているModule.register()を使ってnode --importで動作する。またデーモンとキャッシュを使うことで、不要な処理をスキップできる。


書籍関係


Fluent React

learning.oreilly.com/library/view/fluent-react/9781098138707/

React book

2024年3月発売。
Reactについての書籍


この記事へ修正リクエストをする
JSer.info Slackに参加する