### Bunup Multiple Configurations for Environments/Formats Source: https://bunup.dev/docs/guide/config-file This example demonstrates how to export an array of configurations from `bunup.config.ts`. Each configuration requires a `name` property for identification. This is useful for building for multiple environments (e.g., Node.js, browser) or formats (e.g., ESM, IIFE) in a single run. ```typescript export default defineConfig([ { entry: "src/index.ts", name: 'node', format: 'esm', target: 'node', }, { entry: "src/browser.ts", name: 'browser', format: ['esm', 'iife'], target: 'browser', outDir: 'dist/browser', }, ]); ``` -------------------------------- ### Basic Bunup Configuration File Setup Source: https://bunup.dev/docs/guide/config-file This snippet shows the fundamental structure for creating a `bunup.config.ts` file. It imports the `defineConfig` utility and exports a configuration object. This is the simplest way to centralize build settings. ```typescript import { defineConfig } from 'bunup'; export default defineConfig({ // ...your configuration options go here }); ``` -------------------------------- ### Create New Project with Bunup CLI Source: https://bunup.dev/docs/scaffold-with-bunup Initializes a new project using the Bunup CLI. This command prompts the user with questions to configure the project, offering 'Minimal' and 'Full' setup variants. The 'Minimal' setup is for users who prefer to configure their own environment, while 'Full' provides a complete modern library setup. ```shell bunx @bunup/cli@latest create ``` -------------------------------- ### Basic Copy Plugin Configuration - TypeScript Source: https://bunup.dev/docs/builtin-plugins/copy Demonstrates the basic setup for the Bunup copy plugin in a TypeScript configuration file. It copies specified files and directories to the build output. ```typescript import { defineConfig } from 'bunup'; import { copy } from 'bunup/plugins'; export default defineConfig({ plugins: [copy(['README.md', 'assets/**/*'])], }); ``` -------------------------------- ### Bunup Package Configuration with Path Resolution Example Source: https://bunup.dev/docs/guide/workspaces This example demonstrates path resolution in a Bunup package configuration. The 'root' is set to 'packages/core', and 'entry' and 'outDir' are defined relative to this root. 'entry: "src/index.ts"' resolves to 'packages/core/src/index.ts', and 'outDir: "dist"' specifies output to 'packages/core/dist/'. ```typescript { name: "core", root: "packages/core", config: { entry: "src/index.ts", // resolves to packages/core/src/index.ts outDir: "dist", // outputs to packages/core/dist/ }, } ``` -------------------------------- ### Install Bunup as a Development Dependency Source: https://bunup.dev/index This command installs Bunup as a development dependency in your project using the 'bun add' command. This makes Bunup available for your build scripts. ```shell bun add --dev bunup ``` -------------------------------- ### Create a TypeScript Function with Bunup Source: https://bunup.dev/index Example of a simple TypeScript function 'greet' that takes a name and returns a greeting string. This code snippet demonstrates basic TypeScript syntax. ```typescript export function greet(name: string): string { return `Hello, ${name}`; } ``` -------------------------------- ### Install React Compiler Plugin for Bunup Source: https://bunup.dev/docs/recipes/react Install the React Compiler plugin as a development dependency using npm or yarn. This plugin is essential for enabling automatic optimization of React components during the build process. ```bash bun add --dev @bunup/plugin-react-compiler ``` -------------------------------- ### Importing Package Styles Source: https://bunup.dev/docs/guide/css Example of how a consumer of a package would import the exported CSS file and components. This allows for easy integration of styles. ```javascript import 'your-package/styles.css'; import { Button } from 'your-package'; } ``` -------------------------------- ### Bundle Size Reporter Plugin (TypeScript) Source: https://bunup.dev/docs/advanced/plugin-development This TypeScript plugin for Bunup analyzes built entry-point files, calculates their sizes in KB, and logs them. It can optionally throw an error if any bundle exceeds a predefined maximum size, aiding in performance optimization. ```typescript export function bundleSizeReporter(maxSize?: number): BunupPlugin { return { name: "bundle-size-reporter", hooks: { onBuildDone: async ({ files }) => { const sizes = await Promise.all( files .filter(f => f.kind === 'entry-point') .map(async (file) => { const buffer = await Bun.file(file.fullPath).arrayBuffer(); return { path: file.pathRelativeToOutdir, size: buffer.byteLength, format: file.format }; }) ); console.log("\nšŸ“¦ Bundle Sizes:"); for (const { path, size, format } of sizes) { const sizeKB = (size / 1024).toFixed(2); console.log(` ${path} (${format}): ${sizeKB} KB`); if (maxSize && size > maxSize) { throw new Error(`Bundle ${path} exceeds maximum size of ${maxSize} bytes`); } } } } }; } ``` -------------------------------- ### Component Import with Injected CSS Source: https://bunup.dev/docs/builtin-plugins/tailwindcss Demonstrates how consumers import components when the 'inject' option is enabled. The CSS is automatically loaded with the JavaScript, simplifying the consumer's setup. ```javascript import { Button } from 'your-package'; ); } ``` -------------------------------- ### Run Development Script with Watch Mode Source: https://bunup.dev/index This command executes the 'dev' script defined in package.json, which is configured to run Bunup in watch mode. This enables automatic rebuilding upon file changes during development. ```shell bun run dev ``` -------------------------------- ### Define Global Constants via CLI Source: https://bunup.dev/docs/guide/options Define global constants that will be replaced at build time using the '--define.' flag. Values are provided as strings. ```shell bunup --define.PACKAGE_VERSION='"1.0.0"' --define.DEBUG='false' ``` -------------------------------- ### Configure CSS Injection in Bunup Configuration Source: https://bunup.dev/docs/recipes/react Programmatically configure Bunup to inject CSS styles into JavaScript bundles by setting the `inject` option to `true` within the `css` configuration object. This method allows for more granular control over the build process. ```typescript import { defineConfig } from 'bunup' export default defineConfig({ css: { inject: true, }, }) ``` -------------------------------- ### Copy and Rename a Directory - TypeScript Source: https://bunup.dev/docs/builtin-plugins/copy Shows how to copy a directory and change its name in the destination using the `.to()` method. This is useful for organizing build outputs. ```typescript // Copy and rename directory copy('assets').to('static') // ā†’ dist/static/ ``` -------------------------------- ### Integrate CSS Modules with React Button Component Source: https://bunup.dev/docs/recipes/react Integrates CSS Modules into the Button component. It imports styles from a local CSS module file and applies scoped class names to the button element. TypeScript definitions are generated automatically. ```tsx import styles from './button.module.css' export function Button(props: React.ComponentProps<'button'>): React.ReactNode { return (