JSer.info #542 - Jest 27.0.0がリリースされました。

Jest 27.0.0では今までのデフォルトが大きく変更されるリリースとなっています。

testEnvironmentのデフォルトをjsdomからnodeへ変更、jest-circusのデフォルト化、fake timersのデフォルトを@sinonjs/fake-timersベースのmodernにしています。
機能追加として、失敗したテストをインタラクティブに実行できるように、inline snapshotsをprettierの依存なく実行できるようになっています。
また、doneの複数回呼び出しをエラーとしたり、テストケースでPromiseを返しつつdoneを呼ぶことを禁止したり、TypeScriptの型を厳密化するといった変更も含まれています。

CSS Variablesが利用できないといったCSS Modulesの問題点の解決と型安全なCSS in JSを目指すvanilla-extract 1.0.0がリリースされました。

vanilla-extract — Zero-runtime Stylesheets-in-TypeScript.

🧁🎉 Announcing vanilla-extract v1.0!

💪 Locally scoped, type-safe styles, variables + themes.
🦄 Minimal abstraction over CSS.
🛠 Framework agnostic, w/ integrations for webpack, esbuild, Vite + Snowpack.
✅ Now stable + production ready.

🙇‍♂️ Enjoy!https://t.co/Ejaf4anfbj
— 🧁🍨 Mark Dalgleish (@markdalgleish) May 28, 2021

vanilla-extractはCSS Modulesの作者の一人でもあるMark Dalgleishが中心に作成されているCSS Modules-in-TypeScriptなCSSフレームワークです。
TypeScriptでスタイルをJSとして.css.tsに書いてclass属性に指定したものをコンパイルすると、CSSファイルを生成するフレームワークに依存しないツールキットとなっています。

直近で様々なCSS in JSが登場しているので、次の記事がCSSへのアプローチをグループ分けしてまとめられています。

web.devでLearn CSSというCSSについて一から学べるCSSのチュートリアル講座が公開されています。
Box Model、セレクタ、詳細度、CSSの単位などの基本的な概念から、GridやFlexboxなどのレイアウト、ColorやmarginなどのCSSプロパティの解説、擬似クラスや疑似要素などCSS全般について幅広く解説されています。

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

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

JSer.info Sponsors

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

ヘッドライン

sinon/CHANGELOG.md at master · sinonjs/sinon

github.com/sinonjs/sinon/blob/master/CHANGELOG.md#1110--2021-05-25

JavaScript testing library ReleaseNote

sinon.js 11.1.0リリース。
PromiseをFakeするsinon.promise()の実装など

Jest 27: New Defaults for Jest, 2021 edition ⏩ · Jest

jestjs.io/blog/2021/05/25/jest-27

JavaScript testing node.js library ReleaseNote

Jest 27リリース。
デフォルトが大きく変わるリリースとなっていて、
testEnvironmentのデフォルトをjsdomからnodeへ変更、jest-circusのデフォルト化、fake timersのデフォルトを@sinonjs/fake-timersベースのmodernに変更している。
機能追加として、失敗したテストをインタラクティブに実行できるように、inline snapshotsをprettierの依存なく実行できるようになど。
また、doneの複数回呼び出しをエラーとしたり、Promiseを返すのとdoneの混在を禁止したり、TypeScriptの型を厳密化するといった変更も含まれる

Release 27.0.0 · facebook/jest

Announcing TypeScript 4.3 | TypeScript

devblogs.microsoft.com/typescript/announcing-typescript-4-3/

TypeScript ReleaseNote

TypeScript 4.3リリース
setterにgetterとは異なる型を指定できるように、overrideキーワードの追加、Template String Typeの改善。
Private Class Elements(fields/methods/accessors)のサポート、static Index Signatureのサポート。
ConstructorParametersがAbstract classをサポート、Genericsにおける型の絞り込みの改善、Promiseオブジェクトを条件式に渡してしまうミスのチェックを追加。
その他には、.tsbuildinfoのサイズ改善、watch時の初回ビルドの改善など。

Announcing Vendure v1.0 | Vendure E-commerce

www.vendure.io/blog/2021/05/announcing-vendure-v1.0/

node.js ReleaseNote GraphQL

GraphQL/TypeScriptベースのeコマースフレームワークであるVendure v1.0リリース。

vendure-ecommerce/vendure: A headless GraphQL ecommerce framework for the modern web

Optimized images for Nuxt

image.nuxtjs.org/

Vue library

Nuxt.js向けの画像最適化モジュール

ECMAScript proposal updates @ 2021-05 | ECMAScript Daily

ecmascript-daily.github.io/ecmascript/2021/05/29/ecmascript-proposal-update

ECMAScript proposal news

2021年5月のTC39ミーティングでStageの変更があったProposalのまとめ。
Top-Level awaitとRegExp Match IndicesがStage 4となりES2022に含まれることが決まった

New Release: 2.13.0

jshint.com/blog/2021-05-30/release-2-13-0/

JavaScript Tools ReleaseNote

JSHint 2.13.0リリース。
export * as ns from、import.meta、Dynamic import()、Optional Chaining、Nullish Coalescingのサポートなど

vanilla-extract — Zero-runtime Stylesheets-in-TypeScript.

vanilla-extract.style/

CSS JavaScript TypeScript Tools

vanilla-extract v1.0リリース。
TypeScriptでスタイルをJSとして.css.tsに書いてclass属性に指定したものをコンパイルすると、CSSファイルを生成するフレームワークに依存しないツールキット。
ビルド時に静的に展開されるAPIと実行時に動作するDynamic API、webpackやViteなどの各種ツールに対応したプラグインが用意されている。

🧁🍨 Mark Dalgleish on Twitter: "🧁🎉 Announcing vanilla-extract v1.0! 💪 Locally scoped, type-safe styles, variables + themes. 🦄 Minimal abstraction over CSS. 🛠 Framework agnostic, w/ integrations for webpack, esbuild, Vite + Snowpack. ✅ Now stable + production ready. 🙇‍♂️ Enjoy! https://t.co/Ejaf4anfbj" / Twitter

Lit 2.0: Meet Lit, all over again! – Lit

lit.dev/blog/2021-04-21-lit-2.0-meet-lit-all-over-again/

JavaScript WebComponents library ReleaseNote

Lit 2.0 RCリリース。
lit-htmlとLitELementを一つにまとめてlitパッケージの公開、ウェブサイトの刷新が行われている。
ファイルサイズやパフォーマンスの改善、SSRの対応などが含まれている

アーティクル

5 steps to faster web fonts /// Iain Bean

iainbean.com/posts/2021/5-steps-to-faster-web-fonts/

CSS fonts article

Web Fontsのローディングについての連載。
font-displayでのテキストの表示と切り替わるタイミングのまとめ

スライド、動画関係

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

Learn CSS

web.dev/learn/css/

CSS tutorial

CSSについて一通り扱うチュートリアル講座。
Box Model、セレクタ、詳細度、CSSの単位などの基本的な概念から、GridやFlexboxなどのレイアウト、ColorやmarginなどのCSSプロパティの解説、擬似クラスや疑似要素などを扱う

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

xqq/mpegts.js: HTML5 MPEG2-TS Stream Player

github.com/xqq/mpegts.js

JavaScript video library

flv.jsをベースにしたMPEG-2 TS steram playerライブラリ。
HTTPとWebSocketを使ったMPEG-2 TS streamの再生、低遅延、低スペックマシンでも再生できることを目的にしている。
flv.jsベースであるため、FLV containerもサポートしている。