Features
Bun Macro
Bun Macros are a simple way to move code snippets from runtime to build-time.
Use them for:
- Zero runtime CSS-in-JS (or a little runtime, up to you)
- GraphQL parsing
- Static data fetching without a library (similar to Next.js' getStaticProps but from any file instead of just pages)
- you can come up with more use cases
This API (and implementation) is very new and I want to hear feedback on what to change.
How to use macros:
- Any import that starts with macro: is imported as a macro. Macros can be npm packages, local files, or anything else resolvable. These imports are always removed from the final output.
- Imports must be a named import, and are matched against call expressions (function calls) and template literals. JSX props may be added in a future release
Here's a quick example of using a macro:
```tsx
// This import won't exist at runtime!
import { matchInFile } from "macro:./matchInFile";
export const IPAddresses = () => (
<div>
<h2>recent ip addresses</h2>
<div className="Lines">
{/* matchInFile gets inlined into an array at compile time */}
{matchInFile("access.log", /^(?:[0-9]{1,3}.){3}[0-9]{1,3}/).map(
(ipAddress, index) => (
<div className="Line" key={index}>
{ipAddress}
</div>
)
)}
</div>
</div>
);
```
The transpiled output looks something like this:
export const IPAddresses = () => jsx("div", {
children: [
jsx("h2", {
children: ["recent ip addresses"]
}, undefined, true, {}, this),
jsx("div", {
className: "Lines",
children: [[
"98.210.28.6",
"192.99.4.168",
// ... rest of the array
].map((ipAddress, index) => jsx("div", {
className: "Line",
children: [ipAddress]
}, index, true, {}, this))]
}, undefined, true, {}, this)
// ...rest of code
]
});
There are a few examples of how to write macros in https://github.com/Jarred-Sumner/bun/tree/main/examples/macros, but I will write more docs once I'm a little more confident that the API isn't going to change. Once I write macros for Relay and Emotion, I'll have a better sense for if this API is good enough or if there are changes to make.
I might change the import prefix from macro: to bun: because it's shorter and slightly faster to check (one u32 instead of a u32 and then a u16)
Credits
Bun Macros are inspired by babel-plugin-macros, which was Sunil Pai's idea. They're also sort of similar to Zig's comptime feature.
Bun.js
Bun.readFileAsBytes and Bun.readFile now accept an array of paths to join. Both of these are valid:
Option A:
js
Bun.readFile(Bun.cwd + "file.txt");
Option B:
js
Bun.readFile([Bun.cwd, "./text/", "file.txt"]);
Unlike Node.js' path.join, it's an explicit array instead of arguments because someday, we might want to add extra options to this function.
Bug fixes
- Thanks @alexkuz for adding a check to the Makefile that necessary dependencies are installed prior to compiling Bun.
- Fixed an occasional UTF-8 decoding bug in
Response.text() (from fetch)
- Fixed an edgecase in the URL parser where it would sometimes erroneously report the pathname as
/
- Fixed a typo in the error thrown when you pass a blank string to
fetch
fetch now includes a User-Agent header by default. This is overridable, but it defaults to Bun.js v0.0.version-number