2022-10-12のJS: Rollup v3、Volar 1.0(Vue LSP)、Satori(HTML + CSS = SVG)

[azu]

Rollup 3.0.0がリリースされました。

• Release v3.0.0 · rollup/rollup
• rollup.js#migration

破壊的な変更として、プラグインのAPIの変更、オプションの変更が行われています。
また、デフォルトでimport()を維持するように変更、chunkのアルゴリズムの変更なども含まれています。
そのほかには、デフォルトでNode.jsのESMサポートとの相互運用性を改善するためにoutput.interop/output.exports/output.esModuleオプションのデフォルト値が変更されています。

基本的には__esModuleというNode.jsが考慮しない(ESMとCJSの総合運用性のために使われていた)プロパティを減らす方向になっています。詳しい変更内容は次のPRを参照すると良さそうです。

• [v3.0] Improve interop defaults by lukastaegert · Pull Request #4611 · rollup/rollup

加えて、ECMAScript Proposal Stage 3のImport Assertionsのサポートも追加されています。

---

VueテンプレートのIDEサポートなどを提供するVolar 1.0がリリースされました。

• Volar 1.0 "Nika" Released! | The Vue Point

<template lang="pug">のbuilt-inサポートを終了しプラグイン化されています。
vue-tscが--watchと--declaration --emitDeclarationOnlyをサポートしています。
また、コアモジュールがVueなどのフレームワークに依存しなくなるなり、サンプルとしてSvelte Langauge Server Exampleが公開されています。

---

HTMLとCSSで書いたコードをSVG画像へと変換するSatoriというライブラリが公開されています。

• vercel/satori: Enlightened library to convert HTML and CSS to SVG

OGP(OG)イメージのために、コンテンツに基づいた画像を生成することが増えています。
Puppeteerなどを利用すればHTMLとCSSで書いたデザインから画像(スクリーンショット)を再生することはできました。
しかし、ブラウザプロセスを立ち上げると時間がかかったりリソースの消費も大きいです。

そのため、SatoriではFlexboxのレイアウトエンジンを実装として知られるYogaのWasmビルド版を使い、HTMLとCSSのサブセットを実装しSVGを生成しています。

次の記事で詳しい解説が書かれています。

• Introducing OG Image Generation: Fast, dynamic social card images at the Edge – Vercel