Fork me on GitHub

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

Edit on GitHub 編集履歴を見る

JSer.info #613 - Rollup 3.0.0がリリースされました。

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

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

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


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

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


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

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

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

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


ヘッドライン


Release 2.0.0-rc.0 · vercel/swr

github.com/vercel/swr/releases/tag/2.0.0-rc.0

React JavaScript library ReleaseNote

SWR 2.0.0-rc.0リリース。
破壊的変更としてmutationにおけるエラーが他のmutationやuseSWRに反映されないように変更。また、mutationがエラーをthrowするかを抑制できるthrowOnErrorオプションを追加など


ESLint v8.25.0 released - ESLint - Pluggable JavaScript Linter

eslint.org/blog/2022/10/eslint-v8.25.0-released/

ESLint ReleaseNote

ESLint v8.25.0リリース。
新しい設定ファイルでは、.eslintignoreファイルはサポートしなくなり、設定ファイル内のignoresフィールドで無視するファイルを指定するようになる変更。


Chrome 107 beta - Chrome Developers

developer.chrome.com/blog/chrome-107-beta/

Chrome ReleaseNote

Chrome 107 betaリリース。
grid-templateでのtransitionのサポート、Screen Capture APIの改善、Resource TimingにrenderBlockingStatusを追加。
Permissions policyのorigin指定に*を利用可能に、<form>要素がrel属性のサポートなど。
Origin TrialsとしてDeclarative PendingBeacon API、Permissions policyのunloadのサポートなど。
またExpect-CT HTTPヘッダを非推奨化など


Release v7.0.0 · capricorn86/happy-dom

github.com/capricorn86/happy-dom/releases/tag/v7.0.0

JavaScript DOM library ReleaseNote

Happy DOM v7.0.0リリース。
CSSStyleDeclarationのサポート改善、Window.getComputedStyle()のサポート改善、CSSStyleSheetのサポート改善など


Release v3.0.0 · rollup/rollup

github.com/rollup/rollup/releases/tag/v3.0.0

rollup ReleaseNote

Rollup v3.0.0リリース。
破壊的な変更として、プラグインのAPIの変更、オプションの変更、デフォルトでimport()を維持するように変更、chunkのアルゴリズムの変更など。
また、デフォルトでNode.jsのESMサポートとの相互運用性を改善、import assertionsのサポート、など


アーティクル


Evolving Ember’s Major Version Process

blog.emberjs.com/evolving-embers-major-version-process/

Ember article

Emberはメジャーリリース(破壊的変更)を少なくするという方針であったため、メジャーリリースの間隔が長くなっていた。この間隔が長くなると非推奨の機能に取り除くタイミングがわかりにくくなるなどの弊害があった。
そのため、予測可能なリズムとして6周ごとにマイナーリリース、18ヶ月ごとにメジャーリリースとする。
またX.10以降にはDeprecationを増やさない、メジャーリリースはDeprecationを削除するのみというルールと取り入れ、開発者がDeprecationにいつ対応するべきかを明確にする。


Intl.Segmenter で和文の改行をいい感じにしてみる

zenn.dev/notfounds/articles/58c465d4029dc1

ECMAScript i18n article

Intl.Segmenterを使った分かち書きを考慮した改行の実装について。
また、JavaScriptエンジンの実装による違いとHydrationでの差異を無視する方法について


10 best practices to containerize Node.js web applications with Docker | Snyk Blog

snyk.io/blog/10-best-practices-to-containerize-nodejs-web-applications-with-docker/

node.js Docker article

DockerベースのNode.jsのウェブアプリケーションのプラクティスについて。
Docker Imageの作成、Gracefull Shutdownの対応、不要な情報の削除などについて


Volar 1.0 "Nika" Released! | The Vue Point

blog.vuejs.org/posts/volar-1.0.html

Vue VSCode Extension article

Volar 1.0リリース。
<template lang="pug">のbuilt-inサポートを終了しプラグイン化。
vue-tsc--watch--declaration --emitDeclarationOnlyをサポート。
コアモジュールがVueなどのフレームワークに依存しなくなるなど


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


slash9494/react-modern-audio-player: 🔊 Simple, accessible and flexible audio player

github.com/slash9494/react-modern-audio-player

React audio library

Reactで書かれた音楽プレイヤーコンポーネント


leeoniya/uFuzzy: A tiny, efficient fuzzy search that doesn't suck

github.com/leeoniya/uFuzzy

JavaScript search library

ファイルサイズが小さなあいまい検索ライブラリ


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

github.com/vercel/satori

HTML CSS SVG JavaScript library

HTMLとCSSからSVGを生成するライブラリ。
yoga-layoutを使いCSSのサブセットを実装していて、ブラウザのレンダリングエンジンを使わずにSVGへと変換できる


fp-ts/core

github.com/fp-ts/core

functional JavaScript library

関数型プログラミング向けのTypeScriptライブラリ。


stepci/stepci: API Testing and Monitoring made simple

github.com/stepci/stepci

JavaScript API testing Tools

言語に依存しないWeb APIのテストツール。
yamlでAPIのテストの定義を書き、テストを実行できる。


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