يدعم 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 is not transpiled<br/>// "preserve" is not supported by Bun currently<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 fragments مثل <>Hello</>؛ ينطبق فقط عندما يكون jsx هو react. القيمة الافتراضية هي "Fragment".
| خيارات المترجم | المخرج المحول |
|---|---|
json<br/>{<br/> "jsx": "react",<br/> "jsxFactory": "myjsx",<br/> "jsxFragmentFactory": "MyFragment"<br/>}<br/> | tsx<br/>// input<br/><>Hello</>;<br/><br/>// output<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 is not defined<br/> // default to "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 is automatically appended<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 pragma
يمكن تعيين كل هذه القيم على أساس كل ملف باستخدام pragmas. الـ pragma هو تعليق خاص يحدد خيار مترجم في ملف معين.
| Pragma | التكوين المكافئ |
|---|---|
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} />;
}