Fork me on GitHub

2021-06-08のJS: Lighthouse 8.0.0(スコア計算の変更)、Vue 3.1(@vue/compat)、 Mocha v9.0.0

Edit on GitHub 編集履歴を見る

JSer.info #543 - Lighthouse 8.0.0がリリースされました。

Lighthouse 8.0.0ではパフォーマンススコアの計算式が変更されています。
詳細は次のドキュメントにかかれていますが、今まで実験的だったCumulative Layout Shift (CLS)の比重が5%から15%へと増加しています。それにあわせて他のスコアの比重も変化しています。

機能追加として、レポートをメトリクス別にフィルターできるように、csp-xssのAuditの追加なども含まれています。


Vue 3.1.0がリリースされました。

Vue 3.1.0では@vue/compatというVue 2の互換APIを実装したパッケージが公開されています。
既存のVue 2.xで書かれたアプリケーションをVue 3上で動かすためのMigration Buildとなっています。

詳細は次のドキュメントで解説されていますが、Vue 2.xの時点での公開APIのみを実装した互換ビルドであるため、
一部ライブラリは動かないことなどが書かれています。

また、今後の予定では、Vue 3で実装されたComposition APIなどをVue 2.xへとバックポートしたVue 2.7がリリースされる予定となっています。


JavaScriptテストフレームワークのMocha 9.0.0がリリースされました。

Mocha 9ではNode.js 10のサポート終了し、ESM(ECMAScript Modules)をネイティブサポートしています。
ESMでの読み込みを試してみてから、読み込めなかった場合はCJS(CommonJS)で読み込むようなfallbackとなっています。

その他には、--dry-runオプションのサポート、非推奨だったutils.lookupFiles()の削除などが含まれています。


ヘッドライン


Release v10.0.0 · puppeteer/puppeteer

github.com/puppeteer/puppeteer/releases/tag/v10.0.0

Chrome browser ReleaseNote library

puppeteer 10.0.0リリース。
Node.js 10のサポート終了、起動してから最初のページのロード待ちをするかどうかを決めるwaitForInitialPageオプションの追加など


Release v8.0.0 · GoogleChrome/lighthouse

github.com/GoogleChrome/lighthouse/releases/tag/v8.0.0

Chrome performance Tools ReleaseNote

Lighthouse 8.0.0リリース。
パフォーマンススコアの計算式の変更、レポートをメトリクス別にフィルターできるように、csp-xssのAuditの追加など。


Electron 13.0.0 | Electron Blog

www.electronjs.org/blog/electron-13-0

Electron ReleaseNote

Electron 13.0.0リリース。
Chrome 91、Node.js 14.16.0、V8 9.1へアップデート。
process.contextIsolatedsession.storagePatprocess.contextIdの追加。
WebContentsのnew-windowイベントがDeprecatedとなりwebContents.setWindowOpenHandler()を推奨するようになるなど


Looking fine with Firefox 89 - Mozilla Hacks - the Web developer blog

hacks.mozilla.org/2021/06/looking-fine-with-firefox-89/

Firefox ReleaseNote

Firefox 89リリース。
Media Queryのforced-colors、フォントロード時の視差を調整するline-gap-override/ascent-override/descent-overrideの実装。
Top-level awaitをデフォルトで有効化、64bitマシンでArrayBufferが2GB以上のサイズを扱えるように、PerformanceEventTimingのサポートなど。


Chromium Blog: Chrome 92: Web Apps as File Handlers, New JavaScript Features, and More

blog.chromium.org/2021/06/chrome-92-web-apps-as-file-handlers-new.html

Chrome ReleaseNote

Chrome 92 betaリリース。
Origin TrialとしてFile Handling API、Shared Element Transitions。
@font-facesize-adjust、V8 9.2へのアップデート、SharedArrayBuffersがCross Origin Isolateされたページに限定されるなど


Release v9.0.0 · mochajs/mocha

github.com/mochajs/mocha/releases/tag/v9.0.0

node.js testing JavaScript ReleaseNote

Mocha 9.0.0リリース。
Node.js 10のサポート終了、ESMサポート、--dry-runオプションのサポート。
非推奨だったutils.lookupFiles()の削除など


