Adds support for bundling scripts from .jsx/.tsx files to configured outDir
bun add bun-plugin-jsx-script-bundler -dThis plugin can be used to bundle scripts from .jsx/.tsx files in Bun's bundler by passing it into the plugins array:
import JSXScriptBundlerPlugin from "bun-plugin-jsx-script-bundler";
Bun.build({
entrypoints: ["./index.ts"],
outdir: "./dist",
plugins: [JSXScriptBundlerPlugin()],
});The JSX/TSX file:
// some-root-layout.tsx
export default async function RootLayout({ children }: { children?: JSX.Element | JSX.Element[] }) {
return (
<html lang="en">
<head>
<script src="npm:htmx.org" />
<script src="https://unpkg.com/[email protected]" />
</head>
<body>
{children}
</body>
</html>
)
}The scripts referenced in src attributes will be bundled to the outDir of the Bun.build config. The npm: prefix is used to reference packages from the node_modules directory. The https:// prefix is used to reference external scripts. Any other scripts referenced without the prefixes will not be bundled.
Resulting output:
/outDir
/htmx.min-[hash].js
/_hyperscript.min-[hash].js
/index.js
The script file names depends on the naming or naming.asset build option. If not set, it defaults to [dir]/[name]-[hash].[ext].
$ bun install # project setup
$ bun test # run tests