v3.0.0

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 your adonisrc.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

• fix: handle cors issue (#14) b9f444a

v3.0.0-10...v3.0.0-11

Module warmup fix

• refactor: remove hardcoded hmr port bcaf3cb
• fix: move to warmupRequest e277ffd

v3.0.0-9...v3.0.0-10

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

• feat: prevent fouc in development (#12) 15bef87
• fix: config/vite.stub file not found b8dc984
• perf: improve boot time of the provider 76016e4
• refactor!: remove vite config builtin aliases 9b6f1b9

v3.0.0-8...v3.0.0-9

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

v3.0.0-7...v3.0.0-8

Fix Runtime API

Breaking changes

• Remove the getRuntime in favor of a createRuntime method that returns a fresh instance

Commits

• fix: createRuntime c8a5629
• fix: create a new runtime instead of caching one 6d9d685

v3.0.0-4...v3.0.0-5

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 and app.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

v3.0.0-2...v3.0.0-3

Full Changelog: v3.0.0-1...v3.0.0-3

Fix published files

• chore: update shield peer dep version 60bc5e7
• chore: update dependencies 1a2d058
• chore: bundle using tsup-node b7af53a
• chore: add funding 6d9dcd6
• fix: build hook module 898bd11

Full Changelog: v3.0.0-0...v3.0.0-1

3.x pre-release

This new version of adonisjs/vite introduces a major change, explained in this article: https://adonisjs.com/blog/future-plans-for-adonisjs-6#adonisjsvite

To recap: before, Vite was launched as a child process by the Adonis assembler. Now, Vite is launched directly in the same process as Adonis, which makes SSR support much simpler. There are no breaking changes in the API, but it is necessary to change some options in the RC file, so we are safely bumping the major version.

Migrating from 2.0

RC File

You'll need the latest version of adonisjs/assembler and adonisjs/core. Then add this to adonisrc.ts :

export default defineConfig({
  assetsBundler: false,
  unstable_assembler: {
    onBuildStarting: [() => import('@adonisjs/vite/build_hook')],
  },
})

Upgrade Vite

our implementation is based on the vite Runtime API, available only since version 5.1. So make sure you have at least this version in your package.json.

New APIs

You can now access the Vite Runtime API and the vite dev server as follows:

const vite = await app.container.make('vite')

vite.getDevServer()
vite.getRuntime()

Having access to these methods will make SSR easier, as explained in this article and will be particularly useful for Inertia SSR.

Commits

• chore: update version 8d2c7b3
• chore: update publish config 0e520f0
• feat: new vite ingration 0eb62c6
• chore: update dependencies a67c8ac

v2.0.2...v3.0.0-0