2024-06-03のJS: vitest v2.0.0-beta.5(browser mode)、Rspack v0.7、ESLint Migrator (#1198)

* Update 695 draft

* Update 695 draft

* Update 695 draft

* Update 695 draft

* Update 695 draft

* Update 695 draft

* Update 695 draft

* Update 695 draft

* Update 695 draft

* Update 695 draft

* Update 695 draft

* Update 695 draft

* Update _i18n/ja/_posts/2024/2024-06-03-vitest-v2.0.0-beta.5browser-mode-rspack-v0.7-eslint-migrator.md

* Delete _i18n/ja/_posts/2024/2024-06-03-695draft.md

* Update _i18n/ja/_posts/2024/2024-06-03-vitest-v2.0.0-beta.5browser-mode-rspack-v0.7-eslint-migrator.md

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Author: azu

_i18n/ja/_posts/2024/2024-06-03-vitest-v2.0.0-beta.5browser-mode-rspack-v0.7-eslint-migrator.md

@@ -0,0 +1,180 @@
+---
+title: "2024-06-03のJS: vitest v2.0.0-beta.5(browser mode)、Rspack v0.7、ESLint Migrator"
+author: "azu"
+layout: post
+date: 2024-06-03T13:18:59.009Z
+category: JSer
+tags:
+- test
+- book
+- TypeScript
+- ESLint
+- Design
+
+---
+
+JSer.info #695 - Vitest v2.0.0-beta.5がリリースされました。
+
+- [Release v2.0.0-beta.5 · vitest-dev/vitest](https://github.com/vitest-dev/vitest/releases/tag/v2.0.0-beta.5)
+
+`--merge-reports`がカバレッジをサポート、Promiseベースのmockに対するAssertionの追加、ブラウザモードの改善などが含まれています。
+
+VitestのBrowser Modeは、`jsdom`や`happy-dom`を置き換える形で、コンポーネントテストのための仕組みとして作られています。
+開発中のVitest 2.0ではCommands APIとmodule mockingが追加されています。
+
+次のIssueに、VitestのBrowser Modeの目的や方向性についての解説が書かれています。
+
+- [Vitest Browser Mode · vitest-dev/vitest · Discussion #5828](https://github.com/vitest-dev/vitest/discussions/5828)
+
+---
+
+RsPack v0.7がリリースされました。
+
+- [Announcing Rspack v0.7 - Rspack](https://www.rspack.dev/blog/announcing-0-7)
+- [Release v0.7.0 · web-infra-dev/rspack](https://github.com/web-infra-dev/rspack/releases/tag/v0.7.0)
+
+Lazy Compilationのサポート、CSSビルドのパフォーマンス改善が行われています。
+UnstableなJavaScript APIを非推奨化、`@import`は他のルールよりもあることをチェックするようになる変更も含まれています。
+
+また、Rspack v1.0のロードマップも公開されていて、2024年7月にv1.0がリリースされる予定です。
+
+- [[Tracking]: Rspack v1.0 · Issue #6689 · web-infra-dev/rspack](https://github.com/web-infra-dev/rspack/issues/6689)
+- [Rspack v1.0 Release Plan · web-infra-dev/rspack · Discussion #6315](https://github.com/web-infra-dev/rspack/discussions/6315)
+
+---
+
+ESLint 9のFlat Configへマイグレーションするための[ESLint Configuration Migrator](https://www.npmjs.com/package/@eslint/migrate-config)が公開されています。
+
+- [Introducing the ESLint Configuration Migrator - ESLint - Pluggable JavaScript Linter](https://eslint.org/blog/2024/05/eslint-configuration-migrator/)
+
+`.eslintrc.json`などから、`eslint.config.js`に移行を補助するツールとなっています。
+
+----
+
+{% include inline-support.html %}
+
+----
+
+<h1 class="site-genre">ヘッドライン</h1>
+
+----
+
+## Release v2.0.0-beta.5 · vitest-dev/vitest
+[github.com/vitest-dev/vitest/releases/tag/v2.0.0-beta.5](https://github.com/vitest-dev/vitest/releases/tag/v2.0.0-beta.5 "Release v2.0.0-beta.5 · vitest-dev/vitest")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">vite</span> <span class="jser-tag">test</span> <span class="jser-tag">library</span> <span class="jser-tag">ReleaseNote</span></p>
+
+vitest v2.0.0-beta.5リリース。
+`--merge-reports`がカバレッジをサポート、Promiseベースのmockに対するAssertionの追加、ブラウザモードの改善など
+
+
+----
+
+## Prettier 3.3: New Flow features and a lot of bug fixes · Prettier
+[prettier.io/blog/2024/06/01/3.3.0.html](https://prettier.io/blog/2024/06/01/3.3.0.html "Prettier 3.3: New Flow features and a lot of bug fixes · Prettier")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">Tools</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Prettier 3.3リリース。
+Flowに追加された`declare name`/`component`構文をサポート、`gql` template literal内のGraphQLをサポート、pnpmの`package.yaml`のサポートなど
+
+- [feat: support package.yaml and package.json5 by zkochan · Pull Request #1799 · pnpm/pnpm](https://github.com/pnpm/pnpm/pull/1799 "feat: support package.yaml and package.json5 by zkochan · Pull Request #1799 · pnpm/pnpm")
+
+----
+
+## Release v4.4.0 · honojs/hono
+[github.com/honojs/hono/releases/tag/v4.4.0](https://github.com/honojs/hono/releases/tag/v4.4.0 "Release v4.4.0 · honojs/hono")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">Hono</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Hono v4.4.0リリース。
+JSRにパッケージを公開するように、`getConnInfo`を追加、`timeout` middlewareの追加など
+
+
+----
+
+## Announcing Rspack v0.7 - Rspack
+[www.rspack.dev/blog/announcing-0-7](https://www.rspack.dev/blog/announcing-0-7 "Announcing Rspack v0.7 - Rspack")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">bundler</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Rspack v0.7リリース。
+Lazy Compilationのサポート、CSSビルドのパフォーマンス改善。
+UnstableなJavaScript APIを非推奨化、`@import`は他のルールよりもあることをチェックするように。
+
+- [Release v0.7.0 · web-infra-dev/rspack](https://github.com/web-infra-dev/rspack/releases/tag/v0.7.0 "Release v0.7.0 · web-infra-dev/rspack")
+
+----
+
+## Deno 1.44: Private npm registries, improved Node.js compat, and performance boosts
+[deno.com/blog/v1.44](https://deno.com/blog/v1.44 "Deno 1.44: Private npm registries, improved Node.js compat, and performance boosts")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">dneo</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Deno v1.44リリース。
+`.npmrc`を使ったprivate npm registryのサポート、gRPC接続のサポート、V8のポインター圧縮によるメモリ使用量の削減。
+`Deno.exitCode`をStable化、`Response.prototype.bytes()`のサポートなど
+
+
+----
+<h1 class="site-genre">アーティクル</h1>
+
+----
+
+## Introducing the ESLint Configuration Migrator - ESLint - Pluggable JavaScript Linter
+[eslint.org/blog/2024/05/eslint-configuration-migrator/](https://eslint.org/blog/2024/05/eslint-configuration-migrator/ "Introducing the ESLint Configuration Migrator - ESLint - Pluggable JavaScript Linter")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">ESLint</span> <span class="jser-tag">article</span></p>
+
+ESLint 9のFlatConfigへ移行するためのマイグレーションツールが公開された
+
+
+----
+
+## Live types in a TypeScript monorepo
+[colinhacks.com/essays/live-types-typescript-monorepo](https://colinhacks.com/essays/live-types-typescript-monorepo "Live types in a TypeScript monorepo")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">TypeScript</span> <span class="jser-tag">article</span></p>
+
+monorepo内でパッケージとして分けたTypeScriptのコードをビルドなしで参照する方法について。
+`exports`と`tsconfig-paths`を使った方法、`publishConfig`と組み合わせてnpm registryにもpubilsh可能な手法について
+
+
+----
+
+## How 1Password Used Esbuild to Cut Browser Extension Build Times | 1Password
+[blog.1password.com/new-extension-build-system/](https://blog.1password.com/new-extension-build-system/ "How 1Password Used Esbuild to Cut Browser Extension Build Times | 1Password")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">TypeScript</span> <span class="jser-tag">esbuild</span> <span class="jser-tag">article</span></p>
+
+esbuildのbundleとtscを使った型チェックを並列で実行するパターン、esbuildのMetafileを使ってbundle sizeを分析する方法について
+
+
+----
+<h1 class="site-genre">書籍関係</h1>
+
+----
+
+## デジタル庁デザインシステムβ版
+[design.digital.go.jp/](https://design.digital.go.jp/ "デジタル庁デザインシステムβ版")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">Design</span> <span class="jser-tag">accessibility</span> <span class="jser-tag">figma</span> <span class="jser-tag">document</span></p>
+
+デジタル庁のデザインシステム。
+デザイン、コンポーネント、ガイドライン、アクセシビリティについてまとめられている
+
+
+----
+
+## テスト自動化実践ガイド 継続的にWebアプリケーションを改善するための知識と技法 | 末村 拓也 |本 | 通販 | Amazon
+[www.amazon.co.jp/dp/4798172359/](https://www.amazon.co.jp/dp/4798172359/ "テスト自動化実践ガイド 継続的にWebアプリケーションを改善するための知識と技法 | 末村 拓也 |本 | 通販 | Amazon")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">E2E</span> <span class="jser-tag">test</span> <span class="jser-tag">playwright</span> <span class="jser-tag">book</span></p>
+
+2024年7月30日発売
+CodeceptJSとPlaywrightを使ったE2Eテストについての書籍
+
+
+----
+
+## React 19の新機能まるわかり
+[zenn.dev/uhyo/books/react-19-new](https://zenn.dev/uhyo/books/react-19-new "React 19の新機能まるわかり")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">React</span> <span class="jser-tag">book</span></p>
+
+React 19の変更点についてまとめた書籍。
+Actionと`useTransition`、`useActionState`、`useOptimistic`、`use`などのHooksについて。
+また、`<title>`などの対応、refCallback、Contextやrefの変更、`onCaughtError`オプションについてなど
+
+- [React 19を概念から理解する - Speaker Deck](https://speakerdeck.com/player/98422ddec1914f339c53f9c299f80ce6?title=false&skipResize=true "React 19を概念から理解する - Speaker Deck")
+
+----