Fork me on GitHub

2021-02-24のJS: Vite v2、Babel 7.13.0(設定の共通化)、WHATWG Streams入門ガイド

Edit on GitHub 編集履歴を見る

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

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

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

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


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

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

  • 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 Sponsors

JSer.info SponsorsGitHub 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のサポートしている。


Node v15.9.0 (Current) | Node.js

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

node.js ReleaseNote

Node.js 15.9.0リリース。
fs/promiseswatch()を追加、fs.watchがAbortSignalをサポート、timers/promisessetIntervalを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するモジュールを探索する際のパフォーマンス改善


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についても紹介している


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


w3c/browser-statuses: Implementation support information of Web technologies on main desktop and mobile browsers

github.com/w3c/browser-statuses

browser WebPlatformAPI library

Can I Use、Chrome Platform Status、MDN、WebKit Feature Statusのデータをノーマライズしたデータセット。
APIごとにブラウザやPolyfillのサポート状況を取得できるライブラリ。


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


ThomasAribart/json-schema-to-ts: Infer TS types from JSON schemas 📝

github.com/ThomasAribart/json-schema-to-ts

JSON TypeScript library

JSON SchemaからTypeScriptの型推論をするライブラリ


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