Open deanmcpherson opened 1 month ago
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?
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 https://github.com/ijpatricio/mingle/issues/11#issuecomment-2119797763, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAVFHPX5OWELQBATIJASO6TZDGNIHAVCNFSM6AAAAABH6XHNQWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCMJZG44TONZWGM . You are receiving this because you authored the thread.Message ID: @.***>
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>
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
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
Just spitballing ideas here - but if there were a way to;
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?