Frontend Weekly 2024-05-02

2024-05-02

Tech

Frontend weekly

/

React

/

Bun

/

Remix

React v18.3#

2024 年 4 月 25 日、React v19 Beta の公開に合わせて、React v18.3 も公開されました。

React 19 Beta – React

Upgrade Guide で React v18.3 について言及されています。これは React v19 で非推奨な API や削除など必要な変更についての警告が追加されたバージョンです。

React 19 Beta Upgrade Guide – React

削除された API は十分な移行期間を設けられているため、長く放置されている環境でなければスムーズに移行できると思います。触れる機会がありそうなものを以下にピックアップします。

element.ref が非推奨に。
- ref を props としてサポートしたため、element.props.ref を利用する。
以前テストに利用されていたreact-test-rendererが非推奨に。
- @testing-library/reactを推奨している。
useRef の引数が必須に。
- [RFC] Make all refs mutable #64772
- MutableRef は非推奨になっており、RefObject が推奨されている。
Context.Provider が Context で良くなった。

Bun v1.1.5#

2024 年 4 月 26 日に Bun v1.1.5 がリリースされました。

Bun v1.1.5

クロスコンパイルをサポートするようになりました。

1
# Linux x64
2
bun build --compile --target=bun-linux-x64 app.ts
3

4
# Windows x64
5
bun build --compile --target=bun-windows-x64 app.ts
6

7
# macOS Silicon
8
bun build --compile --target=bun-darwin-arm64 app.ts
9

10
# Linux arm64
11
bun build --compile --target=bun-linux-arm64 app.ts

package.json の末尾カンマとコメントが許容されるようになりました。

1
{
2
  "name": "app",
3
  "dependencies": {
4
    // We need 0.30.8 because of a bug in 0.30.9
5
    "drizzle-orm": "0.30.8"
6
  }
7
}

Import Attributes を利用して、任意のファイルを特定の形式としてインポートできるようになりました。

1
import html from "./index.html" with type { type: "text" };
2
import json from "./config.foo" with { type: "json" };
3
import cfg from "./Configfile" with { type: "toml" };
4

5
console.log(html); // <!doctype html><html lang="ja"><head>....
6
console.log(cfg); // { "name": "app" }
7
console.log(json); // { "name": "app" } (converted to JSON object)

Remix Single Fetch#

Remix v3 からデフォルトの挙動になる Single Fetch について解説する記事。

Remix v2.9 で導入された Single Fetch

Single Fetch は、クライアントサイドでのページ遷移が行われた際に、サーバーへの複数の HTTP リクエストを並行して行う代わりに、1 つの HTTP リクエストを実行しまとめてレスポンスを返す機能。

Remix v2.9 からフィーチャーフラグで提供されている。

Single Fetch には、新しいストリーミング形式、action 関数の再検証、headers 関数の廃止などいくつか破壊的な変更があるため注意が必要。

satisfies 演算子で型が絞られるケース#

特定のケースでは satisfies 演算子で型が絞り込まれてしまう？？？

あるリテラルがそのリテラルの対応する型を含むユニオンによって型を文脈的に指定される場合、親プリミティブに拡張されるのではなく実際のリテラル型が保持されるため、型の制約によってリテラル型として推論されるケースがある。

1
type Numbers = (1 | 2 | 3 | 4)[];
2

3
const numbers1 = [1, 2, 3];
4
// number[]
5
const numbers2 = [1, 2, 3] as const;
6
// [1, 2, 3]
7
const numbers3 = [1, 2, 3] satisfies Numbers;
8
// (1 | 2 | 3)[];
9

10
declare const test: <T extends "a" | "b">(arg: T) => T;
11
test("a");
12
// "a"

Server Component と Client Component で依存モジュールを切り替える#

Node.js の Subpath imports を利用して、React Server 環境で利用されるソースを指定できる。

Server Component と Client Component で依存モジュールを切り替える

Subpath imports には、require や import の代わりに Community Conditions といって任意の値を利用できる。TypeScript の types など。

Modules: Packages | Node.js v22.1.0 Documentation

server-onlyパッケージの例

1
{
2
  "name": "server-only",
3
  "files": ["index.js", "empty.js"],
4
  "main": "index.js",
5
  "exports": {
6
    ".": {
7
      "react-server": "./empty.js",
8
      "default": "./index.js"
9
    }
10
  }
11
}

React Server 環境以外では、次の index.js が読み込まれエラーが出力される仕組み。

1
throw new Error(
2
  "This module cannot be imported from a Client Component module. " +
3
    "It should only be used from a Server Component."
4
);