JSer.info #594 - メンテナンスが停止していて、その後Nx社にメンテナンス権限が移譲された後、初めてのアップデートであるLerna 5.0.0がリリースされました。
Node.js 12以下のサポート終了、auditの問題が出ていたパッケージのアップデートなどが行われています。
また、次のバージョンでは、lerna runで内部的にNxを使うオプションが追加される予定です。
TypeScript 4.7がリリースされました。
TypeScript 4.7では、かなり多くの変更が含まれています。
大きく分けるとNode.js ESM対応と、型周りの改善や構文の追加が含まれています。
Node.jsのECMAScript Moduleをサポート、.mts/.ctsという拡張子のサポートの追加、moduleDetectionオプションの追加が行われています。
型改善においてでは、Compuatedプロパティに対するコントロールフロー解析の改善、オブジェクトにおける関数の型推論の改善、Genericsの型を指定したaliasを定義できる Instantiation Expressionsをサポート、inferに対するextendsでの推論条件の追加をサポートが追加されています。
また、すべたの型につけることは推奨されていませんが型が共変(in)/反変(out)/不変(in out)なのかを指定できるアノテーションを追加、モジュール解決時の探索方法をカスタマイズするmoduleSuffixesオプションの追加なども含まれています。
JSer.infoをサポートするには
- 😘 知り合いにJSer.infoをおすすめする
- ❤️ GitHub Sponsorsで@azuのスポンサーになる
- 🐦 X(Twitter)で@jser_infoをフォローする
JSer.info Sponsors
JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。
ヘッドライン
Release v5.0.0 · lerna/lerna
github.com/lerna/lerna/releases/tag/v5.0.0
lerna v5.0.0リリース。
Nx社にメンテナンスが移行してからの初のリリース。
Node.js 12以下のサポート終了、auditの問題が出ていたパッケージのアップデートなど。
Announcing TypeScript 4.7 - TypeScript
devblogs.microsoft.com/typescript/announcing-typescript-4-7/
TypeScript 4.7リリース。
Node.jsのECMAScript Moduleをサポート、.mts/.ctsのサポート。
moduleDetectionオプションの追加。 Compuatedプロパティに対するコントロールフロー解析の改善、オブジェクトにおける関数の型推論の改善。
Genericsの型を指定したaliasを定義できる Instantiation Expressionsをサポート、inferに対するextendsでの推論条件の追加をサポート。
型が共変(in)/反変(out)/不変(in out)なのかを指定できるアノテーションを追加、モジュール解決時の探索方法をカスタマイズするmoduleSuffixesオプションの追加。
import type/import()/Reference Commentでresolution-modeを指定できるようになるなど
Release v10.8.0 · TypeStrong/ts-node
github.com/TypeStrong/ts-node/releases/tag/v10.8.0
ts-node v10.8.0リリース。
TypeScript 4.7で追加されたECMAScript Modules in Node.jsのサポート。
import時の拡張子をマッピングするexperimentalResolverオプションの追加。
Node.jsの--experimental-specifier-resolutionフラグに対応するexperimentalSpecifierResolutionオプションの追加など
Release v8.11.0 · npm/cli
github.com/npm/cli/releases/tag/v8.11.0
npm v8.11.0リリース。
npm birthdayをDeprecatedに変更。
npm pkgコマンドがあるためnpm set-scriptをDeprecatedに変更。
--globalと--localフラグをそれぞれDeprecatedとなり、--location=global/localの利用を推奨するようになるなど。
Parcel v2.6.0
Parcel 2.6.0リリース。
ReactのError overlayに対応、HMRとSource Mapが一緒に動作するように修正。
CSSモジュールにローカルスコープ変数の概念を追加、未使用のCSS変数をツリーシェイクできるように。
またvar(--name from "./vars.modulecss")のようにファイルから変数をimportする独自の構文を追加など。
その他には、importがglobでのインポートできるようになるなど
Ember 4.4 Released
blog.emberjs.com/ember-released-4-4/
Ember 4.4リリース。
{{unique-id}}の有効化、ember generateで生成されるテストテンプレートのモジュールを変更可能に、hasListenersを公開APIに変更など
Chromium Blog: Chrome 103 Beta: Early Navigation Hints, a Host of Completed Origin Trials, and More
blog.chromium.org/2022/05/chrome-103-beta-early-navigation-hints.html
Chrome 103 Betaリリース。
Origin TrialとしてFederated Credentials Managementのサポート。
103 Early Hints HTTPのサポート、AbortSignal.timeout()のサポート、Elementに対してaria*プロパティの追加。
deflate-rawの圧縮型式をサポート、Form要素がrel属性のサポート。
また、Sandbox iframeでのcustom protocolのナビゲーションをブロックとallow-top-navigation-to-custom-protocolsの追加など。
Release v1.0.0-alpha.1 · axios/axios
github.com/axios/axios/releases/tag/v1.0.0-alpha.1
axios v1.0.0-alpha.1リリース。
Release v5.0.0 · mdn/browser-compat-data
github.com/mdn/browser-compat-data/releases/tag/v5.0.0
browser-compat-data 5.0.0リリース。
ESMの対応、TypeScriptの対応。
matchesの削除、__metaオブジェクトの追加、upstreamフィールドの追加、impl_urlの追加など
アーティクル
Migrating millions of lines of code to TypeScript
stripe.com/blog/migrating-to-typescript
AirtableのcodemodをベースにFlowTypeからTypeScriptへの切り替えをおこなった話。
マイグレーションスクリプト、Lintやテストの下準備などを行いコードロックした1日でコードベースをまとめて移行したという話。
Avoiding Puppeteer Antipatterns
serpapi.com/blog/puppeteer-antipatterns/
Puppeteerのアンチパターンについての記事。
The balance has shifted away from SPAs | Read the Tea Leaves
nolanlawson.com/2022/05/21/the-balance-has-shifted-away-from-spas/
クライアントサイドルーティングを扱うものとしてのSPAは、ページ移動の問題がブラウザ側で解決されてきているので、ナビゲーション問題を解決するためだけにSPAである必要性はなるなるのではという話。
ブラウザ側のPaint holdingやBF Cacheなどの実装によってMPAでも問題なく高速なナビゲーションが可能になってきている点や、後続する記事ではSPAの長所や改善についても書かれている。
また、近年まではSPAを扱うフレームワークが主流だったが、AstroやQwikなどのMPAを扱うフレームワークも増えてきているため選択肢は変わってくるのではという話
- More thoughts on SPAs | Read the Tea Leaves
- State is hard: why SPAs will persist | Read the Tea Leaves
サイト、サービス、ドキュメント
Component toolkit for creating live-running code editing experiences | Sandpack
CodeSandboxのライブコーディング向けのブラウザSandbox環境(エディタ/プレビュー)を作れるライブラリ。
React向けのコンポーネント、各種ライブラリ向けのテンプレート、書いたコードをCodesandbox上で開く機能を持っている。
google/wireit: Wireit upgrades your npm scripts to make them smarter and more efficient.
Turborepoのようにnpm run-scriptsの依存関係を定義し、実行結果をキャッシュできるツール。
差分があった時だけビルドするインクリメンタルビルド、ファイル変更を監視してのビルド、CIでのキャッシュの永続化の仕組みをもつ
ソフトウェア、ツール、ライブラリ関係
Shopify/remote-ui
UIの定義をWeb WorkerなどのUIスレッド以外で行い、メッセージパッシングして受け取ったオブジェクトからレンダリングすることでSandboxに利用できるツールキット。
DOMライクなAPIやReact/Vue向けのAPIが用意されていて、ユーザーにUIツリーの定義を書いてもらい、それをレンダリングするホスト環境を別途実装できる。
ShopifyやStripe Appsで利用されている。
