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の要素同士の入れ子関係が許容されているかをチェックできるツール。
