JSer.info #447 - Chrome 76がリリースされました。

Stage 4となったPromise.allSettled()の実装、Blob#text()/Blob#arrayBuffer()/Blob#stream()のサポートが追加されています。
また、Async Clipboard APIで画像のサポートが追加されています。

Image Support for the Async Clipboard API | Web | Google Developers

Fetch Metadataリクエストヘッダ(Sec-Fetch-*)の実装、フラグ付きでCookieのデフォルトがSameSite=Laxとなる変更が入っています。
SameSite CookieがデフォルトとなるのはChrome 80の予定で、詳細は次の記事で解説されています。

SameSite cookies explained | web.dev

React 16.9のRC版がリリースされています。

Changelog for 16.9 (TODO: add date) by gaearon · Pull Request #16254 · facebook/react

試験的に実装されていた<React.Profiler>がStableな機能としてサポートされました。
プロファイルについては次の記事もあわせて読むとよさそうです。

Introducing the React Profiler – React Blog

非推奨となっていたUNSAFE_componentWillMountなどのUNSAFE_*のライフサイクルメソッドに対して警告出すようになっています。

Update on Async Rendering – React Blog

またXSSに使われる<a href="javascript:">などjavascript:スキームに対して警告を出すようになっています。
これに類似する仕組みはEmberやAngularにも実装されています。

その他としてDevToolsでuseStateの編集、Suspenseのトグル表示に対応などの開発者ツールの改善や、テスト用のact関数がAsync Functionに対応などが含まれています。

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

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

JSer.info Sponsors

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

ヘッドライン

New in Chrome 76 | Web | Google Developers

developers.google.com/web/updates/2019/07/nic76

Chrome ReleaseNote

Chrome 76リリース。
Stage 4となったPromise.allSettled()の実装、Blob#text()/Blob#arrayBuffer()/Blob#stream()の追加。
Fetch Metadataリクエストヘッダ(Sec-Fetch-*)の実装、フラグ付きでCookieのデフォルトがSameSite=Laxとなる変更が入るなど

Release Workbox v5.0.0-alpha.0 · GoogleChrome/workbox

github.com/GoogleChrome/workbox/releases/tag/v5.0.0-alpha.0

ServiceWorker ReleaseNote JavaScript

Service WorkerフレームワークのWorkbox 5αリリース。
Service WorkerのRuntimeをCDNからではなく、ローカルを生成したものを使うように。
injectManifestで置換されるプレースホルダが[]からself.__WB_MANIFESTに変更など

Release 10.0.0-rc.1 Biggus Fixus · preactjs/preact

github.com/preactjs/preact/releases/tag/10.0.0-rc.1

React JavaScript library ReleaseNote

Preact 10.0.0 RC1リリース。
Preact 8.xから10へのマイグレーションガイドが公開された。
またメンテナンスリリースとして8.5.0も公開された

Release v8.5.0 · preactjs/preact

Changelog for 16.9 (TODO: add date) by gaearon · Pull Request #16254 · facebook/react

github.com/facebook/react/pull/16254

React ReleaseNote issue

React 16.9 RC.0リリース。
<React.Profiler>の追加、非推奨となっていたUNSAFE_*のライフサイクルメソッドに対する警告の表示、<a href="javascript:">に対して警告を出すように。
また、DevToolsでuseStateの編集、Suspenseのトグル表示に対応、テスト用のactがAsync対応など

Warn for javascript: URLs in DOM sinks by sebmarkbage · Pull Request #15047 · facebook/react

アーティクル

When a rewrite isn’t: rebuilding Slack on the desktop

slack.engineering/rebuilding-slack-on-the-desktop-308d6fe94ae4

slack JavaScript refacoring article

Slack Desktopのアーキテクチャをどのようにリファクタリングしたかについて。
jQuery+SignalからReact+Reduxへの移行。
既存のコードベースを維持しつつ、徐々にモダンへ移行していく戦略について。
名前空間オブジェクトとモジュールの混在時における相互運用性。古いコードは新しいコードを直接importできず、新しいコードは古いコードを直接importできないというlegacy-interopの概念の導入。
Multi workspaceを意識した書き換えによってメモリ使用量の削減の効果などがあったことについてなど

プロダクト間共通の React コンポーネントライブラリを運用する話 - SmartHR Tech Blog

tech.smarthr.jp/entry/2019/08/01/151100

React UI library TypeScript article

アプリケーション間の共通UIをライブラリ化することについて。
React + TypeScript + Styled Componentsでの実装、Storybookでのプレビューやreg-suitでの回帰テストについてなど

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

WebMemex/freeze-dry: Snapshots a web page to get it as a static, self-contained HTML document.

github.com/WebMemex/freeze-dry

JavaScript library DOM

ウェブサイトのDOMとリソースのスナップショットを取るライブラリ

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

harttle/liquidjs: A shopify compatible Liquid template engine in pure JavaScript.

github.com/harttle/liquidjs

JavaScript library template TypeScript

Liquid互換のテンプレートエンジンのJavaScript実装

unshiftio/url-parse: Small footprint URL parser that works seamlessly across Node.js and browser environments.

github.com/unshiftio/url-parse

JavaScript library browser node.js

Browser、Node.js、Workerで動くURLパースライブラリ

Arkweid/lefthook: Fast and powerful Git hooks manager for any type of projects.

github.com/Arkweid/lefthook

git node.js ruby Tools

Git Hooksをymlで管理できるツール。
Node.jsやRubyなどパッケージマネージャーでインストールできる

daybrush/moveable: ↔️ ↕️ 🔄 Moveable! Draggable! Resizable! Scalable! Rotatable! Warpable!

github.com/daybrush/moveable

JavaScript library DOM

要素のドラッグ、リサイズなどのイベントハンドリングを扱うライブラリ

@Databases · Database libraries for Node.js that protect you from SQL Injection

www.atdatabases.org/

JavaScript TypeScript SQL library security

Tagged Template LiteralベースのSQLクエリエスケープライブラリ。
Tagged Template Literalで書いたSQL文からクエリとパラメータを分解して取り出し、その結果をデータベースエンジンにわたすことで安全なSQLエスケープを行う目的。
Postgres、MySQL、SQLiteなどに対応してる