Bun supports JSX and TSX files
Bun has built-in support for `.jsx` and `.tsx` files. React works with Bun.
module resolution & imports
17 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
XML import parsed structure format
When importing an XML file, the module is the parsed document. The root element becomes a key in the imported object. Attributes are available as keys prefixed with '@' (e.g., '@name', '@env'). Repeated elements are arrays. Every value is a string.
XML import default export contains root element
When importing an XML file with default import (e.g., import doc from './config.xml'), the imported object has a key for the root element name. For example, if the root element is <config>, it is accessed as doc.config.
Bun native XML import support
Bun natively supports importing .xml files as modules.
XML import named export for root element
The root element name can also be imported as a named export from an XML file. For example, from './config.xml' with a <config> root element, you can use import { config } from './config.xml'.
XML attribute access in parsed objects
Attributes in parsed XML objects are accessed using keys with '@' prefix followed by the attribute name. For example, an XML attribute env="production" is accessed as obj['@env'].
XML repeated elements become arrays
When an XML file contains multiple elements with the same name at the same level, they are parsed as an array. For example, multiple <feature> elements become an array accessible via the parent's feature property.
tsconfig.json import path remapping example
With tsconfig.json configured with paths, Bun rewrites imports: import { z } from "my-custom-name" becomes an import from "zod", and import { Button } from "@components/Button" becomes an import from "./src/components/Button".
Bun reads tsconfig.json paths field for import remapping
Bun reads the paths field in tsconfig.json to re-write import paths. This feature is useful for aliasing package names or avoiding long relative paths.
tsconfig.json paths syntax and example
The paths field in compilerOptions accepts object entries where keys are import patterns and values are arrays of file paths. Example: "paths": { "my-custom-name": ["./node_modules/zod"], "@components/*": ["./src/components/*"] }. Wildcards (*) in the key pattern are matched against the corresponding position in the value paths.
Import YAML files natively
Bun natively supports importing .yaml and .yml files. YAML files can be imported like any other source file using standard import syntax.
Default import of YAML file
A YAML file can be imported using default import syntax. The imported file is parsed into a JavaScript object with the structure matching the YAML content. For example: import config from "./config.yaml"; accesses properties like config.database.host.
Named imports from YAML files
Top-level properties from YAML files can be imported using named import syntax. For example: import { database, server, features } from "./config.yaml"; imports the top-level keys as named exports.
Import Attributes syntax for YAML
Bun supports Import Attributes syntax for importing YAML files. The syntax is: import config from "./config.yaml" with { type: "yaml" };
TypeScript support for YAML imports
To add TypeScript support for YAML imports, create a declaration file with the same filename as the YAML file with .d.ts appended (e.g., config.yaml → config.yaml.d.ts). In this file, declare the const contents with the appropriate type structure and export it using export = contents;
Bun supports TypeScript and JSX by default
Bun can directly execute `.jsx`, `.ts`, and `.tsx` files without additional configuration. Bun's transpiler converts these to vanilla JavaScript before execution.
Bun supports ESM and CommonJS
Bun supports both ES modules (ESM) and CommonJS module systems. Bun recommends ES modules but maintains full compatibility with CommonJS packages.