Fork me on GitHub

2021-10-04のJS: Vite 2.6.0、Safari Technology Preview 133、TypeScript 4.5 Beta

Edit on GitHub 編集履歴を見る

JSer.info #560 - Vite 2.6.0がリリースされています。

デフォルトのminifyをterserからesbuildに変更script要素のasync属性のサポート
静的サイトジェネレーターであるAstroのコンポーネントファイル(.astro)のサポート。
また、importしているファイルが別のファイルをimportするように連鎖しているケースで、連鎖的にimportされるファイルを事前にtransformすることでコンパイルの待ち時間を減らす最適化などが含まれています。

その他には、Vite用のReactプラグインが@vitejs/plugin-reactへと統合されています。
もともとesbuildを使った@vitejs/plugin-react-refreshとBabelを使ったvite-react-jsxがありましたが、@vitejs/plugin-reactが推奨へと変更されています。


Safari Technology Preview 133がリリースされています。

CSSのcalc()内でsin(), cos(), tan(), e, piのサポートが追加されています。
CSSの詳細度解決の前段にレイヤーを追加するCSS Cascade Layersを実験的にサポート、ES Proposal Stage3のTemporalをフラグ付きで実装しています。
その他にもBroadcastChannelの有効化、COOPとCOEPヘッダーをサポートしself.crossOriginIsolated時にSharedArrayBufferを利用できるようになるなどの変更も含まれています。


TypeScript 4.5 Betaがリリースされています。

TypeScript 4.5 BetaではNode.jsのESMサポートに関する更新が行われています。
module: node12でのESMサポート、.mjs.cjsに対応する拡張子として.mts.ctsの追加、package.jsonexportsフィールドへの対応が含まれています。

また、TypeScriptがビルトインで持つlibの型定義をdependenciesとしてバージョンをロックしたり、Package Aliases機能を使うことで別の型定義へと差し替えできるようになっています。

例えば、次のようにtsconfig.jsonlibdomを指定しているとします。

{
  "compilerOptions": {
    "lib": [
      "dom"
    ]
  }
}

この設定時に、@typescript/lib-domというパッケージがpackage.jsondependenciesにある場合、TypeScriptはそのパッケージの型定義を利用して型チェックを行います。
今までのlibはTypeScriptに同梱されていた型定義であったため、TypeScriptのバージョンを上げると型定義に破壊的な変更が発生していました。
この@typescript/lib-*での差し替えの仕組みを使うことで、libの型定義だけを特定のバージョンに固定できるようになっています。

また、次のようにnpm/yarn/pnpmでサポートされているpackage aliasの機能を使うことで、@typescript/lib-domを別の型定義へと差し替えできます。

{
 "dependencies": {
    "@typescript/lib-dom": "npm:@types/web"
  }
}

その他にもAwaited型の追加、Top-Level awaitに対応したmodule: es2022のサポート、Condition Typesにおいて一部末尾最適化、import名に対するtype modifierのサポートが追加されています。
また、ECMAScript ProposalのPrivate Field Presence Checks、Import Assertionsのサポートが追加されています。


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

JSer.info Sponsors

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


ヘッドライン


vite/CHANGELOG.md at main · vitejs/vite

github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md#260-2021-09-29

vite ReleaseNote

Vite 2.6.0リリース。
デフォルトのminifyをterserからesbuildに変更、script要素のasync属性のサポート、
.astroのサポート。
また、importしているファイルが別のファイルをimportするように連鎖しているケースで、連鎖的にimportされるファイルを事前にtransformする仕組みの追加など


Release Notes for Safari Technology Preview 133 | WebKit

webkit.org/blog/11975/release-notes-for-safari-technology-preview-133/

safari ReleaseNote

Safari Technology Preview 133リリース。
CSSのcalc()内でsin(), cos(), tan(), e, piのサポート。
CSS Cascade Layersを実験的にサポート、ES Proposal Stage3のTemporalをフラグ付きで実装。
BroadcastChannelの有効化、COOPとCOEPヘッダーをサポートしself.crossOriginIsolated時にSharedArrayBufferを利用できるようになるなど


