JSer.info #538 - Babel 7.14.0がリリースされています。

2021-04のTC39ミーティングでStage 4となったclass fields/private methodsなどを@babel/preset-envがデフォルトでサポートするようになりました。
そのため、@babel/plugin-proposal-class-propertiesと@babel/plugin-proposal-private-methodsを個別のプラグインとして入れる必要はなくなっています。

また、Node.jsのESMからCommonJSのモジュールをインポートする際の相互運用性を向上させるオプションとして、importInterop: "node"オプションの追加されています。

またTypeScript 4.3のサポート、Stage 1のES Proposalであるasync do expressionのサポートなども含まれています。

RxJS 7.0.0がリリースされています。

RxJS 7.0.0ではファイルサイズが6.xに対して53%程度に小さくなっています。
また、TypeScriptの型の修正やAPIの一貫性の修正などが含まれています。
機能追加として、Async IteratorやReadable Streamの対応、animationFrames、share(config)の追加などが含まれています。

次のスライドと動画でも詳しく紹介されています。

New WebKit Features in Safari 14.1 | WebKitでは、Safari 14.1の変更点について書かれています。

Flexbox Gapのサポート、macOSでinput要素のtype属性でdateとtimeとdatetime-localのサポートが追加されています。また、speech recognitionを含むWeb Speech API、MediaRecorder API、WebMのサポートなども追加されています。
JavaScriptではClass Fields、WekRefのサポート、i18n APIのサポート改善、WebAssemblyのThreadingのサポートなどが含まれています。
その他には、Private Click Measurementをデフォルトで有効化、Storage AccessAPIの更新やWeb Inspectorのアップデートなども含まれています。

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

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

JSer.info Sponsors

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

ヘッドライン

Future of Angular E2E & Plans for Protractor · Issue #5502 · angular/protractor

github.com/angular/protractor/issues/5502

Angular E2E issue news testing

AngularでのE2EテストフレームワークであるProtractorの開発終了のスケジュールについて。
他のテストフレームワークが充実してきているので、2021年5月にDeprecatedとし、2022年末に開発終了とするスケジュールについて。

7.14.0 Released: New class features enabled by default, TypeScript 4.3, and better CommonJS interop · Babel

babeljs.io/blog/2021/04/29/7.14.0

babel ReleaseNote

Babel 7.14.0リリース。
Stage 4となったclass fieldsをpreset-envがデフォルトでサポート、importInterop: "node"オプションの追加、TypeScript 4.3のサポート。
また、Stage 1のES Proposalであるasync do expressionのサポートなど

Release v7.14.0 · babel/babel

rxjs/CHANGELOG.md at master · ReactiveX/rxjs

github.com/ReactiveX/rxjs/blob/master/CHANGELOG.md#700-2021-04-29

JavaScript Rx library ReleaseNote

RxJS 7.0.0リリース。
TypeScript 4.2未満のサポート終了、rxjs-compatの削除、liftをexposeしないように、各種演算子のAPI変更など

RxJS - Breaking Changes in Version 7

New WebKit Features in Safari 14.1 | WebKit

webkit.org/blog/11648/new-webkit-features-in-safari-14-1/

safari ReleaseNote

Safari 14.1の変更点について。
Flexbox Gap、macOSでDate&Time input、Web Speech API、MediaRecorder API、WebMのサポートなど。
JavaScriptのClass Fields、WekRefのサポート、i18n APIのサポート改善、WebAssemblyのThreadingのサポートなど。
また、Private Click Measurementをデフォルトで有効化、Storage AccessAPIの更新など。

Release yargs v17.0.0 · yargs/yargs

github.com/yargs/yargs/releases/tag/v17.0.0

JavaScript node.js deno library ReleaseNote

コマンドライン引数パーサーのyargs 17.0.0リリース。
破壊的な変更として、Node.js 10のサポート終了、PrivateメソッドにPrivate Fieldsを使うように変更、reset()メソッドを非推奨化など。
Node v14.8.0からTop-Level Awaitをサポートしたため、yargs()やparseAsyncなど色々な処理で非同期処理に対応するように変更など

ECMAScript proposal updates @ 2021-04 | ECMAScript Daily

ecmascript-daily.github.io/ecmascript/2021/05/04/ecmascript-proposal-update

ECMAScript proposal news

2021年4月のTC39 MeetingsでStageが変わったProposalのまとめ。
Class Field/Private MethodsがStage 4となり、ES2022に入ることが決まった

アーティクル

React17のevent delegationの破壊的変更を理解する

zenn.dev/co9xs/articles/react17-event-delegation

React article

React 17のevent delegationの変更についての記事。
実際に動作が変わるサンプルを元に、React 17でのevent delegationの仕組みの変化について解説している

React v17.0 Release Candidate: 新機能「なし」 – React Blog

How to Use ECMAScript Modules in Node.js

dmitripavlutin.com/ecmascript-modules-nodejs/

node.js article

Node.jsでのECMAScript modulesの使い方についての記事。
モジュールモード、モジュールのimportの方法、Dynamic Import、CommonJSなモジュールのimport、import.metaについてなど

Build an HTTPS-intercepting JavaScript proxy in 30 seconds flat | HTTP Toolkit

httptoolkit.tech/blog/javascript-mitm-proxy-mockttp/

node.js library article

mockttpを使ったhttpsのサイトをProxyで書き換える方法についての紹介記事

httptoolkit/mockttp: Powerful friendly HTTP mock server & proxy

Node.js 10がサポート終了したので、Node.js 12以降だとできるようになることをまとめる

zenn.dev/azu/scraps/bb1106a04ed9e6

node.js article

Node.js 12から利用できるようになったNode.jsのAPIや機能、V8アップデートによるECMAScriptサポートについてまとめた記事。

Hosting SQLite databases on Github Pages - (or any static file hoster) - phiresky's blog

phiresky.github.io/blog/2021/hosting-sqlite-databases-on-github-pages/

SQLite JavaScript WebAssembly article

WebAssemblyにコンパイルしたSQLiteと参照用のSQLiteファイルを用意し、必要な部分だけを取得できる仕組みを作ったという話。
DBファイルをすべてメモリへ載せないで使うために、HTTP Rangeリクエストを使って必要なchunkだけを取得するHTTPベースの仮想ファイルシステムを作っている。
SQLiteのDBのページサイズやスキーマ情報から必要な部分だけをRangeリクエストで取得している。

Introducing CloudFront Functions – Run Your Code at the Edge with Low Latency at Any Scale | AWS News Blog

aws.amazon.com/jp/blogs/aws/introducing-cloudfront-functions-run-your-code-at-the-edge-with-low-latency-at-any-scale/

aws JavaScript webservice cdn article

AWS CloudFrontでCDNエッジな処理をJavaScriptでかけるサービス。
ECMAScript 5.1互換なJavaScript、処理時間が1ms以内、メモリは2MB以内、パッケージサイズは10kb以下のファイルサイズ、Network/File IOなし

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

itsjavi/jsx-runtime: Extremely lightweight JSX runtime (<2KB) to write JSX without React in TypeScript or JavaScript.

github.com/itsjavi/jsx-runtime

jsx babel Tools TypeScript

JSXで書いて変換するとStandaloneで動作するコードを出力するJSX TransformerとRuntime

Fower

fower.vercel.app/

JavaScript CSS library React Vue Svelte

TailwindcssライクなUtility-firstのCSS in JSライブラリ。
ReactやVue、またスタイルをJavaScriptで生成するためReact Nativeにも対応する。
UtilityベースのスタイルをPropsとして指定し、TSXや各フレームワーク用のコード補完に対応している。