JSer.info #555 - TypeScript 4.4が正式にリリースされました。
Control Flow Analysisの改善、Index SignaturesにSymbolやTemplate Stringを利用できるようになっています。
また、Catch節のデフォルトをunknown型にするuseUnknownInCatchVariablesオプションと
optionalとundefined値の区別をするexactOptionalPropertyTypesオプションの追加されています。
useUnknownInCatchVariablesはstrictオプションが有効の場合は自動的にONとなります。
一方で、exactOptionalPropertyTypesはstrictオプションとは別途設定が必要になります。
また、ES Proposal Stage 3のclass static blockがサポートされています。
その他には、tsc --helpの表示を改善、ビルドパフォーマンスの改善も含まれています。
Why lab and field data can be different (and what to do about it)という記事では、PageSpeed Insightsなどに表示される"lab data"と"field data"の違いについて解説しています。
Lab dataは、ネットワークは実行環境を固定したSynthetic モニタリングのデータとなっています。
一方のField dataは、Chrome User Experience Reportで収集されたChromeユーザーのRUMデータを元にしています。
この2つのデータの違い、どのようなケースで値に違いがでるかなどを解説しています。
実際のユーザーの体験に近いのはField dataであるため、まずはField dataをみることや、2つのデータに違いがある場合には最適化の余地があることを示していることなどについて書かれています。
Packemonはnpmで公開するパッケージ向けのビルドツールです。
Node.js(mjs,cjs)、ブラウザ(ESM、UMD)向けのビルドを一括でできるようになっています。
Node.js 12+からサポートされたECMAScript Modules(ESM)では、利用できないNode.jsのAPIやimport時のファイル拡張子が必須となるなどのCommonJSとの違いがあります。ビルド時に、Babelを使ったESM向けのコード変換やESMで利用できない機能をビルド時にチェックなども行います。
その他にはpackemon validateといったパッケージのメタデータのバリデーションなどができるコマンドなども持っています。
似たツールとしてはMicrobundleがありますが、packemonはパッケージ公開を補助するツールも持つといった違いがあります。
JSer.infoをサポートするには
- 😘 知り合いにJSer.infoをおすすめする
- ❤️ GitHub Sponsorsで@azuのスポンサーになる
- 🐦 X(Twitter)で@jser_infoをフォローする
JSer.info Sponsors
JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。
ヘッドライン
Node v16.8.0 (Current) | Node.js
nodejs.org/en/blog/release/v16.8.0/
Node.js 16.8.0リリース。
stream.Duplex.from、 stream.Readable.isDisturbed(stream)の追加。
utilモジュールにtoUSVStringの追加など
Announcing TypeScript 4.4 | TypeScript
devblogs.microsoft.com/typescript/announcing-typescript-4-4/
TypeScript 4.4リリース。
Control Flow Analysisの改善、Index SignaturesにSymbolやTemplate Stringを利用できるように。
Catch節のデフォルトをunknown型にするuseUnknownInCatchVariablesオプションの追加。
optionalとundefined値の区別をするexactOptionalPropertyTypesオプションの追加。
また、ES Proposal Stage 3のclass static blockをサポート。
tsc --helpの表示を改善、ビルドパフォーマンスの改善も含まれている
Chromium Blog: Chrome 94 Beta: WebCodecs, WebGPU, Scheduling, and More
blog.chromium.org/2021/08/chrome-94-beta-webcodecs-webgpu.html
Chrome 94 Betaリリース。
Origin Trialとして、HTTP status code 103 Early Hintsを実験的にサポート。
WebCodecs、scheduler.postTask()、MediaStreamTrackGenerator/MediaStreamTrackProcessorのサポート。
Self Profiling APIのサポートなど。
また、WebSQLがサードパーティコンテキストでは非推奨となり、navigator.plugins/ navigator.mimeTypesは固定された値を返すように変更されるなど
Announcing SWR 1.0 – SWR
データ取得するReact HooksライブラリのSWR 1.0リリース。
fallbackオプションの追加、Immutable Modeの追加、providerオプションの追加、useSWRConfigの追加。
また、Middlewareの対応、一部APIの変更、デフォルトのfetcherを定義しなくなるなど
Release 27.1.0 · facebook/jest
github.com/facebook/jest/releases/tag/v27.1.0
Jest 27.1.0リリース。
snapshotFormatオプションの追加、Node.js 16で追加されたnode: prefixのモジュールをサポートなど
mongoose/CHANGELOG.md at master · Automattic/mongoose
github.com/Automattic/mongoose/blob/master/CHANGELOG.md#600--2021-08-24
mongoose 6.0リリース。
MongoDB Driver 4.0サポート、sanitizeFilterとTrusted()メソッドの追加、defaultに関数を渡せるように、Documentの変更をProxyで検知できるように。
破壊的な変更として、createConnection(uri)がthenableではなくなる、同じQueryを再実行はエラーにになる,strictQueryオプションをstrictにリネーム。
また、デフォルトの挙動を変更に関連して不要となったオプションの削除やTypeScriptの型定義の変更など
アーティクル
Private Network Access update: Introducing a deprecation trial - Chrome Developers
developer.chrome.com/blog/private-network-access-update/
Chromeでのnon-secureなウェブサイトからPrivate Network Accessを制限するロードマップについて。
Chrome 94でnon-secureなPublicウェブサイトからPrivate Networkへのリクエストを送れなくなり、逆Origin Trialを開始している。
Chrome 102で逆Origin Trialを終了し、完全に制限される。
Introducing Portal Windows for Electron
blog.tandem.chat/portal-windows/
Tandemで利用しているElectronで他のウィンドウをミラーリングするライブラリについて。
他のアプリのウィンドウをReactコンポーネントとして描画、スクリーンシェアなどに利用できる。
Why lab and field data can be different (and what to do about it)
web.dev/lab-and-field-data-differences/
PageSpeed Insightsなどに表示されている定点観測データであるLab dataとRUMであるField dataについて。
それぞれのデータの違い、計測方法、キャッシュの状態、AMP/SXG、BFCacheなどの影響について。
LabとFieldがどちらもある場合は、Field dataがよりユーザーの体験に近いことについて。
Modern client-side routing: the App History API
Chrome 95にてフラグ付きで実装されたApp History APIについて。
問題のあるHistory APIを置き換えるAPI。
navigationイベントでのナビゲーションの検知、transitionWhile(promise)での遷移中/成功/失敗の表現、ナビゲーションエラー時のロールバックなどの具体例について。
また、Historyの管理、状態の管理、FormのSubmitにおけるナビゲーションを扱える点についてなど
NAN to Node-API Migration: A Short Story - NodeSource
nodesource.com/blog/NAN-to-Node-API-migration-a-short-story
Node.jsのnative addonを開発時に利用するNANとNode-API(N-API)について。
Node-APIはV8に依存しないnative addon開発のために追加され、NANからNode-APIに移行しながら、Node-APIの使い方について見ていく記事。
サイト、サービス、ドキュメント
GoogleChromeLabs/ProjectVisBug: FireBug for designers › Edit any webpage, in any state https://a.nerdy.dev/gimme-visbug
github.com/GoogleChromeLabs/ProjectVisBug
デザイナー向けのDevTools
ソフトウェア、ツール、ライブラリ関係
Gotta pack 'em all! | Packemon
ライブラリ向けのビルドツール。
Node.js(mjs,cjs)、ブラウザ(ESM、UMD)向けのビルドを一括でできる。
また、設定に応じたpackage.jsonの書き換え、Babelを使ったESM向けのコード変換、mjsで利用できない機能をビルド時にチェック、パッケージのメタデータのバリデーションなどができる。
5alidz/tiny-schema-validator: JSON schema validator
github.com/5alidz/tiny-schema-validator
Schemaを定義してバリデーションができるbuilderライブラリ。
作成したSchemaオブジェクトはTypeScriptの型としても利用できる。
unjs/unplugin: Unified plugin system for Vite, Rollup, and Webpack
Vite/Rollup/webpack pluginを同じコードから作成するライブラリ
