JSer.info #528 - 開発環境ツールのVite 2.0リリース。

Announcing Vite 2.0 - DEV Community 👩‍💻👨‍💻

Vite 2.0ではフレームワークに依存しない作りとなり、さまざまなフレームワークに対応したテンプレートが用意されています。

PreactのWMRをインスパイアしたRollupを拡張したプラグインのサポート、CSSの扱いを改善しています。
また、試験的にSSRのサポートが追加されています。

あわせて1.xからのマイグレーションガイドも公開されています。

Migration from v1 | Vite

Babel 7.13.0がリリースされました。

7.13.0 Released: Records and Tuples, granular compiler assumptions, and top-level targets · Babel

Babelの設定内で各pluginsやpresetsで重複していた設定をまとめて扱えるものとして、targetsとassumptionsのサポートが追加されています。

targets: サポートするブラウザの情報を記述するオプション -assumptions: 仕様のエッジケースを無視してより小さなコードを出力するためのオプション

assumptionsは各pluginsやpresetsでlooseとして実装されていたものをまとめたオプションです。
その他には、ES Proposal Stage 2のRecordsとTuplesのサポート、Flowのthisパラメータのサポート、TypeScript 4.2のサポートなどが追加されています。
また、@babel/runtimeがNode.jsのexportsフィールドに対応し、useESModulesオプションは非推奨となりました。

Streams—The definitive guideという記事では、WHATWG Streamについて詳しく解説されています。

Streamの基本的なコンセプト、仕組み、ReadableStream/WritableStream/TransformStreamの使い方とpipeToでのつなぎ方について書かれています。
また、Fetch API、Text Encoding、Compression、File System API、Web SocketsなどStreamをサポートしているAPIについても紹介しています。

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

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

JSer.info Sponsors

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

ヘッドライン

Announcing Vite 2.0 - DEV Community 👩‍💻👨‍💻

dev.to/yyx990803/announcing-vite-2-0-2f0a

Vue JavaScript ReleaseNote Tools

フレームワークに依存しない開発環境ツールのVite 2.0リリース。
公式のテンプレートを用意しVue以外もサポート、WMRをインスパイアしたRollupを拡張したプラグインのサポート、CSSの扱いを改善。
また、試験的にSSRのサポートしている。

Migration from v1 | Vite

Node v15.9.0 (Current) | Node.js

nodejs.org/en/blog/release/v15.9.0/

node.js ReleaseNote

Node.js 15.9.0リリース。
fs/promisesにwatch()を追加、fs.watchがAbortSignalをサポート、timers/promisesでsetIntervalをasync iteratorとして扱えるように

Release 3.9.0 - 2021.02.19 · zloirock/core-js

github.com/zloirock/core-js/releases/tag/v3.9.0

JavaScript polyfill library ReleaseNote

core-js 3.9.0リリース。
ES Proposal Stage 1のArray#findLast()、Array#findLastIndex()のサポート。

Release v2.0.0 · svg/svgo

github.com/svg/svgo/releases/tag/v2.0.0

SVG Tools library ReleaseNote

SVG最適化ツールであるSVGO 2.0リリース。
設定ファイルの書式の変更、CLIでinline json configを渡せないように変更、Node.js APIの変更。
また、ブラウザ向けのbundleを同梱するようになるなど

Release v1.0.0-rc.1 · video-dev/hls.js

github.com/video-dev/hls.js/releases/tag/v1.0.0-rc.1

HLS JavaScript library ReleaseNote

hls.js 1.0.0 RC1リリース。
破壊的な変更としてAPIの一部変更、Promiseへ依存するようになった。
Low-Latency HLSサポート、実験的にIMSC1の基本的な機能をサポートなど

Release v5.24.0 · webpack/webpack

github.com/webpack/webpack/releases/tag/v5.24.0

webpack ReleaseNote

webpack 5.24.0リリース。
Concatenationするモジュールを探索する際のパフォーマンス改善

