Fork me on GitHub

2021-08-31のJS: TypeScript 4.4、PageSpeed InsightsのLab/Field data、Packemon(ライブラリ向けビルドツール)

Edit on GitHub 編集履歴を見る

JSer.info #555 - TypeScript 4.4が正式にリリースされました。

Control Flow Analysisの改善、Index SignaturesにSymbolやTemplate Stringを利用できるようになっています。
また、Catch節のデフォルトをunknown型にするuseUnknownInCatchVariablesオプションと
optionalとundefined値の区別をするexactOptionalPropertyTypesオプションの追加されています。

useUnknownInCatchVariablesstrictオプションが有効の場合は自動的にONとなります。
一方で、exactOptionalPropertyTypesstrictオプションとは別途設定が必要になります。

また、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はパッケージ公開を補助するツールも持つといった違いがあります。


ヘッドライン


Node v16.8.0 (Current) | Node.js

nodejs.org/en/blog/release/v16.8.0/

node.js ReleaseNote

Node.js 16.8.0リリース。
stream.Duplex.fromstream.Readable.isDisturbed(stream)の追加。
utilモジュールにtoUSVStringの追加など


Announcing TypeScript 4.4 | TypeScript

devblogs.microsoft.com/typescript/announcing-typescript-4-4/

TypeScript ReleaseNote

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 ReleaseNote

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

swr.vercel.app/blog/swr-v1

React library ReleaseNote

データ取得する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

node.js JavaScript testing library ReleaseNote

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

MongoDB node.js library ReleaseNote

mongoose 6.0リリース。
MongoDB Driver 4.0サポート、sanitizeFilterTrusted()メソッドの追加、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 security article

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/

React Electron article

Tandemで利用しているElectronで他のウィンドウをミラーリングするライブラリについて。
他のアプリのウィンドウをReactコンポーネントとして描画、スクリーンシェアなどに利用できる。


Why lab and field data can be different (and what to do about it)

web.dev/lab-and-field-data-differences/

Chrome performance article

PageSpeed Insightsなどに表示されている定点観測データであるLab dataとRUMであるField dataについて。
それぞれのデータの違い、計測方法、キャッシュの状態、AMP/SXG、BFCacheなどの影響について。
LabとFieldがどちらもある場合は、Field dataがよりユーザーの体験に近いことについて。


Modern client-side routing: the App History API

web.dev/app-history-api/

Chrome WebPlatformAPI article

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 C++ article

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

browser Extension debug Design

デザイナー向けのDevTools


ソフトウェア、ツール、ライブラリ関係


Gotta pack 'em all! | Packemon

packemon.dev/

JavaScript TypeScript browser node.js bundler Tools library

ライブラリ向けのビルドツール。
Node.js(mjs,cjs)、ブラウザ(ESM、UMD)向けのビルドを一括でできる。
また、設定に応じたpackage.jsonの書き換え、Babelを使ったESM向けのコード変換、mjsで利用できない機能をビルド時にチェック、パッケージのメタデータのバリデーションなどができる。


5alidz/tiny-schema-validator: JSON schema validator

github.com/5alidz/tiny-schema-validator

TypeScript JavaScript library

Schemaを定義してバリデーションができるbuilderライブラリ。
作成したSchemaオブジェクトはTypeScriptの型としても利用できる。


unjs/unplugin: Unified plugin system for Vite, Rollup, and Webpack

github.com/unjs/unplugin

vite rollup webpack plugin library

Vite/Rollup/webpack pluginを同じコードから作成するライブラリ


この記事へ修正リクエストをする
JSer.info Slackに参加する