JSer.info #656 - Next.js v13.4.16がリリースされています。
v13.4.16には、実験的な機能としてtest modeというPlaywrightとMSWを使ったテストする仕組みが追加されています。
Next.jsのApp Directoryでは、MSWがNext.jsの処理に差し込めるポイントがなかったため、MSWが動かないなどの問題がありました。このtest modeではそれらが一部解決されてきています。
まだ検証目的の実験的な機能であるため今後はわかりませんが、次のDiscussionでNext.jsを使ったアプリケーションのテストについて議論されています。
次の記事では、SafariのWeb Storage(localStorage/Cache API/IndexedDB/Service Worker/File System)のPolicy更新について書かれています。
Originごと/全体でのQuotaがあり、Quotaを超えるとQuotaExceededErrorが発生します。
また、利用されていないウェブサイトのデータはオリジンごとに削除される仕組みになっていますが、ストレージが永続モードである場合は除外されます。
このストレージの永続性を保証するためのStorage APIの使い方についても解説されています。
また、このアップデートとは関係ないですが、昔のSafariはPrivate ModeだとlocalStorageなどのWeb Storageを読み書きするだけで例外が発生していましたが、現在のSafariはPrivate Modeでも例外は発生せずに読み書きできるようになっています。
Blogged Answers: My Experience Modernizing Packages to ESM · Mark's Dev Blogという記事では、ReduxをESMへ移行する際に発生した問題などについてかなり詳しく解説されています。
広く使われていて色々な環境やbundlerでの利用に対応するパッケージの難しさについて書かれています。
JSer.infoをサポートするには
- 😘 知り合いにJSer.infoをおすすめする
- ❤️ GitHub Sponsorsで@azuのスポンサーになる
- 🐦 X(Twitter)で@jser_infoをフォローする
JSer.info Sponsors
JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。
ヘッドライン
Google Online Security Blog: An update on Chrome Security updates – shipping security fixes to you faster
security.googleblog.com/2023/08/an-update-on-chrome-security-updates.html
Chrome 116から、2週間ごとのセキュリティリリースが1週間ごとのリリースへと短縮される。
Release v1.37.0 · microsoft/playwright
github.com/microsoft/playwright/releases/tag/v1.37.0
playwright v1.37.0リリース。
--shardフラグで分割実行した結果のレポートを結合できるmerge-reportsコマンドの追加など
Release v1.3.0 · vega/ts-json-schema-generator
github.com/vega/ts-json-schema-generator/releases/tag/v1.3.0
ts-json-schema-generator v1.3.0リリース。
satisfies演算子のサポート、TypeScript 5へのアップデート、Bunのサポートなど
Electron 26.0.0 | Electron
www.electronjs.org/blog/electron-26-0
Electron 26リリース。
Chromium 116, V8 11.2, Node.js 18.16.1へのアップデート。
Release v13.4.16 · vercel/next.js
github.com/vercel/next.js/releases/tag/v13.4.16
Next.js v13.4.16リリース。
実験的にplaywrightとmswを使ったtest modeを追加など
アーティクル
Updates to Storage Policy | WebKit
webkit.org/blog/14403/updates-to-storage-policy/
SafariのWeb StorageのPolicyについて。
Originごと/全体でのQuotaがあり、Quotaを超えるとQuotaExceededErrorが発生する。
利用されていないウェブサイトのデータはオリジンごとに削除される。また、ストレージの永続性を保証するためのStorage APIの使い方について
Blogged Answers: My Experience Modernizing Packages to ESM · Mark's Dev Blog
blog.isquaredsoftware.com/2023/08/esm-modernization-lessons/
あらゆる環境で動くJavaScriptのパッケージ公開の難しさについての記事。
CJSとESMのdual package、TypeScriptのmoduleResolutionとの互換性、UMD、webpack 4との互換性。
Next.jsとReact Server Componentの問題についてなど。
Module documentation (in progress)
gist.github.com/andrewbranch/79f872a8b9f0507c9c5f2641cfb3efa6
TypeScriptがモジュールに対してどのようなアプローチで扱っているについてのガイド。
moduleResolutionオプション、TypeScriptのモジュール解決の仕組み、ESMとCJSの相互運用性などについて
Creating a recorder with Document Picture-in-Picture API | Contrast
Document Picture-in-Picture APIを使って、カメラ表示と画面を合成して録画する方法について
A Blog Post With Every HTML Element
www.patrickweaver.net/blog/a-blog-post-with-every-html-element/
全てのHTML要素を含むブログ記事。
それぞれのタグについての説明が含まれている
Deprecating the unload event - Chrome Developers
developer.chrome.com/en/blog/deprecating-unload/
Chrome 117からunloadイベントがDeprecatedとなる。
unloadイベントはうまく動かないことが多くBFCacheを無効にする。
代用としてvisibilitychange/pagehideイベントを推奨している。unloadイベントを利用しているかを調べる方法についてなど
What's New in DevTools (Chrome 117) - Chrome Developers
developer.chrome.com/en/blog/new-in-devtools-117/
Chrome 117の開発者ツールの変更点について。
Networkでのコンテンツオーバーライドの改善、拡張機能のURLをフィルターする機能を追加、Fetchにおける実際のPriorityを確認できるように。
サードパーティクッキーに関する警告や問題の説明を追加、prerenderのデバッグ機能を追加など
スライド、動画関係
React - Speaker Deck
speakerdeck.com/recruitengineers/react
Reactの考え方についてのスライド。
MPA/SPAの違いや課題、宣言的UIとしてのReact、コンポーネント、状態管理、レンダリング、副作用について
サイト、サービス、ドキュメント
Using TypeScript – React
TypeScriptについてのReactの公式ドキュメント
