x-magic and x-directive

[JeremyJaydan]

An x-magic and x-directive directive could be useful shortcuts for drop-in components.

With this magic directive example, there could be a magic $modal function that takes in arguments for the modal to show.

Modal Example

<!-- Modal -->
<div
  x-magic:modal="(msg => {
    open = true;
    message = msg;
  })"
  x-data="{
    open: false,
    message: '',
    close(){
      open = false;
      message = '';
    }
  }"
  x-show="open"
  x-cloak
>
  <p x-text="message"></p>
  <button @click="$dispatch('modal-confirm'); close();">confirm</button>
  <button @click="$dispatch('modal-cancel'); close();">cancel</button>
</div>

<!-- Modal Toggle -->
<button
  @click="$modal('Are you sure you want to delete this?')"
  @modal-confirm.window="console.log('confirmed!')"
  @modal-cancel.window="console.log('cancelled!')"
>
  delete this
</button>

Another example is a notification system for user events that could be registered as a magic $feedback function to show messages.

Feedback Example

<!-- feedback messages -->
<ul
  x-magic:feedback="(message => messages.push(message))"
  x-data="{ messages: [] }"
>
  <template x-for="message in messages">
    <li x-text="message"></li>
  </template>
</ul>

<!-- add a message to feedback messages -->
<button @click="$feedback('click!')">click me!</button>

---

With the directive directive, an example could be a dropdown component using an x-toggle directive.

Dropdown Example

<!-- dropdown -->
<div>
  <!-- dropdown toggle -->
  <div x-toggle>Account</div>

  <!-- dropdown contents -->
  <div
    x-data="{ open: false }"
    x-directive:toggle="(el => {
      el.addEventListener('click', () => {
        open = !open;
      });
    })"
    x-show="open"
    x-collapse
  >
    <a href="#">Profile</a>
    <a href="#">Settings</a>
    <a href="#">Logout</a>
  </div>
</div>

Another directive example could be an x-tooltip directive for easily customizable tooltips.

Tooltip Example

<!-- tooltip directive -->
<label x-tooltip="'Password must be more than 0 characters.'">
  Password
</label>

<!-- tooltip -->
<div
  x-data="{ message: '', show: false }"
  x-directive:tooltip="((el, { expression }, { evaluate }) => {
    message = evaluate(expression);
    el.addEventListener('pointerenter', () => {
      el.appendChild($el);
      show = true;
    });
    el.addEventListener('pointerleave', () => {
      show = false;
    });
  })"
  x-show="show"
  x-cloak
>
  <span x-text="message"></span>
</div>

---

Above are just examples (haven't tested them).

What do you think?

[SimoTod]

It's already possible to define magic helpers and directives in a script tag so I'm not sure if that improves the DX.

In your example, the magic helper and new directive are not called in the same component where they are defined which is a bit odd. If they are not scoped, it will be hard to explain to other devs: if you define a directive that way and you use the directive before that component, it will break and people will raise a lot of bug reports.

Another observation is that a custom directive is likely to have several lines of code which won't be too readable on an html tag.

[JeremyJaydan]

In your example, the magic helper and new directive are not called in the same component where they are defined which is a bit odd.

With the magic examples that's the point, to be able to communicate between elements outside of the scope through magic.

In terms of it breaking, ideally the magics and directives would be registered before it walks the tree but also have access to the scope of the element its defined in.

Another observation is that a custom directive is likely to have several lines of code which won't be too readable on an html tag.

That's what makes alpine great, being able to copy and paste fully functional html components. I feel this would bring that to extensions too.

---

I'm not sold on the directives myself but I thought may as well write some examples since they're a big part of extending Alpine. I'm more sold on creating magics via directives.

Currently events would be my go-to for ad-hoc implementation like this, by listing on the window for events. I think adding magics using directives and using events together might be a more expressive way of writing component logic.