v1.8.1

Fixed

• x-if without transitions applied was behaving badly. (#82)

v1.8.0

Fixed:

• Allow colons in event names: x-on:custom:event="..." (#65)
• Support for "space" keydown modifier: x-on:keydown.space="..." (#69)
• Class attribute bindings (for string and array syntax) weren't merging. Now, Alpine matches the behavior of VueJS (#75)
• Some reactivity issues have been fixed by a pretty major refactor of the core dependancy tracking mechanism (#74)

v1.7.0

Added

• The ability to return a callback from x-init and it will run AFTER Alpine makes it's initial DOM updates (similar to the mounted() hook in VueJS, or the current, but now deprecated, x-mounted hook)

<div x-data="initialData()" x-init="init()">
    <span x-text="foo" x-ref="span">bar</span>
</div>
<script>
function initialData() {
    return {
        foo: 'baz',
        init() {
            this.$refs.span.innerText // 'bar'

            return () => {
                this.$refs.span.innerText // 'baz'
            }
        }
    }
}
</script>

Deprecated

• x-created and x-mounted are now deprecated and will be removed in 2.0

v1.6.2

Re-introduce x-init (sorry for the breaking change) - will remove in the next major release

v1.6.1

FIxed

• this.$el now returns raw DOM node instead of Proxy

v1.6.0

Upgrade Guide

• Convert all instances of x-init to x-created:

<div x-data="{ foo: 'bar' }" x-init="foo.bar = 'baz">
<!-- To: -->
<div x-data="{ foo: 'bar' }" x-created="foo.bar = 'baz">

Added

• x-created lifecycle hook (runs on initialization, but BEFORE dom elements initialized)
• x-mounted lifecycle hook (runs on initialization, and AFTER dom elements are initialized)
• $el magic accessor (access the root dom node of the component)

Fixed

• Data reactivity from inside extracted components and callbacks
• Made setting a value for x-data optional

Removed

• The x-init directive

v1.5.0

Added

• @ and : short syntaxes:

<button @click="..."></button>
<span :class="isOpen ? '' : 'hidden'"></span>

Fixed

• class bindings now support string output (already supported arrays and objects)

v1.4.0

Added

• $nextTick magic function:

<div x-data="{ fruit: 'apple' }">
    <button
        x-on:click="
            fruit = 'pear';
            $nextTick(() => { console.log($event.target.innerText) });
        "
        x-text="fruit"
    >
</div>

v1.3.1

Fixed

• $refs was causing "Invalid invocation" error - fixed now

v1.3.0

Added

• x-init expression:

<div x-data="{ foo: 'bar' }" x-init="foo = 'baz'">
  <span x-text="foo"></span>
</div>

(<span> will be set to "baz" initially)