If you are not subscribed to AlpineDay‘s newsletter I’ll try to summarize the key points from the last email that went out today. As you probably know already, Caleb is organising an event called Alpine Day where the V3 will be announced as well as many other goodies.

Here’s a sneak peeck from the V3.

Global Alpine Components

Before, if you wanted to re-use an x-data object, you had to put it in a global function and call it. Now, you can use Alpine.component() (only if you want that kind of thing):

Alpine V3 Sneak Peek
<div x-data="dropdown">
  ...
</div>

<script>
    Alpine.component('dropdown', () => ({
      open: false,
      toggle() { this.open = ! this.open }
    }))
</script>

Nested Components

Before, all x-data components were scoped to themselves. If you nested an Alpine component within another, you could NOT access the parent scope from that component. V3 scope will be inherited from parents. Just like standard JavaScript function scope. For example:

Alpine V3 Sneak Peek
<div x-data="{ foo: 'oof' }">
  <div x-data="{ bar: 'rab' }">
    <!-- Will output "oof" !--> 
    <span x-text="foo"></span>
  </div>
</div>

A Better x-init And $el

In Alpine V2, the $el magic property always returned the root DOM node of the component. This is silly in hindsight. Now in V3, $el always returns the current node it is referenced on:

Alpine V3 Sneak Peek
<div x-data="{ message: '' }">
  <div x-init="message = $el.textContent">Hello Subscribers!</div>
</div>

You may have noticed another simple improvement. In V3, you can add x-init to ANY element. Not just x-data component roots.

Alpine V3 Sneak Peek

And the process of upgrading to V3 should be a smooth one acording to Caleb:

If you’re scared that upgrading to V3 will take a bunch of time. Fear not! I’ve prioritized backwards compatibility, and the amount of breaking changes are surprisingly few. It shouldn’t take much time at all to upgrade.

Alpine V3 Sneak Peek

Acording cu alpineday.com we will recieve:

  • πŸ“¦ New Codebase
  • πŸ“œ New Docs
  • πŸ’Ύ New Site
  • πŸ’… New Branding
  • ✨ New Features
  • πŸ”Œ New Plugins

By this coming Tuesday we are expecting to see:

  • The alpineday.com new website
  • A finalized list of speakers & a schedule
  • A payment system set up for selling tickets to the event

For the website design was hired Jack McDade very well known in the Laravel community for his design works. Here’s a sneak peek from the upcoming website:

Stay tuned folks, I hope you are as excited as I am, keep an eye on alpineday.com and be ready to buy your ticket as soon as the sales open.

Spread the word!

Leave a Reply

Your email address will not be published. Required fields are marked *