Bun の非互換な拡張 API

https://gyazo.com/a71f94cf1c15e71313d8a2c16c59d1ab

https://pbs.twimg.com/media/GGjn7Q3a4AAXGKf.jpg

これら API を使ってしまうと書いたコードが Node.js や Deno、Cloudflare Workers などで扱えず相互運用性の問題となる。また Bun の独自拡張を標準と勘違いしてしまい他ランタイムに対して誤ったバグ報告する例がいくつか見られ、JS コミュニティによくない影響が出てきている。

知らず知らずのうちに使ってしまわないようにまとめておく。

ECMAScript (JavaScript)

ES Modules のキャッシュ操作

code: js

import { foo } from "./foo.mjs";

const path = Bun.fileURLToPath(import.meta.resolve("./foo.mjs"));

仕様でモジュールの種類は Abstruct Module Records、Cyclic Module Records そして Source Text Module Records に分類されている（この列挙順の後ろにあるほどサブクラスとなる）。Cyclic Module Records 以降のモジュールタイプはキャッシュされることが明記されており、またそのキャッシュを操作することは出来ない。すなわち Source Text Module Records である JavaScript モジュール（ES Modules）キャッシュ操作が出来ない。TC39 メンバーである ljharb さんからも ECMAScript にそのような仕様はないと教えてもらった。

つまり Bun は JavaScript 仕様違反をしていると言っても過言ではなさそう。

Web 標準 API

AsyncIterable な console で標準入力から一行ずつ読む

code: js

for await (const line of console) {

console.log(line);

}

もちろんこの機能は Console Standard にはない。

Headers の getAll と toJSON メソッド

code: js

const headers = new Headers();

headers.append("Set-Cookie", "a=1");

headers.append("Set-Cookie", "b=1; Secure");

console.log(headers.toJSON()); // { "set-cookie": "a=1, b=1; Secure" }

各ランタイムについての流れは Zenn に書いてある。

Response のコンストラクタに AsyncIterable を渡す

code: js

const response = new Response(async function* () {

yield "hello";

yield "world";

}());

await response.text(); // "helloworld"

これは Fetch Standard に沿っていない。ただし Node.js (undici) でも同じように実行できてしまう問題がある。

code: js

const response = new Response(ReadableStream.from(async function* () {

yield "hello";

yield "world";

}()));

await response.text(); // "helloworld"

Fetch API の body オプションに Async Generator Function を渡す

code: js

import Anthropic from "@anthropic-ai/sdk";

const client = new Anthropic();

fetch(url, {

method: "POST",

/* 'body' can be an async generator function */

body: async function* fn() {

const stream = client.messages.create(options);

for await (const {chunk: result} of stream) {

const { type, message } = chunk;

if (type === "succeeded") {

// stream message text chunk-by-chunk

yield message.content;

}

}

},

/* body can also be:

- body: new ReadableStream({...

- body: Bun.file(path)

- body: fs.createReadStream(path)

*/

);

Fetch API の proxy オプション

code: js

// The URL of the proxy server

});

Worker の "open" イベント

code: js

const worker = new Worker(new URL("worker.ts", import.meta.url).href);

worker.addEventListener("open", () => {

console.log("worker is ready");

});

Worker が起動されるまでに送られたメッセージはキューに入れられるため、特に待つ必要はない。

Worker の preload オプション

code: js

const worker = new Worker(new URL("worker.js", import.meta.url).href, {

preload: new URL("preload.js", import.meta.url).href

});

Worker を作る前にあらかじめ実行するコードを指定できるらしい。

Text Modules

Bun は結論を待たず、すでに独自実装している。

code: js

import html from "./index.html" with { type: "text" };

console.log(html);

Node.js

package.json で JSONC 形式の対応

突然 package.json で JSONC 形式の対応を表明したため賛否両論が巻き起こった。

Bun won't error when package.json has comments or trailing commas

https://pbs.twimg.com/media/GLPRdS2asAAaMQh.png

PR にネガティブな意見が集まったが、最終的に Jarred 氏が Twitter 上のアンケート結果を根拠として Bun に取り込んだ。

JSONC 形式の場合当然 npm にパブリッシュ出来ない。互換性がないのだから拡張子を jsonc にしてサポートした方がいいのにと個人的には思う。ちなみに pnpm で JSON5 と YAML をサポートしているがもちろん拡張子を分けている。

JSX

ショートハンド記法

code: jsx

function Div(props: {className: string;}) {

const {className} = props;

// without punning

return <div className={className} />;

// with punning

return <div {className} />;

}

JSX の仕様は Meta (Facebook) により管理されている。

特に仕様に対して提案するといったアプローチをとることなく拡張し、他ランタイムへ足並みを揃えるよう呼びかけず、急に TypeScript のパーサーへの対応を要求したため議論を呼んだ。リジェクトされた。

その他

TOML Modules

code: js

import data from "./data.toml";

import cfg from "./Configfile" with { type: "toml" };