On-demand TS/TSX/JSX bundling to support lazy-loading .tsx files directly from browser
bun install
bun example_app/server/run.ts
See the result in http://localhost:4000
To use lazybuns, all you need is to wrap your express app with lazybuns:
import lazybuns from "lazybuns"
const app = express();
lazybuns(app, {
dirs: {
"client": "example_app/client",
}
});Lazybun prefixes static files with /bundle: by default. You can change this optional setting:
lazybuns(app, {
dirs: {
"client": "example_app/client",
},
prefix: "[b]" // this would expose bundles at http://hostname/[b]/client/something.tsx
});The "dirs" property lists maps from URLs to static file directories, relative to app root.
The HTML sent to the browser:
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="/bundle:/client/main.tsx.css">
<script type="module">
import main from "/bundle:/client/main.tsx";
main()
</script>
<body>
<div id="container">
<h4>lazybun example</h4>
<div id="root"></div>
</div>
</body>
</html>When the browser requests /bundle:/client/main.tsx, it gets the bundled JS for all modules loaded by that entry point. You can load multiple entry point just by adding more imports, no bundler setup needed.
You can also load the CSS generated by the bundle by simply adding .css to the entry point:
<link rel="stylesheet" href="/bundle:/client/main.tsx.css">The lazy bundler also supports JS and CSS source maps, so errors in the console will be readable.