Node v16.3.0 (Current) | Node.js

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

node.js npm ReleaseNote

Node v16.3.0リリース。
npm 7.15.1へのアップデートでnpmのworkspaceコマンドが色々追加された


Release v3.1.0 Pluto · vuejs/vue-next

github.com/vuejs/vue-next/releases/tag/v3.1.0

Vue ReleaseNote

Vue 3.1.0リリース。
Vue 2からのMigration Buildとして@vue/compatの追加。
app.config.isCustomElementとコンポーネントのdelimitersオプションを非推奨化してコンポーネントのcompilerOptionsオプションをサポート。
v-isを非推奨化してis="vue:xxx"のサポートなど


アーティクル


What's New In DevTools (Chrome 92) - Chrome Developers

developer.chrome.com/blog/new-in-devtools-92/

Chrome debug article

Chrome 92のDevToolsの変更点について。
CSS gridエディタ、REPL内でconstの再定義ができるように、Source order viewerの追加。
CORSのエラーメッセージの改善、NetworkのフィルターにWasm typeを追加、UA Client Hintの対応。
ExperimentsとしてChrome DevTools Protocolを見るProtocol Monitor、Puppeteer Recorderの追加など


UI Security - Thinking Outside the Viewport | Microsoft Browser Vulnerability Research

microsoftedge.github.io/edgevr/posts/ui-security-thinking-outside-the-viewport/

MSEdge browser security article

ブラウザUIのセキュリティバグを例に、UIにおけるセキュリティバグをどのようにチェックするかについて解説している記事


Making JavaScript run fast on WebAssembly | Bytecode Alliance

bytecodealliance.org/articles/making-javascript-run-fast-on-webassembly

JavaScript WebAssembly security article

Wasmで動くJavaScriptエンジンを作る話。
WasmをサンドボックスとしてJavaScriptを実行できる点と、JavaScriptエンジンの初期化とRuntimeの高速化の手法について書かれている。


サイト、サービス、ドキュメント


An introduction to WebAssembly for JavaScript Developers

pascalpares.appspot.ovh/webassembly-for-javascript-developers/

WebAssembly node.js JavaScript tutorial

WebAssemblyのJavaScript APIについての解説記事。
Wasmファイルのロード、コンパイル、WasmからJSのコールバック関数の呼び出し、Dynamic Link、グローバル変数、文字列の渡し方、Shared Memory Bufferなどについて


progfay/benefit-from-end-of-ie: List of APIs that will be available due to IE termination

github.com/progfay/benefit-from-end-of-ie

IE WebPlatformAPI document

IEのみがサポートしていないAPIをまとめたもの。
MDNのデータをベースにHTML、JS、CSS、SVGのAPIを一覧できる


Node.js API Table

nodejs-api-table.netlify.app/

node.js API document

Node.jsのモジュールやAPIがどのバージョンで追加されたのかを一覧できるサイト。


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


devongovett/dprint-node: A node API for the dprint TypeScript and JavaScript code formatter

github.com/devongovett/dprint-node

JavaScript Rust library

Rustで書かれたdprintを使ったコードフォーマッター


htmlplus/core: HTMLPLUS is a native, framework-less, and lightweight library that is purely developed with Javascript. All HTMLPLUS components are customizable and configurable.

github.com/htmlplus/core

WebComponents React Vue library

Web Componentsで作られたUIライブラリ。
ReactとVue向けのバインディングも提供している


kawmra/typist-json: A simple runtime JSON type checker.

github.com/kawmra/typist-json

TypeScript JSON library

スキーマを定義するビルダー関数とチェッカーライブラリ。
定義したスキーマをTypeScriptの型として利用できる。


EvandroLG/ts-audio: ts-audio is an agnostic library that makes it easy to work with AudioContext and create audio playlists in the browser

github.com/EvandroLG/ts-audio

JavaScript library audio TypeScript

AudioContext APIを使った音楽再生ライブラリ。
複数の音声の連続再生などをサポートしている


Testy/TestyTs: ✔️ Modern TypeScript testing framework.

github.com/Testy/TestyTs

TypeScript testing library

Decoratorを使ったTypeScriptテストフレームワーク


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