An option allowing not to wrap selected values into Proxy

[mityukov]

Hi, sometimes, you need to keep specific dependencies inside the element state, but you don't care to react on those objects' changes. Moreover, having them wrapped into Proxy causes errors in a 3rd-party library.

Example:

<div x-data="alpineMapPoint([{{$coords}}])">
    <a x-on:click="showMap">Open</a>

    <div x-show="visible" style="display:none;">
        <x-blade-modal ...>
            <div ref="map">...</div>
        </x-blade-modal>
    </div>
</div>

<script>
    function alpineMapPoint (initCoords) {
        return {
            visible: false,
            coords: initCoords,
            map: null, // <<< THIS
            placemark: null, // <<< AND THIS

            mapInit() {
                if (this.map) {
                    return; // the map is already initialized
                }

                this.map = new ymaps.Map(this.$refs.map, {
                    center: this.coords,
                    controls: ['zoomControl'],
                    zoom: 11
                }, {});

                if (this.coords) {
                    this.placemark = new ymaps.Placemark(this.coords);
                    this.map.geoObjects.add(this.placemark);
                }

                // ...
            },

            showMap() {
                this.visible = true;
                this.$nextTick(() => this.mapInit());
            }
        };
    }
</script>

^^^ with this example, I get some vague error from the Yandex.Maps library.

BUT, if I change this.map to window.map in the above code — all starts working as expected. So, to my understanding, the 3rd-party lib doesn't like Proxy-wrapped ymaps.Map instance. On the other side, I'd like to scope this Map inside specific component (because I have more than one of them on the same page) and for this I'd like to have an option to declare some of the data's properties as "non-reactive". Something like: x-data="{ visible: false, map: unreactive(null), ...}" (or, any other doable API).

Is it possible to add to alpine?

[mityukov]

Working example:

    function alpineMapPoint (initCoords) {
        return {
            visible: false,

            coords: initCoords,

            mapKey: null,

            mapInit() {
                if (this.mapKey !== null) {
                    return;
                }

                this.mapKey = '_' + Math.random().toString(36).substr(2, 9);
                window[this.mapKey] = {};

                window[this.mapKey].map = new ymaps.Map(this.$refs.map, {
                    center: this.coords,
                    controls: ['zoomControl'],
                    zoom: 11
                }, {});

                if (this.coords) {
                    window[this.mapKey].placemark = new ymaps.Placemark(this.coords);
                    window[this.mapKey].map.geoObjects.add(window[this.mapKey].placemark);
                }

                // ...
            }
        };
    }

The trick is to store map and placemark inside window[this.mapKey]. But this looks very 'work-aroundy' to me…

[alexej-d]

Any reasons you do not use the closure of your component for this?

function alpineMapPoint (initCoords) {
    let keys = {}
    return {
        visible: false,

        coords: initCoords,

        mapKey: null,

        mapInit() {
            if (this.mapKey !== null) {
                return;
            }

            this.mapKey = '_' + Math.random().toString(36).substr(2, 9);
            keys[this.mapKey] = {};

            keys[this.mapKey].map = new ymaps.Map(this.$refs.map, {
                center: this.coords,
                controls: ['zoomControl'],
                zoom: 11
            }, {});

            if (this.coords) {
                keys[this.mapKey].placemark = new ymaps.Placemark(this.coords);
                keys[this.mapKey].map.geoObjects.add(keys[this.mapKey].placemark);
            }

            // ...
        }
    };
}

[mityukov]

well, it's still very like using a window object…Instead of just storing the dependency in the "data", just like any other variables (Proxy is absolutely transparent, they say) — one needs to find strange ways, like keeping key in the data, and accessing real objects from some "outer" scope…

[alexej-d]

Yeah sure, but how else should one handle non-reactive variables apart from storing them in another scope? If you do not like the encapsulation from my example, you could also just attach your data do a unique key on the DOM-element to be able to access the data from any context like so this.$refs.map._mapdata = {...yourData}

[calebporzio]

Yeah, this makes sense. @vue/reactivity has a markAsRaw() function that allows you to achieve this.

So far Alpine is actually "reactivity engine" agnostic - in the sense that we aren't explicitly bound to Vue's implementation.

I say that because I don't want to expose something so specific to Vue.

Interested to hear if there is more demand for such a thing though

[ghost]

I'd also like to see this happen in some way.
I was fighting with monaco editor, because I wanted to have multiple tabs for it but I fell into an infinite loop as soon as I passed a Proxy to the already proxied editor's setModel method. I know that this is not an Alpine bug, but we shouldn't expect every 3rd party package to support proxies.

Here is a VERY simplified idea of what I'm talking about:
https://codesandbox.io/s/alpine-monaco-proxy-issue-ez7wu

I know that you can get around this by defining these tabs outside the Alpine component but then you can't use those variables in an x-loop for example or am I missing something?