x-scope directive to allow object destructuring

[ProjektGopher]

Take the following example:

<div
    x-ref="tagPreview"
    x-show="tag.x && tag.y && tag.radius"
    x-on:mousedown="tag.dragging = true"
    x-on:mouseup="tag.dragging = false"
    x-on:mousemove="tag.dragging ? capturePosition : null"
    x-bind:style="{
        top: (tag.y - tag.radius) + 'px',
        left: (tag.x - tag.radius) + 'px',
        width: (tag.radius * 2) + 'px',
        height: (tag.radius * 2) + 'px',
    }"
    x-bind:class="{
        'absolute bg-transparent rounded-full border-4': true,
        'border-purple-600': tag.dragging,
        'border-pink-600': !tag.dragging,
    }"
></div>

Repeating tag. so many times here feels a bit redundant. Admittedly it's not the end of the world, but consider this:

<div
    x-ref="tagPreview"
    x-scope="{x, y, dragging} = tag"
    x-show="x && y && radius"
    x-on:mousedown="dragging = true"
    x-on:mouseup="dragging = false"
    x-on:mousemove="dragging ? capturePosition : null"
    x-bind:style="{
        top: (y - radius) + 'px',
        left: (x - radius) + 'px',
        width: (radius * 2) + 'px',
        height: (radius * 2) + 'px',
    }"
    x-bind:class="{
        'absolute bg-transparent rounded-full border-4': true,
        'border-purple-600': dragging,
        'border-pink-600': !dragging,
    }"
></div>

I think this could be kind of cool, but wanted to discuss it before spending time on a PR

Possible drawbacks:

• Descructuring could affect reactivity
• IDE could have issues understanding references
• Added difficulty using find/replace

[SimoTod]

You can easily have x-scope="tag" but I'm not sure it needs to be in the core

[ProjektGopher]

We could, yeah... but I feel like the native destructuring syntax is more descriptive. And sometimes we don't want to get every piece of data out of an object or array, we just want to pick a couple items out.

Using the native destructuring syntax would also be necessary for arrays, as we'd need to name the items. For example, x-scope="pattern" has no idea what to name what's being scoped, but x-scope="[find, replace] = pattern" would work just fine.

[SimoTod]

yeah, it's just impractical for how the alpine evaluator works. You might find yourself having to juggle with regexp because the native destructuring syntax will not work (you need to reassign those variables to a single object so you can create the additional scope context for that subtree). Doable but under the hood, it will not be destructuring.

[ProjektGopher]

Interesting. Thx for the insight