JSX

bun run App.jsx
bun run Component.tsx

const element = <div className="container">Hello</div>;

const element = React.createElement("div", { className: "container" }, "Hello");

import { jsx as _jsx } from "react/jsx-runtime";
const element = _jsx("div", { className: "container", children: "Hello" });

import React from "react";

function Button({ children }) {
  return <button className="btn">{children}</button>;
}

{
  "compilerOptions": {
    "jsx": "react"
  }
}

// No React import needed!
function Button({ children }) {
  return <button className="btn">{children}</button>;
}

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "react"
  }
}

{
  "compilerOptions": {
    "jsx": "react-jsxdev"
  }
}

{
  "compilerOptions": {
    "jsx": "preserve"
  }
}

{
  "compilerOptions": {
    // JSX transformation mode
    "jsx": "react-jsx",
    
    // Factory function (classic runtime)
    "jsxFactory": "h",
    
    // Fragment factory (classic runtime)
    "jsxFragmentFactory": "Fragment",
    
    // Import source (automatic runtime)
    "jsxImportSource": "preact"
  }
}

import { Transpiler } from "bun";

const transpiler = new Transpiler({
  loader: "tsx",
  jsxFactory: "h",
  jsxFragment: "Fragment",
  jsxImportSource: "preact",
});

const code = transpiler.transformSync(source);

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "preact"
  }
}

import { render } from "preact";

function App() {
  return <div>Hello Preact!</div>;
}

render(<App />, document.body);

{
  "compilerOptions": {
    "jsx": "react",
    "jsxFactory": "h",
    "jsxFragmentFactory": "Fragment"
  }
}

function h(type, props, ...children) {
  return { type, props: { ...props, children } };
}

function Fragment({ children }) {
  return children;
}

const vdom = <div>Custom JSX</div>;
console.log(vdom); // { type: "div", props: { children: "Custom JSX" } }

{
  "compilerOptions": {
    "jsx": "preserve",
    "jsxImportSource": "vue"
  }
}

{
  "compilerOptions": {
    "jsx": "preserve",
    "jsxImportSource": "solid-js"
  }
}

// Single child
<div>Hello</div>

// Multiple children
<div>
  <span>First</span>
  <span>Second</span>
</div>

// Expression children
<div>{user.name}</div>

// Array children
<ul>
  {items.map(item => <li key={item.id}>{item.name}</li>)}
</ul>

import { Fragment } from "react";

// Explicit Fragment
<Fragment>
  <div>First</div>
  <div>Second</div>
</Fragment>

// Short syntax
<>
  <div>First</div>
  <div>Second</div>
</>

const props = { className: "btn", disabled: true };

<button {...props}>Click</button>
// Becomes: <button className="btn" disabled={true}>Click</button>

// Ternary
{isLoggedIn ? <UserPanel /> : <LoginForm />}

// Logical AND
{isAdmin && <AdminPanel />}

// Nullish coalescing
{userName ?? "Guest"}

<button onClick={() => console.log("clicked")}>Click</button>

<input onChange={(e) => setValue(e.target.value)} />

import { useRef } from "react";

function Input() {
  const ref = useRef<HTMLInputElement>(null);
  
  return <input ref={ref} />;
}

<svg>
  <use xlinkHref="#icon" />
</svg>

// Custom namespaces
<div data-test-id="button" aria-label="Submit" />

interface ButtonProps {
  variant: "primary" | "secondary";
  onClick: () => void;
  children: React.ReactNode;
}

function Button({ variant, onClick, children }: ButtonProps) {
  return (
    <button className={`btn-${variant}`} onClick={onClick}>
      {children}
    </button>
  );
}

// Type-safe usage
<Button variant="primary" onClick={() => {}}>
  Click me
</Button>

interface ListProps<T> {
  items: T[];
  renderItem: (item: T) => JSX.Element;
}

function List<T>({ items, renderItem }: ListProps<T>) {
  return <ul>{items.map(renderItem)}</ul>;
}

<List
  items={[1, 2, 3]}
  renderItem={(n) => <li key={n}>{n}</li>}
/>

// Generic components
const div = <div /> as React.ReactElement<HTMLDivElement>;

// Type casting
const input = <input type="text" /> as HTMLInputElement;

// Input
function Component() {
  return <div>Hello</div>;
}

// Output (automatic runtime)
import { jsx as _jsx } from "react/jsx-runtime";

function Component() {
  return _jsx("div", { children: "Hello" });
}

// Multiple children optimized
<div>
  <span>A</span>
  <span>B</span>
</div>

// Uses jsxs() for static children array
import { jsxs as _jsxs } from "react/jsx-runtime";
_jsxs("div", { children: [_jsx("span", { children: "A" }), _jsx("span", { children: "B" })] });

// Automatically detected
export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

// jsx-runtime.ts
export function jsx(type: string, props: any) {
  return { type, props };
}

export function jsxs(type: string, props: any) {
  return { type, props };
}

export const Fragment = ({ children }: any) => children;

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "./jsx-runtime"
  }
}

function h(type: string, props: any, ...children: any[]) {
  const el = document.createElement(type);
  Object.assign(el, props);
  children.forEach(child => {
    if (typeof child === "string") {
      el.appendChild(document.createTextNode(child));
    } else {
      el.appendChild(child);
    }
  });
  return el;
}

// Usage
const app = <div className="app">Hello!</div>;
document.body.appendChild(app);

bun build app.jsx --target=bun --format=esm > output.js
cat output.js

function App() {
  return <div>Hello</div>;
}

BUN_DEBUG_QUIET_LOGS=0 bun run app.jsx 2>&1 | grep -i jsx

auto_import_jsx: bool = false,

function Button({ primary, disabled }) {
  return (
    <button
      className={[
        "btn",
        primary && "btn-primary",
        disabled && "btn-disabled",
      ].filter(Boolean).join(" ")}
    >
      Click
    </button>
  );
}

interface DataFetcherProps<T> {
  url: string;
  children: (data: T) => JSX.Element;
}

function DataFetcher<T>({ url, children }: DataFetcherProps<T>) {
  const [data, setData] = useState<T | null>(null);
  
  useEffect(() => {
    fetch(url).then(r => r.json()).then(setData);
  }, [url]);
  
  return data ? children(data) : <div>Loading...</div>;
}

// Usage
<DataFetcher url="/api/users">
  {(users) => <ul>{users.map(u => <li key={u.id}>{u.name}</li>)}</ul>}
</DataFetcher>

function Card({ title, children }) {
  return (
    <div className="card">
      <h2>{title}</h2>
      <div className="card-body">{children}</div>
    </div>
  );
}

function App() {
  return (
    <Card title="Welcome">
      <p>This is the card content</p>
    </Card>
  );
}

ReferenceError: React is not defined

{
  "compilerOptions": {
    "jsx": "react-jsx"
  }
}