diff --git a/_i18n/ja/_posts/2023/2023-12-01-node.js-v18.19.0lts-biomeprettier-css-hooks.md b/_i18n/ja/_posts/2023/2023-12-01-node.js-v18.19.0lts-biomeprettier-css-hooks.md new file mode 100644 index 00000000000..7396443be00 --- /dev/null +++ b/_i18n/ja/_posts/2023/2023-12-01-node.js-v18.19.0lts-biomeprettier-css-hooks.md @@ -0,0 +1,226 @@ +--- +title: "2023-12-01のJS: Node.js v18.19.0(LTS)、BiomeとPrettier、CSS Hooks" +author: "azu" +layout: post +date: 2023-12-01T08:35:59.869Z +category: JSer +tags: +- nodejs +- Tools +- CSS +- React +- TypeScript + +--- + +JSer.info #671 - Node.js v18.19.0がリリースされました。 + +- [Node v18.19.0 (LTS) | Node.js](https://nodejs.org/en/blog/release/v18.19.0) + +[npm 10](https://github.com/npm/cli/releases/tag/v10.0.0)へアップデート、`node:module`に`register` APIの追加、`import.meta.resolve`のサポートが追加されています。 +また、`.js`のデフォルトの扱いをCJSからESMへと変更できる`--experimental-default-type`フラグがバックポートされています。 + +---- + +Biome v1.4.0がリリースされました。 + +- [Biome formatter wins the Prettier challenge | Biome](https://biomejs.dev/blog/biome-wins-prettier-challenge) +- [Release CLI v1.4.0 · biomejs/biome](https://github.com/biomejs/biome/releases/tag/cli%2Fv1.4.0) + +PrettierのJS/TS/JSXに関するテストケースを95%以上通すRust実装を募集する[The Prettier Challenge](https://console.algora.io/challenges/prettier)が行われていました。 +Biome v1.4.0ではこのチャレンジを達成して、Pretttierのフォーマット結果と96%一致するようになっています。 +意図的な差分などについては、次のIssueにまとめられています。 + +- [☂️ Prettier Divergence collection from the Prettier challenge · Issue #739 · biomejs/biome](https://github.com/biomejs/biome/issues/739) + +その他には、フォーマットに関するオプション追加、`--config-path`フラグの追加、Lintルールの追加などが行われています。 + +--- + +[Prettier's CLI: A Performance Deep Dive · Prettier](https://prettier.io/blog/2023/11/30/cli-deep-dive)という記事では、PrettierのCLIのパフォーマンス改善について書かれています。 + +globのファイル探索の改善、INIファイルのパースの改善、キャッシュをデフォルト化、`console.log`の出力をバッファリングするように変更などの工夫についてCLIを改善した話が紹介されています。 + +---- + +CSS Hooksというライブラリでは、`style`属性でスタイリングができるCSS in JSですが、`:hover`などの擬似クラスなどをサポートをしています。 + +- [css-hooks/css-hooks: Hook into advanced CSS features with native inline styles.](https://github.com/css-hooks/css-hooks) + +CSS Hooksでは、CSS Custom Propertiesを使うことでstyle属性での擬似クラスやMedia Queryをサポートしています。CSS Custom Propertiesでif文のようなスタイルのトグルをすることで実現しています。 + +詳しい仕組みは、次の記事などを参照してください。 + +- [Cyclic Dependency Space Toggles](https://kizu.dev/cyclic-toggles/) + +---- + +{% include inline-support.html %} + +---- + +

ヘッドライン

