Laravel plugin keeps full refreshing the page when refresh is disabled

[fabio-ivona]

• Laravel Vite Plugin Version: 0.5.2
• Laravel Version: 9.19.0
• Node Version: 16.15.0
• NPM Version: 8.11.0
• Host operating system: Linux
• Web Browser & Version: Chrome 103.0.5060.134
• Running in Sail / Docker: Docker

Description:

It seems that setting refresh: false doesn't disable full reloads on blade files changes

Steps To Reproduce:

this is my vite.config.js

import {defineConfig} from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    server: {
        host: '0.0.0.0',
        port: 3000,
    },
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: false,
        })
    ],
});

and this is the result if I change one of my blade files:

Peek.2022-08-01.17-52.mp4

am I missing something in the configuration?

[jessarcher]

Hey @fabio-ivona, thanks for reporting this.

I've been able to replicate the issue starting from version 0.5.0 onward when we switched to Vite 3.

I'll see if I can figure out what's going on.

[fabio-ivona]

@jessarcher if it is useful for debugging:

when refresh = false; , full refreshes are triggered only by resources/views/** changes,

app/View/Components/** and routes/** are (correctly) excluded from full reload.

Also, overriding refresh paths with another directory, i.e.

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: 'resources/lang/**',
        })
    ],
});

enables full refresh if I change something in resource/lang but keeps triggering refreshes when blade file changes

[fabio-ivona]

the full reload seems triggered by tailwind

if I disable tailwind in postcss.config.js no full refresh are triggered

also, full refresh is triggered in Vite updateModules function (ref) because propagateUpdate returns true here when app.css is updated by tailwind

hope this can help

edit: this is the commit that introduced this
vitejs/vite@d97b33a

[jessarcher]

Good find @fabio-ivona! I've also confirmed that the issue exists even when the code for the refresh feature in this plugin is completely removed.

I don't think there's anything we can do in this plugin to resolve it, and I see that you've raised the issue upstream, so I'm going to close this one. All the best in getting it resolved!

[fabio-ivona]

Yep, I'll try to sort it out with Vite team, also will share the issue here so anyone can help with the solution

This new vite "feature" not only completely broke our vite livewire plugin, but also makes livewire development more difficult than before, compelling you to refresh the page (and resetting components) even when changing some minor code

[fabio-ivona]

Just opened an issue vitejs/vite#9512

@jessarcher as this issue is detrimental for laravel-vite too, if you could have a look and add any information you find useful, will be great ❤️

[fabio-ivona]

@jessarcher one last update

it seems that the issue can be solved inside handleHotUpdate method, my plugin is fixed with these lines of code, just in case you want to fix the refresh=false behaviour of the laravel-plugin:

 handleHotUpdate(ctx) {
            if (minimatch(ctx.file, '**/storage/framework/views/**/*.php')) {
                return [];
            }

            for (const pattern of pluginConfig.watch) {
                if (minimatch(ctx.file, pattern)) {
                    refresh(ctx, pluginConfig)
                    return [];
                }
            }
        }

[timacdonald]

Thanks @fabio-ivona I've made a note of this and will take a look shortly.

[fabio-ivona]

Looking forward to see your code, keep me updated so I can adapt my plugin to not interfere with the laravel one

[timacdonald]

After seeing the the response (vitejs/vite#9512 (comment)) I'm not entirely sure we should attempt to "fix" the behaviour.

This is in place so that Tailwind JIT works - and if the browser doesn't do a refresh it seems like others things will break. Kinda just thinking we mark this one up as "expected behaviour" for the Laravel plugin at least.

Thoughts?

[fabio-ivona]

I agree with that behavior if you want to make it work with a plain html + tailwind:

If i add a tailwind class inside my html, the css is updated with the new rule, but I need to refresh the page to add the class to the html

Also, I agree with them that there should be a way to override the default behavior (i.e. for livewire components), but I think it is a vite related issue

The main issue is that it could be counterintuitive setting refresh=false here and experience a full reload when html is changed

It could be overridden with a fix similar to the one I made on the livewire plugin, but we should coordinate in order to overlap each other with the fix