JSer.info #508 - ステート管理ライブラリのMobX 6.0がリリースされています。

mobx/CHANGELOG.md at mobx6 · mobxjs/mobx

decorateを削除し、代わりとなるmakeObservableとmakeAutoObservableを追加しています。
ES ProposalのDecorator構文を使ったコードをマイグレーションするツールとしてmobx-undecorateも公開しています。また、6.0ではES2015のProxyなしでも制限ありで動作するようになるuseProxies: "never"の設定をサポートしています。

MobX 4.x、5.xからマイグレーション方法については次のページでまとめられています。

Migrating from MobX 4/5 · MobX

Declarative Shadow DOMという記事では、宣言的なShadow DOMについて書かれています。
Declarative Shadow DOMはChrome 85でフラグありでサポートされていて、Chrome 88でフラグなしでサポートとなる予定です。

<template>要素のshadowroot属性で宣言的にShadow Root宣言できるようになるProposalです。

<host-element>
    <template shadowroot="open">
        <style>shadow styles</style>
        <h2>Shadow Content</h2>
        <slot></slot>
    </template>
    <h2>Light content</h2>
</host-element>

Declarative Shadow DOMの主な目的であるSSRの対応、getInnerHTML()でのShadowRootの取得、Custom ElementのattachShadow()の挙動、細かい挙動の解説がされています。

ffmpegの一部をWebAssemblyにコンパイルしてブラウザとNode.jsで動かすffmpeg.wasmが公開されています。

ffmpegwasm/ffmpeg.wasm: FFmpeg for browser and node, powered by WebAssembly

どのようにコンパイルしているかの解説記事も書かれているので興味がある人読んでみるとよさそうです。

Build FFmpeg WebAssembly version (= ffmpeg.wasm): Part.1 Preparation | by Jerome Wu | ITNEXT

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

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

JSer.info Sponsors

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

ヘッドライン

Node v14.13.0 (Current) | Node.js

nodejs.org/en/blog/release/v14.13.0/

node.js ReleaseNote

Node.js 14.13.0リリース。
exportsフィールドで*パターンのサポート、CommonJSとESMのinteropに関する実装の追加など

mobx/CHANGELOG.md at mobx6 · mobxjs/mobx

github.com/mobxjs/mobx/blob/mobx6/CHANGELOG.md#600

JavaScript library ReleaseNote

MobX 6.0.0リリース。
decorateを削除し、makeObservableとmakeAutoObservableの追加。
Proxy APIなしでも動作するようになるなど。
Decoratorを使ったコードをマイグレーションするツールとしてmobx-undecorateも公開している。

Migrating from MobX 4/5 · MobX

The npm Blog — Release v7.0.0-rc.0

blog.npmjs.org/post/630786103662821376/release-v700-rc0

npm ReleaseNote

npm 7.0.0 RCリリース

Bootstrap 5 Alpha 2 | Bootstrap Blog

blog.getbootstrap.com/2020/09/29/bootstrap-5-alpha-2/

CSS library ReleaseNote

Bootstrap 5 Alpha 2リリース。
.carousel-darkの追加、.dropdown-menu-darkの追加、closeボタンのデザイン変更、Utilクラスの追加など

Release v6.4.0 · GoogleChrome/lighthouse

github.com/GoogleChrome/lighthouse/releases/tag/v6.4.0

Chrome performance Tools ReleaseNote

Lighthouse 6.4.0リリース。
large-javascript-librariesのAuditをexperimentalで追加、unsized-imagesのAuditを追加など

アーティクル

JQuery to React: How we rewrote the HelloSign Editor - Dropbox

dropbox.tech/application/jquery-to-react--how-we-rewrote-the-hellosign-editor

jQuery React article

jQueryで書かれた署名アプリをReactに移行した話。
移行する際にUIを再設計するべきか、アプリの構造、UIに対するStateの設計、Storybookを使ったデバッグ環境などについて。

Declarative Shadow DOM

web.dev/declarative-shadow-dom/

WebComponents article

Chrome 85に実験フラグ付きで実装されたDeclarative Shadow DOMについて。
<template>要素のshadowroot属性で宣言的にShadow Root宣言できる。
SSRの対応、getInnerHTML()でのShadowRootの取得、Custom ElementのattachShadow()の挙動、細かい挙動の解説など

What's New In DevTools (Chrome 87) | Web | Google Developers

developers.google.com/web/updates/2020/10/devtools

Chrome debug article

Chrome 87のDevToolsの変更点について。
CSS Gridのデバッグ機能、WebAuthタブの追加、Lighthouse 6.4へのアップデート、resource-typeとurlでのフィルターができるように。
COEPとCOOPのレポート先の表示、CSS Overviewでコントラストの問題の表示、ショートカットのカスタマイズができるように