Fork me on GitHub

2021-09-28のJS: Lit 2、Gatsby 4 beta、Partytown(Third-Party Script into Worker)

Edit on GitHub 編集履歴を見る

JSer.info #559 - Web Componentsを扱うライブラリであるLit 2がリリースされました。

Lit 2は今までLitElement 2.xとlit-html 1.xという別々のパッケージになったものを統合していて、litという新しいパッケージ担っています。

classベースのDirectives API、非同期Directives、Reactive Controllersの追加されています。
要素全体に対して影響を与えられるElement expressions、タグ名などに変数を使えるStatic expressionsなども追加されています。
また、実験的にSSRのサポートなども追加されています。

LitElement 2.xとlit-html 1.xからアップグレードガイドも公開されています。


Gatsby 4のベータ版がリリースされています。

rendering modeとして、HTMLの生成を実際にアクセスするときまで遅延するDeferred Static Generation(DSG)のサポート、SSRのサポートが追加されています。

Deferred Static Generation(DSG)はNext.jsのIncremental Static Regeneration(ISR)と似ていて、初回のリクエストがきた段階で始めてビルドを開始することで、めったにアクセスされないコンテンツを含むようなサイトでのデプロイにかかるビルド時間を短縮する仕組みです。
DSGではデプロイ時にデータのスナップショットを作り、リクエスト時にスナップショットからコンテンツであるHTMLを生成して返します。そのため、DSGはISRとは、リクエスト時に異なりサーバから外部リソースを再取得するのではなく、あくまでデプロイ時に作成されたスナップショットを参照してビルドするようになっています。

その他にはparallel queryでのビルド時間の改善なども含まれています。
あわせてv3からのマイグレーションガイドも公開されています。


PartytownはサードパーティスクリプトをWebWorkerで動かし、サードパーティスクリプトによるメインスレッドのブロッキングを避ける目的のライブラリです。

WebWorkerにはDOM APIなどがないため、そのままサードパーティスクリプトをWorkerで動かすとエラーとなります。
そのため、次のような仕組みでDOM APIなどを含むサードパーティスクリプトをWorker内で動かしています。

  1. Worker内でのDOM操作をProxyする
  2. DOM操作をコマンドにして同期XHRで通信(Worker内では同期XHRが利用できます)
  3. この通信をService Workerでインターセプトしてコマンドを取得
  4. コマンドを元にService Workerとメインスレッドで非同期にやりとりしてDOM操作の結果を取得
  5. DOM操作の結果を元のWorkerに返す

これによって、Worker内で動作しているサードパーティスクリプトから見れば同期的にAPIを使えているように見えるため、コードの変更なしに動作しています。

詳しい仕組みについては記事も公開されているので、こちらを参照してください。


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

JSer.info Sponsors

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


ヘッドライン


Announcing Lit 2 stable release – Lit

lit.dev/blog/2021-09-21-announcing-lit-2/

WebComponents JavaScript library ReleaseNote

Lit 2リリース。
classベースのDirectives API、非同期Directives、Reactive Controllersの追加。
要素全体に対して影響を与えられるElement expressions、タグ名などに変数を使えるStatic expressionsの追加。
また、実験的にSSRのサポートなど


Node v16.10.0 (Current) | Node.js

nodejs.org/en/blog/release/v16.10.0/

node.js ReleaseNote

Node v16.10.0リリース。
コネクションごとに最大のリクエスト数を制限するserver.maxRequestsPerSocketオプションの追加。
$HOME/.node_modulesなどを探索しない--no-global-search-pathsフラグの追加など


Electron 15.0.0 | Electron

www.electronjs.org/blog/electron-15-0/

Electron ReleaseNote

Electron 15.0.0リリース。
Electron 15から8週間ごとのメジャーアップデートとなる。
Chromium 94、Node.js 16.5.0、V8 9.4へアップデート、nativeWindowOpenのデフォルト値をtrueへ変更、safeStorage APIの追加など


Chromium Blog: Chrome 95 Beta: Secure Payment Confirmation, WebAssembly Exception Handling and More

blog.chromium.org/2021/09/chrome-95-beta-secure-payment.html

Chrome ReleaseNote

Chrome 95 betaリリース。
Origin TrialとしてAccess HandleをFile System Access APIに追加。
Performance ObserverにdroppedEntriesCountの追加、EyeDropper APIの追加、self.reportError()の追加、URLPatternの追加など。
また、FTP URLのサポート終了、数字で終わるIPv4アドレスではないホスト名のサポートを廃止など


