Usage with volt?

[deanmcpherson]

Just spitballing ideas here - but if there were a way to;

1. Use this with volt functional style Livewire
2. A vite plugin to extract ts/js from a blade file itself

Then you could conceivably make a single file Livewire react/vue component that defines and exposes it's own API layer/data requirements

With folio this would be really similar to next/remix style page components

It'd be really cool to be able to write volt functions in single files regardless of whether they're Livewire/alpine/react/vue/whatever

Can you think of any reason this wouldn't work?

[ijpatricio]

Hey Dean!

Only reason I can think of is my limited knowledge 😄

But I do love the boldness and thinking out of the box ❤️

Is this something you would like to put your hands on and contribute?

[deanmcpherson]

I had a play with this today - only gotchas so far is I still haven't got vite playing ball perfectly (it's kinda working but breaks when I import react components via js), and render on Volt/Component is `final`, so I just removed the final blocker locally to see if it'd work and it looks like it would 🤷‍♂️ On the upside vscode was happy to treat a script tag in a blade file as typescript, so it looks like it'd be somewhat usable if it did work

…

On Mon, 20 May 2024, 4:58 pm Joao Patricio, ***@***.***> wrote: Hey Dean! Only reason I can think of is my limited knowledge 😄 But I do love the boldness and thinking out of the box ❤️ Is this something you would like to put your hands on and contribute? — Reply to this email directly, view it on GitHub <#11 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAVFHPX5OWELQBATIJASO6TZDGNIHAVCNFSM6AAAAABH6XHNQWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCMJZG44TONZWGM> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[deanmcpherson]

OK, I got this working;

Source: https://github.com/deanmcpherson/react-in-livewire-example
Demo: https://scenic-star-slvqcmdwqyh7.vapor-farm-f1.com

It essentially allows you to call Mingle::volt() in a volt blade file, and it will automatically compile out the first script tag.

E.g.

<?php

use function Livewire\Volt\{state};

Mingle::volt();

state([
    'hello' => 'world',
    'count' => 1,
]);

$makeItGoBoom = fn() => dd('This is dd');
$doubleIt = function() {
    $this->count *= 2;
};
?>
<script>
import {useState} from 'react';
import Button from '@/Button';

function render(props) {
    const doubleDown = () => {
        props.wire.doubleIt()
    }
    return <div className=" border p-4 rounded-lg mt-2">

       Hello {props.wire.hello} from react!
            <div>
                <button className="bg-red-200 m-2 p-2" onClick={() => {
                    props.wire.makeItGoBoom();
                }}>Go boom</button>
            </div>
            <div>
                <button onClick={doubleDown}>Double it! {props.wire.count}</button>
            </div>
            <Button />
        </div>
}
</script>

[ijpatricio]

Hey @deanmcpherson

This is AWESOME!! ❤️

I'm actually not a Volt user, but it does make all sense to also support it.

I'm just a little swamped with tasks, but I'll take that repo for a spin, and hopefully I can understand enough to also support it - I've never done a Vite plugin.

Thank you, I'll ping back soon

[deanmcpherson]

Thanks!

I think there's a few pieces in here, I'm not sure if mingle is even the right place the auto-extracting-inline-component voodoo I've got running

On the simpler side, you can also just call Mingle::volt("resources/js/blah.jsx"); and have it render like a standard mingle component without any plugin shenanigans

[cryptoforu]

I made it with Vuejs and everything works normal. I used Volt class based anonymous component and just put empty div inside blade directive. Something like this

`use Ijpatricio\Mingle\Concerns\InteractsWithMingles;
use Ijpatricio\Mingle\Contracts\HasMingles;
use Livewire\Volt\Component;
new class () extends Component implements HasMingles {
public $count = 0;
use InteractsWithMingles;

public function component(): string
{
    return 'resources/js/Counter/index.js';
}

public function mingleData()
{
    return [
        'count' => $this->count
    ];
}

public function increment()
{
    $this->count++;
}

} `

Now just typical blade

<div> @volt('counter') <div></div> @endvolt </div>

Use Vuejs component like you would normaly do

There is just small issue that you should handle. HasMingle trait doesnt have return type on render function like Volt has (mixed). Youll get and error but it is easy fix, just set return type. It would be good for author to do that.

[ijpatricio]

Hello everyone @deanmcpherson @cryptoforu

This seemed perfectly doable, so I went ahead and added that return type

To this day, I haven't used Volt 😅 Regular Livewire just hits me better, I guess I'm used to it over the years.

So I could feel more confident, would it be possible to see a reproduction repo of this?

• Volt functional api requires the Vite plugin to extract, right? Unless we call Mingle::volt("resources/js/blah.jsx"); ??
  How would that work? php file with the functions, and the jsx would live in another file?

• Volt class api -> it seems it's ready already?

[cryptoforu]

Like i said, class api works without problem with vuejs SFC. I even made it working with plugins, like VUE rtk query i vue laravel 18n. Sorry on my mobile now