Fork me on GitHub

2022-04-13のJS: TypeScript 4.7 Beta、RedwoodJS 1.0、Sanitizer API

Edit on GitHub 編集履歴を見る

JSer.info #587 - TypeScript 4.7 Betaがリリースされました。

TypeScript 4.5 Betaで導入されNightlyでテストされていた、Node.jsのECMAScript Moduleサポートを再び有効化されています。
これに関連してpackage.jsonexportsフィールドのサポート、"module": "nodenext".mts/ctsの拡張子のサポートが追加されています。
また、Node.jsではファイルがモジュールかどうかはpackage.jsonmoduleフィールドなどによって暗黙的に異なります。
そのため、ファイルがモジュールかどうかを判定方法を制御できるmoduleDetectionオプションも追加して、強制的(force)にモジュールとして認識させることもできるようになっています。

型推論の改善として、Computedプロパティに対するコントロールフロー解析の改善、オブジェクトにおける関数の型推論の改善が含まれています。

Genericsの型を指定したaliasを定義できる Instantiation Expressionsをサポート。

const ErrorMap = Map<string, Error>;

inferに対するextendsでの推論条件の追加をサポート、型が共変(in)/反変(out)/不変(in out)なのかを指定できるアノテーションを追加されています。

モジュール解決時の探索方法をカスタマイズするmoduleSuffixesオプションの追加、import typeとReference Commentでresolution-modeを指定できるようになっています。


Making of: The Sanitizer API (Nullcon 2022) - Google スライドというスライドでは、HTML Sanitizer APIという策定中/実装中のウェブ標準について紹介されています。

信頼できないHTML文字列のインジェクトするときに、そのHTML文字列をサニタイズしてXSSを防止するためのAPIです。
最初は、HTML文字列をサニタイズしてHTML文字列を返すAPIとして進められていました、HTMLのパースモードの違いなどからパイパスする方法があることが発見されました。(HTML文字列という文字列のフラグメントに対するサニタイズは安全にはできないと分かった)

そのため、innerHTMLとよく似たsetHTMLという新しいAPIが策定され、このAPIにsanitizerを渡す形に変更された話が書かれています。


ヘッドライン


Astro 1.0 Beta Release | Astro

astro.build/blog/astro-1-beta-release/

JavaScript Tools ReleaseNote

Astro 1.0 betaリリース。
2022年6月8日に正式リリースの予定。


Announcing Rome Formatter

rome.tools/blog/2022/04/05/rome-formatter-release

JavaScript Rust Tools ReleaseNote

Rustに書き直されたRomeのFormatterがリリースされた。
Prettierの挙動をベースにしていて、opt-inで構文エラーのコードに対する整形も対応している。


Release v8.0.0 · cucumber/cucumber-js

github.com/cucumber/cucumber-js/releases/tag/v8.0.0

JavaScript testing ReleaseNote

Cucumber.js 8.0.0リリース。


Announcing RedwoodJS 1.0 and $1M Funding

tom.preston-werner.com/2022/04/04/redwood-v1-and-funding.html

JavaScript library ReleaseNote React GraphQL prisma jest

React/GraphQL/Prisma/Jest/Storybookを組み合わせたアプリケーションフレームワークであるRedwoodJS 1.0リリース。


Announcing TypeScript 4.7 Beta - TypeScript

devblogs.microsoft.com/typescript/announcing-typescript-4-7-beta/

TypeScript ReleaseNote

TypeScript 4.7 betaリリース。
Node.jsのECMAScript Moduleサポートを再び有効化、moduleDetectionオプションの追加。
Compuatedプロパティに対するコントロールフロー解析の改善、オブジェクトにおける関数の型推論の改善。Genericsの型を指定したaliasを定義できる Instantiation Expressionsをサポート。
inferに対するextendsでの推論条件の追加をサポート、型が共変(in)/反変(out)/不変(in out)なのかを指定できるアノテーションを追加。
モジュール解決持の探索方法をカスタマイズするmoduleSuffixesオプションの追加、import typeとReference Commentでresolution-modeを指定できるように。


