-
-
Notifications
You must be signed in to change notification settings - Fork 71
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
2023-12-01のJS: Node.js v18.19.0(LTS)、BiomeとPrettier、CSS Hooks (#1142)
* Update 671 draft * Update 671 draft * Update 671 draft * Update 671 draft * Update 671 draft * Update 671 draft * Update 671 draft * Update 671 draft * Update 671 draft * Update 671 draft * Update 671 draft * Update 671 draft * Update 671 draft * Update 671 draft * Update 671 draft * Update 671 draft * Update 2023-12-01-671draft.md * Update _i18n/ja/_posts/2023/2023-12-01-node.js-v18.19.0lts-biomeprettier-css-hooks.md * Delete _i18n/ja/_posts/2023/2023-12-01-671draft.md * Update 2023-12-01-node.js-v18.19.0lts-biomeprettier-css-hooks.md * Update _i18n/ja/_posts/2023/2023-12-01-node.js-v18.19.0lts-biomeprettier-css-hooks.md * Update _i18n/ja/_posts/2023/2023-12-01-node.js-v18.19.0lts-biomeprettier-css-hooks.md * Update _i18n/ja/_posts/2023/2023-12-01-node.js-v18.19.0lts-biomeprettier-css-hooks.md * Update _i18n/ja/_posts/2023/2023-12-01-node.js-v18.19.0lts-biomeprettier-css-hooks.md --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
- Loading branch information
1 parent
6cf7da8
commit bf4efb8
Showing
1 changed file
with
226 additions
and
0 deletions.
There are no files selected for viewing
226 changes: 226 additions & 0 deletions
226
_i18n/ja/_posts/2023/2023-12-01-node.js-v18.19.0lts-biomeprettier-css-hooks.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 %} | ||
|
|
||
| ---- | ||
|
|
||
| <h1 class="site-genre">ヘッドライン</h1> | ||
|
|
||
| ---- | ||
|
|
||
| ## 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") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">cdn</span> <span class="jser-tag">library</span> <span class="jser-tag">ReleaseNote</span></p> | ||
|
|
||
| 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 |") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">Rust</span> <span class="jser-tag">Tools</span> <span class="jser-tag">ReleaseNote</span></p> | ||
|
|
||
| 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") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">nodejs</span> <span class="jser-tag">library</span> <span class="jser-tag">ReleaseNote</span></p> | ||
|
|
||
| 設定ファイルのローダーライブラリである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") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">astro</span> <span class="jser-tag">ReleaseNote</span></p> | ||
|
|
||
| Astro 4.0 Betaリリース。 | ||
| Vite 5へのアップデート、`<ViewTransitions />`に関するライフサイクルイベントを追加など | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| ## 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") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">nodejs</span> <span class="jser-tag">ReleaseNote</span></p> | ||
|
|
||
| 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") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">nodejs</span> <span class="jser-tag">webservice</span></p> | ||
|
|
||
| Node.jsのバージョンごとのダウンロード数をビジュアライズするサイト | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| ## Storybook 7.6 | ||
| [storybook.js.org/blog/storybook-7-6/](https://storybook.js.org/blog/storybook-7-6/ "Storybook 7.6") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">Development</span> <span class="jser-tag">debug</span> <span class="jser-tag">Tools</span> <span class="jser-tag">ReleaseNote</span></p> | ||
|
|
||
| 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") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">nodejs</span> <span class="jser-tag">ReleaseNote</span></p> | ||
|
|
||
| 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") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">TypeScript</span> <span class="jser-tag">nodejs</span> <span class="jser-tag">library</span></p> | ||
|
|
||
| ts-nodeのようにTypeScriptのコードを型チェックしながらコンパイルできるローダー。 | ||
| Node.js 20からサポートされている`Module.register()`を使って`node --import`で動作する。またデーモンとキャッシュを使うことで、不要な処理をスキップできる。 | ||
|
|
||
|
|
||
| ---- | ||
| <h1 class="site-genre">アーティクル</h1> | ||
|
|
||
| ---- | ||
|
|
||
| ## 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") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">nodejs</span> <span class="jser-tag">JavaScript</span> <span class="jser-tag">performance</span> <span class="jser-tag">article</span></p> | ||
|
|
||
| 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 | ミツエーリンクス") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">CSS</span> <span class="jser-tag">article</span></p> | ||
|
|
||
| CSS Containmentについて | ||
|
|
||
|
|
||
| ---- | ||
| <h1 class="site-genre">ソフトウェア、ツール、ライブラリ関係</h1> | ||
|
|
||
| ---- | ||
|
|
||
| ## 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") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">aws</span> <span class="jser-tag">JavaScript</span> <span class="jser-tag">library</span></p> | ||
|
|
||
| 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.") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">CSS</span> <span class="jser-tag">React</span> <span class="jser-tag">library</span></p> | ||
|
|
||
| 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") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">TypeScript</span> <span class="jser-tag">nodejs</span> <span class="jser-tag">Tools</span> <span class="jser-tag">library</span></p> | ||
|
|
||
| ts-nodeのようにTypeScriptのコードを型チェックしながらコンパイルできるローダー。 | ||
| Node.js 20からサポートされている`Module.register()`を使って`node --import`で動作する。またデーモンとキャッシュを使うことで、不要な処理をスキップできる。 | ||
|
|
||
|
|
||
|
|
||
| ---- | ||
| <h1 class="site-genre">書籍関係</h1> | ||
|
|
||
| ---- | ||
|
|
||
| ## Fluent React | ||
| [learning.oreilly.com/library/view/fluent-react/9781098138707/](https://learning.oreilly.com/library/view/fluent-react/9781098138707/ "Fluent React") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">React</span> <span class="jser-tag">book</span></p> | ||
|
|
||
| 2024年3月発売。 | ||
| Reactについての書籍 | ||
|
|
||
|
|
||
| ---- |