Bun поддерживает файлы .jsx и .tsx из коробки. Внутренний транспайлер Bun преобразует синтаксис JSX в обычный JavaScript перед выполнением.
function Component(props: {message: string}) {
return (
<body>
<h1 style={{color: 'red'}}>{props.message}</h1>
</body>
);
}
console.log(<Component message="Hello world!" />);Конфигурация
Bun читает ваши файлы конфигурации tsconfig.json или jsconfig.json, чтобы определить, как выполнять преобразование JSX внутри. Чтобы не использовать ни один из них, следующие опции могут быть также определены в bunfig.toml.
Уважаются следующие опции компилятора.
jsx
Как JSX-конструкции преобразуются в обычный JavaScript внутри. Таблица ниже перечисляет возможные значения jsx, а также их трансляцию следующего простого JSX-компонента:
<Box width={5}>Hello</Box>| Опции компилятора | Транслированный вывод |
|---|---|
json<br/>{<br/> "jsx": "react"<br/>}<br/> | tsx<br/>import { createElement } from "react";<br/>createElement("Box", { width: 5 }, "Hello");<br/> |
json<br/>{<br/> "jsx": "react-jsx"<br/>}<br/> | tsx<br/>import { jsx } from "react/jsx-runtime";<br/>jsx("Box", { width: 5 }, "Hello");<br/> |
json<br/>{<br/> "jsx": "react-jsxdev"<br/>}<br/> | tsx<br/>import { jsxDEV } from "react/jsx-dev-runtime";<br/>jsxDEV(<br/> "Box",<br/> { width: 5, children: "Hello" },<br/> undefined,<br/> false,<br/> undefined,<br/> this,<br/>);<br/>Имя переменной jsxDEV — это соглашение, используемое React. Суффикс DEV — это видимый способ указать, что код предназначен для использования в разработке. Дев-версия React медленнее и включает дополнительные проверки валидности и инструменты отладки. |
json<br/>{<br/> "jsx": "preserve"<br/>}<br/> | tsx<br/>// JSX не транслируется<br/>// "preserve" в настоящее время не поддерживается Bun<br/><Box width={5}>Hello</Box><br/> |
jsxFactory
NOTE
**Примечание** — Применимо только когда `jsx` равен `react`.Имя функции, используемое для представления JSX-конструкций. Значение по умолчанию — "createElement". Это полезно для библиотек вроде Preact, которые используют другое имя функции ("h").
| Опции компилятора | Транслированный вывод |
|---|---|
json<br/>{<br/> "jsx": "react",<br/> "jsxFactory": "h"<br/>}<br/> | tsx<br/>import { h } from "react";<br/>h("Box", { width: 5 }, "Hello");<br/> |
jsxFragmentFactory
NOTE
**Примечание** — Применимо только когда `jsx` равен `react`.Имя функции, используемое для представления JSX-фрагментов, таких как <>Hello</>; применимо только когда jsx равен react. Значение по умолчанию — "Fragment".
| Опции компилятора | Транслированный вывод |
|---|---|
json<br/>{<br/> "jsx": "react",<br/> "jsxFactory": "myjsx",<br/> "jsxFragmentFactory": "MyFragment"<br/>}<br/> | tsx<br/>// ввод<br/><>Hello</>;<br/><br/>// вывод<br/>import { myjsx, MyFragment } from "react";<br/>myjsx(MyFragment, null, "Hello");<br/> |
jsxImportSource
NOTE
**Примечание** — Применимо только когда `jsx` равен `react-jsx` или `react-jsxdev`.Модуль, из которого будет импортирована функция фабрики компонентов (createElement, jsx, jsxDEV и т.д.). Значение по умолчанию — "react". Это обычно потребуется при использовании библиотеки компонентов вроде Preact.
| Опции компилятора | Транслированный вывод |
|---|---|
jsonc<br/>{<br/> "jsx": "react",<br/> // jsxImportSource не определён<br/> // по умолчанию "react"<br/>}<br/> | tsx<br/>import { jsx } from "react/jsx-runtime";<br/>jsx("Box", { width: 5, children: "Hello" });<br/> |
jsonc<br/>{<br/> "jsx": "react-jsx",<br/> "jsxImportSource": "preact",<br/>}<br/> | tsx<br/>import { jsx } from "preact/jsx-runtime";<br/>jsx("Box", { width: 5, children: "Hello" });<br/> |
jsonc<br/>{<br/> "jsx": "react-jsxdev",<br/> "jsxImportSource": "preact",<br/>}<br/> | tsx<br/>// /jsx-runtime автоматически добавляется<br/>import { jsxDEV } from "preact/jsx-dev-runtime";<br/>jsxDEV(<br/> "Box",<br/> { width: 5, children: "Hello" },<br/> undefined,<br/> false,<br/> undefined,<br/> this,<br/>);<br/> |
JSX-прагма
Все эти значения могут быть установлены для каждого файла с помощью прагм. Прагма — это специальный комментарий, который устанавливает опцию компилятора в определённом файле.
| Прагма | Эквивалентная конфигурация |
|---|---|
ts<br/>// @jsx h<br/> | jsonc<br/>{<br/> "jsxFactory": "h",<br/>}<br/> |
ts<br/>// @jsxFrag MyFragment<br/> | jsonc<br/>{<br/> "jsxFragmentFactory": "MyFragment",<br/>}<br/> |
ts<br/>// @jsxImportSource preact<br/> | jsonc<br/>{<br/> "jsxImportSource": "preact",<br/>}<br/> |
Логирование
Bun реализует специальное логирование для JSX, чтобы упростить отладку. Дан следующий файл:
import { Stack, UserCard } from "./components";
console.log(
<Stack>
<UserCard name="Dom" bio="Street racer and Corona lover" />
<UserCard name="Jakob" bio="Super spy and Dom's secret brother" />
</Stack>,
);Bun красиво выведет дерево компонентов при логировании:
Prop punning
Среда выполнения Bun также поддерживает "prop punning" для JSX. Это сокращённый синтаксис, полезный для присваивания переменной prop с тем же именем.
function Div(props: {className: string;}) {
const {className} = props;
// без punning
return <div className={className} />;
// с punning
return <div {className} />;
}