bun-plugin-jsx-script-bundler
v0.2.1
Published
Adds support for bundling scripts from `.jsx`/`.tsx` files to configured `outDir`
Downloads
5
Readme
bun-plugin-jsx-script-bundler
Adds support for bundling scripts from .jsx/.tsx files to configured outDir
Installation
bun add bun-plugin-jsx-script-bundler -dBundler usage
This 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.jsThe script file names depends on the naming or naming.asset build option. If not set, it defaults to [dir]/[name]-[hash].[ext].
Contributing
$ bun install # project setup
$ bun test # run tests