Skip to content

Comments

Add test that asserts behavior for when we try to renderComponent into the same element multiple times#21075

Open
NullVoxPopuli wants to merge 7 commits intomainfrom
nvp/check-void-mAlex-usecase
Open

Add test that asserts behavior for when we try to renderComponent into the same element multiple times#21075
NullVoxPopuli wants to merge 7 commits intomainfrom
nvp/check-void-mAlex-usecase

Conversation

@NullVoxPopuli
Copy link
Contributor

@NullVoxPopuli NullVoxPopuli commented Feb 6, 2026

from the RFC: https://rfcs.emberjs.com/id/1099-rendercomponent/

Repeat calls to renderComponent with the same element will replace all contents on that element.

This is changed because implementation of the renderer did append (and it was easier)

@github-actions
Copy link
Contributor

github-actions bot commented Feb 6, 2026

Estimated Asset Sizes

Diff

--- main/out.txt	2026-02-10 02:24:22.000000000 +0000
+++ pr/./pr-21853935459/out.txt	2026-02-10 06:14:50.000000000 +0000
@@ -1,34 +1,34 @@
 ╔═══════╤═══════════╤═══════════╗
 ║       │ Min       │ Gzip      ║
 ╟───────┼───────────┼───────────╢
-║ Total │ 352.48 KB │ 203.69 KB ║
+║ Total │ 352.48 KB │ 203.64 KB ║
 ╚═══════╧═══════════╧═══════════╝
 
 ╔══════════════════════╤═══════════╤═══════════╗
 ║ @ember/*             │ Min       │ Gzip      ║
 ╟──────────────────────┼───────────┼───────────╢
-║ Total                │ 313.87 KB │ 181.83 KB ║
+║ Total                │ 313.87 KB │ 181.79 KB ║
 ╟──────────────────────┼───────────┼───────────╢
-║ -internals           │ 36.68 KB  │ 25.99 KB  ║
-║ application          │ 13.24 KB  │ 7.99 KB   ║
+║ -internals           │ 36.68 KB  │ 26.02 KB  ║
+║ application          │ 13.24 KB  │ 8.04 KB   ║
 ║ array                │ 13.05 KB  │ 7.54 KB   ║
 ║ canary-features      │ 304 B     │ 419 B     ║
-║ component            │ 2.05 KB   │ 1.63 KB   ║
+║ component            │ 2.05 KB   │ 1.59 KB   ║
 ║ controller           │ 1.96 KB   │ 1.45 KB   ║
 ║ debug                │ 11.73 KB  │ 8.14 KB   ║
 ║ deprecated-features  │ 31 B      │ 77 B      ║
 ║ destroyable          │ 561 B     │ 383 B     ║
 ║ enumerable           │ 259 B     │ 387 B     ║
-║ helper               │ 1.08 KB   │ 841 B     ║
+║ helper               │ 1.08 KB   │ 816 B     ║
 ║ instrumentation      │ 2.43 KB   │ 1.78 KB   ║
-║ modifier             │ 1.22 KB   │ 991 B     ║
+║ modifier             │ 1.22 KB   │ 993 B     ║
 ║ object               │ 35.98 KB  │ 22.1 KB   ║
 ║ owner                │ 159 B     │ 178 B     ║
-║ renderer             │ 630 B     │ 509 B     ║
-║ routing              │ 59.37 KB  │ 33.94 KB  ║
+║ renderer             │ 630 B     │ 503 B     ║
+║ routing              │ 59.37 KB  │ 33.93 KB  ║
 ║ runloop              │ 2.36 KB   │ 1.5 KB    ║
 ║ service              │ 1 KB      │ 858 B     ║
-║ template             │ 654 B     │ 535 B     ║
+║ template             │ 654 B     │ 501 B     ║
 ║ template-compilation │ 429 B     │ 366 B     ║
 ║ template-compiler    │ 123.33 KB │ 59.61 KB  ║
 ║ template-factory     │ 370 B     │ 385 B     ║

Details

This PRmain
╔═══════╤═══════════╤═══════════╗
║       │ Min       │ Gzip      ║
╟───────┼───────────┼───────────╢
║ Total │ 352.48 KB │ 203.64 KB ║
╚═══════╧═══════════╧═══════════╝

╔══════════════════════╤═══════════╤═══════════╗
║ @ember/*             │ Min       │ Gzip      ║
╟──────────────────────┼───────────┼───────────╢
║ Total                │ 313.87 KB │ 181.79 KB ║
╟──────────────────────┼───────────┼───────────╢
║ -internals           │ 36.68 KB  │ 26.02 KB  ║
║ application          │ 13.24 KB  │ 8.04 KB   ║
║ array                │ 13.05 KB  │ 7.54 KB   ║
║ canary-features      │ 304 B     │ 419 B     ║
║ component            │ 2.05 KB   │ 1.59 KB   ║
║ controller           │ 1.96 KB   │ 1.45 KB   ║
║ debug                │ 11.73 KB  │ 8.14 KB   ║
║ deprecated-features  │ 31 B      │ 77 B      ║
║ destroyable          │ 561 B     │ 383 B     ║
║ enumerable           │ 259 B     │ 387 B     ║
║ helper               │ 1.08 KB   │ 816 B     ║
║ instrumentation      │ 2.43 KB   │ 1.78 KB   ║
║ modifier             │ 1.22 KB   │ 993 B     ║
║ object               │ 35.98 KB  │ 22.1 KB   ║
║ owner                │ 159 B     │ 178 B     ║
║ renderer             │ 630 B     │ 503 B     ║
║ routing              │ 59.37 KB  │ 33.93 KB  ║
║ runloop              │ 2.36 KB   │ 1.5 KB    ║
║ service              │ 1 KB      │ 858 B     ║
║ template             │ 654 B     │ 501 B     ║
║ template-compilation │ 429 B     │ 366 B     ║
║ template-compiler    │ 123.33 KB │ 59.61 KB  ║
║ template-factory     │ 370 B     │ 385 B     ║
║ test                 │ 923 B     │ 627 B     ║
║ utils                │ 4.11 KB   │ 3.63 KB   ║
║ version              │ 55 B      │ 131 B     ║
╚══════════════════════╧═══════════╧═══════════╝

╔═════════════════╤══════════╤══════════╗
║ @glimmer/*      │ Min      │ Gzip     ║
╟─────────────────┼──────────┼──────────╢
║ Total           │ 38.61 KB │ 21.86 KB ║
╟─────────────────┼──────────┼──────────╢
║ destroyable     │ 2.78 KB  │ 1.38 KB  ║
║ encoder         │ 81 B     │ 171 B    ║
║ env             │ 38 B     │ 87 B     ║
║ global-context  │ 886 B    │ 545 B    ║
║ manager         │ 977 B    │ 627 B    ║
║ node            │ 175 B    │ 268 B    ║
║ opcode-compiler │ 1.11 KB  │ 905 B    ║
║ owner           │ 159 B    │ 202 B    ║
║ program         │ 252 B    │ 308 B    ║
║ reference       │ 548 B    │ 544 B    ║
║ runtime         │ 10.32 KB │ 5.21 KB  ║
║ tracking        │ 1.34 KB  │ 1.18 KB  ║
║ util            │ 1.94 KB  │ 1.6 KB   ║
║ validator       │ 15.75 KB │ 7 KB     ║
║ vm              │ 495 B    │ 569 B    ║
║ wire-format     │ 1.84 KB  │ 1.35 KB  ║
╚═════════════════╧══════════╧══════════╝
╔═══════╤═══════════╤═══════════╗
║       │ Min       │ Gzip      ║
╟───────┼───────────┼───────────╢
║ Total │ 352.48 KB │ 203.69 KB ║
╚═══════╧═══════════╧═══════════╝

╔══════════════════════╤═══════════╤═══════════╗
║ @ember/*             │ Min       │ Gzip      ║
╟──────────────────────┼───────────┼───────────╢
║ Total                │ 313.87 KB │ 181.83 KB ║
╟──────────────────────┼───────────┼───────────╢
║ -internals           │ 36.68 KB  │ 25.99 KB  ║
║ application          │ 13.24 KB  │ 7.99 KB   ║
║ array                │ 13.05 KB  │ 7.54 KB   ║
║ canary-features      │ 304 B     │ 419 B     ║
║ component            │ 2.05 KB   │ 1.63 KB   ║
║ controller           │ 1.96 KB   │ 1.45 KB   ║
║ debug                │ 11.73 KB  │ 8.14 KB   ║
║ deprecated-features  │ 31 B      │ 77 B      ║
║ destroyable          │ 561 B     │ 383 B     ║
║ enumerable           │ 259 B     │ 387 B     ║
║ helper               │ 1.08 KB   │ 841 B     ║
║ instrumentation      │ 2.43 KB   │ 1.78 KB   ║
║ modifier             │ 1.22 KB   │ 991 B     ║
║ object               │ 35.98 KB  │ 22.1 KB   ║
║ owner                │ 159 B     │ 178 B     ║
║ renderer             │ 630 B     │ 509 B     ║
║ routing              │ 59.37 KB  │ 33.94 KB  ║
║ runloop              │ 2.36 KB   │ 1.5 KB    ║
║ service              │ 1 KB      │ 858 B     ║
║ template             │ 654 B     │ 535 B     ║
║ template-compilation │ 429 B     │ 366 B     ║
║ template-compiler    │ 123.33 KB │ 59.61 KB  ║
║ template-factory     │ 370 B     │ 385 B     ║
║ test                 │ 923 B     │ 627 B     ║
║ utils                │ 4.11 KB   │ 3.63 KB   ║
║ version              │ 55 B      │ 131 B     ║
╚══════════════════════╧═══════════╧═══════════╝

╔═════════════════╤══════════╤══════════╗
║ @glimmer/*      │ Min      │ Gzip     ║
╟─────────────────┼──────────┼──────────╢
║ Total           │ 38.61 KB │ 21.86 KB ║
╟─────────────────┼──────────┼──────────╢
║ destroyable     │ 2.78 KB  │ 1.38 KB  ║
║ encoder         │ 81 B     │ 171 B    ║
║ env             │ 38 B     │ 87 B     ║
║ global-context  │ 886 B    │ 545 B    ║
║ manager         │ 977 B    │ 627 B    ║
║ node            │ 175 B    │ 268 B    ║
║ opcode-compiler │ 1.11 KB  │ 905 B    ║
║ owner           │ 159 B    │ 202 B    ║
║ program         │ 252 B    │ 308 B    ║
║ reference       │ 548 B    │ 544 B    ║
║ runtime         │ 10.32 KB │ 5.21 KB  ║
║ tracking        │ 1.34 KB  │ 1.18 KB  ║
║ util            │ 1.94 KB  │ 1.6 KB   ║
║ validator       │ 15.75 KB │ 7 KB     ║
║ vm              │ 495 B    │ 569 B    ║
║ wire-format     │ 1.84 KB  │ 1.35 KB  ║
╚═════════════════╧══════════╧══════════╝

@NullVoxPopuli NullVoxPopuli marked this pull request as ready for review February 6, 2026 21:59
@NullVoxPopuli NullVoxPopuli changed the title See what happens when we try to render in to an element more than once with different renderComponent calls Add test that asserts behavior for when we try to renderComponent into the same element multiple times Feb 6, 2026
kategengler
kategengler previously approved these changes Feb 6, 2026
@NullVoxPopuli NullVoxPopuli marked this pull request as draft February 6, 2026 22:07
@NullVoxPopuli
Copy link
Contributor Author

I think I need more tests -- I want to make sure updating renderComponents can update appropriately

if so, this could resolve a potentially contentious issue on the RFC (brought up by @void-mAlex and @lifeart , I think?)

since the current behavior is not what the RFC states, we could update the RFC and implement replace behavior.

I wrote that replace behavior would be the behavior because I thought it would be easier 🙈

@lifeart
Copy link
Contributor

lifeart commented Feb 9, 2026

I'm afrade replace behaviour is dangerous itself, because we don't know who owns "replaced" nodes, it may cause memory leaks. I think we should append by default, or renderBefore, renderAfter target node (as discussed in rfc)

@NullVoxPopuli
Copy link
Contributor Author

that makes sense to me and I'm happy with that direction

@NullVoxPopuli
Copy link
Contributor Author

I've added enough tests to assert append / sibling behavior -- however found a bug where if an update happens to the data used by the first (in DOM order) component, it gets moved to the bottom of the output element. This is probably very jarring if anyone has tried this usecase today.

@NullVoxPopuli NullVoxPopuli force-pushed the nvp/check-void-mAlex-usecase branch from 51489b7 to d35a8c9 Compare February 10, 2026 06:13
@NullVoxPopuli NullVoxPopuli marked this pull request as ready for review February 10, 2026 06:41
if (existing?.glimmerResult) {
let parentElement =
into instanceof Element ? (into as unknown as SimpleElement) : (into as Cursor).element;
let firstNode = existing.glimmerResult.firstNode();
Copy link
Contributor Author

Choose a reason for hiding this comment

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

the firstNode here is really the fix for the bug found be the second test in this PR

@NullVoxPopuli NullVoxPopuli dismissed kategengler’s stale review February 11, 2026 17:17

Big changes occurred since you're last review -- could you re-review?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants