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