mitosis
mitosis copied to clipboard
BuilderIO
For consideration: Compile to Alpine.js
Alpine.js offers you the reactive and declarative nature of big frameworks like Vue or React at a much lower cost.
You get to keep your DOM, and sprinkle in behavior as you see fit.
Think of it like Tailwind for JavaScript.
Note: This tool's syntax is almost entirely borrowed from Vue (and by extension Angular). I am forever grateful for the gift they are to the web.
A small preview (taken for the README):
Dropdown/Modal
<div x-data="{ open: false }">
<button @click="open = true">Open Dropdown</button>
<ul
x-show="open"
@click.away="open = false"
>
Dropdown Body
</ul>
</div>
Tabs
<div x-data="{ tab: 'foo' }">
<button :class="{ 'active': tab === 'foo' }" @click="tab = 'foo'">Foo</button>
<button :class="{ 'active': tab === 'bar' }" @click="tab = 'bar'">Bar</button>
<div x-show="tab === 'foo'">Tab Foo</div>
<div x-show="tab === 'bar'">Tab Bar</div>
</div>
Yup. I support this as well.
In the current HTML implementation the JS become messy on many interactions. Alpine.js integration will be a super cool addition.
Thank you.
I can't speak for the "average" Alpine.js user, but I use Alpine.js quite extensively in the PHP based Laravel > Livewire > Alpine.js stack, and for Alpine support to be truly useful to me, Mitosis would need to be able to output the component in two separate files:
// SomeComplicatedComponent.js
export default SomeComplicatedComponent(props) {
return {
foo: 'bar',
};
}
{{-- some-complicated-component.blade.php --}}
<div x-data="someComplicatedComponent(props)">
Some Content <span x-text="foo" />
<div>
AFAIK, Mitosis can't yet do this, and I would rank that issue higher than this one. Of course, simple components can Inline the js portion (see below), which may be of use to many people; but in Laravel that code doesn't get bundled, which gets real messy when you want to start importing packages.
{{-- some-complicated-component.blade.php --}}
<div x-data="{ foo: 'bar' }">
Some Content <span x-text="foo" />
<div>
TL;DR I would love to see Alpine.js added to the roster, but one step at a time, and I think the step that would most benefit Mitosis would be to allow more than one output file for a component before trying to add Alpine support (Since other frameworks like React, Angular, and Vue can also benefit from that improvement).
Keep up the awesome work! :)
