JSer.info #649 - Svelte 4がリリースされました。

Node.js 14のサポート終了、CJSの出力は廃止しESMのみをサポートするように、Custom Elementsの対応をtagオプションからcustomElementオプションに変更といった変更が含まれている。
また、生成するファイルサイズの削減、ウェブサイトのドキュメントを刷新なども行われています。

マイグレーションガイドとnpx svelte-migrate@latest svelte-4というマイグレーションツールが公開されています。

Svelte 4 migration guide • Docs • Svelte

Ember 5.0リリースされました。

Ember 5.0 Released

Emberではメジャーアップデートで機能追加をせず、破壊的変更のみを行うため、機能追加はありません。
非推奨となっていたAutoLocationの削除、@ember/errorパッケージの削除、Ember.Stringの削除など行われています。

The Cost Of JavaScriptの2023年版の動画とスライドが公開されています。

JavaScriptのダウンロード、実行のコストについて話されていて、Code SplittingやDynamic Importなどの最適化について紹介されています。
また、最近発展してきたIslands ArchitectureのPartial Hydration、QwikのResumalable Hydration、ReactのSelective Hydationについても紹介されています。

過去のThe Cost Of JavaScriptについては、次のページを参照してください。

また、実際のウェブサイトの統計的なデータに関してはWeb AlmanacのJavaScriptの章などを参照すると良いと思います。

JSer.infoをサポートするには

😘 知り合いにJSer.infoをおすすめする
❤️ GitHub Sponsorsで@azuのスポンサーになる
🐦 X(Twitter)で@jser_infoをフォローする

JSer.info Sponsors

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

ヘッドライン

Announcing Svelte 4

svelte.dev/blog/svelte-4

Svelte ReleaseNote

Svelte 4リリース。
Node.js 14のサポート終了、CJSの出力は廃止しESMのみをサポートするように、Custom Elementsの対応をtagオプションからcustomElementオプションに変更。
生成するファイルサイズの削減、ウェブサイトのドキュメントを刷新など

Ember 5.0 Released

blog.emberjs.com/ember-5-0-released/

Ember ReleaseNote

Ember 5.0リリース。
Emberではメジャーアップデートで機能追加をせず、破壊的変更のみを行う。
AutoLocationの削除、@ember/errorパッケージの削除、Ember.Stringの削除など

Release v6.14.0 · remix-run/react-router

github.com/remix-run/react-router/releases/tag/react-router%406.14.0

React library ReleaseNote

React Router 6.14.0リリース。
useSubmitがJSONとTextをサポート。

Release v0.18.9 · evanw/esbuild

github.com/evanw/esbuild/releases/tag/v0.18.9

JavaScript CSS Tools ReleaseNote

esbuild v0.18.9リリース。
await usingの対応漏れの修正、autoprefixer的のようにCSSのprefixを自動で追加できるようになるなど

Bun v0.6.10 | Bun Blog

bun.sh/blog/bun-v0.6.10

Bun ReleaseNote

Bun v0.6.10リリース。
CommonJSの互換性を改善しwebpack動作するように、require.mainのサポート、__esModuleフラグを解釈するように。
fs.watchの実装、V8のError.captureStackTraceの実装。
bun install時にライフサイクルスクリプトの実行を許可するパッケージを定義するtrustedDependenciesフィールドのサポートなど

Release Notes for Safari Technology Preview 173 | WebKit

webkit.org/blog/14378/release-notes-for-safari-technology-preview-173/

safari ReleaseNote

Safari Technology Preview 173リリース。
Safari 17で導入予定の機能が利用できるTechnology Preview。
Web Inspectorの再設計、ウェブアプリをDockに追加、JPEG XLのサポート、HEICのサポートなど

Release v3.0.0 · cloudflare/miniflare

github.com/cloudflare/miniflare/releases/tag/v3.0.0

cloudflare ReleaseNote JavaScript

miniflare v3.0.0リリース。
workerdを利用するのようになった。
CLIが同梱されなくなりwranglerを経由してCLIとして利用できる。
またいくつかのAPIが削除や変更されている。

⬆️ Migrating from Version 2 · Miniflare

アーティクル

Cyclic Dependency Space Toggles

kizu.dev/cyclic-toggles/

CSS article

CSS Variablesを使ってロジックゲートを実装する方法について。
循環参照するVariablesは無効となる仕様を利用し、Variablesにif文的な切り替えを実装する方法について。
また、なぜこのような仕様と実装になったのかについて

Next.js App Router Update | Next.js

nextjs.org/blog/june-2023-update

Next.js article

Next.jsの最近の取り組みについて。
App RouterのStable化、巨大なアプリケーションでのパフォーマンスの改善、ドキュメントの改善。
ReactのServer Side Componentへの対応やServer Actionsについてなど

スライド、動画関係

2023-06-24 DOMのテストがどんどん書きたくなるTesting Libraryの世界への招待 (#phpconfuk) - Google スライド

docs.google.com/presentation/d/1j6sEAs0LF5jPXs_mHxvPreqK-lxEL3OxvQAFyXmxbZc/view#slide=id.g24bcedd6665_0_0

JavaScript testing slide

DOMのテストライブラリであるTesting Libraryの考え方について。
DOMを生成し、テスト対象をクエリで検索し、アサーションでテストする。
クエリにはWAI-ARIA Roleやラベル、Test Idなどを指定するメソッドがあるがその優先度について。

About Queries | Testing Library

The Cost Of JavaScript - 2023 - YouTube

www.youtube.com/watch?v=ZKH3DLT4BKw

JavaScript video performance

JavaScriptのコストについての動画とスライド。
JavaScriptのダウンロード、実行のコスト。
Code SplittingやDynamic Importなどの最適化。
Islands ArchitectureのPartial Hydration、QwikのResumalable Hydration、ReactのSelective Hydationについて。