Extend inline definitions

[simonferndriger]

First, I just had inline definitions and additional external bindings, but the external were overwriting the inline defitions. So I tried to extend the inline definitions with a data definition but it did not work. Is there another/better way to do this? As an example, this would be the html tag and the js code:

HTML Tag
<a href="..." x-bind="$" x-data="a({ active }, { active: p.id === page.id })">

AlpineJS Code

  Alpine.data('a', (xclass, xdata) => ({
    $: {
      [':class'](){
        return {
          ...xclass,
          disabled: this.disabled
        };
      },
      ['@click'](){
        this.disabled = true;
        this.href = '#';
      },
      ['x-data'](){
        return {
          ...xdata,
          disabled: false,
        };
      },
    },
  }));

Additional issue

When I click on a link, and navigate back, the page is loaded from the cache, and the link is still disabled. I currently need to listen to beforeunload and reset disabled to false in order for it to work when the user navigates back...

[simonferndriger]

This is what I'm currently doing, but I consider it suboptimal:

  Alpine.data('a', (classes = {}) => ({
    $: {
      ['@beforeunload.window'](){
        this.disabled = false;
      },
      [':class'](){
        return { ...classes, disabled: this.disabled };
      },
      ['@click'](){
        this.disabled ?
          $event.preventDefault()
        :
          this.disabled = true
        ;
      },
    },
    disabled: false,
  }));

[ekwoka]

I can't tell what is going on here. What are these comment lines? they make it hard as heck to read.

What is it you're trying to do?

Why do you even need to disable the link?

[simonferndriger]

OK, I removed the comment lines - they help me structure the code better (if in the right color). I want to temporarily disable the link after it has been clicked, until the new page has been loaded. Normally, this happens very fast, but when you have installed a web app and left it open for a while, the service worker cache can kick in and take a few seconds to react.

So but in general I am wondering if there is a way to extend the inline declarations without having to import them since they seem to get overwritten by the external declarations.

[ekwoka]

I just don't know what you mean by "extend the inline declarations with external declarations"...

Do you mean like, having multiple Data objects and you want to merge them into a single one?

you can do something like

Alpine.data('merge', (...obj) => obj.reduce((out, in) => 
    Object.defineProperties(
      out, 
      Object.getOwnPropertyDescriptors(in)
    ), {})
)

This will properly handle getters/settings and such.

so like x-data="merge(dataDefinedSomewhere, { disabled: false })

I don't think that's how to solve your issue with the disabled.

I just wouldn't bother really with the link being disabled. Is it really doing work in a way that you need to block it?

[simonferndriger]

Full example explained

Ah, OK. Let me give you my current full length example. This is how I currently implemented it. It works, but it is not ideal, since the inline possibilites are very limited that way. I can't use active in the <img> tag anymore, for example.

<a class="big" :href="`.${path}`" x-bind="$" x-data="a({ active: p.id === page.id })" href="./">
 <img :alt="p.icon?.text" class="icon" :src="`/images/icons/${p.id === page.id ? 'white/' : ''}${p.icon?.name}.svg`">
</a>

---

Alpine.data('a', (classes = {}) => ({
$: {
  [':class'](){
    return { ...classes, disabled: this.disabled };
  },
  ['@click']($event){
    if(this.disabled){
      $event.preventDefault();
      return;
    }
    this.disabled = true
    setTimeout(() => this.disabled = false, 3 * 1000);
  },
},
disabled: false,
}));

Here the <a> would have it's own :class="{ active }" and x-data="{ active: ... }" attributes which would be overwritten (as far as I've tested it), when I additionally add the external defined functionality via x-data/x-bind. This overwriting of inline :class/x-data by referenced external definitions via x-data/x-bind is intended/inevitable, isn't it?

Why I need this additional/generic functionality

I need to give the user feedback that the link has been clicked and reduce possible unnecessary network traffic by disallowing multiple clicks (which is the natural user response when something does not react within ~600ms). Does this make sense?

[ekwoka]

Well, one issue you have here is that active don't be reactive, since you're just assigning it to true or false immediately on the data being defined, instead you should probably do

get active() { return p.id === page.id }

Is that the issue you're having?

An example done on https://awesomealpine.com/play would be quite helpful.

[simonferndriger]

Yes, you are right about losing reactiveness - but in that case, it's OK (it does not change anymore).

OK, here we go: https://awesomealpine.com/play?share=qtEs4lIKJdwP - does this help?

[ekwoka]

Okay, I get it now...yeah, its not straightforward, but https://awesomealpine.com/play?share=WCF7bC9r3S_B does work

[simonferndriger]

OK, so the ...data class bindings will not be reactive, but the example class binding will be? How about this part here: will it be reactive?

[ekwoka]

There's no reason to put x-data in there, you could use the merge thing I showed before if you want that kind of thing, and it won't be reactive either, since x-data is itself not reactive.

[simonferndriger]

Hm, but if I want to use the value of active inside the <a> as well, I do also need the data? It is not automatically assigned, as it looks from https://awesomealpine.com/play?share=12in_F7TidUz

[ekwoka]

https://awesomealpine.com/play?share=CdGT-adzSA_F

This works fine, it's still a bit awkward to me why you're going with this approach, but maybe I'm just the strange one.

[simonferndriger]

Aaaaaah, now I get it 😅 Thanks! Well, I use active to determine the displayed image url. It's easier that way than via css... but it's not usual, I know. 😉