Bun の非互換な拡張 API

https://gyazo.com/a71f94cf1c15e71313d8a2c16c59d1ab

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

これら API を使ってしまうと Node.js や Deno、Cloudflare Workers などで扱えず相互運用性の問題となる。知らず知らずのうちに使ってしまわないようにまとめておく。

ECMAScript (JavaScript)

ES Modules のキャッシュ操作

code: js

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

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

ECMAScript でモジュールの種類が Abstruct Module Records、Cyclic Module Records そして Source Text Module Records に分類されている（列挙順の後ろにあるほどサブクラスとなる）。

Cyclic Module Records 以降のモジュールタイプはキャッシュされることが明記されており、またそのキャッシュを操作することは出来ない。つまり Source Text Module Records である JavaScript モジュール（ES Modules）はキャッシュを操作出来ない。TC39 member である ljharb さんにも ECMAScript にキャッシュを消すような仕様はないと教えてもらった。

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

Web 標準 API

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

code: js

for await (const line of console) {

console.log(line);

}

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

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

code: js

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

yield "hello";

yield "world";

}());

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

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

code: js

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

yield "hello";

yield "world";

}()));

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

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 に書いてある。

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 にしてサポートした方がいいのにと個人的には思う。

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" };