Releases: adonisjs/vite
Vite 6 Support
This release adds support for Vite 6.
Breaking Changes
Vite.createRuntime
is nowVite.createServerModuleRunner
and accepts the same options as Vite'screateServerModuleRunner
. This breaking change is unlikely to affect you unless you are a package maintainer.
New Contributors
- @Barabasbalazs made their first contribution in #19
Full Changelog: v3.0.0...v4.0.0
Out of experimental phase
Changes
V3 of @adonisjs/vite is finally available in stable version. The changes have been fully explained in the following documents:
- Documentation: https://docs.adonisjs.com/guides/experimental-vite
- Blog post: https://adonisjs.com/blog/future-plans-for-adonisjs-6 and https://adonisjs.com/blog/experimental-release-for-inertia
Migration Guide
To migrate your application you will need to make the following changes:
-
You will need to add the vite server middleware to your
kernel.ts
file :// file: kernel.ts server.use([ () => import('@adonisjs/cors/cors_middleware'), + () => import('@adonisjs/vite/vite_middleware'), ])
-
generateEntryPointsTags
method is now async. -
Our implementation is based on the new Vite Runtime API, available only since version 5.1. So make sure you have at least this version of
vite
in your package.json. -
You'll need the latest version of adonisjs/assembler and adonisjs/core. Then make sure to have
assetsBundler: false
and the assembler hook defined in youradonisrc.ts
file :
// file: adonisrc.ts
export default defineConfig({
+ assetsBundler: false,
+ hooks: {
+ onBuildStarting: [() => import('@adonisjs/vite/build_hook')],
+ },
})
Commits
- chore: move from np to release-it (facfc61)
- feat: add assetsBundler: false through codemods (7e059c4)
- chore: update missing dependencies (29a7177)
- feat(configure): add assembler hook automatically (7b16ac5)
- chore: update dependencies (ef6751b)
- chore(release): 3.0.0-11 (39cf324)
- fix: handle cors issue (#14) (864659e)
- chore(release): 3.0.0-10 (20bd446)
- refactor: remove hardcoded hmr port (b5e8170)
- fix: move to warmupRequest (859ec25)
- chore(release): 3.0.0-9 (29f812c)
- feat: prevent fouc in development (#12) (5936fb9)
- fix: config/vite.stub file not found (9b84d3f)
- perf: improve boot time of the provider (116d615)
- refactor!: remove vite config builtin aliases (55447d4)
- chore(release): 3.0.0-8 (1b57843)
- fix: aliases not flattened (60aafa7)
- chore(release): 3.0.0-7 (c48b294)
- fix: enforce
post
for config plugin (7fd9e77) - chore(release): 3.0.0-6 (0973495)
- feat: allow options to be passed to createDevServer (6c6080c)
- chore(release): 3.0.0-5 (bce1201)
- fix: createRuntime (b627136)
- fix: create a new runtime instead of caching one (3ed37db)
- chore(release): 3.0.0-4 (fec9128)
- test: fix failing test (32b4a93)
- feat: add support for preloading assets in production (ab0a13b)
- chore: add japa snapshot plugin (1126e0f)
- feat: csp support (d06e72b)
- chore: middleware typo (1e596b7)
- chore(release): 3.0.0-3 (e15289c)
- chore: doc provider (6413d8b)
- refactor: run dev server only in test & web environments (754ebcd)
- refactor: register vite middleware in boot method (f1b112e)
- refactor: add back edge plugin entrypoint (00f435e)
- chore: restore gitignore and prettierignore (c4a53a4)
- refactor: remove application dev dependency (eb6f51d)
- fix: register edge in production (2b473a8)
- chore(release): 3.0.0-2 (42930fb)
- fix: tsup published files (edec6f1)
- chore(release): 3.0.0-1 (ee15318)
- chore: update shield peer dep version (2b40db1)
- chore: update dependencies (7e61998)
- chore: bundle using tsup-node (1dd8901)
- chore: add funding (58fa144)
- fix: build hook module (5c36641)
- chore(release): 3.0.0-0 (30dc8e1)
- chore: update version (f21ac99)
- chore: update publish config (78ce80a)
- feat: new vite ingration (ffeca7f)
- chore: update dependencies (a67c8ac)
Cors issue / Breaking change
Changes
This new release has a breaking change: the Vite middleware must be added in your own kernel.ts
like this :
// file: kernel.ts
// ...
server.use([
// ...
() => import('@adonisjs/cors/cors_middleware'),
() => import('@adonisjs/vite/vite_middleware'),
])
This was needed because otherwise Vite's CORS settings and @adonisjs/cors
could conflict. See #14 and #13 for more detailed explanations.
Commits
Module warmup fix
Some improvements
Breaking Changes
generateEntryPointsTags
method is now async.
Changes
- Prevent fouc in development. We initially have a patch for this in adonisjs/inertia. The patch has been moved to the adonisjs/vite package directly with a more generic implementation. thanks to this, fouc will be avoided on adonisjs+tsx, adonisjs+edge, adonisjs+inertia stacks.
- Attempt to improve the start-up time of the Vite provider
Commits
Aliases not flattened
Fixed a configuration resolving problem that caused Solid x Inertia apps to sometimes get a "find.test
is not a function`
Commits
- fix: aliases not flattened c270352
Fix Runtime API
Breaking changes
- Remove the
getRuntime
in favor of acreateRuntime
method that returns a fresh instance
Commits
Assets Preloading and CSP
Assets preloading
This release introduces built-in support for asset preloading.
By default, Vite does code splitting, resulting in the generation of multiple small bundles that are loaded progressively as the user navigates the site. While beneficial, this can sometimes lead to a "waterfall" effect:
- We specify
@vite(['resources/js/app.js'])
in our Edge template. - This file imports other files, such as our
.vue
or.tsx
components, and sometimes CSS as well.
As a result, this will result in a waterfall of requests :
- The browser must discover and parse the .HTML.
- Discover the
app.js
script - Discover the
app.js
script in the HTML, parse it - Then, signals the browser to then load
components/home.vue
andapp.css
.
This process can be optimized using preload and modulepreload attributes.
In production, Vite generates a Manifest outlining the relationships between our application's various scripts and styles. Using this manifest, we can generate preload tags for assets and inject them into the HTML.
Preload tags are generated for:
- The entry points and the CSS imported by them.
- The JavaScript imported by these entry points.
- The CSS imported by the JavaScript imported by the entrypoints
This behavior will be enabled by default with the new adonisjs/vite
version.
CSP Support
CSP support has been simplified compared with version 2.x.x. Now that we only have one dev server, using self
as a CSP directive will be enough. However, there's an exception when using an assetUrl
pointing to a CDN. We therefore retain only the keyword @viteUrl
which can be used as a CSP directive, exactly as before.
Commits
- test: fix failing test b5db462
- feat: add support for preloading assets in production 5045c81
- chore: add japa snapshot plugin ba88a39
- feat: csp support 0bd9bc0
- chore: middleware typo a08281a
Full Changelog: v3.0.0-3...v3.0.0-4
Various improvements
- chore: doc provider c739008
- refactor: run dev server only in test & web environments 51ef82e
- refactor: register vite middleware in boot method 8e65616
- refactor: add back edge plugin entrypoint cd12fbb
- chore: restore gitignore and prettierignore f034b33
- refactor: remove application dev dependency 60536ec
- fix: register edge in production 6f63be8
Full Changelog: v3.0.0-1...v3.0.0-3