fix(runtime-core): ensure that binding.instance in custom directive hooks properly exposes properties on closed instances (fix: #5018)

[LinusBorg]

For closed instances (those crreated with <script setup> or a normal setup function in which expose() has been called), we currently expose a different proxy ("exposeProxy") for i.e. refs.

This proxy provides access to the public instance methods provided by Vue and the explicitly exposed custom properties.

With this PR we now also expose this same exposeProxy to custom directives in binding.instance so that custom directives can access exposed properties correctly.

Edit: I moved this to p4- important as I realized that this is currently working in dev with script-setup, but breaking in prod, which is - bad.

fix: #5018

[Liwoj]

Question: This fix does seem to also block the directive from using properties defined on globalProperties
Is this intentional ?

context

@LinusBorg

[LinusBorg]

I'd say so, yes.

This fix was necessary to fix the problem explained in the description, and I believe conceptually, it makes sense that custom directives get access to only he same interface as components would get with a template ref.

Looking at the linked context you provided:

This really seems like a core of the issue. But I doubt this is intentional. What is the point of globalProperties if they are not exposed by default ?

Well, globalProperties aren't "exposed by default" in script setup / setup() either. you need a composable to access them in Quasar (useQuasar()).

However I agree that the workaround mentioned in this issue is not great DX. I think what it comes down to:

• For "normal" components, custom Directives can use instance.nameOfGlobalProperty. this is convenient.
• for components using script setup, that's not possible right now since they are closed by default.
• should we:
  • A) make globalProperties available on the exposeProxy or
  • B) provide custom directives with a way to use injections in its hooks (like through composables such as useQuasar()?

A) would be easier to do I think, while B) would be more in line with what I personally think is better conceptually - go for injections rather than global properties to access global/shared state and behavior.

This is a discussion unrelated to / bigger than this PR, so feel free to bring it to the surface in its own issue.

[Trinovantes]

Related issue: #5002

[Tofandel]

@LinusBorg
I think we should do both A and B

A: Because it's a regression (in a minor nonetheless) and should be fixed
B: Because it's much better conceptually and there is no reason not to add this possibility so that we can avoid the use of globals

[mertsincan]

Hi,
We are having a similar issue with custom directives in PrimeVue. Related issues;
primefaces/primevue#2454
primefaces/primevue#2533

[mylemans]

Same issue still @ primevue, it cannot see '$primevue' and has to be exposed again per-sfc file ...