Allow accessing outer scope from within getters and setters

[calebporzio]

No description provided.

[calebporzio]

Hey @SimoTod - can you take a look at this contribution?

Currently, if you define a getter or setter in your x-data, you can't access properties from parent x-data's. This addition corrects the scoping on getters and setters.

Here's an example (it's the test in the PR):

<div x-data="{ foo: 'bar' }">
    <div x-data="{
        get bob() {
            return this.foo
        }
    }">
        <h1 x-text="bob"></h1>
    </div>
</div>

Currently "bob" will be undefined. After this PR, it will be 'bar'

My hesitations with it are mainly around adding extra complexity to that system and potentially extra performance overhead? Shouldn't be much though. Thoughts?

[calebporzio]

Btw, I know I merged this, but I'll hold off on tagging until you tell me you dig it

[SimoTod]

I'll have a look soon 👍

[SimoTod]

@calebporzio It looks useful. The only thing to notice is that you are binding and overriding the function every time.
For example the second time, a getter would be already bound to the right context but you bind it again.
This is probably negligible in the bigger schema but a bound function is a wrapper around the original function so each time you are adding an indirection and it gets slightly slower (we are talking about microseconds I believe). I'm not sure if it could reach a tipping point in a component that gets called hundreds of times.

[calebporzio]

@SimoTod - great call, at your recommendation I updated the code to only bind once, then it will leave the getter alone

68094c1

Look good to you?

[SimoTod]

@calebporzio it looks good 👍