Miniflare is now an official part of the Workers ecosystem 🎉 · cloudflare/miniflare@e1cb97f

github.com/cloudflare/miniflare/commit/e1cb97f9891b2818f4be5715ee467668a39f7f80

cloudflare Tools news testing

Cloudflare WorkersのsimulatorであるMiniflareがCloudflare公式となった


es-module-shims/CHANGELOG.md at 1.0.0 · guybedford/es-module-shims

github.com/guybedford/es-module-shims/blob/1.0.0/CHANGELOG.md

ECMAScript module polyfill ReleaseNote

ES Module Shims 1.0.0リリース。
lexerがWasmを利用していたためunsafe-evalのCSP設定が必要となっていたが、asm.jsビルドを使いデフォルトでCSPに対応した。
また、パフォーマンスについてはほぼ同等で、Safariに関してはasm.js版の方が早くなっている。


Manifest V2 support timeline - Chrome Developers

developer.chrome.com/docs/extensions/mv3/mv2-sunset/

Chrome Extension news

Chrome拡張のmanifest v3のロードマップ。
2022年1月17日に新しくmanifest v2の拡張は申請できなくなる。
2023年1月に既存のv2拡張は更新もできなくなる。


ESLint v8.0.0-rc.0 released - ESLint - Pluggable JavaScript linter

eslint.org/blog/2021/09/eslint-v8.0.0-rc.0-released

ESLint ReleaseNote

ESLint v8.0.0-rc.0リリース。


Stimulus 3

world.hey.com/hotwired/stimulus-3-c438d432

JavaScript rails library ReleaseNote

Stimulus 3 リリース。
パッケージ名がstimulusから@hotwired/stimulusへと変更された。
Action Parametersのサポート、デフォルト値のサポート、debugオプションの追加など


Introducing Gatsby 4 | Gatsby

www.gatsbyjs.com/gatsby-4/

React library ReleaseNote

Gatsby 4ベータリリース。
HTMLの生成を実際にアクセスするときまで遅延するDeferred Static Generation(DSG)のサポート、SSRのサポート、parallel queryでのビルド時間の改善など


アーティクル


Blazor Developers Can Now Create Custom Elements, Render Components from JavaScript -- Visual Studio Magazine

visualstudiomagazine.com/articles/2021/09/16/aspnet-core-updates.aspx

.net C# WebComponents article

.NET 6 RC1でBlazorがCustom Elementをサポートし、BlazorコンポーネントをCustom Elementとして利用できるようになった。


Fullstack app with TypeScript, Next.js, Prisma & GraphQL

www.prisma.io/blog/fullstack-nextjs-graphql-prisma-oklidw1rhw

node.js tutorial article prisma Next.js GraphQL

Next.js/Prisma/GraphQLを使ったアプリケーション開発についてのチュートリアル。


What's new in React 18? | Yagmur Cetin Tas

yagmurcetintas.com/journal/whats-new-in-react-18

React article

React 18で予定されている変更の概要をまとめた記事


スライド、動画関係


Get Your Head Straight - Speaker Deck

speakerdeck.com/csswizardry/get-your-head-straight

performance slide CSS

パフォーマンスの問題を見つけるために<head>の中身を表示するct.cssについてのスライド。
<script><style>について3rd partyであるかやブロッキングしてるかなどを可視化してくれる


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


vite/packages/plugin-react at main · vitejs/vite

github.com/vitejs/vite/tree/main/packages/plugin-react

React vite plugin

ViteのReact Plugin。
@vitejs/plugin-react-refreshを置き換えるプラグイン


BuilderIO/partytown: Relocate resource intensive third-party scripts off of the main thread and into a web worker. 🎉

github.com/BuilderIO/partytown

JavaScript library performance

サードパーティスクリプトをWorker内で動かしてメインスレッドのブロッキングを防ぐライブラリ。
Worker内でのDOM操作をProxyして、同期XHRで通信し、その通信をService Workerでインターセプトしてメインスレッドと非同期でやり取りした結果をWorkerに返している。


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


gvergnaud/ts-pattern: 🎨 The exhaustive Pattern Matching library for TypeScript, with smart type inference.

github.com/gvergnaud/ts-pattern

TypeScript library

TypeScriptでのパターンマッチライブラリ


cesanta/elk: A low footprint JavaScript engine for embedded systems

github.com/cesanta/elk

JavaScript Tools

組み込み向けの小さなJavaScriptエンジン


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