Fork me on GitHub

2021-06-01のJS: Jest 27、vanilla-extract 1.0.0、Learn CSS

Edit on GitHub 編集履歴を見る

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は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全般について幅広く解説されています。


ヘッドライン


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の型を厳密化するといった変更も含まれる


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リリース。


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 fromimport.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などの各種ツールに対応したプラグインが用意されている。


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-htmlLitELementを一つにまとめて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もサポートしている。


wwwtyro/candygraph: Fast by default, flexible 2D plotting library.

github.com/wwwtyro/candygraph

graphic library JavaScript

パフォーマンスに目的を置いた2Dグラフ描画ライブラリ


lume/autolayout: Apple's Auto Layout and Visual Format Language for JavaScript (using cassowary constraints)

github.com/lume/autolayout

JavaScript library

Auto LayoutとVisual Format Languageの実装ライブラリ


plantain-00/type-coverage: A CLI tool to check type coverage for typescript code

github.com/plantain-00/type-coverage

TypeScript Tools

TypeScriptの型カバレッジを出すツール


書籍関係


WebAssembly: The Definitive Guide

learning.oreilly.com/library/view/webassembly-the-definitive/9781492089834/

WebAssembly book

2021年12月発売予定
WebAsseblyについての書籍


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