For consideration: Compile to Alpine.js

[mandx]

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>

[surjithctly]

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.

[sbrow]

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! :)

[sbrow]

I am currently working on a pull request for this very feature! Check it out here

[sbrow]

This issue can now be closed 🎉