mirrors/bun.sh
1
0
Fork 0
mirror of https://github.com/oven-sh/bun synced 2026-02-02 15:08:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs: more consistency + minor updates (#24764)

Browse Source 
Co-authored-by: RiskyMH <git@riskymh.dev>
This commit is contained in:
Michael H
2025-11-22 09:06:19 +11:00
committed by GitHub
parent 7ec1aa8c95
commit 4450d738fa
205 changed files with 429 additions and 504 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/bundler/css.mdx
View File

@@ -72,7 +72,7 @@ Bun's CSS bundler automatically converts this nested syntax into traditional fla
You can also nest media queries and other at-rules inside selectors, eliminating the need to repeat selector patterns:
```css title="styles.css" icon="file-code"
```scss title="styles.css" icon="file-code"
.responsive-element {
display: block;

6
docs/bundler/executables.mdx
View File

@@ -118,7 +118,7 @@ These constants are embedded directly into your compiled binary at build time, p
<Note>
For comprehensive examples and advanced patterns, see the [Build-time constants
guide](https://bun.com/guides/runtime/build-time-constants).
guide](/guides/runtime/build-time-constants).
</Note>
---
@@ -288,12 +288,12 @@ console.log(`Server running at http://localhost:${server.port}`);
</head>
<body>
<h1>Hello World</h1>
<script src="./app.js"></script>
<script src="./app.ts"></script>
</body>
</html>
```
```ts app.js icon="file-code"
```ts app.ts icon="file-code"
console.log("Hello from the client!");
```

6
docs/bundler/fullstack.mdx
View File

@@ -632,7 +632,7 @@ const server = serve({
console.log(`🚀 Server running on ${server.url}`);
```
```html title="public/index.html"
```html title="public/index.html" icon="file-code"
<!DOCTYPE html>
<html>
<head>
@@ -757,7 +757,7 @@ export function App() {
}
```
```css title="src/styles.css"
```css title="src/styles.css" icon="file-code"
* {
margin: 0;
padding: 0;
@@ -999,7 +999,7 @@ CMD ["bun", "index.js"]
### Environment Variables
```bash title=".env.production" icon="file-code"
```ini title=".env.production" icon="file-code"
NODE_ENV=production
PORT=3000
DATABASE_URL=postgresql://user:pass@localhost:5432/myapp

4
docs/bundler/hot-reloading.mdx
View File

@@ -9,7 +9,7 @@ Hot Module Replacement (HMR) allows you to update modules in a running applicati
## `import.meta.hot` API Reference
Bun implements a client-side HMR API modeled after [Vite's `import.meta.hot` API](https://vitejs.dev/guide/api-hmr.html). It can be checked for with `if (import.meta.hot)`, tree-shaking it in production.
Bun implements a client-side HMR API modeled after [Vite's `import.meta.hot` API](https://vite.dev/guide/api-hmr). It can be checked for with `if (import.meta.hot)`, tree-shaking it in production.
```ts title="index.ts" icon="/icons/typescript.svg"
if (import.meta.hot) {
@@ -144,7 +144,7 @@ Indicates that multiple dependencies' modules can be accepted. This variant acce
`import.meta.hot.data` maintains state between module instances during hot replacement, enabling data transfer from previous to new versions. When `import.meta.hot.data` is written into, Bun will also mark this module as capable of self-accepting (equivalent of calling `import.meta.hot.accept()`).
```jsx title="index.ts" icon="/icons/typescript.svg"
```tsx title="index.tsx" icon="/icons/typescript.svg"
import { createRoot } from "react-dom/client";
import { App } from "./app";

7
docs/bundler/html-static.mdx
View File

@@ -164,7 +164,7 @@ For example:
}
```
```css abc.css
```css abc.css icon="file-code"
body {
background-color: red;
}
@@ -174,7 +174,7 @@ body {
This outputs:
```css
```css styles.css icon="file-code"
body {
background-color: red;
}
@@ -385,7 +385,8 @@ All paths are resolved relative to your HTML file, making it easy to organize yo
- Need more configuration options for things like asset handling
- Need a way to configure CORS, headers, etc.
If you want to submit a PR, most of the code is [here](https://github.com/oven-sh/bun/blob/main/src/bun.js/api/bun/html-rewriter.ts). You could even copy paste that file into your project and use it as a starting point.
{/* todo: find the correct link to link to as this 404's and there isn't any similar files */}
{/* If you want to submit a PR, most of the code is [here](https://github.com/oven-sh/bun/blob/main/src/bun.js/api/bun/html-rewriter.ts). You could even copy paste that file into your project and use it as a starting point. */}
</Warning>

33
docs/bundler/index.mdx
View File

@@ -106,7 +106,7 @@ For each file specified in `entrypoints`, Bun will generate a new bundle. This b
The contents of `out/index.js` will look something like this:
```ts title="out/index.js" icon="/icons/javascript.svg"
```js title="out/index.js" icon="/icons/javascript.svg"
// out/index.js
// ...
// ~20k lines of code
@@ -527,7 +527,7 @@ Injects environment variables into the bundled output by converting `process.env
For the input below:
```ts title="input.js" icon="/icons/javascript.svg"
```js title="input.js" icon="/icons/javascript.svg"
// input.js
console.log(process.env.FOO);
console.log(process.env.BAZ);
@@ -535,7 +535,7 @@ console.log(process.env.BAZ);
The generated bundle will contain the following code:
```ts title="output.js" icon="/icons/javascript.svg"
```js title="output.js" icon="/icons/javascript.svg"
// output.js
console.log("bar");
console.log("123");
@@ -580,7 +580,7 @@ console.log(process.env.BAZ);
The generated bundle will contain the following code:
```ts title="output.js" icon="/icons/javascript.svg"
```js title="output.js" icon="/icons/javascript.svg"
console.log(process.env.FOO);
console.log("https://acme.com");
console.log(process.env.BAZ);
@@ -722,7 +722,7 @@ Normally, bundling `index.tsx` would generate a bundle containing the entire sou
The generated bundle will look something like this:
```ts title="out/index.js" icon="/icons/javascript.svg"
```js title="out/index.js" icon="/icons/javascript.svg"
import { z } from "zod";
// ...
@@ -1026,7 +1026,7 @@ Setting `publicPath` will prefix all file paths with the specified value.
The output file would now look something like this.
```ts title="out/index.js" icon="/icons/javascript.svg"
```js title="out/index.js" icon="/icons/javascript.svg"
var logo = "https://cdn.example.com/logo-a7305bdef.svg";
```
@@ -1356,10 +1356,12 @@ interface BuildConfig {
* JSX configuration object for controlling JSX transform behavior
*/
jsx?: {
runtime?: "automatic" | "classic";
importSource?: string;
factory?: string;
fragment?: string;
importSource?: string;
runtime?: "automatic" | "classic";
sideEffects?: boolean;
development?: boolean;
};
naming?:
| string
@@ -1443,13 +1445,20 @@ interface BuildConfig {
drop?: string[];
/**
* When set to `true`, the returned promise rejects with an AggregateError when a build failure happens.
* When set to `false`, the `success` property of the returned object will be `false` when a build failure happens.
* - When set to `true`, the returned promise rejects with an AggregateError when a build failure happens.
* - When set to `false`, returns a {@link BuildOutput} with `{success: false}`
*
* This defaults to `false` in Bun 1.1 and will change to `true` in Bun 1.2
* as most usage of `Bun.build` forgets to check for errors.
* @default true
*/
throw?: boolean;
/**
* Custom tsconfig.json file path to use for path resolution.
* Equivalent to `--tsconfig-override` in the CLI.
*/
tsconfig?: string;
outdir?: string;
}
interface BuildOutput {

4
docs/bundler/loaders.mdx
View File

@@ -312,7 +312,7 @@ The `html` loader processes HTML files and bundles any referenced assets. It wil
For example, given this HTML file:
```html title="src/index.html"
```html title="src/index.html" icon="file-code"
<!DOCTYPE html>
<html>
<body>
@@ -325,7 +325,7 @@ For example, given this HTML file:
It will output a new HTML file with the bundled assets:
```html title="dist/index.html"
```html title="dist/index.html" icon="file-code"
<!DOCTYPE html>
<html>
<body>

2
docs/bundler/macros.mdx
View File

@@ -87,7 +87,7 @@ macro();
When shipping a library containing a macro to npm or another package registry, use the `"macro"` export condition to provide a special version of your package exclusively for the macro environment.
```json title="package.json" icon="file-code"
```json title="package.json" icon="file-json"
{
"name": "my-package",
"exports": {