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.

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

fix(define-custom-element): ensure async wrapper passes custom element callback to inner component This ensures event emits work for async coponent in custom elements. (fix #5599) #5601

Merged
merged 2 commits into from
Nov 11, 2022

Conversation

LinusBorg
Copy link
Member

This PR includes a different approach to trigger ceReload when defineCustomElement is used with defineAsyncComponent.

We now pass the callback to the inner component's vnode, and remove it from the async wrapper.

that way, the injections

Open Questions

I figured that this would also make a part of HMR code unecessary, but am not 100% sure this covers all bases.

Would need some guidance on this.

close #5599

@netlify
Copy link

netlify bot commented Mar 17, 2022

✔️ Deploy Preview for vuejs-coverage ready!

🔨 Explore the source changes: f4f8dba

🔍 Inspect the deploy log: https://app.netlify.com/sites/vuejs-coverage/deploys/6233adb26a7c180008e399eb

😎 Browse the preview: https://deploy-preview-5601--vuejs-coverage.netlify.app

@netlify
Copy link

netlify bot commented Mar 17, 2022

✔️ Deploy Preview for vue-sfc-playground ready!

🔨 Explore the source changes: f4f8dba

🔍 Inspect the deploy log: https://app.netlify.com/sites/vue-sfc-playground/deploys/6233adb2afaf540008b4ed4d

😎 Browse the preview: https://deploy-preview-5601--vue-sfc-playground.netlify.app/

@netlify
Copy link

netlify bot commented Mar 17, 2022

✔️ Deploy Preview for vue-next-template-explorer ready!

🔨 Explore the source changes: f4f8dba

🔍 Inspect the deploy log: https://app.netlify.com/sites/vue-next-template-explorer/deploys/6233adb268e1fd0008b65186

😎 Browse the preview: https://deploy-preview-5601--vue-next-template-explorer.netlify.app

@LinusBorg LinusBorg added need guidance The approach/solution in the PR is unclear and requires guidance from maintainer to proceed further. 🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. scope: custom elements labels Mar 17, 2022
Comment on lines 260 to 263
// this feels brittle but seems necessary to reach the node in the DOM.
await nextTick()
await nextTick()
await nextTick()
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can replace these await nextTick() calls with customElements.whenDefined(), which is a Promise that resolves when the element is defined, where the element is connected and the shadow root is available.

I locally verified this with your changeset.

Suggested change
// this feels brittle but seems necessary to reach the node in the DOM.
await nextTick()
await nextTick()
await nextTick()
await customElements.whenDefined('my-async-el-emits')

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TIL, thanks!

I will play with this. Think it still needs one nextTick to wait for Vue's update cycle to finish after the custom element has connected, but that would be normal.

@LinusBorg LinusBorg self-assigned this Mar 22, 2022
@yyx990803 yyx990803 merged commit 665f2ae into main Nov 11, 2022
@yyx990803 yyx990803 deleted the linusborg/fix-cereload-5599 branch November 11, 2022 04:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. need guidance The approach/solution in the PR is unclear and requires guidance from maintainer to proceed further. scope: custom elements
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Events are not emitted on async custom elements
3 participants