defstudio / vite-livewire-plugin Goto Github PK

I'm kind of certain that a full refresh is taking place in Livewire v3 right now!

Can someone double check it, please?

If it works, can you share your entire setup for a fresh laravel installation?

Hello Team defstudio,

first, I would like to say thank you for this great plugin! 🏆

When I follow the installation steps for the plugin, I get this error message back:

failed to load config from /Users/BOB/Dev/PHP/Laravel/PROJECT/vite.config.js
error when starting dev server:
TypeError: livewire is not a function
    at file:///Users/BOB/Dev/PHP/Laravel/PROJECT/vite.config.js.timestamp-1683899540373-e3c526847558a.mjs:14:5
    at ModuleJob.run (node:internal/modules/esm/module_job:193:25)

I have another (older) Laravel project that works just fine with the given instructions. I noticed that package.json now is of type=module and that the postcss.config is now export default { instead of module.exports = {, but I do not know if that is the reason.

My current vite.config.js looks like this:

import {defineConfig} from 'vite';
import laravel from 'laravel-vite-plugin';
import livewire from '@defstudio/vite-livewire-plugin';

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

Package.json

{
    "private": true,
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "@alpinejs/focus": "^3.10.5",
        "@defstudio/vite-livewire-plugin": "^1.1.0",
        "@tailwindcss/forms": "^0.5.2",
        "@tailwindcss/typography": "^0.5.0",
        "alpinejs": "^3.0.6",
        "autoprefixer": "^10.4.7",
        "axios": "^1.1.2",
        "laravel-vite-plugin": "^0.7.5",
        "postcss": "^8.4.14",
        "tailwindcss": "^3.1.0",
        "vite": "^4.0.0"
    }
}

Laravel: 10.10.1
Jetstream: 3.2.0
Livewire: 2.12.3
Alpine.js: 3.12.1

When I have a livewire full page component and I reference named slots, changes to the contents of the slot don't get hot reloaded properly.

Greetings,

The following are the only versions I managed to get Livewire hot-reloads working with:

• [email protected]
• [email protected]
• @defstudio/[email protected]

And this is how I configured the vite.config.js file:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import livewire from '@defstudio/vite-livewire-plugin';

export default defineConfig({
    plugins: [
        laravel([
            'resources/css/app.css',
            'resources/js/app.js',
        ]),
        {
            name: 'blade',
            handleHotUpdate({ file, server }) {
                if (
                    file.endsWith('.blade.php') &&
                    !file.includes('/livewire/')
                ) {
                    server.ws.send({
                        type: 'full-reload',
                        path: '*',
                    });
                }
            },
        },
        livewire({
            refresh: ['resources/css/app.css', 'resources/js/app.js'],
        }),
    ],
});

I had to downgrade them and used Freek's solution because I have no idea about accounting for this in the new versions:

files in /livewire/ should be excluded from blade hot reload.

Can you please teach me how? 🙃

hello i have a full-page component like this :

    protected Product $product;

    public function mount(Product $product): void
    {
        $this->product = $product;
    }

the product will inject to the component using the laravel route model binding.

but when i use this plugin after any change it will show me 500 error :
Typed property ****::$product must not be accessed before initialization
the poroblem here is that this plugin can not handle route model binding on protected attribute on full-page components.

Steps

Here's a slimmed down repo I made for demo purposes based off the default laravel-9 installation.

• Create new laravel+livewire+vite+tailwind project, add this plugin

• Sail up, sail npm run dev, go to example-app.test

• You should see a simple label and text area

• Enter text in textarea from browser, then make a code update inside show-posts.blade.php changing h2.innerText

from Make a post. to Make a post!!!

• Livewire component updates without clearing the textarea (yay)

• Add a tailwindcss class that didn't exist when you started build

• <h1 class="text-3xl my-2"> to <h1 class="text-3xl my-2 text-[#FF0000]">

• Livewire component updates, the HTML on the page changes, and the new class is on the H1 element (yay)

• BUG: Tailwind did not rebuild and app.css has no such .text[#FF0000] class (boo)

• Restart your npm run dev
• Page reloads and text is now red

It appears reloads don't happen properly (or pages break) when using this with Volt. Is this expected to work? (Specifically volt anonymous components)

Is there any work on Vite 5 support? Otherwise I can open a pull request.