diff --git a/docs/bundler/loaders.mdx b/docs/bundler/loaders.mdx index 89e8824679..bb55a49675 100644 --- a/docs/bundler/loaders.mdx +++ b/docs/bundler/loaders.mdx @@ -11,10 +11,12 @@ The Bun bundler implements a set of default loaders out of the box. Bun uses the file extension to determine which built-in loader should be used to parse the file. Every loader has a name, such as `js`, `tsx`, or `json`. These names are used when building plugins that extend Bun with custom loaders. -You can explicitly specify which loader to use using the `'loader'` import attribute. +You can explicitly specify which loader to use using the `'type'` import attribute. ```ts title="index.ts" icon="/icons/typescript.svg" -import my_toml from "./my_file" with { loader: "toml" }; +import my_toml from "./my_file" with { type: "toml" }; +// or with dynamic imports +const { default: my_toml } = await import("./my_file", { with: { type: "toml" } }); ``` ## Built-in loaders @@ -117,8 +119,7 @@ var config = { ``` - Bun automatically uses the `jsonc` loader for `tsconfig.json`, `jsconfig.json`, `package.json`, and `bun.lock` files, - allowing comments and trailing commas in these files. + Bun automatically uses the `jsonc` loader for `tsconfig.json`, `jsconfig.json`, `package.json`, and `bun.lock` files. --- diff --git a/docs/runtime/file-types.mdx b/docs/runtime/file-types.mdx index 87e8284a85..89e23779c1 100644 --- a/docs/runtime/file-types.mdx +++ b/docs/runtime/file-types.mdx @@ -5,14 +5,16 @@ description: "File types and loaders supported by Bun's bundler and runtime" The Bun bundler implements a set of default loaders out of the box. As a rule of thumb, the bundler and the runtime both support the same set of file types out of the box. -`.js` `.cjs` `.mjs` `.mts` `.cts` `.ts` `.tsx` `.jsx` `.toml` `.json` `.txt` `.wasm` `.node` `.html` +`.js` `.cjs` `.mjs` `.mts` `.cts` `.ts` `.tsx` `.jsx` `.css` `.json` `.jsonc` `.toml` `.yaml` `.yml` `.txt` `.wasm` `.node` `.html` `.sh` Bun uses the file extension to determine which built-in _loader_ should be used to parse the file. Every loader has a name, such as `js`, `tsx`, or `json`. These names are used when building [plugins](/bundler/plugins) that extend Bun with custom loaders. -You can explicitly specify which loader to use using the 'loader' import attribute. +You can explicitly specify which loader to use using the `'type'` import attribute. ```ts -import my_toml from "./my_file" with { loader: "toml" }; +import my_toml from "./my_file" with { type: "toml" }; +// or with dynamic imports +const { default: my_toml } = await import("./my_file", { with: { type: "toml" } }); ``` --- @@ -84,6 +86,29 @@ export default { +### `jsonc` + +**JSON with Comments loader**. Default for `.jsonc`. + +JSONC (JSON with Comments) files can be directly imported. Bun will parse them, stripping out comments and trailing commas. + +```ts +import config from "./config.jsonc"; +console.log(config); +``` + +During bundling, the parsed JSONC is inlined into the bundle as a JavaScript object, identical to the `json` loader. + +```ts +var config = { + option: "value", +}; +``` + + + Bun automatically uses the `jsonc` loader for `tsconfig.json`, `jsconfig.json`, `package.json`, and `bun.lock` files. + + ### `toml` **TOML loader**. Default for `.toml`. @@ -128,6 +153,50 @@ export default { +### `yaml` + +**YAML loader**. Default for `.yaml` and `.yml`. + +YAML files can be directly imported. Bun will parse them with its fast native YAML parser. + +```ts +import config from "./config.yaml"; +console.log(config); + +// via import attribute: +import data from "./data.txt" with { type: "yaml" }; +``` + +During bundling, the parsed YAML is inlined into the bundle as a JavaScript object. + +```ts +var config = { + name: "my-app", + version: "1.0.0", + // ...other fields +}; +``` + +If a `.yaml` or `.yml` file is passed as an entrypoint, it will be converted to a `.js` module that `export default`s the parsed object. + + + +```yaml Input +name: John Doe +age: 35 +email: johndoe@example.com +``` + +```ts Output +export default { + name: "John Doe", + age: 35, + email: "johndoe@example.com", +}; +``` + + + ### `text` **Text loader**. Default for `.txt`. @@ -283,6 +352,18 @@ The `html` loader behaves differently depending on how it's used: +### `css` + +**CSS loader**. Default for `.css`. + +CSS files can be directly imported. This is primarily useful for [full-stack applications](/bundler/html-static) where CSS is bundled alongside HTML. + +```ts +import "./styles.css"; +``` + +There isn't any value returned from the import, it's only used for side effects. + ### `sh` loader **Bun Shell loader**. Default for `.sh` files