Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[BUG] Directives in slots aren't resolved in the correct context #541

Open
KaelWD opened this issue Jan 31, 2022 · 1 comment · May be fixed by #638
Open

[BUG] Directives in slots aren't resolved in the correct context #541

KaelWD opened this issue Jan 31, 2022 · 1 comment · May be fixed by #638
Labels
bug Something isn't working

Comments

@KaelWD
Copy link
Contributor

KaelWD commented Jan 31, 2022

Reported in discord but it never went anywhere.

🐛 Bug description

https://vue-jsx-explorer.netlify.app/#%3CComp%3E%0A%20%20%7B%7B%0A%20%20%20%20default%3A%20()%20%3D%3E%20%3Cdiv%20v-foo%20%2F%3E%0A%20%20%7D%7D%0A%3C%2FComp%3E

If you run this you get Cannot read properties of undefined (reading 'deep') because the directive is being resolved in CompA instead of CompB

@yyx990803 said:

The problem is where the JSX compiler generates the resolveDirective call - it should be resolved in parent render function root scope: https://template-explorer.vuejs.org/#eyJzcmMiOiI8Q29tcD5cblx0PGRpdiB2LWZvby8+XG48L0NvbXA+Iiwib3B0aW9ucyI6eyJob2lzdFN0YXRpYyI6dHJ1ZSwiY2FjaGVIYW5kbGVycyI6dHJ1ZX19

🏞 Desired result

The directive should be resolved at the top level rather than inline. I'm not sure if this is even possible because JSX can be used anywhere so there isn't really an easy way to determine what the "render function root scope" is. Maybe slotFlags need to be disabled if a directive is used?

🚑 Other information

Kinda related, implicit default slots don't emit slotFlags:
implicit slot: https://vue-jsx-explorer.netlify.app/#%3CComp%3E%0A%20%20%3Cdiv%20v-foo%20%2F%3E%0A%3C%2FComp%3E
explicit slot: https://vue-jsx-explorer.netlify.app/#%3CComp%3E%0A%20%20%7B%7B%0A%20%20%20%20default%3A%20()%20%3D%3E%20%3Cdiv%20v-foo%20%2F%3E%0A%20%20%7D%7D%0A%3C%2FComp%3E
@KaelWD KaelWD added the bug Something isn't working label Jan 31, 2022
@KaelWD KaelWD mentioned this issue Jan 31, 2022
Closed
This was referenced Mar 29, 2023
Draft
Open
@decademoon
Copy link

decademoon commented Oct 10, 2024 •
edited
Loading

If a directive is manually imported and in scope then resolveDirective should not be used and the already-imported directive should just be referenced directly. I think the old JSX plugin (for Vue 2) did this?

e.g. something like:

import vTooltip from './directives/tooltip.js'

const vnode = <button v-tooltip="Hello">OK</button>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: deoptimize slots when a directive is used KaelWD/jsx-next
2 participants
@decademoon @KaelWD