blob: 891ed0bffed9641f753c3a5aeff1c8c7fdf159eb (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
|
## TypeScript
Bun natively supports TypeScript out of the box. All files are transpiled on the fly by Bun's fast native transpiler before being executed. Similar to other build tools, Bun does not perform typechecking; it simply removes type annotations from the file.
```bash
$ bun index.js
$ bun index.jsx
$ bun index.ts
$ bun index.tsx
```
Some aspects of Bun's runtime behavior are affected by the contents of your `tsconfig.json` file. Refer to [Runtime > TypeScript](/docs/runtime/typescript) page for details.
## JSX
Bun supports `.jsx` and `.tsx` files out of the box. Bun's internal transpiler converts JSX syntax into vanilla JavaScript before execution.
```tsx#react.tsx
function Component(props: {message: string}) {
return (
<body>
<h1 style={{color: 'red'}}>{props.message}</h1>
</body>
);
}
console.log(<Component message="Hello world!" />);
```
Bun implements special logging for JSX to make debugging easier.
```bash
$ bun run react.tsx
<Component message="Hello world!" />
```
## Text files
Text files can be imported as strings.
{% codetabs %}
```ts#index.ts
import text from "./text.txt";
console.log(text);
// => "Hello world!"
```
```txt#text.txt
Hello world!
```
{% /codetabs %}
## JSON and TOML
JSON and TOML files can be directly imported from a source file. The contents will be loaded and returned as a JavaScript object.
```ts
import pkg from "./package.json";
import data from "./data.toml";
```
## WASM
{% callout %}
🚧 **Experimental**
{% /callout %}
Bun has experimental support for WASI, the [WebAssembly System Interface](https://github.com/WebAssembly/WASI). To run a `.wasm` binary with Bun:
```bash
$ bun ./my-wasm-app.wasm
# if the filename doesn't end with ".wasm"
$ bun run ./my-wasm-app.whatever
```
{% callout %}
**Note** — WASI support is based on [wasi-js](https://github.com/sagemathinc/cowasm/tree/main/core/wasi-js). Currently, it only supports WASI binaries that use the `wasi_snapshot_preview1` or `wasi_unstable` APIs. Bun's implementation is not fully optimized for performance; this will become more of a priority as WASM grows in popularity.
{% /callout %}
## Custom loaders
Support for additional file types can be implemented with plugins. Refer to [Runtime > Plugins](/docs/bundler/plugins) for full documentation.
<!--
A loader determines how to map imports & file extensions to transforms and output.
Currently, Bun implements the following loaders:
| Input | Loader | Output |
| ----- | ----------------------------- | ------ |
| .js | JSX + JavaScript | .js |
| .jsx | JSX + JavaScript | .js |
| .ts | TypeScript + JavaScript | .js |
| .tsx | TypeScript + JSX + JavaScript | .js |
| .mjs | JavaScript | .js |
| .cjs | JavaScript | .js |
| .mts | TypeScript | .js |
| .cts | TypeScript | .js |
| .toml | TOML | .js |
| .css | CSS | .css |
| .env | Env | N/A |
| .\* | file | string |
Everything else is treated as `file`. `file` replaces the import with a URL (or a path).
You can configure which loaders map to which extensions by passing `--loaders` to `bun`. For example:
```sh
$ bun --loader=.js:js
```
This will disable JSX transforms for `.js` files. -->
|
