fix(custom-element): Use asynchronous custom element nesting to avoid errors #9351

baiwusanyu-c · 2023-10-07T09:16:30Z

close: #9341
close: #8127

… errors

github-actions · 2023-10-07T09:18:10Z

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	90.5 kB (+342 B)	34.6 kB (+86 B)	31.2 kB (+71 B)
vue.global.prod.js	147 kB (+342 B)	54.1 kB (+81 B)	48.1 kB (+101 B)

Usages

Name	Size	Gzip	Brotli
createApp	49.6 kB	19.5 kB	17.8 kB
createSSRApp	53.2 kB	20.9 kB	19.1 kB
defineCustomElement	52.2 kB (+342 B)	20.3 kB (+89 B)	18.5 kB (+85 B)
overall	63.1 kB	24.5 kB	22.3 kB

packages/runtime-dom/src/apiCustomElement.ts

Co-authored-by: edison <daiwei521@126.com>

baiwusanyu-c · 2023-10-11T09:00:49Z

/ecosystem-ci run

vue-bot · 2023-10-11T09:14:00Z

📝 Ran ecosystem CI: Open

suite	result	latest scheduled
language-tools	✅ success	✅ success
nuxt	✅ success	✅ success
pinia	✅ success	✅ success
quasar	❌ failure	❌ failure
router	✅ success	✅ success
test-utils	✅ success	✅ success
vant	✅ success	✅ success
vite-plugin-vue	✅ success	✅ success
vitepress	✅ success	✅ success
vue-i18n	✅ success	✅ success
vue-macros	❌ failure	❌ failure
vuetify	✅ success	✅ success
vueuse	✅ success	✅ success
vue-simple-compiler	✅ success	✅ success

edison1105 · 2023-10-18T13:12:00Z

also fix #8127

yashha · 2023-12-14T12:21:58Z

@baiwusanyu-c
Found an issue with mounting custom elements within a vue subcomponent, that is rendered conditionally.
https://stackblitz.com/edit/vitejs-vite-eyrmms?file=package.json

baiwusanyu-c · 2023-12-14T12:32:17Z

I will take the time to check the issue

codspeed-hq · 2023-12-15T05:37:30Z

CodSpeed Performance Report

Merging #9351 will improve performances by 73.58%

_{Comparing baiwusanyu-c:bwsy/fix/CENestedAsync (c02daeb) with main (04d2c05)}

Summary

⚡ 1 improvements
✅ 52 untouched benchmarks

Benchmarks breakdown

	Benchmark	`main`	`baiwusanyu-c:bwsy/fix/CENestedAsync`	Change
⚡	`write reactive obj, read 1000 computeds`	68.6 ms	39.5 ms	+73.58%

baiwusanyu-c · 2023-12-15T06:00:06Z

@baiwusanyu-c Found an issue with mounting custom elements within a vue subcomponent, that is rendered conditionally. https://stackblitz.com/edit/vitejs-vite-eyrmms?file=package.json

Is your problem that <h1>Custom Component</h1> is not rendering after clicking the button?

yashha · 2023-12-15T09:14:04Z

@baiwusanyu-c Yes, the shadowroot of the custom element is staying empty, without the patch it is working

baiwusanyu-c · 2023-12-15T09:52:09Z

try again @yashha

yashha · 2023-12-15T11:05:07Z

@baiwusanyu-c
In the minimal project in stack blitz it is working now properly
https://stackblitz.com/edit/vitejs-vite-v7r9rs?file=patches%2F%40vue%2Bruntime-dom%2B3.3.7.patch

But in our project we have now bad performance in dev mode, we run in some kind of loop, I don't know whats the cause.

I get several of these:

Uncaught (in promise) out of memory 4
uncaught exception: out of memory
Uncaught out of memory

yashha · 2023-12-15T13:04:47Z

It was something on our side, we had a component without template tags only script tags, that caused the issue.

baiwusanyu-c · 2023-12-15T13:16:18Z

It should be that references cause memory usage. I will consider how to solve this problem.

# Conflicts: # packages/runtime-dom/__tests__/customElement.spec.ts

SavkaTaras · 2024-02-05T19:09:57Z

Hello @baiwusanyu-c and @edison1105 ,
I hope you are doing well.

