Fork me on GitHub

2022-12-20のJS: Vite 4.0、SvelteKit 1.0、Node v19.3.0(npm 9)、RUM Archive

Edit on GitHub 編集履歴を見る

JSer.info #623 - Vite 4.0がリリースされました。

SWCをサポートする@vitejs/plugin-react-swcを追加、デフォルトでES2020形式で出力するように変更、CSSを文字列としてインポートする方法の変更などの変更が含まれています。


SvelteベースのフレームワークであるSvelteKit 1.0がリリースされました。

α版からの変更点は次のマイグレーションガイドにまとめられています。


Node v19.3.0がリリースされました。

Node v19.3.0では、npm 9系となるnpm 9.2.0が同梱されています。
npm 8から9はメジャーアップデートなので、破壊的な変更を含んでいます。

一方で、Node.jsに同梱されるnpmをアップデートする際にどうするかについて、次のIssueで議論されました。

議論した結果、次のようなガイドラインが作成され、このガイドラインを満たしているなら、Node.jsのメジャーアップデートなしに同梱するnpmをメジャーアップデートするという結論になったようです。
具体的にはNode.jsのエコシステムをテストするcitgmがfailしない、package-lock.jsonを変更しないなどの要件が含まれています。

このガイドラインに則り、2023年1月18日にnpm 9をNode.js 18へもバックポートする予定となっています。

Wednesday Jan. 18th (~6 weeks after node@19 backport)
A PR will be opened to backport [email protected] in node@18
https://github.blog/changelog/2022-10-24-npm-v9-0-0-released/


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

JSer.info Sponsors

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


ヘッドライン


jQuery 3.6.2 Released! | Official jQuery Blog

blog.jquery.com/2022/12/13/jquery-3-6-2-released/

jQuery ReleaseNote

jQuery 3.6.2リリース。
CSS Variablesのバグ修正、<template>に対する.contains()の修正。
CSSセレクタの:has()の仕様の問題でjQuery 1.3以降に影響があったが、仕様とChromeが修正された。


Vite 4.0 is out! | Vite

vitejs.dev/blog/announcing-vite4.html

vite ReleaseNote

Vite 4.0リリース。
SWCをサポートする@vitejs/plugin-react-swcを追加、ES2020で出力するように変更、CSSを文字列としてインポートする方法の変更など


Announcing SvelteKit 1.0

svelte.dev/blog/announcing-sveltekit-1.0

Svelte ReleaseNote

SvelteKit 1.0リリース。


Storybook 7.0 beta

storybook.js.org/blog/7-0-beta/

JavaScript debug Tools ReleaseNote

Storybook 7.0 betaリリース。
webpack4、IE11、Node.js 14のサポート終了、storiesOf APIをデフォルトで無効化など。
CSF3のデフォルト化、Viteのサポート、Test runnerとCode Coverageのサポートなど


Release v1.29.0 · microsoft/playwright

github.com/microsoft/playwright/releases/tag/v1.29.0

playwright ReleaseNote

playwright v1.29.0リリース。
route.fetch()の追加、locator.all()の追加、expect().toPassの追加。
テスト失敗時にページ全体のスクリーンショットを撮るfullPageオプションの追加など


Node v19.3.0 (Current) | Node.js

nodejs.org/en/blog/release/v19.3.0/

node.js ReleaseNote

Node.js v19.3.0リリース。
Node.jsでのnpmのアップデートにおける"Major Update"を定義し、npm 9.2.0にアップデート。


Release v0.16.10 · evanw/esbuild

github.com/evanw/esbuild/releases/tag/v0.16.10

JavaScript Tools ReleaseNote

esbuild v0.16.10リリース。
--legal-commentsのデフォルト値を元に戻し、ライセンスとそのライセンスコメントの起源となるファイル名をコメントに含めるように変更。


アーティクル


Find the most expensive CSS selectors

devtoolstips.org/tips/en/find-expensive-selectors/

CSS performance article

MSEdgeのDevToolsで、CSSセレクタの処理時間やマッチ回数を見る方法について


Help choose the syntax for CSS Nesting | WebKit

webkit.org/blog/13607/help-choose-from-options-for-css-nesting-syntax/

CSS アンケート article

CSSのネスト構文のProposalでどの構文がわかりやすいかというアンケートが実施されている


Web Performance Calendar » Web Performance APIs Appreciation Post

calendar.perfplanet.com/2022/web-performance-apis-appreciation-post/

JavaScript browser performance article

新しめのウェブパフォーマンスAPIについての紹介記事。
Render blocking status、Offscreen Canvas、OfflineAudioContext。
Async Image Decoding、Image.decode()loading=lazyfetchpriority、103 Early Hintsなどについて


Prisma Client Just Became a Lot More Flexible

www.prisma.io/blog/client-extensions-preview-8t3w27xkrxxn

TypeScript database library article

PrismaにPrisma Client extensionsという拡張の仕組みがプレビュー実装された。
PrismaClientに対して、メソッドの追加、フィルター処理の追加、クエリに対する処理の追加などができる拡張の仕組み


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


RUM Archive - Homepage

rumarchive.com/

browser performance cdn webservice

Akamai mPulseの匿名化RUMデータセットのアーカイブを公開しているサイト。
匿名化されたブラウザ情報やWeb Vitalsなどのウェブパフォーマンスに関するRUMデータをBigQueryに公開している。
大規模なRUMデータセットをBigQueryで分析できる。


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


bluwy/publint: Lint packaging errors

github.com/bluwy/publint

node.js Tools npm

npmパッケージのLintツール。
package.jsonにおけるmainexportsフィールドがさまざまな環境で互換性のある書き方になっているかをチェックできるツール


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