rolldown-vite

rolldown-vite is a temporary fork of Vite that replaces Rollup and esbuild with Rolldown, a high-performance Rust-based JavaScript bundler.

It is intended to be used as a drop-in replacement for testing Rolldown's compatibility with Vite. Once the integration is complete, this package will be deprecated as the changes will be merged into the main Vite repository.

Vite is a next-generation frontend build tool designed to improve the development experience. It operates in two primary modes:

1. Development Server: Serves source files using native ES modules. It provides rich built-in features and extremely fast Hot Module Replacement (HMR).
2. Build Command: Uses Rollup to bundle code into highly optimized static assets ready for production.

Vite is highly extensible through a Plugin API and a JavaScript API, both of which offer full TypeScript support.

This template provides a minimal setup for using React with TypeScript in a Vite environment. It includes Hot Module Replacement (HMR) and a set of ESLint rules.

It supports two official React plugins for Fast Refresh:

1. @vitejs/plugin-react: Uses Babel (or oxc when used in rolldown-vite) for Fast Refresh.
2. @vitejs/plugin-react-swc: Uses SWC for Fast Refresh.

This template provides a minimal setup for running React within Vite, featuring Hot Module Replacement (HMR) and pre-configured ESLint rules. It supports two official plugin options for Fast Refresh:

• @vitejs/plugin-react: Uses Babel (or oxc when used in rolldown-vite) for Fast Refresh.
• @vitejs/plugin-react-swc: Uses SWC for Fast Refresh.

You can use the enforce property to adjust the application order of your plugin. This is similar to Webpack loaders. The possible values are:

• enforce: 'pre': Runs before Vite core plugins.
• enforce: 'post': Runs after Vite build plugins.

The resolved order is:

1. Alias
2. User plugins with enforce: 'pre'
3. Vite core plugins
4. User plugins without enforce value
5. Vite build plugins
6. User plugins with enforce: 'post'
7. Vite post build plugins (minify, manifest, reporting)

HMR (Hot Module Replacement) state preservation is disabled by default in svelte-hmr and @sveltejs/vite-plugin-svelte due to unpredictable behavior.

If you have component state that must be retained during HMR, do not rely on local component variables. Instead, move that state into an external store which will not be replaced by the HMR process.

// store.js
// An extremely simple external store
import { writable } from 'svelte/store'
export default writable(0)

Vite 2.0 introduced a new plugin system inspired by WMR that extends the Rollup plugin interface. This makes Vite compatible with many existing Rollup plugins out of the box.

Plugins can utilize standard Rollup-compatible hooks, but also include Vite-specific hooks and properties to control Vite-only behaviors, such as differentiating between development and build modes or implementing custom Hot Module Replacement (HMR) logic. Additionally, the programmatic API was improved to allow higher-level tools and frameworks to build on top of Vite more easily.

To reduce communication overhead between the Rust and JavaScript runtimes (in Rolldown) or to optimize Vite 6.3.0+ environments, you can use the hook filter feature. This allows you to specify patterns (like regex) so that hooks are only called for specific files.

Note: To maintain backward compatibility with older versions, you should still perform the manual check inside the hook handler.

export default function myPlugin() {
  const jsFileRegex = /\.js$/

  return {
    name: 'my-plugin',
    // Example: only call transform for .js files
    transform: {
      filter: {
        id: jsFileRegex,
      },
      handler(code, id) {
        // Additional check for backward compatibility
        if (!jsFileRegex.test(id)) return null

        return {
          code: transformCode(code),
          map: null,
        }
      },
    },
  }
}

Vite 4 provides two distinct plugins for React projects, allowing you to choose based on your project's needs:

1. @vitejs/plugin-react: Uses esbuild and Babel. It offers a small package footprint and the flexibility of the Babel transform pipeline.
2. @vitejs/plugin-react-swc: Uses esbuild during build and replaces Babel with SWC during development. This is ideal for large projects that do not require non-standard React extensions, as it can significantly speed up cold starts and Hot Module Replacement (HMR).

Vite is designed to encourage modern web development practices, which may result in APIs that are more future-proof but potentially less compatible with older build tools. Key constraints include:

• ESM-only source code: Source code must be written in ESM. Non-ESM dependencies are handled via pre-bundling into ESM.
• Standard Web Workers: Web workers should be implemented using the standard new Worker syntax.
• No Node.js modules in the browser: Node.js-specific modules are not supported in the browser environment.