Rolldown-Vite

[sapphi-red]

Description

Current Status

• Vite repo test status
  • ✅ unit tests
  • e2e tests
    • ✅ assets: skipping watch related tests
    • ✅ external: changed the test for intended behavior change
    • ❌ legacy: system output is not supported yet
    • ⚠️ object-hooks: sequential: false object hooks are not supported
    • ✅ resolve: skipped some browser field related tests as those cases were only supported by esbuild and Vite, also skipped some test that does fallback based on the file content which is Vite only and I believe it should not be done
• ecosystem-ci (see https://github.com/vitejs/vite-ecosystem-ci/blob/rolldown-vite/README-temp.md)

Intended behavior differences

• esbuild needs to be installed manually in the following cases:
  • when using build.minify: 'esbuild'
  • when using a plugin using transformWithEsbuild function
• passing the same browser with multiple versions of it to build.target errors: esbuild selects the latest version of it, but that's probably not what you intend
• transformer: define does not share reference for objects oxc-project/oxc#7641
• require is never transformed into import, users needs to inject a polyfill on their own, see https://rolldown.rs/guide/in-depth/bundling-cjs
• build.rollupOptions.output.manualChunks is not supported. please use build.rollupOptions.output.advancedChunks instead
• splitVendorChunkPlugin is not supported
• structuredClone(bundle) errors with DataCloneError: #<Object> could not be cloned.. please clone it with structuredClone({ ...bundle }) (Build errors with "DataCloneError: #<Object> could not be cloned." using rollup-plugin-webpack-stats #128)
• assigning to bundle[foo] in generateBundle hook is not supported. It is discouraged by Rollup as well.

Known missing features

• plugin-legacy
• output.format: 'system' ([Feature Request]: Support for System JS as output format rolldown/rolldown#2387)
• watch mode is only partially working (Build watch mode remaining issues #149)
• resolveImportMeta hook (resolveImportMeta hook implement rolldown/rolldown#1010)
• better chunking
  • Less common chunks if rolldown doesn't need to preserve the exports of entires rolldown/rolldown#1842
• dev support with native plugins

related to native plugins

• alias
  • does not support customResolver option
• transform
  • does not read tsconfig
• dynamic import vars
  • does not support resolving with createResolver
• import glob
  • does not support alias
  • does not support subpath imports: https://github.com/rolldown/rolldown/blob/4caa0a93f9ed42bcf9e152c6a4949bacd879b932/crates/rolldown_plugin_import_glob/src/lib.rs#L457
• manifest
  • cannot use data on Vite side (e.g. css/assets)
    • I cannot make a simple reproduction for this one. If you only enable the native manifest plugin and run build in playground/backend-integration, you can see the manifest not containing css and assets field in index.html

TODO list for me

• set rolldown's minify target
• update docs

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/vitejs/rolldown-vite@84

commit: 18e54bf

[christianjuth]

Found this PR in the Vite docs. Curious how stable rolldown-vite is. On a scale of "Next.js would call this is stable" to "this will actually work 99% of the time", were are we at?

[sapphi-red]

Found this PR in the Vite docs. Curious how stable rolldown-vite is. On a scale of "Next.js would call this is stable" to "this will actually work 99% of the time", were are we at?

I'd say it would work for basic cases as it is passing most tests through out the ecosystem.

[corneliusio]

@sapphi-red Not sure if this is helpful or unrelated, but in regard to this part:

manifest

    cannot use data on Vite side (e.g. css/assets)
        I cannot make a simple reproduction for this one. If you only enable the native manifest plugin and run build in playground/backend-integration, you can see the manifest not containing css and assets field in index.html

Due to the nature of projects I work on almost exclusively being MPA's, we use Vite only for processing front-end assets and then have back-end code in PHP for reading the manifest and loading compiled assets where needed. For some non-JS assets this means they're never explicitly included in any JS or CSS file as they are only meant to be consumed by the back-end. We ensure these assets get processed with something along the lines of this:

import.meta.glob('../img/**/*')

However, what I found when testing out the new rolldown-vite setup is that these assets were no longer appearing in the manifest. After a little tinkering I found that creating a side-effect from the call to import.meta making it not tree-shakable fixed this. Basically just:

window.__ASSETS__ = import.meta.glob('../img/**/*')

So it seems like maybe there are cases where these assets are simply being dropped due to tree-shaking. But, this is only a guess and possibly not related to your above issue. But I thought I'd share just in case.

[sapphi-red]

@corneliusio That isn't related to what I wrote, because that's not related to native plugins. import.meta.glob call does not have a sideeffect, so it's removed. If you use that outside the JS part, it should be marked as an entry (build.rollupOptions.input). Otherwise, Vite can do any optimization.

[sapphi-red]

I'll lock this PR as comments on this PR will be difficult to track. Feel free to create an issue or discussion if you need to comment.