$component of self has trouble about alpine-magic-helpers HOT 13 CLOSED

Hi @markfirmware. I think there's some confusion about how Alpine works (also considering the other issues you opened on the official repo).

<p x-text="foo"></p> <!-- this one by itself doesn't work, all alpine directives need to be wrapped in a component (x-data) -->

<div x-data="{foo: 'bar'}">
   <p x-text="foo"></p> <!-- this one works, default alpine behaviour -->
</div>

<div x-data="{foo: 'bar'}">
    <div x-data="{baz: 'bob'}">
        <p x-text="foo"></p> <!-- this one does not work, alpine can't see anything outside the component (element with x-data) and it doesn't have the concept of inheriting data from parent components -->
    </div>
</div>

<!-- but, using the magic helpers -->
<div x-data="{foo: 'bar'}">
    <div x-data="{baz: 'bob'}">
        <p x-text="$parent.foo"></p> <!-- this one works -->
    </div>
</div>

<div x-data="{foo: 'bar'}">
  ... 
</div>
<div x-data="{baz: 'bob'}">
   <p x-text="foo"></p> <!-- again, this one doesn't work, the only field you can see here out of the box is baz -->
</div>

<div x-id="mycomponent" x-data="{foo: "bar"}">
  ... 
</div>
<div x-data="{baz: 'bob'}" >
   <p x-text="$component('mycomponent').foo"></p> <!-- using magic helpers, this one works-->
</div>

I hope it makes things clearer. In both repo there are discussion tabs where you can ask questions, we tend to use those ones and only use issues for actual bugs. There is also a discord server you can join where other people can help with basic questions.

from alpine-magic-helpers.

Ok. I will let you close this or manage it as you see fit. See you in the discussions. Mark.

from alpine-magic-helpers.

The second example is a bit more complex.
Basically, you have 3 components and you built a circular reference between them.
From component 1 you refer component 3 and from component 3 you refer component 1. At that point, when you click on 1 and 3, the system start updates the component forever and it eventually freeze.

Not related to the reported bug but using events to communicate between components would probably be easier.
Also, if your goal is to create a select2 clone, maybe you can create a single component with all the required logic already incapsulated.

from alpine-magic-helpers.

$component() is to be used to accessing properties from outside of its own component scope, so for this you would just use x.

Can you make a Codepen showing your issue with the error being reported?

from alpine-magic-helpers.

$component() is to be used to accessing properties from outside of its own component scope, so for this you would just use x.

Can you make a Codepen showing your issue with the error being reported?

https://codepen.io/markfirmware/pen/poEdqRz

from alpine-magic-helpers.

The codepen works as expected. Could you please describe what the issue exactly is and how to reproduce it?

As a separate note, you don't need to use $component if you are already inside the scope of the right component. x-text="x" works just fine and it's more performant.

from alpine-magic-helpers.

I am using firefox on a debian digital ocean droplet. The codepen indicates script trouble that needs to stop or wait. Let me see if a fresh droplet or linode can reproduce.

from alpine-magic-helpers.

Thanks, I tried forefox and it actually freezes.

As we said at the beginning, you shouldn't use $component if you are already inside the right component context but we'll see if we can fix it or, at least, warn the user about circular references.

from alpine-magic-helpers.

No worries.

Note for the team. Regression happened in 4ef9ed6...f9e4a3b.
It seemed to work correctly before that refactoring.

from alpine-magic-helpers.

We could probably easily add a check if ($el === component.__x.$el) then bail but I'm curious whether there's an opportunity for some optimization though

from alpine-magic-helpers.

        <div
            x-id="order_1"
            x-data="{
                 input:'one select value',
                 click(evt) {
                      $component('selectApline').clickSelect('order_1', evt, [{'id':1,'name':'one'},{'id':2,'name':'two'},{'id':3,'name':'three'}]);
                 }
}"
            x-on:click='click($event.target)'>
            <span x-text="input"></span>
        </div>
        <div
            x-id="order_2"
            x-data="{
                 input:'two select value',
                 click(evt) {
                      $component('selectApline').clickSelect('order_2', evt, [{'id':1,'name':'111'},{'id':2,'name':'222'},{'id':3,'name':'333'}]);
                 }
}"
            x-on:click='click($event.target)'>
            <span x-text="input"></span>
        </div>
        <div
            x-id="selectApline"
            x-data="select({})">
            <template x-for="(it, index) in result" :key="index">
                <span x-text="it.name"
                    x-on:click="selected(`${it.name}`)"></span>
            </template>
        </div>

        <script>
            function select(config) {
                return {
                    result: [],
                    name: null,
                    selected: function (id) {
                        console.log(this.$component(`${this.name}`).input);
                        this.$component(`${this.name}`).input = id
                        console.log(`selected`);
                    },

                    clickSelect: function (n, t, d) {
                        console.log(n);
                        console.log(t);
                        console.log(d);
                        this.name = n
                        this.target = t
                        this.result = d
                        console.log(`click`);
                    },

                }
            }
        </script>

I created another

from alpine-magic-helpers.

That's right, but due to the css problem, I had to open the select listbox at the end of the body like select2.
However, I solved the css problem and made it a single component.

Now you know that there is also a way to do it as an event when component 1 communicates to component 3!

Thank you :)

from alpine-magic-helpers.

I don't think we need to be supporting circular references as that sort of defeats the purpose of using $component and adds way too much overhead that shouldn't be there. ie. it's better we let this break.

A PR to show a warning would be nice though if anyone wants to add some detection.

from alpine-magic-helpers.