improve performance of finding modules for concatenation by sokra · Pull Request #12745 · webpack/webpack

7.13.0 Released: Records and Tuples, granular compiler assumptions, and top-level targets · Babel

babeljs.io/blog/2021/02/22/7.13.0

babel ReleaseNote

Babel 7.13.0リリース。
targetsの設定をTop-Levelに書くことで各プラグインがその設定を利用するように、仕様のエッジケースを無視してより小さなコードを出力するassumptionsオプションの追加。
ES Proposal Stage 2のRecordsとTuplesのサポート、Flowのthisパラメータのサポート、TypeScript 4.2のサポートなど。
また、@babel/runtimeがNode.jsのexportsフィールドに対応するなど

A Fabulous February Firefox — 86! - Mozilla Hacks - the Web developer blog

hacks.mozilla.org/2021/02/a-fabulous-february-firefox-86/

Firefox ReleaseNote

Firefox 86リリース。
ETPのStrict ModeでState Partitioningを導入、Dev Toolsでiframeのinspectionを改善。
CSSでprefixなし:autofillのサポート、Intl.DisplayNamesをデフォルトで有効化など。
また、異なるドメインからページをロードした際にWindow.nameが空文字列となるように変更されている

Announcing TypeScript 4.2 | TypeScript

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

TypeScript ReleaseNote

TypeScript 4.2リリース。
Tuple TypesでRest Elementをサポート、Type Aliasの型追跡の改善、オブジェクトではないオペランドに対するin演算子のチェックを追加。noPropertyAccessFromIndexSignatureオプションの追加、abstract newのサポートなど

February 2021 Security Releases | Node.js

nodejs.org/en/blog/vulnerability/february-2021-security-releases/

node.js ReleaseNote security

Node.jsのセキュリティアップデートとして10.x、12.x、14.x、15.xがそれぞれリリースされている。
HTTP2のunknownProtocolを使ったDoSの修正、--inspect時のDNS rebindingの修正、OpenSSLのセキュリティアップデート

アーティクル

Interview with Ryan Dahl, Node.js & Deno creator by Evrone

evrone.com/ryan-dahl-interview

deno Interview article JavaScript opinion

Node.jsとDenoの作者であるRyan Dahlのインタビュー記事。
JavaScript/TypeScript、Denoの設計、プログラミング言語の特性と問題領域、オープンソースについてなど

Understanding Z-Index in CSS

ishadeed.com/article/understanding-z-index/

CSS tutorial

CSSのz-indexについて図とともに視覚的に学べるチュートリアル。
スタックコンテキスト、スタックコンテキストを作るプロパティ、z-indexとの関係について

Using AbortController as an Alternative for Removing Event Listeners | CSS-Tricks

css-tricks.com/using-abortcontroller-as-an-alternative-for-removing-event-listeners/

DOM JavaScript article

Chrome 88からaddEventListenerがAbort Signalに対応したため、removeEventListenerを使わずにイベントリスナーを解除できるという話

Listify a JavaScript Array

kentcdodds.com/blog/listify-a-java-script-array

JavaScript i18n article

Intl.ListFormatを使うことで、"A, B, and C"のような言語に応じたandとorの表現を作成できるという話

Introducing State Partitioning - Mozilla Hacks - the Web developer blog

hacks.mozilla.org/2021/02/introducing-state-partitioning/

Firefox security article

Firefox 86でETPのStrictモードを使っている際に有効化されたState Partitioningについて。
Cookieの保存もサイトごとのdoubled keyとなり、3rd party cookieなども分離される。
SSOなどを壊さないようにopenerを使った動作に対するヒューリスティックな回避策やStorage Access APIについても書かれている

Streams—The definitive guide

web.dev/streams/

WHATWG stream article

WHATWG Streamsについての解説記事。
コンセプト、仕組み、ReadableStream/WritableStream/TransformStreamの使い方とpipeToでの連携。
Fetch API、Text Encoding、Compression、File System API、Web SocketsなどStreamをサポートしているAPIについても紹介している