v2.1.1

Added

• The ability to reference just the method reference in an event handler:

// Before
<div x-data={ foo(e) { console.log(e) } }>
  <button x-on:click="foo($event)">log event</button>
</div>
// After
<div x-data={ foo(e) { console.log(e) } }>
  <button x-on:click="foo">log event</button>
</div>

Fixed

• IE 11 build was broken #241
• Fix the way ":value"s are bound to input type checkboxes #232
• Support ALL boolean attributes for binding #229
• Be more explicit about x- attributes, currently xx-data was even working #234

v2.1.0

Fixed

• Swapped out the hand-rolled reactivity engine for Salesforce's observable-membrane package #230
• If an element registers a global event listener (like x-on:click.window), it will be removed when the element is removed from the DOM
• Add open to list of "boolean" attributes for data binding

v2.0.2

Fixed

• For (item, index, group) in items, index and group weren't being made available to elements inside an x-for <template> tag. Now they are #208

<div x-data="{ items: ['foo'] }">
    <template x-for="(item, index) in items">
        <div>
            <h1 x-text="items.indexOf(item)"></h1>
            // Same as...
            <h2 x-text="index"></h2>
        </div>
    </template>
</div>

• Using x-for and x-if in conjunction (<template x-for="..." x-if="...">) resulted in odd behavior. It is now fully possible and supported #208

<div x-data="{ items: ['foo', 'bar'], show: false }">
    <button @click="show = ! show"></button>

    <template x-if="show" x-for="item in items">
        <span x-text="item"></span>
    </template>
</div>

v2.0.0

Removed

• x-created and x-mounted in favor of x-init
  For x-created behavior, use x-init. For x-mounted behavior, return a callback from x-init

Before

<div x-data x-created="doSomething()">
...
<div x-data x-mounted="doSomething()">

After

<div x-data x-init="doSomething()">
...
<div x-data x-init="() => { doSomething() }">

v1.12.0

Added

• x-show.transition API

# Default to scale .95->1, opacity 0->1, cubic-bezier(0.4, 0.0, 0.2, 1), 150ms in, 75ms out
x-show.transition
# Only transition opacity
x-show.transition.opacity
# Only transition in
x-show.transition.in
x-show.transition.out
# Only transition scale
x-show.transition.scale
# Customize scale
x-show.transition.scale.95
# Set Duration (automatically sets the "out" duration to half the in)
x-show.transition.duration.150ms
# If you don't like this, you can do this:
# Note: if both "in" AND "out" are applied, they are treated as two
# seperate transition setting groups. Full flexibility.
x-show.transition.in.duration.150ms.out.duration.150ms
# Set origin
x-show.transition.origin.top
# Set multiple origins
x-show.transition.origin.top.left
# All of these settings can be combined to create something rediculous like this:
x-show.transition.in.opacity.duration.150ms.out.opacity.scale.80.duration.500ms.origin.bottom.right

v1.11.1

Fixed

• Nesting x-show's was broken.

v1.11.0

Added

• Parent elements with x-show, that have children with x-show AND transitions, will wait for the child transitions to be finished before hiding themselves. You can override this with: x-show.immediate. #177

v1.10.1

Fixed

• .once event listener modifier wasn't honoring new return false ability of listeners.

v1.10.0

Added

• Returning false from an event handler will "preventDefault" now @click="return confirm()" #162

Fixed

• Refactored the core observability proxy #163

Big thanks to @SimoTod, these updates were both him completely.

v1.9.8

Fixed

• Don't transition elements in that are already shown when Alpine re-evaluates the DOM after a data update #160