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.json
のexports
フィールドへの対応が含まれています。
また、TypeScriptがビルトインで持つlibの型定義をdependencies
としてバージョンをロックしたり、Package Aliases機能を使うことで別の型定義へと差し替えできるようになっています。
例えば、次のようにtsconfig.json
のlib
でdom
を指定しているとします。
{
"compilerOptions": {
"lib": [
"dom"
]
}
}
この設定時に、@typescript/lib-dom
というパッケージがpackage.json
のdependencies
にある場合、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をおすすめする
- ❤️ GitHub Sponsorsで@azuのスポンサーになる
- 🐦 X(Twitter)で@jser_infoをフォローする
JSer.info Sponsors
JSer.info SponsorsはGitHub 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 2.6.0リリース。
デフォルトのminifyをterserからesbuildに変更、script要素のasync
属性のサポート、
.astro
のサポート。
また、importしているファイルが別のファイルをimportするように連鎖しているケースで、連鎖的にimportされるファイルを事前にtransformする仕組みの追加など
- feat: default build.minify to esbuild by yyx990803 · Pull Request #5041 · vitejs/vite
- feat: async script module support, close #3163 by patak-js · Pull Request #4864 · vitejs/vite
- feat: support .astro files by drwpow · Pull Request #5038 · vitejs/vite
- feat: pre transform direct imports before requests hit the server by yyx990803 · Pull Request #5037 · vitejs/vite
Release Notes for Safari Technology Preview 133 | WebKit
webkit.org/blog/11975/release-notes-for-safari-technology-preview-133/
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 4.5 Betaリリース。
module: node12
でのESMサポート、.mjs
と.cjs
に対応する拡張子として.mts
と.cts
の追加、package.json
のexports
フィールドに対応。
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
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 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の使用統計データから、RAM、コア数、ネットワークの接続種類、WebGLのハードウェアサポートについてのデータを国ごとにまとめたレポート。
Android、Windows、ChromeOSにおいての統計データがまとめられている
Explore JavaScript Dependencies With Lighthouse Treemap
sia.codes/posts/lighthouse-treemap/
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のフレームワークを選ぶときに考えること、見るべきポイントについて。
どのフレームワークを選ぶべきかコンテキストによって異なる。
そのため、ユースケース、フレームワークの書き方、Promiseの対応、ドキュメント、コミュニティ、プロジェクトの健全性などの見方について書かれている。
ESLint rules for migrating projects from CommonJS to ESM
gist.github.com/Jaid/164668c0151ae09d2bc81be78a203dd5
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/
ウェブパフォーマンスの記事の難しさとベンチマークについて。
ブラウザのパフォーマンスについて書くときに、どのような点に気をつけて書くと良いのかについて
サイト、サービス、ドキュメント
Accessible Palette: Create color systems with consistent lightness and contrast
コントラスト比などのアクセシビリティに考慮した色を選ぶカラーパレットツール。
ソフトウェア、ツール、ライブラリ関係
dolanmiu/docx: Easily generate .docx files with JS/TS with a nice declarative API. Works for Node and on the Browser.
JavaScriptでdocxファイルを生成するライブラリ。
ビルダー関数で組み立ててコンテンツを作成できる。
Can I include a tag to a tag? Based on HTML Spec WHATWG
HTMLの要素同士の入れ子関係が許容されているかをチェックできるツール。