Fork me on GitHub

2022-06-01のJS: Lerna 5.0.0、TypeScript 4.7、wireit

Edit on GitHub 編集履歴を見る

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オプションの追加なども含まれています。


ヘッドライン


Release v5.0.0 · lerna/lerna

github.com/lerna/lerna/releases/tag/v5.0.0

JavaScript monorepo ReleaseNote

lerna v5.0.0リリース。
Nx社にメンテナンスが移行してからの初のリリース。
Node.js 12以下のサポート終了、auditの問題が出ていたパッケージのアップデートなど。


Announcing TypeScript 4.7 - TypeScript

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

TypeScript ReleaseNote

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

TypeScript node.js library ReleaseNote

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 ReleaseNote

npm v8.11.0リリース。
npm birthdayをDeprecatedに変更。
npm pkgコマンドがあるためnpm set-scriptをDeprecatedに変更。
--global--localフラグをそれぞれDeprecatedとなり、--location=global/localの利用を推奨するようになるなど。


Parcel v2.6.0

parceljs.org/blog/v2-6-0/

JavaScript bundler ReleaseNote

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 ReleaseNote

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 ReleaseNote

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

HTTP library

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

JavaScript JSON library mdn ReleaseNote

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

flowtype TypeScript article

AirtableのcodemodをベースにFlowTypeからTypeScriptへの切り替えをおこなった話。
マイグレーションスクリプト、Lintやテストの下準備などを行いコードロックした1日でコードベースをまとめて移行したという話。


Avoiding Puppeteer Antipatterns

serpapi.com/blog/puppeteer-antipatterns/

JavaScript puppeteer article

Puppeteerのアンチパターンについての記事。


The balance has shifted away from SPAs | Read the Tea Leaves

nolanlawson.com/2022/05/21/the-balance-has-shifted-away-from-spas/

JavaScript HTML opinion article

クライアントサイドルーティングを扱うものとしてのSPAは、ページ移動の問題がブラウザ側で解決されてきているので、ナビゲーション問題を解決するためだけにSPAである必要性はなるなるのではという話。
ブラウザ側のPaint holdingやBF Cacheなどの実装によってMPAでも問題なく高速なナビゲーションが可能になってきている点や、後続する記事ではSPAの長所や改善についても書かれている。
また、近年まではSPAを扱うフレームワークが主流だったが、AstroやQwikなどのMPAを扱うフレームワークも増えてきているため選択肢は変わってくるのではという話


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


Component toolkit for creating live-running code editing experiences | Sandpack

sandpack.codesandbox.io/

JavaScript bundler library React

CodeSandboxのライブコーディング向けのブラウザSandbox環境(エディタ/プレビュー)を作れるライブラリ。
React向けのコンポーネント、各種ライブラリ向けのテンプレート、書いたコードをCodesandbox上で開く機能を持っている。


google/wireit: Wireit upgrades your npm scripts to make them smarter and more efficient.

github.com/google/wireit

npm Tools

Turborepoのようにnpm run-scriptsの依存関係を定義し、実行結果をキャッシュできるツール。
差分があった時だけビルドするインクリメンタルビルド、ファイル変更を監視してのビルド、CIでのキャッシュの永続化の仕組みをもつ


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


Shopify/remote-ui

github.com/Shopify/remote-ui

JavaScript React Vue webworker security library

UIの定義をWeb WorkerなどのUIスレッド以外で行い、メッセージパッシングして受け取ったオブジェクトからレンダリングすることでSandboxに利用できるツールキット。
DOMライクなAPIやReact/Vue向けのAPIが用意されていて、ユーザーにUIツリーの定義を書いてもらい、それをレンダリングするホスト環境を別途実装できる。
ShopifyやStripe Appsで利用されている。


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