Description

ViteJS has a feature "Preload Directives Generation" that will automatically generate <link rel="modulepreload"> directives for entry chunks and their direct imports:

https://vitejs.dev/guide/features.html#preload-directives-generation

This PR introduces this feature. AsManifestHelper::extractManifestTags() parses the manifest content for the given entry point, it adds a new import type of tag for every file found in the imports key.

Then every tag of type import is output as <link rel="modulepreload">. It also sets crossorigin to the same value as the given entry point.

Note: It does not include files found in the dynamicImports key, as the ManifestHelper::extractCssTags() does. I am not certain if this is the right call or not. But it at least is in line with how Vite does it: https://github.com/vitejs/vite/blob/main/packages/vite/src/node/plugins/html.ts#L283-L295

Note 2: Vite appears to have the ability to include a polyfill for the modulepreload tag, which is not included in this PR. https://github.com/vitejs/vite/blob/main/packages/vite/src/node/plugins/modulePreloadPolyfill.ts

Describe the bug

In the vite.config.js I have the vite-plugin-restart plugin installed with the following config:

ViteRestart({
    reload: [
        path.join(__dirname, './templates/**/*'),
    ],
}),

Previously this worked like a charm but after updating everything to Craft 4 including the vite plugin for Craft this stopped working. The HMR for CSS & JS files are working fine though. Normally you get a notification in the terminal on save saying:

11:18:34 AM [vite] page reload templates/index.twig

It is now empty or after multiple saves the number of times you saved but doing no reload

11:18:34 AM [vite] 
11:18:34 AM [vite] (x2)

sidenote: I'm also noting that after saving the vite.config.js file i'm getting the error:

client.ts:203          GET http://siteurl.nitro/__vite_ping 404 (Not Found)

To reproduce

1. nitro ssh
2. npm run dev
3. save a twig file from the templates folder

Expected behaviour

After hitting save in a .twig file reloading the browser

Versions

• Plugin version: 4.0.0-beta.4
• Craft version: Craft Pro 4.0.1
• PHP version: 8.0.17

Description

HUnless I have misunderstood the setup process and some of my settings are incorrect, I believe the strpos values need to be reversed. Hard to believe that nobody has hit this yet, so I suspect I am the problem, if so sorry for the noise...

When debugging here, my $path never gets beyond this continue.

strpos(string $haystack, string $needle)

before:

if (strpos($path, $manifestKey) === false) {

after:

if (strpos($manifestKey, $path) === false) {

This change does appear to serve the correct assets, though comes with a likely unrelated issue:

Uncaught SyntaxError: 15
    at Jo (vendor.d63320e8.js:1)

Describe the bug

My production build outputs no assets. It seems to be working fine if I revert the commit below. Resolving issue where assets never served for production builds

Versions

• Plugin version: 1.0.19
• Craft version: 3.7.26

We've found the 30s cache of DEVMODE_CACHE_DURATION to be pretty slow (and annoying) for local dev via https://github.com/nystudio107/craft-plugin-vite/blob/2f3338d9f60c194e739533efc6bbc3f66e9fdf05/src/helpers/FileHelper.php#L38

This causes a delay when starting/stopping the dev server due to the cached result for fetching whether the dev server is running or not. Thinking this might be configurable in some fashion?

I've setup a local environment and everything is working as expected except that auto reloading isn't happening whenever twig files are modified. CSS and Javascript files are all loaded with HMR as expected so this is only browser reload. The vite.config.js was pulled straight from your repo (link below).

https://github.com/nystudio107/craft/blob/craft-vite/buildchain/vite.config.js

I've attempted to modify the settings passed into VitePlugin, but haven't been able to get it to work.

Any ideas on what I could start looking at to find the issue?

Versions

• Plugin version:1.0.17
• Craft version:3.6.4

Description

In our projects we use https://github.com/symfony/dotenv to manage our env vars.

Symfony Dotenv parses .env files to make environment variables stored in them accessible via $_SERVER or $_ENV.

By default symfony/dotenv does not use putenv: https://github.com/symfony/dotenv/blob/6.1/Dotenv.php#L59-L70

App::env() is a little more forgiving. It checks:

• $_SERVER[$name]
• getenv($name)
• defined($name)

Describe the bug

The plugin uses two "DEV_MODE" & "VITE_PLUGIN_DEVSERVER" env variables. And not there values but juste the presence of the variable

Expected behaviour

It should only take "useDevServer" in config/vite.php

Versions

• Plugin version: 1.0.3
• Craft version: 3.6.12

Hi,

I'm trying to get a setup where i can use the craft.vite.register to only load in an external file (library) when needed, on the whole this is working ok(ish) but i'm running into a few issues i'm hoping you can help with.

In the vite.config.js file i have this in the build options: rollupOptions: { input: { app: root+'/src/js/app.js', htmx: 'htmx.org', splide: '@splidejs/splide', }, }

now in a twig partial i add this {{ craft.vite.register("node_modules/htmx.org/dist/htmx.min.js") }} and it works fine both with the devServer and in production.

First question: I haven't been able to figure out how or if possible to modify the key in the the manifest file to use the value from the rollupOptions above instead of using the full location. So ideally i'll like to use {{ craft.vite.register("htmx.org") }} - if this is not possible to do via vitejs options is it possible to tweak this plugin to allow for partial matches on the manifest keys?

This also leads onto another issue. When referencing the Splide lib: {{ craft.vite.register("node_modules/@splidejs/splide/dist/js/splide.js") }} this works on the devServer, but not in production. When built the manifest uses the esm version and therefore this full location it not in the manifest file. - This would be solved with the ability to use partial matches.

Second question: When I update the location to match the one in the manifest file to test it out. The file loads (apparently) but the global object which the lib is providing (Splide) which works in the devServer is not to be found in production. - I know this nothing to do with this plugin, but i hoping you may have come across this issue before and know how to resolved it?

Thanks