Custom $parent Magic Property

[Jagadish056]

I’m trying to create a custom $parent magic property inspired by the Nesting Components. Here’s my current implementation:

Alpine.magic('parent', (el) => (depth = 1, node = el) => {
    while (depth-- && node) node = node.parentNode
    return node
})

However, I encountered an issue:

$parent // 🚫 Not expected! callback
$parent() // ✅ Expected! node
$parent(2) // ✅ Expected! node
$parent(10) // ✅ Expected! null
...
$parent(1, document.getElementById('myDiv')) // ✅ Working!

• $parent returns the callback instead of the expected value when called directly.
• $parent() works as expected, and $parent(2) or $parent(10) also work correctly.
• $parent(1, document.querySelector('#myDiv')) works fine and returns the parent node of id myDiv element

Is there a way to modify this magic property to work when called without parentheses, like $parent, without returning the callback itself?

Thanks in advance!

[SimoTod]

Sadly no. It's just standard javascript, you can't have something that it's a callback and a value at the same time.
Are you sure that you want to add your logic on the html structure though. The component gets just couple to a specific snippet of html which is going to be a pain to maintain.
Or are you trying to implement something to get the parent component like Livewirea and you need the function to count the nodes? If it's the latter, you can return the value directly and use Alpine.closestDataStack(el.parentNode)

[SimoTod]

You can. if it works for you as you'll be the one maintaining it.

$data returns a proxy object but it's not as magic as the one you want to implement. The implementation of the $data magic and Alpine.$data are different (although they internally use the same code).

It could quickly go out of control and become a big object as you add more features and proxy are usually tricky to debug when something goes wrong but again if you are comfortable with it, it's your software.

I used Alpine.evaluate in the html just as a way to prove that it works, if you want a direct access to $data, you can do as the first example, add an if and always return the proxied element. You'll need to manually do it for other magics if you are expecting to use them with this syntax -> $parent.$whatever.

I advise you to start small and understand what all lines are doing though without trying to copy a fully flagged example otherwise you'll need to ask more questions later on.

[Jagadish056]

Honestly, I’m not very familiar with Proxy, so I’m not sure about the pros and cons of using it. That’s why I’m exploring alternative approaches. Do you have any suggestions for a different way to achieve this?

[SimoTod]

Not sure. You are asking a variable to act as a value and as a function at the aame time.

Alpine does something like that in some directives but it's manually checking, after the variable is evaluated, if the type is function and call it.

You don't have that level of control because you can hook into Alpine internals and when you start accessing properties without the right syntax, everything will start falling apart: https://codepen.io/SimoTod/pen/rNEvmBp

[SimoTod]

you can maybe do it by writing your own evaluator and replace the one used by Alpine but it's probably even harder.

[ekwoka]

I'd honestly take a step back to the "what problem are you actually trying to solve?"

Since it doesn't seem to me like you're solving a real problem.