Fork me on GitHub

2020-10-06のJS: MobX 6.0、Declarative Shadow DOM、ffmpeg.wasm

Edit on GitHub 編集履歴を見る

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

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

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


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が公開されています。

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


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

JSer.info Sponsors

JSer.info SponsorsGitHub 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を削除し、makeObservablemakeAutoObservableの追加。
Proxy APIなしでも動作するようになるなど。
Decoratorを使ったコードをマイグレーションするツールとしてmobx-undecorateも公開している。


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でコントラストの問題の表示、ショートカットのカスタマイズができるように


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


a11yresources - A growing list of accessibility tools and resources

a11yresources.webflow.io/

accessibility Tools

アクセシビリティに関するリソースのまとめ


Indicium: V8 runtime tracer tool · V8

v8.dev/blog/system-analyzer

V8 debug Tools

V8/Chromeの実行ログからInline CacheとMapがどのように動いているかをトレース、デバッグ、分析するツール


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


yamalight/graffiti: Minimalistic GraphQL framework

github.com/yamalight/graffiti/

GraphQL node.js library

fastify/graphql-compose/Mongooseを使ったGraphQLフレームワーク


bytedance/IconPark: Transform an SVG icon into multiple themes, and generate React icons,Vue icons,svg icons

github.com/bytedance/IconPark

SVG Vue React library

SVGアイコン集。
React、Vueのコンポーネントとしても利用できる。


Robot - a fast 1kB functional library for creating Finite State Machines

thisrobot.life/

JavaScript library

ステートマシンでのステート管理ライブラリ


happykit/flags: 🏳 Feature Flags for Next.js

github.com/happykit/flags

JavaScript Next.js library webservice

Next.js向けのFeature Flag管理ライブラリとウェブサービス


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

github.com/ffmpegwasm/ffmpeg.wasm

JavaScript Image library WebAssembly

ffmpegをWebAssemblyとして動かすライブラリ


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