Opting out from proxying globally

[azygis]

Is it possible to opt-out the specific types from making proxies automatically, without littering the markRaw calls everywhere the instance is created? We had numerous issues with OpenLayers, all of which are solved by removing proxies for whatever gets added to the features in the map, but that way the amount of markRaw calls is increasing.

Asked ChatGTP, it suggested using app.config.globalProperties.$reactiveTransform, which I'm not confident about since I can't find such a name anywhere in the repository. There's some documentation about removed reactivity transform feature but even there no such property is mentioned. Checked the code in all older tags too.

[skirtles-code]

If the types are using classes then you might be able to use markRaw on the prototype:

class Example {}

markRaw(Example.prototype)

• Playground

That does seem to work in the Playground.

I'm not aware of a hook or mechanism that you can use to tell Vue not to add proxies to specific types, other than markRaw.

The suggestion to use reactivity transforms seems unrelated to your question. Reactivity transforms were for allowing refs to be used without having to write .value explicitly, they didn't remove proxies.

[azygis]

Reactivity transforms were for allowing refs to be used without having to write .valiue explicitly, they didn't remove proxies.

That's one of the reason why I thought AI went haywire there. Full suggested code looks like this:

import { createApp, reactive, markRaw } from 'vue';
import * as ol from 'openlayers';

// Create a custom reactivity transform
function customReactivityTransform(value) {
  // Check if the value is an instance of any openlayers class
  if (value instanceof ol.Map || value instanceof ol.View || value instanceof ol.Layer) {
    return markRaw(value);
  }
  return reactive(value);
}

const app = createApp({
  data() {
    return {
      // Example usage
      map: new ol.Map({
        // map configuration here
      }),
      view: new ol.View({
        // view configuration here
      }),
      layer: new ol.Layer({
        // layer configuration here
      })
    };
  }
});

// Use the custom reactivity transform globally
app.config.globalProperties.$reactiveTransform = customReactivityTransform;

app.mount('#app');

At first I was very surprised and excited when I got this piece since it seemed like it was supposed to do exactly what I wanted the way I wanted, but hopes die soon.

Thanks for the prototype suggestion, will try that next week!