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

Update dependencies

• chore: update dependencies e8deff2

Full Changelog: v2.0.1...v2.0.2

Update stubs to use latest API

• docs: update readme 8b6fbb7
• refactor: update stubs to use latest APIs a65ea95

Full Changelog: v2.0.1...v2.0.2-0

Fix for Vite 5 manifest file breaking changes

Vite 5 generates a different manifest file than Vite 4. Following are some samples.

Vite 4

{
  "resources/js/app.css": {
    "file": "app-ca8e1d21.css",
    "src": "resources/js/app.css"
  },
  "resources/js/app.js": {
    "css": [
      "app-ca8e1d21.css"
    ],
    "file": "app-3b39bfd0.js",
    "isEntry": true,
    "src": "resources/js/app.js"
  }
}

Vite 5

{
  "resources/js/app.js": {
    "css": [
      "app-YJoSmcGC.css"
    ],
    "file": "app-bm0myOVm.js",
    "isEntry": true,
    "src": "resources/js/app.js"
  }
}

As you can notice, there is no top-level reference for the CSS file. The CSS files should be picked directly from the css property inside the JS entrypoint chunk. This issue confirms the change is intended. vitejs/vite#15161

Commits

• refactor: change the logic to find CSS files referenced by the JS files 8cf9538
• refactor: add manifestFile option to config stub b4f282c

Full Changelog: v2.0.0...v2.0.1

Upgrade to work with Vite 5

This release exposes a new config option manifestFile on the backend. It should be path to the directory in which the manifest file will be generated. Also, the newer version works with Vite 5.

Commits

• fix: create hotfile with network address when using --host flag 8d19686
• refactor: use usingEdgeJS flag to detect is edge is installed 28bdf57
• chore: upgrade to vite 5 2e0f957
• chore: update dependencies 7395aa8

Full Changelog: v1.0.0...v2.0.0

Publish under latest tag

• chore: publish under latest tag 3ddca6c
• feat: merge next to develop (#3) 8c5a981
• chore: update readme link 3302513
• ci: add release workflows for generating changelog ac2846c
• chore: add public publishConfig a37d169

What's Changed

• Merge next to develop by @thetutlage in #3

Full Changelog: v1.0.0-beta.0...v1.0.0

Add integration for AdonisJS shield CSP

• feat: add csp directives a39d06b
• feat: allow passing attributes to @Vite and @viteReactRefresh tags 2655c09
• chore: update dependencies f3cb9a4

v0.0.1-9...v0.0.1-10

Full Changelog: v0.0.1-9...v0.0.1-10