Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

2023-12-08のJS: Redux 5.0.0、Vitest 1.0.0、Astro 4.0 #1144

Merged
merged 19 commits into from
Dec 8, 2023
Merged
233 changes: 233 additions & 0 deletions _i18n/ja/_posts/2023/2023-12-08-redux-5.0.0-vitest-1.0.0-astro-4.0.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,233 @@
---
title: "2023-12-08のJS: Redux 5.0.0、Vitest 1.0.0、Astro 4.0"
author: "azu"
layout: post
date: 2023-12-08T13:05:55.581Z
category: JSer
tags:
- nodejs
- redux
- CSS
- Electron
- deno

---

JSer.info #672 - Redux Toolkit v2.0.0に関連してRedux 5.0.0がリリースされました。

- [Release v5.0.0 · reduxjs/redux](https://github.com/reduxjs/redux/releases/tag/v5.0.0)

Redux 5.0.0では、TypeScriptへの書き換え、CJS/ESMのdual packageに変更、ES2020形式で出力するように変更。
また、`createStore`を非推奨として、Redux Toolkitへの移行を推奨しています。

- [Release v2.0.0 · reduxjs/redux-toolkit](https://github.com/reduxjs/redux-toolkit/releases/tag/v2.0.0)

同時にリリースされたRedux Toolkit v2.0.0では、Redux v5/Reselect 5.0へのアップデート、`createReducer`/`createSlice`の`extraReducers`におけるオブジェクト構文のサポートの削除などが行わています。
その他にも、`middleware`オプションが配列ではなくコールバック関数のみを受け付けるように変更、型定義の変更などが含まれています。

マイグレーションガイドも併せて公開されています。

- [Migrating to RTK 2.0 and Redux 5.0 | Redux](https://redux.js.org/usage/migrations/migrating-rtk-2)

---

Viteを使ったテストフレームワークであるVitest 1.0.0がリリースされました。

- [Release v1.0.0 · vitest-dev/vitest](https://github.com/vitest-dev/vitest/releases/tag/v1.0.0)

[Vite 5](https://vitejs.dev/blog/announcing-vite5)へアップデートされているため、Node.js 16のサポートが終了しています。
`node:child_process`を使った並列実行をサポート、`pool`と`poolOptions`をサポートし関連する古いフラグを削除などの変更が含まれています。
スナップショットの形式やオプションの変更などの破壊的な変更も含まれているため、マイグレーションガイドが公開されています。

- [Migration Guide | Guide | Vitest](https://vitest.dev/guide/migration.html#migrating-from-vitest-0-34-6)

---

Astro 4.0がリリースされました。

- [Astro 4.0 | Astro](https://astro.build/blog/astro-4/)

DevToolbarの追加、i18n Routingの追加、View Transition APIのサポートを改善、Loggingの改善などが含まれています。
また、実験的な機能としてIncremental Content Cachingが追加されています。

----

{% include inline-support.html %}

----

<h1 class="site-genre">ヘッドライン</h1>

----

## Fresh 1.6: Tailwind CSS plugin, simplified typings and more
[deno.com/blog/fresh-1.6](https://deno.com/blog/fresh-1.6 "Fresh 1.6: Tailwind CSS plugin, simplified typings and more")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">deno</span> <span class="jser-tag">library</span> <span class="jser-tag">ReleaseNote</span></p>

Fresh 1.6リリース。
TwindからTailwind CSSへの移行、`fresh.gen.ts`の自動生成結果がコンフリクトしにくい形式へと変更、Pluginからislandsが作成できるように。
ルーティングにURLPatternではなく正規表現を使うことでパフォーマンスを改善、Contextの型定義をまとめるなどの変更が含まれる

- [Release 1.6.0 · denoland/fresh](https://github.com/denoland/fresh/releases/tag/1.6.0 "Release 1.6.0 · denoland/fresh")
- [Migrating to Tailwind | Fresh docs](https://fresh.deno.dev/docs/examples/migrating-to-tailwind "Migrating to Tailwind | Fresh docs")
- [Poor URLPattern performance · Issue #19861 · denoland/deno](https://github.com/denoland/deno/issues/19861 "Poor URLPattern performance · Issue #19861 · denoland/deno")

----

## Release v5.0.0 · reduxjs/redux
[github.com/reduxjs/redux/releases/tag/v5.0.0](https://github.com/reduxjs/redux/releases/tag/v5.0.0 "Release v5.0.0 · reduxjs/redux")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">redux</span> <span class="jser-tag">JavaScript</span> <span class="jser-tag">ReleaseNote</span></p>

Redux v5.0.0リリース。
TypeScriptへの書き換え、CJS/ESMのdual packageに変更、ES2020形式で出力するように変更。
`createStore`を非推奨としRedux Toolkitへの移行を推奨としている。


----

## Release v2.0.0 · reduxjs/redux-toolkit
[github.com/reduxjs/redux-toolkit/releases/tag/v2.0.0](https://github.com/reduxjs/redux-toolkit/releases/tag/v2.0.0 "Release v2.0.0 · reduxjs/redux-toolkit")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">React</span> <span class="jser-tag">redux</span> <span class="jser-tag">library</span> <span class="jser-tag">ReleaseNote</span></p>

Redux Toolkit v2.0.0リリース。
Redux v5/Reselect 5.0へのアップデート、`createReducer`/`createSlice`の`extraReducers`におけるオブジェクト構文のサポートを削除。
`middleware`オプションが配列ではなくコールバック関数のみを受け付けるように変更、型定義の変更など。
`combineSlices`の追加、`createDynamicMiddleware`の追加、`autoBatchEnhancer`をデフォルトで有効化するなど

- [Migrating to RTK 2.0 and Redux 5.0 | Redux](https://redux.js.org/usage/migrations/migrating-rtk-2 "Migrating to RTK 2.0 and Redux 5.0 | Redux")

----

## Release v6.0.0 · avajs/ava
[github.com/avajs/ava/releases/tag/v6.0.0](https://github.com/avajs/ava/releases/tag/v6.0.0 "Release v6.0.0 · avajs/ava")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">nodejs</span> <span class="jser-tag">JavaScript</span> <span class="jser-tag">jailbreak</span> <span class="jser-tag">ReleaseNote</span></p>

AVA v6.0.0リリース。
Npde.js 14/16のサポート終了、Watchモードの改善、`t.throws()`に`any`オプションを追加など


----

## Release v1.0.0 · vitest-dev/vitest
[github.com/vitest-dev/vitest/releases/tag/v1.0.0](https://github.com/vitest-dev/vitest/releases/tag/v1.0.0 "Release v1.0.0 · vitest-dev/vitest")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">vite</span> <span class="jser-tag">testing</span> <span class="jser-tag">ReleaseNote</span></p>

vitest v1.0.0リリース。
`node:child_process`を使った並列実行をサポート、`pool`と`poolOptions`をサポートし関連する古いフラグを削除など。
Snapshotの形式の変更、カバレッジの改善、`--projet`オプションの追加など


----

## Astro 4.0 | Astro
[astro.build/blog/astro-4/](https://astro.build/blog/astro-4/ "Astro 4.0 | Astro")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">astro</span> <span class="jser-tag">ReleaseNote</span></p>

Astro 4.0リリース。
DevToolbarの追加、i18n Routingの追加、View Transition APIのサポートを改善、Loggingの改善。
実験的な機能としてIncremental Content Cachingを追加など


----

## Electron 28.0.0 | Electron
[www.electronjs.org/blog/electron-28-0](https://www.electronjs.org/blog/electron-28-0 "Electron 28.0.0 | Electron")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">Electron</span> <span class="jser-tag">ReleaseNote</span></p>

Electron 28.0.0リリース。
Chromium 120.0.6099.56、Node.js 18.18.2にアップデート。
ECMAScript Moduesをサポートなど


----

## Release v3.11.0 · honojs/hono
[github.com/honojs/hono/releases/tag/v3.11.0](https://github.com/honojs/hono/releases/tag/v3.11.0 "Release v3.11.0 · honojs/hono")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">server</span> <span class="jser-tag">library</span> <span class="jser-tag">ReleaseNote</span></p>

Hono v3.11.0リリース。
`hono/jsx`に`ErrorBoundary`の追加、`hono/dev`にルーティングの一覧を出力する`showRoutes`を追加。
`c.jsonT()`をDeprecatedにして、`c.json()`がRPCでも利用できるようになるなど。

- [Honoのv3.10とv3.11について](https://zenn.dev/yusukebe/articles/d1be7aa06999cb "Honoのv3.10とv3.11について")

----

## Release v14.0.0 · sindresorhus/got
[github.com/sindresorhus/got/releases/tag/v14.0.0](https://github.com/sindresorhus/got/releases/tag/v14.0.0 "Release v14.0.0 · sindresorhus/got")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">nodejs</span> <span class="jser-tag">HTTP</span> <span class="jser-tag">library</span> <span class="jser-tag">ReleaseNote</span></p>

Got v14.0.0リリース。
Node.js 18のサポートを終了。


----
<h1 class="site-genre">アーティクル</h1>

----

## Web Performance Calendar » Fastest Way of Passing State to JavaScript, Re-visited
[calendar.perfplanet.com/2023/fastest-way-passing-state-javascript-revisited/](https://calendar.perfplanet.com/2023/fastest-way-passing-state-javascript-revisited/ "Web Performance Calendar » Fastest Way of Passing State to JavaScript, Re-visited")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">performance</span> <span class="jser-tag">article</span></p>

SSRでステートを埋め込んで渡す方法のパフォーマンス比較。
JSを出力する方法、InvalidなMime typeで埋め込む方法、JSONを埋め込む方法について


----

## VueFes Japan 2023イベントレポート | gihyo.jp
[gihyo.jp/article/2023/11/vuefes-japan-2023-report](https://gihyo.jp/article/2023/11/vuefes-japan-2023-report "VueFes Japan 2023イベントレポート | gihyo.jp")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">Vue</span> <span class="jser-tag">article</span></p>

VueFes Japan 2023のレポート記事

- [Vue &amp; Vite Rustify - Speaker Deck](https://speakerdeck.com/kazupon/vue-and-vite-rustify "Vue &amp;amp; Vite Rustify - Speaker Deck")

----

## Ecosystem 2023 Recap | Electron
[www.electronjs.org/blog/ecosystem-2023-eoy-recap](https://www.electronjs.org/blog/ecosystem-2023-eoy-recap "Ecosystem 2023 Recap | Electron")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">Electron</span> <span class="jser-tag">article</span></p>

Electronのエコシステムのアップデートについての紹介記事。
Electron Forge、Auto updatesの静的ストレージの対応、`@electron/windows-sign`について


----
<h1 class="site-genre">スライド、動画関係</h1>

----

## 2020年から2023年までのCSSの変遷を振り返る - yamaScrapbox
[scrapbox.io/yamanoku/2020%E5%B9%B4%E3%81%8B%E3%82%892023%E5%B9%B4%E3%81%BE%E3%81%A7%E3%81%AECSS%E3%81%AE%E5%A4%89%E9%81%B7%E3%82%92%E6%8C%AF%E3%82%8A%E8%BF%94%E3%82%8B](https://scrapbox.io/yamanoku/2020%E5%B9%B4%E3%81%8B%E3%82%892023%E5%B9%B4%E3%81%BE%E3%81%A7%E3%81%AECSS%E3%81%AE%E5%A4%89%E9%81%B7%E3%82%92%E6%8C%AF%E3%82%8A%E8%BF%94%E3%82%8B "2020年から2023年までのCSSの変遷を振り返る - yamaScrapbox")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">CSS</span> <span class="jser-tag">slide</span></p>

2020年以降に実装されたCSSの機能紹介


----
<h1 class="site-genre">ソフトウェア、ツール、ライブラリ関係</h1>

----

## unjs/unenv: 🕊️ Convert javaScript code to be runtime agnostic
[github.com/unjs/unenv/tree/main](https://github.com/unjs/unenv/tree/main "unjs/unenv: 🕊️ Convert javaScript code to be runtime agnostic")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">nodejs</span> <span class="jser-tag">JavaScript</span> <span class="jser-tag">polyfill</span> <span class="jser-tag">library</span></p>

Node.js Core Modulesなどのpolyfillやモックを提供するライブラリ。
Node.js向けのコードを他の実行環境でも動作させるためのライブラリ


----

## facebook/stylex: StyleX is the styling system for ambitious user interfaces.
[github.com/facebook/stylex](https://github.com/facebook/stylex "facebook/stylex: StyleX is the styling system for ambitious user interfaces.")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">CSS</span> <span class="jser-tag">library</span></p>

FacebookのAtomic CSS in JSライブラリ。
TypeScriptなどでType Safeにスタイルを定義、適用でき、ビルド時にCSSファイルへとコンパイルすることで実行時のコストを小さくしている。
`stylex.create`でスタイルを定義、`stylex.props`で常に後ろが優先されるというマージルールでスタイルを適用できる。


----