+ +---- + +## Release v135 / Introducing esm.sh/run · esm-dev/esm.sh +[github.com/esm-dev/esm.sh/releases/tag/v135](https://github.com/esm-dev/esm.sh/releases/tag/v135 "Release v135 / Introducing esm.sh/run · esm-dev/esm.sh") +

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](https://biomejs.dev/blog/biome-wins-prettier-challenge "Biome formatter wins the Prettier challenge |") +

JavaScript Rust Tools ReleaseNote

+ +Biome v1.4.0リリース。 +JS/TS/JSXのフォーマット結果をPrettier互換となるように改善。現時点ではPrettierの結果と96%一致する。いくつかのフォーマットは意図的な差分があることについても書かれている。 +フォーマットに関するオプション追加、`--config-path`フラグの追加、Lintルールの追加など + +- [Release CLI v1.4.0 · biomejs/biome](https://github.com/biomejs/biome/releases/tag/cli%2Fv1.4.0 "Release CLI v1.4.0 · biomejs/biome") + +---- + +## Release v9.0.0 · cosmiconfig/cosmiconfig +[github.com/cosmiconfig/cosmiconfig/releases/v9.0.0](https://github.com/cosmiconfig/cosmiconfig/releases/v9.0.0 "Release v9.0.0 · cosmiconfig/cosmiconfig") +

nodejs library ReleaseNote

+ +設定ファイルのローダーライブラリであるcosmiconfig 9.0.0リリース。 +`searchStrategy`オプションの追加、`$import:`のサポート。 +ファイルシステムの権限で読み取り失敗したときにクラッシュする問題を修正など + + +---- + +## Astro 4.0 Beta Release | Astro +[astro.build/blog/astro-4-beta/](https://astro.build/blog/astro-4-beta/ "Astro 4.0 Beta Release | Astro") +

astro ReleaseNote

+ +Astro 4.0 Betaリリース。 +Vite 5へのアップデート、``に関するライフサイクルイベントを追加など + + +---- + +## Node v18.19.0 (LTS) | Node.js +[nodejs.org/en/blog/release/v18.19.0](https://nodejs.org/en/blog/release/v18.19.0 "Node v18.19.0 (LTS) | Node.js") +

nodejs ReleaseNote

+ +Node.js v18.19.0リリース。 +npm 10へアップデート、`node:module`に`register` APIの追加、`import.meta.resolve`のサポート。 +`.js`のデフォルトの扱いをCJSからESMへと変更できる`--experimental-default-type`フラグのサポートなど。 + + +---- + +## Node.js Downloads +[nodedownloads.nodeland.dev/](https://nodedownloads.nodeland.dev/ "Node.js Downloads") +

nodejs webservice

+ +Node.jsのバージョンごとのダウンロード数をビジュアライズするサイト + + +---- + +## Storybook 7.6 +[storybook.js.org/blog/storybook-7-6/](https://storybook.js.org/blog/storybook-7-6/ "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](https://nodejs.org/en/blog/release/v21.3.0 "Node v21.3.0 (Current) | Node.js") +

nodejs ReleaseNote

+ +Node.js v21.3.0リリース。 +`--disable-warning`フラグの追加、ルート証明書をNSS 3.95に更新、UTF-8の文字列を`fs.writeFileSync`で書き込む時のパフォーマンス改善など + + +---- + +## tapjs/tsimp +[github.com/tapjs/tsimp](https://github.com/tapjs/tsimp "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](https://prettier.io/blog/2023/11/30/cli-deep-dive "Prettier's CLI: A Performance Deep Dive · Prettier") +

nodejs JavaScript performance article

+ +PrettierのCLIのパフォーマンス改善について。 +globのファイル探索の改善、INIファイルのパースの改善、キャッシュをデフォルト化、`console.log`の出力をバッファリングするように変更など + + +---- + +## CSS Containmentの仕組みを理解してレンダリングパフォーマンスをアップする１ 概要 | フロントエンドBlog | ミツエーリンクス +[www.mitsue.co.jp/knowledge/blog/frontend/202311/28\_1448.html](https://www.mitsue.co.jp/knowledge/blog/frontend/202311/28_1448.html "CSS Containmentの仕組みを理解してレンダリングパフォーマンスをアップする１ 概要 | フロントエンドBlog | ミツエーリンクス") +

CSS article

+ +CSS Containmentについて + + +---- +

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

+ +---- + +## architect/aws-lite: A simple, fast, extensible AWS client +[github.com/architect/aws-lite](https://github.com/architect/aws-lite "architect/aws-lite: A simple, fast, extensible AWS client") +

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](https://github.com/css-hooks/css-hooks "css-hooks/css-hooks: Hooks bring advanced CSS features to native inline styles.") +

JavaScript CSS React library

+ +style属性でスタイリングをするCSS in JSライブラリ。React/Preact/Solidに対応している。 +CSS custom propertiesを使って、`:hover`などの擬似クラスやMedia Queryに対するスタイルをstyle属性で実現している。 + +---- + +## tapjs/tsimp +[github.com/tapjs/tsimp](https://github.com/tapjs/tsimp "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/](https://learning.oreilly.com/library/view/fluent-react/9781098138707/ "Fluent React") +

React book

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