Access to alpine component in custom directive

[thomas07vt]

Is there a way to access the component scope inside a custom directive?

I am trying to add a method to component when a directive is present. When I try to access "this" inside the directive, or inside an evaluate function like this: evaluate(() => { this[method] = () => { console.log('thing'} ... })

I get a message like this: "_this is undefined"

This is basically want I want to achieve:
<div x-data x-mydirective @click="methodInjectedByDirective"></div>

is that possible?

[SimoTod]

Not in that way, you can hack it without evaluate if you use Alpine.closestRoot(el), getting the data from there and injecting the method but... I'm curious about the use case. If you don't want to redefine the same function in multiple components, you can use a global function or an alpine store.

[thomas07vt]

So Alpine.closestRoot(el) returns the dom element, so you are saying that I would need to parse the x-data value and inject the methods there? That wouldn't support using Alpine.data('..', () => ({})) declarations.

I am basically writing a bad version of livewire for rails, using just alpine and a simple ruby "component" library. So each time i render a component, I want to inject functions into the alpine component that correspond to server side methods. I want to support a few use cases for users write html:

1. They can write html without alpine component declarations:

<button @click="submit">Button</button>

Which I will take, and inject x-data into the top tag, so alpine will pick it up and fire submit() on a click event

2. They can write html that has their own alpine component:

  <div x-data="{ open: false }">
    <button @click="open = true">Open</button>
    <ul x-show="open"><li @click="someRemoteMethod">First</li></ul>
  </div>

In this case, I want to use the same x-data that the user supplied but inject my remote methods as well.

I realize that this is a strange use case, but I can't find a decent way to do this.

I can use x-init, but I get into the same situation where if x-init is user supplied, then I have to parse and merge in my functions.

Is there a way to inject methods using a custom directive or magic on a per component basis?

[SimoTod]

Right, so the short answer is yes https://codepen.io/SimoTod/pen/ZEyeGJg but (really important)...

• You need to be careful with your context. As you can see from the codepen (example 1 and 2), this is the window object while if use Alpine.closestRoot(el) you can access the dom element having x-data and from that point, you can access the underlying Alpine data context (that is not an official API though) so although they both work, they are slightly different.
• Alpine has access to parent scopes for free, if you define your remote context on the root component, you can access them even if users define their own x-data's (as long as they don't redefine the function).
• Replicating Livewire won't be a quick project, LIvewire has its own javascript and only uses Alpine for @entangle and $wire. You'll need to understand the Alpine source code and probably use tools like Alpine.clone and Alpine.mutateDom when updating the DOM from the server.
• You are asking your users to add a custom directive and then refer to the same directive in the click function, that's will bring you a headache (people will forget to add the custom directive and raise bugs, they will add multiple times the custom directive for the same component, etc). As I mentioned earlier, you can also build a plugin that will inject a store so people don't need to do 2 things for the same feature.

[thomas07vt]

Sorry I am not really following that codepen... which function are you injecting there? I don't see 2 examples either.

Replicating Livewire won't be a quick project

Yeah that is for sure :) ... I am just building a simple version for myself and don't really intend to build out a feature for feature livewire version for rails. I am actually trying to only use alpine and not really add any custom js apart from plugins.

You are asking your users to add a custom directive and then refer to the same directive in the click function

Not really, I am injecting the directive on the server side, so the user just needs to invoke a method that lives on their ruby object.

[SimoTod]

@thomas07vt Ops, I must have saved the answer to a different question over your example. Try refreshing now: https://codepen.io/SimoTod/pen/ZEyeGJg

[thomas07vt]

Thanks @SimoTod ! The Alpine.closestRoot(el)._x_dataStack[0][method] = () => {...} worked for me. I couldn't use the global this scope in the example I guess because I am using webpack to bundle this js code which apparently messes with the scope, but i would prefer to use the alpine component scope anyway.

Thanks again!