Announcing TypeScript 4.5 Beta - TypeScript

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

TypeScript ReleaseNote

TypeScript 4.5 Betaリリース。
module: node12でのESMサポート、.mjs.cjsに対応する拡張子として.mts.ctsの追加、package.jsonexportsフィールドに対応。
TypeScriptがビルトインで持つlibの型定義をdependenciesとしてロックできるように。
Awaited型の追加、Top-Level awaitに対応したmodule: es2022のサポート、Condition Typesにおいて一部末尾最適化するように。
import名に対するtype modifierのサポート、ES ProposalのPrivate Field Presence Checks、Import Assertionsのサポートなど


passport/CHANGELOG.md at master · jaredhanson/passport

github.com/jaredhanson/passport/blob/master/CHANGELOG.md#050---2021-09-23

node.js express library ReleaseNote

Passport 0.5リリース。
破壊的な変更としてIncomingMessageをprototype拡張してlogin()などを追加するmonkey patchが削除された。
代わりにapp.use(passport.initialize())のようにmiddlewareとして拡張するように変更など


Announcing React Native 0.66 · React Native

reactnative.dev/blog/2021/10/01/version-066

React Native ReleaseNote

React Native 0.66リリース。
Androidの新しいBluetooth権限に対応、M1 macのサポート改善、Hermes 0.9.0へのアップデート。
Nightlyビルドが@nightlyのdist-tagで公開されるようになりyarn upgrade react-native@nightlyでインストールができるようになるなど


アーティクル


Chrome user device characteristics report - Chrome Developers

developer.chrome.com/en/blog/device-characteristics/

Chrome article document

Chromeの使用統計データから、RAM、コア数、ネットワークの接続種類、WebGLのハードウェアサポートについてのデータを国ごとにまとめたレポート。
Android、Windows、ChromeOSにおいての統計データがまとめられている


Explore JavaScript Dependencies With Lighthouse Treemap

sia.codes/posts/lighthouse-treemap/

Chrome debug article performance

Lighthouse v7.5.0で追加されたLighthouse Treemapについて。
Source Mapを使ってページのファイルサイズを一覧できる


Guidelines for choosing a Node.js framework - Simon Plenderleith

simonplend.com/guidelines-for-choosing-a-node-js-framework/

node.js JavaScript library article opinion

Node.jsのフレームワークを選ぶときに考えること、見るべきポイントについて。
どのフレームワークを選ぶべきかコンテキストによって異なる。
そのため、ユースケース、フレームワークの書き方、Promiseの対応、ドキュメント、コミュニティ、プロジェクトの健全性などの見方について書かれている。


ESLint rules for migrating projects from CommonJS to ESM

gist.github.com/Jaid/164668c0151ae09d2bc81be78a203dd5

ESLint ECMAScript module CommonJS article

CommonJSではなくECMAScript Modulesを使うときに関係するESLintルールと設定まとめ。


How to write about web performance | Read the Tea Leaves

nolanlawson.com/2021/09/12/how-to-write-about-web-performance/

performance article opinion

ウェブパフォーマンスの記事の難しさとベンチマークについて。
ブラウザのパフォーマンスについて書くときに、どのような点に気をつけて書くと良いのかについて


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


Accessible Palette: Create color systems with consistent lightness and contrast

accessiblepalette.com/

accessibility color Tools

コントラスト比などのアクセシビリティに考慮した色を選ぶカラーパレットツール。


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


dolanmiu/docx: Easily generate .docx files with JS/TS with a nice declarative API. Works for Node and on the Browser.

github.com/dolanmiu/docx

JavaScript library

JavaScriptでdocxファイルを生成するライブラリ。
ビルダー関数で組み立ててコンテンツを作成できる。


Can I include a tag to a tag? Based on HTML Spec WHATWG

caninclude.glitch.me/

HTML Tools spec

HTMLの要素同士の入れ子関係が許容されているかをチェックできるツール。

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