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からアップグレードガイドも公開されています。

Upgrade guide – Lit

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

Introducing Gatsby 4 | Gatsby

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

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

While DSG may look similar on the surface, what Gatsby does is that it takes a snapshot of the data at initial build time and creates lightweight render engines that are capable of building a page on demand. However, all data was already sourced at initial build time!
— Sid (@chatsidhartha) September 27, 2021

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

Migrating from v3 to v4 | Gatsby

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

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

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

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

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

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

Introducing Partytown 🎉: Run Third-Party Scripts From a Web Worker - DEV Community 👩‍💻👨‍💻

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

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

JSer.info Sponsors

JSer.info SponsorsはGitHub 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版の方が早くなっている。