Could you please review this and merge if possible? We ran into this issue as well, when wc imports wc within the slot.

Thank you,
Taras Savka

SavkaTaras · 2024-05-03T16:01:44Z

Hello @baiwusanyu-c @edison1105 @yyx990803 @LinusBorg ,
I hope you guys are doing well.

I am so sorry for bothering you all, but could you please take a look to see if this could be merged, and if so, please merge it? We are waiting on this PR.

Thank you again for all your great work,
Taras Savka

skirtles-code · 2024-06-06T19:58:47Z

packages/runtime-dom/__tests__/customElement.spec.ts

@@ -1,4 +1,5 @@
 import {
+  type Ref,


This seems to be duplicated.

skirtles-code · 2024-06-06T20:07:04Z

packages/runtime-dom/__tests__/customElement.spec.ts

+    })
+    test('async & multiple levels of nested custom elements', async () => {


We normally have a blank line between tests.

skirtles-code · 2024-06-06T20:38:12Z

packages/runtime-dom/src/apiCustomElement.ts

+      // The asynchronous custom element needs to call
+      // the resolveDef function of the descendant custom element at the end.
+      if (this._ce_children) {
+        this._ce_children.forEach(child => child._resolveDef())


I'm wondering about what happens if children are removed from the DOM:

Should we set this._ce_children back to null once we're done, so references to the children aren't retained indefinitely?

Do we need to check that the children haven't been removed while the parent was resolving?

Perhaps children should remove themselves from this array when they are removed from the DOM?

Here's an example. The async component has a child, which is removed before the async component resolves. But because the component is in this._ce_children it still gets mounted:

Playground - using this PR

The logging shows that the child is still mounted, which doesn't seem right.

I think it's also worth noting that there's a similar problem when the async component itself is removed. This problem already exists on main:

Playground - main

The problem in this second example is probably outside the scope of this PR, though maybe both of these examples could be fixed in the same way? I'm not sure.

close #8127 close #9341 close #9351 the fix is based on #9351 with reused tests

yyx990803 · 2024-08-06T18:21:19Z

Superseded by 37ccb9b which is based on this PR and reuses tests from this PR. Thanks!

fix(custom-element): Use asynchronous custom element nesting to avoid…

459afba

… errors

fix(custom-element): rename variable

9fd32ac

edison1105 reviewed Oct 7, 2023

View reviewed changes

packages/runtime-dom/src/apiCustomElement.ts Outdated Show resolved Hide resolved

chore: updated code

cfea662

edison1105 reviewed Oct 8, 2023

View reviewed changes

packages/runtime-dom/src/apiCustomElement.ts Outdated Show resolved Hide resolved

edison1105 reviewed Oct 8, 2023

View reviewed changes

packages/runtime-dom/src/apiCustomElement.ts Outdated Show resolved Hide resolved

baiwusanyu-c added 2 commits October 8, 2023 21:05

chore: updated code

3f89d3b

chore: updated code

b08616b

baiwusanyu-c requested a review from edison1105 October 8, 2023 13:21

edison1105 reviewed Oct 9, 2023

View reviewed changes

packages/runtime-dom/src/apiCustomElement.ts Outdated Show resolved Hide resolved

Update packages/runtime-dom/src/apiCustomElement.ts

c52fd83

Co-authored-by: edison <daiwei521@126.com>

edison1105 approved these changes Oct 9, 2023

View reviewed changes

baiwusanyu-c added the scope: custom elements label Oct 9, 2023

baiwusanyu-c added 2 commits October 21, 2023 19:54

Merge branch 'main' into bwsy/fix/CENestedAsync

b2be78c

Merge branch 'main' into bwsy/fix/CENestedAsync

38878ec

yashha mentioned this pull request Nov 6, 2023

Slotted Vue custom element children within async Vue custom elements error during instance creation #9341

Closed

baiwusanyu-c added 2 commits November 20, 2023 09:45

Merge branch 'main' into bwsy/fix/CENestedAsync

a6b472c

Merge branch 'main' into bwsy/fix/CENestedAsync

63e84d4

Merge branch 'main' into bwsy/fix/CENestedAsync

eb29fc7

chore: updated code

4063664

chore: updated code

965c12b

baiwusanyu-c requested a review from edison1105 December 15, 2023 09:51

baiwusanyu-c and others added 5 commits December 18, 2023 11:00

chore: updated code

473945a

[autofix.ci] apply automated fixes

c63a635

Merge branch 'main' into bwsy/fix/CENestedAsync

c02daeb

Merge remote-tracking branch 'origin/main' into bwsy/fix/CENestedAsync

acbf0b0

# Conflicts: # packages/runtime-dom/__tests__/customElement.spec.ts

[autofix.ci] apply automated fixes

959ba37

skirtles-code reviewed Jun 7, 2024

View reviewed changes

Merge branch 'main' into bwsy/fix/CENestedAsync

1ff5d82

yyx990803 added a commit that referenced this pull request Aug 6, 2024

fix(custom-element): delay mounting of custom elements with async parent

37ccb9b

close #8127 close #9341 close #9351 the fix is based on #9351 with reused tests

yyx990803 closed this Aug 6, 2024

baiwusanyu-c deleted the bwsy/fix/CENestedAsync branch August 8, 2024 09:20

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(custom-element): Use asynchronous custom element nesting to avoid errors #9351

fix(custom-element): Use asynchronous custom element nesting to avoid errors #9351

baiwusanyu-c commented Oct 7, 2023 •

edited

Loading

github-actions bot commented Oct 7, 2023 •

edited

Loading

baiwusanyu-c commented Oct 11, 2023

vue-bot commented Oct 11, 2023

edison1105 commented Oct 18, 2023

yashha commented Dec 14, 2023 •

edited

Loading

baiwusanyu-c commented Dec 14, 2023

codspeed-hq bot commented Dec 15, 2023 •

edited

Loading

baiwusanyu-c commented Dec 15, 2023

yashha commented Dec 15, 2023 •

edited

Loading

baiwusanyu-c commented Dec 15, 2023

yashha commented Dec 15, 2023 •

edited

Loading

yashha commented Dec 15, 2023

baiwusanyu-c commented Dec 15, 2023

SavkaTaras commented Feb 5, 2024 •

edited

Loading

SavkaTaras commented May 3, 2024

skirtles-code Jun 6, 2024

skirtles-code Jun 6, 2024

skirtles-code Jun 6, 2024

yyx990803 commented Aug 6, 2024

		})
		test('async & multiple levels of nested custom elements', async () => {

fix(custom-element): Use asynchronous custom element nesting to avoid errors #9351

fix(custom-element): Use asynchronous custom element nesting to avoid errors #9351

Conversation

baiwusanyu-c commented Oct 7, 2023 • edited Loading

github-actions bot commented Oct 7, 2023 • edited Loading

Size Report

Bundles

Usages

baiwusanyu-c commented Oct 11, 2023

vue-bot commented Oct 11, 2023

edison1105 commented Oct 18, 2023

yashha commented Dec 14, 2023 • edited Loading

baiwusanyu-c commented Dec 14, 2023

codspeed-hq bot commented Dec 15, 2023 • edited Loading

CodSpeed Performance Report

Merging #9351 will improve performances by 73.58%

Summary

Benchmarks breakdown

baiwusanyu-c commented Dec 15, 2023

yashha commented Dec 15, 2023 • edited Loading

baiwusanyu-c commented Dec 15, 2023

yashha commented Dec 15, 2023 • edited Loading

yashha commented Dec 15, 2023

baiwusanyu-c commented Dec 15, 2023

SavkaTaras commented Feb 5, 2024 • edited Loading

SavkaTaras commented May 3, 2024

skirtles-code Jun 6, 2024

Choose a reason for hiding this comment

skirtles-code Jun 6, 2024

Choose a reason for hiding this comment

skirtles-code Jun 6, 2024

Choose a reason for hiding this comment

yyx990803 commented Aug 6, 2024

baiwusanyu-c commented Oct 7, 2023 •

edited

Loading

github-actions bot commented Oct 7, 2023 •

edited

Loading

yashha commented Dec 14, 2023 •

edited

Loading

codspeed-hq bot commented Dec 15, 2023 •

edited

Loading

yashha commented Dec 15, 2023 •

edited

Loading

yashha commented Dec 15, 2023 •

edited

Loading

SavkaTaras commented Feb 5, 2024 •

edited

Loading