watch() function does not trigger in prod build

[mStirner]

Does not work after npm run build nor in npm run preview

E.g: "Enable background gardient" setting

[mStirner]

Thats a bug in vue v3.2.31: vuejs/core#5707

[mStirner]

In v3.2.45 watcher does not work any more.
Even in dev environment.

[mStirner]

https://github.com/OpenHausIO/playground/tree/main/vue-watch-test

[mStirner]

Use a workaround with a proxy handler?

  mounted() {
    console.log("Mounted, watch settings");

    this.settings = new Proxy(this.settings, {
      set(target, prop) {
        console.log("Settings proxy", prop);

        if (!target.groupItems) {
          target.groupRoomItems = false;
          target.groupEndpointItems = false;
          target.groupDeviceItems = false;
        }

        if (target.showGradientBackground) {
          document.getElementById("app").classList.remove("bg-dark");
          document.getElementById("app").classList.add("gardien-background");
        } else {
          document.getElementById("app").classList.add("bg-dark");
          document.getElementById("app").classList.remove("gardien-background");
        }

        routes.forEach((route) => {
          route.visible = target[`show${route.name}Button`];
        });
        return true;
      },
    });
}

The quick test above did not work.

[mStirner]

Test with:

Reflect.set(target, propertyKey, value)
Reflect.set(target, propertyKey, value, receiver)

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Reflect/set

[mStirner]

    this.settings = new Proxy(this.settings, {
      set(target, prop, value, receiver) {
        console.log("Settings proxy", prop);

        let result = Reflect.set(target, prop, value, receiver);

        if (!target.groupItems) {
          Reflect.set(target, "groupRoomItems", false, receiver);
          Reflect.set(target, "groupEndpointItems", false, receiver);
          Reflect.set(target, "groupDeviceItems", false, receiver);
        }

        if (target.showGradientBackground) {
          document.getElementById("app").classList.remove("bg-dark");
          document.getElementById("app").classList.add("gardien-background");
        } else {
          document.getElementById("app").classList.add("bg-dark");
          document.getElementById("app").classList.remove("gardien-background");
        }

        routes.forEach((route) => {
          route.visible = target[`show${route.name}Button`];
        });

        return result;
      },
    });

Works in dev the same as .watch(...) but not in production.

[mStirner]

Todo: test the setting stuff in store.jsmain.js instead of the watch callback.

[mStirner]

pinia.use(({ store }) => {
    if (store.$id === "settings") {

        // listen for changes
        // `.watch()` in Settings.vue does not work.
        // see #42
        store.$subscribe((mutation, state) => {

            if (!store.groupItems) {
                store.groupRoomItems = false;
                store.groupEndpointItems = false;
                store.groupDeviceItems = false;
            }

            if (store.showGradientBackground) {
                document.getElementById("app").classList.remove("bg-dark");
                document.getElementById("app").classList.add("gardien-background");
            } else {
                document.getElementById("app").classList.add("bg-dark");
                document.getElementById("app").classList.remove("gardien-background");
            }

        });

        // initial background settings
        if (store.showGradientBackground) {
            document.getElementById("app").classList.remove("bg-dark");
            document.getElementById("app").classList.add("gardien-background");
        } else {
            document.getElementById("app").classList.add("bg-dark");
            document.getElementById("app").classList.remove("gardien-background");
        }

    }
});

Does the trick.