Release Notes for Safari Technology Preview 143 | WebKit

webkit.org/blog/12563/release-notes-for-safari-technology-preview-143/

safari ReleaseNote

Safari Technology Preview 143リリース。
CSS Container Queriesの改善、CSS Cascade Layersの改善。Web Animation APIの改善。
Permissions APIをデフォルトで有効化、inert属性をデフォルトで有効化。


Turborepo 1.2 | Turborepo

turborepo.org/blog/turbo-1-2-0

monorepo Tools ReleaseNote

Turborepot 1.2リリース。
対象をフィルターできる--filterフラグの追加、--dry-runフラグの追加。
パフォーマンスの改善、キャッシュの整合性をHMACで検証できるsignatureオプションの追加など


Release v8.0.0-rc.0 · reduxjs/react-redux

github.com/reduxjs/react-redux/releases/tag/v8.0.0-rc.0

React redux library ReleaseNote

React-Redux v8.0.0-rc.0リリース。
@types/react-readuxに存在したDefaultRootStateの型定義を削除など


goldbergyoni/javascript-testing-best-practices: 📗🌐 🚢 Comprehensive and exhaustive JavaScript & Node.js testing best practices (April 2022)

github.com/goldbergyoni/javascript-testing-best-practices

JavaScript testing news

JavaScriptのテストについてのドキュメント。 テストの構造、バックエンド、フロントエンド、CIなどについて書かれているjavascript-testing-best-practicesがアップデートされた


Release 2.0.0-beta.0 · vercel/swr

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

React library ReleaseNote

SWR 2.0.0-beta.0リリース。
リモートの副作用のあるリクエストを扱うuseSWRMutationの追加。
破壊的な変更としてFetcherには複数の引数として展開しないように変更など


アーティクル


04.01.2022 - TypeScript/How the compiler compiles

www.huy.rocks/everyday/04-01-2022-typescript-how-the-compiler-compiles

TypeScript article

TypeScript CompilerがどうやってTypeScritのコードをコンパイル、エラーを報告しているかについての解説記事


ECMAScript proposal “Change Array by copy”: four new non-destructive Array methods

2ality.com/2022/04/change-array-by-copy.html

ECMAScript proposal article

ECMAScript Proposal Stage 3のChange Array by copyについて。
Arrayのメソッドには破壊的なメソッドが混ざっていたが、それに対応する非破壊的なメソッドを追加するProposal


スライド、動画関係


Making of: The Sanitizer API (Nullcon 2022) - Google スライド

docs.google.com/presentation/d/1eLmIZkY7auD8xT-Q6AzBKM_ASFHH8Z5fMyfeoSbSH-k/view#slide=id.g82761e80df_0_1948

DOM API security slide

Sanitizer APIについてのスライド。
DOM XSSを防ぐSanitizer APIがサニタイズしたHTML文字列を返すAPIではない理由、setHTML APIについて


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


antfu/vue-starport: 🛰 Shared component across routes with animations

github.com/antfu/vue-starport

Vue library

ページをまたいでで同じコンポーネントを表示、遷移アニメーションを行うVueコンポーネント。
共有するコンポーネントをRootに引き上げることで、ページ間で同じコンポーネントのインスタンスを維持している。


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


AgnosticUI/agnosticui: AgnosticUI is a set of UI primitives that start their lives in clean HTML and CSS. These standards compliant components are then copied to our framework implementations in: React, Vue 3, Angular, and Svelte.

github.com/agnosticui/agnosticui

UI library

UIコンポーネントフレームワーク。
プレーンなJSからも利用でき、React/Angular/Svelte/Vueなどの各種UIフレームワーク向けのパッケージも公開されている。


書籍関係


プロを目指す人のためのTypeScript入門 安全なコードの書き方から高度な型の使い方まで:書籍案内|技術評論社

gihyo.jp/book/2022/978-4-297-12747-3

TypeScript book

2022年4月22日発売
TypeScriptの入門書


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