JSX - BunDocumentation Index
{
"jsx": "react"
}
tsx
import { createElement } from "react";
createElement("Box", { width: 5 }, "Hello");
json
{
"jsx": "react-jsx"
}
tsx
import { jsx } from "react/jsx-runtime";
jsx("Box", { width: 5 }, "Hello");
json
{
"jsx": "react-jsxdev"
}
tsx
import { jsxDEV } from "react/jsx-dev-runtime";
jsxDEV(
"Box",
{ width: 5, children: "Hello" },
undefined,
false,
undefined,
this,
);
The jsxDEV variable name is a convention used by React. The DEV suffix is a visible way to indicate that the code is intended for use in development. The development version of React is slower and includes additional validity checks & debugging tools.json
{
"jsx": "preserve"
}
tsx
// JSX is not transpiled
// "preserve" is not supported by Bun currently
Hello
jsxFactory
{
"jsx": "react",
"jsxFactory": "h"
}
tsx
import { h } from "react";
h("Box", { width: 5 }, "Hello");
jsxFragmentFactory
{
"jsx": "react",
"jsxFactory": "myjsx",
"jsxFragmentFactory": "MyFragment"
}
tsx
// input
<>Hello;
// output
import { myjsx, MyFragment } from "react";
myjsx(MyFragment, null, "Hello");
jsxImportSource
{
"jsx": "react",
// jsxImportSource is not defined
// default to "react"
}
tsx
import { jsx } from "react/jsx-runtime";
jsx("Box", { width: 5, children: "Hello" });
jsonc
{
"jsx": "react-jsx",
"jsxImportSource": "preact",
}
tsx
import { jsx } from "preact/jsx-runtime";
jsx("Box", { width: 5, children: "Hello" });
jsonc
{
"jsx": "react-jsxdev",
"jsxImportSource": "preact",
}
tsx
// /jsx-runtime is automatically appended
import { jsxDEV } from "preact/jsx-dev-runtime";
jsxDEV(
"Box",
{ width: 5, children: "Hello" },
undefined,
false,
undefined,
this,
);
JSX pragma All of these values can be set on a per-file basis using pragmas. A pragma is a special comment that sets a compiler option in a particular file. PragmaEquivalent configts
// @jsx h
jsonc
{
"jsxFactory": "h",
}
ts
// @jsxFrag MyFragment
jsonc
{
"jsxFragmentFactory": "MyFragment",
}
ts
// @jsxImportSource preact
jsonc
{
"jsxImportSource": "preact",
}
Logging Bun implements special logging for JSX to make debugging easier. Given the following file: index.tsx
Fetch the complete documentation index at: /docs/llms.txt
Use this file to discover all available pages before exploring further.
Skip to main contentBun home pageBuilt-in JSX and TSX support in Bun with configurable transpilation options
function Component(props: {message: string}) {
return (
body>
h1 style={{color: 'red'}}>{props.message}h1>
body>
);
}
console.log(Component message="Hello world!" />);
Configuration
Bun reads your tsconfig.json or jsconfig.json configuration files to determines how to perform the JSX transform internally. To avoid using either of these, the following options can also be defined in bunfig.toml.
The following compiler options are respected.
jsx
How JSX constructs are transformed into vanilla JavaScript internally. The table below lists the possible values of jsx, along with their transpilation of the following simple JSX component:
Box width={5}>HelloBox>
Compiler optionsTranspiled outputjson{
"jsx": "react"
}
tsx
import { createElement } from "react";
createElement("Box", { width: 5 }, "Hello");
json
{
"jsx": "react-jsx"
}
tsx
import { jsx } from "react/jsx-runtime";
jsx("Box", { width: 5 }, "Hello");
json
{
"jsx": "react-jsxdev"
}
tsx
import { jsxDEV } from "react/jsx-dev-runtime";
jsxDEV(
"Box",
{ width: 5, children: "Hello" },
undefined,
false,
undefined,
this,
);
The jsxDEV variable name is a convention used by React. The DEV suffix is a visible way to indicate that the code is intended for use in development. The development version of React is slower and includes additional validity checks & debugging tools.json
{
"jsx": "preserve"
}
tsx
// JSX is not transpiled
// "preserve" is not supported by Bun currently
Hello
jsxFactory
{
"jsx": "react",
"jsxFactory": "h"
}
tsx
import { h } from "react";
h("Box", { width: 5 }, "Hello");
jsxFragmentFactory
{
"jsx": "react",
"jsxFactory": "myjsx",
"jsxFragmentFactory": "MyFragment"
}
tsx
// input
<>Hello;
// output
import { myjsx, MyFragment } from "react";
myjsx(MyFragment, null, "Hello");
jsxImportSource
{
"jsx": "react",
// jsxImportSource is not defined
// default to "react"
}
tsx
import { jsx } from "react/jsx-runtime";
jsx("Box", { width: 5, children: "Hello" });
jsonc
{
"jsx": "react-jsx",
"jsxImportSource": "preact",
}
tsx
import { jsx } from "preact/jsx-runtime";
jsx("Box", { width: 5, children: "Hello" });
jsonc
{
"jsx": "react-jsxdev",
"jsxImportSource": "preact",
}
tsx
// /jsx-runtime is automatically appended
import { jsxDEV } from "preact/jsx-dev-runtime";
jsxDEV(
"Box",
{ width: 5, children: "Hello" },
undefined,
false,
undefined,
this,
);
JSX pragma All of these values can be set on a per-file basis using pragmas. A pragma is a special comment that sets a compiler option in a particular file. PragmaEquivalent configts
// @jsx h
jsonc
{
"jsxFactory": "h",
}
ts
// @jsxFrag MyFragment
jsonc
{
"jsxFragmentFactory": "MyFragment",
}
ts
// @jsxImportSource preact
jsonc
{
"jsxImportSource": "preact",
}
Logging Bun implements special logging for JSX to make debugging easier. Given the following file: index.tsx
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 will pretty-print the component tree when logged:
Prop punning
The Bun runtime also supports “prop punning” for JSX. This is a shorthand syntax useful for assigning a variable to a prop with the same name.
react.tsxfunction Div(props: {className: string;}) {
const {className} = props;
// without punning
return div className={className} />;
// with punning
return div {className} />;
}
Was this page helpful?
JSX - Bun,AI智能索引,全网链接索引,智能导航,网页索引
- Built-in JSX and TSX support in Bun with configurable transpilation options