Skip to content

feat: ensure behaviors connected prior to template rendering#6471

Merged
nicholasrice merged 5 commits intomasterfrom
users/nirice/ensure-behaviors-connected-prior-to-template-rendering
Oct 25, 2022
Merged

feat: ensure behaviors connected prior to template rendering#6471
nicholasrice merged 5 commits intomasterfrom
users/nirice/ensure-behaviors-connected-prior-to-template-rendering

Conversation

@nicholasrice
Copy link
Copy Markdown
Contributor

@nicholasrice nicholasrice commented Oct 25, 2022

Pull Request

📖 Description

This PR adjusts ElementController.connect() to change the order in which behaviors are rendered relative to the element template. Behaviors should be connected before templates are rendered so that they're able to support setting context for child / shadowed elements.

I've also moved where the ElementController sets isConnected to before behaviors are connected.
This was done so that behaviors can add other behaviors and have them be connected immediately. I reverted this change because it broke component expectations and it turns out that since we use a Map to store behaviors, the itterable keys update when behaviors add other behaviors, giving the desired behavior w/o moving the setIsConnected() call.

🎫 Issues

#6462

👩‍💻 Reviewer Notes

I wasn't exactly sure when the Controller should set isConnected during connection and disconnection. I don't want to over-complicate that property, but I did consider expanding it to be 'connected', 'disconnected', 'connecting', 'disconnecting' to remove ambiguity on which state it is in.

📑 Test Plan

✅ Checklist

General

  • I have included a change request file using $ yarn change
  • I have added tests for my changes.
  • I have tested my changes.
  • I have updated the project documentation to reflect my changes.
  • I have read the CONTRIBUTING documentation and followed the standards for this project.

Component-specific

⏭ Next Steps

@github-actions
Copy link
Copy Markdown

github-actions bot commented Oct 25, 2022

📊 Tachometer Benchmark Results

Summary

clickTrigger10x

  • repeat-basic-splice-itemCount=1000&deleteCount=20&addCount=20: unsure 🔍 -5% - +23% (-5.08ms - +27.56ms)
    users/nirice/ensure-behaviors-connected-prior-to-template-rendering vs master Customize summary
  • repeat-nested-push-itemCount=100&addCount=20: unsure 🔍 -0% - +0% (-1.07ms - +1.01ms)
    users/nirice/ensure-behaviors-connected-prior-to-template-rendering vs master Customize summary
  • repeat-nested-reverse-itemCount=100: unsure 🔍 -1% - +1% (-2.21ms - +4.36ms)
    users/nirice/ensure-behaviors-connected-prior-to-template-rendering vs master Customize summary
  • repeat-nested-shift-itemCount=100: unsure 🔍 -6% - +2% (-14.57ms - +5.91ms)
    users/nirice/ensure-behaviors-connected-prior-to-template-rendering vs master Customize summary
  • repeat-nested-unshift-itemCount=100&addCount=20: unsure 🔍 -0% - +2% (-1.74ms - +6.52ms)
    users/nirice/ensure-behaviors-connected-prior-to-template-rendering vs master Customize summary

create10k

  • render-create10k: unsure 🔍 -1% - +1% (-2.44ms - +1.71ms)
    users/nirice/ensure-behaviors-connected-prior-to-template-rendering vs master Customize summary

createDelete5x

  • render-createDelete5x: unsure 🔍 -4% - +1% (-11.08ms - +2.10ms)
    users/nirice/ensure-behaviors-connected-prior-to-template-rendering vs master Customize summary

runFile1k

  • observable-runFile1k: unsure 🔍 -4% - +25% (-0.25ms - +2.03ms)
    users/nirice/ensure-behaviors-connected-prior-to-template-rendering vs master Customize summary

update10th

  • render-update10th: unsure 🔍 -1% - +1% (-1.45ms - +1.87ms)
    users/nirice/ensure-behaviors-connected-prior-to-template-rendering vs master Customize summary

usedJSHeapSize

  • observable-runFile1k: unsure 🔍 -1% - +0% (-0.44ms - +0.08ms)
    users/nirice/ensure-behaviors-connected-prior-to-template-rendering vs master Customize summary
  • render-create10k: unsure 🔍 -0% - +0% (-0.01ms - +0.01ms)
    users/nirice/ensure-behaviors-connected-prior-to-template-rendering vs master Customize summary
  • render-createDelete5x: unsure 🔍 -0% - +0% (-0.00ms - +0.13ms)
    users/nirice/ensure-behaviors-connected-prior-to-template-rendering vs master Customize summary
  • render-update10th: unsure 🔍 -0% - +0% (-0.01ms - +0.01ms)
    users/nirice/ensure-behaviors-connected-prior-to-template-rendering vs master Customize summary
  • repeat-basic-splice-itemCount=1000&deleteCount=20&addCount=20: unsure 🔍 -1% - +0% (-0.39ms - +0.07ms)
    users/nirice/ensure-behaviors-connected-prior-to-template-rendering vs master Customize summary
  • repeat-nested-push-itemCount=100&addCount=20: unsure 🔍 -0% - +0% (-0.02ms - +0.04ms)
    users/nirice/ensure-behaviors-connected-prior-to-template-rendering vs master Customize summary
  • repeat-nested-reverse-itemCount=100: unsure 🔍 -0% - +0% (-0.03ms - +0.06ms)
    users/nirice/ensure-behaviors-connected-prior-to-template-rendering vs master Customize summary
  • repeat-nested-shift-itemCount=100: unsure 🔍 -0% - +0% (-0.04ms - +0.03ms)
    users/nirice/ensure-behaviors-connected-prior-to-template-rendering vs master Customize summary
  • repeat-nested-unshift-itemCount=100&addCount=20: unsure 🔍 -0% - +0% (-0.00ms - +0.05ms)
    users/nirice/ensure-behaviors-connected-prior-to-template-rendering vs master Customize summary

Results

observable-runFile1k

runFile1k

VersionAvg timevs mastervs users/nirice/ensure-behaviors-connected-prior-to-template-rendering
master7.67ms - 9.21ms-unsure 🔍
-21% - +2%
-2.03ms - +0.25ms
users/nirice/ensure-behaviors-connected-prior-to-template-rendering8.49ms - 10.17msunsure 🔍
-4% - +25%
-0.25ms - +2.03ms
-

usedJSHeapSize

VersionAvg timevs mastervs users/nirice/ensure-behaviors-connected-prior-to-template-rendering
master48.83ms - 49.18ms-unsure 🔍
-0% - +1%
-0.08ms - +0.44ms
users/nirice/ensure-behaviors-connected-prior-to-template-rendering48.64ms - 49.01msunsure 🔍
-1% - +0%
-0.44ms - +0.08ms
-
render-create10k

create10k

VersionAvg timevs mastervs users/nirice/ensure-behaviors-connected-prior-to-template-rendering
master238.58ms - 241.44ms-unsure 🔍
-1% - +1%
-1.71ms - +2.44ms
users/nirice/ensure-behaviors-connected-prior-to-template-rendering238.14ms - 241.15msunsure 🔍
-1% - +1%
-2.44ms - +1.71ms
-

usedJSHeapSize

VersionAvg timevs mastervs users/nirice/ensure-behaviors-connected-prior-to-template-rendering
master47.26ms - 47.28ms-unsure 🔍
-0% - +0%
-0.01ms - +0.01ms
users/nirice/ensure-behaviors-connected-prior-to-template-rendering47.27ms - 47.28msunsure 🔍
-0% - +0%
-0.01ms - +0.01ms
-
render-createDelete5x

createDelete5x

VersionAvg timevs mastervs users/nirice/ensure-behaviors-connected-prior-to-template-rendering
master304.13ms - 314.11ms-unsure 🔍
-1% - +4%
-2.10ms - +11.08ms
users/nirice/ensure-behaviors-connected-prior-to-template-rendering300.33ms - 308.94msunsure 🔍
-4% - +1%
-11.08ms - +2.10ms
-

usedJSHeapSize

VersionAvg timevs mastervs users/nirice/ensure-behaviors-connected-prior-to-template-rendering
master54.15ms - 54.24ms-unsure 🔍
-0% - +0%
-0.13ms - +0.00ms
users/nirice/ensure-behaviors-connected-prior-to-template-rendering54.22ms - 54.30msunsure 🔍
-0% - +0%
-0.00ms - +0.13ms
-
render-update10th

update10th

VersionAvg timevs mastervs users/nirice/ensure-behaviors-connected-prior-to-template-rendering
master148.91ms - 151.11ms-unsure 🔍
-1% - +1%
-1.87ms - +1.45ms
users/nirice/ensure-behaviors-connected-prior-to-template-rendering148.98ms - 151.47msunsure 🔍
-1% - +1%
-1.45ms - +1.87ms
-

usedJSHeapSize

VersionAvg timevs mastervs users/nirice/ensure-behaviors-connected-prior-to-template-rendering
master47.27ms - 47.28ms-unsure 🔍
-0% - +0%
-0.01ms - +0.01ms
users/nirice/ensure-behaviors-connected-prior-to-template-rendering47.27ms - 47.28msunsure 🔍
-0% - +0%
-0.01ms - +0.01ms
-
repeat-basic-splice-itemCount=1000&deleteCount=20&addCount=20

clickTrigger10x

VersionAvg timevs mastervs users/nirice/ensure-behaviors-connected-prior-to-template-rendering
master113.41ms - 136.99ms-unsure 🔍
-20% - +3%
-27.56ms - +5.08ms
users/nirice/ensure-behaviors-connected-prior-to-template-rendering125.15ms - 147.73msunsure 🔍
-5% - +23%
-5.08ms - +27.56ms
-

usedJSHeapSize

VersionAvg timevs mastervs users/nirice/ensure-behaviors-connected-prior-to-template-rendering
master46.97ms - 47.30ms-unsure 🔍
-0% - +1%
-0.07ms - +0.39ms
users/nirice/ensure-behaviors-connected-prior-to-template-rendering46.82ms - 47.14msunsure 🔍
-1% - +0%
-0.39ms - +0.07ms
-
repeat-nested-push-itemCount=100&addCount=20

clickTrigger10x

VersionAvg timevs mastervs users/nirice/ensure-behaviors-connected-prior-to-template-rendering
master241.76ms - 243.30ms-unsure 🔍
-0% - +0%
-1.01ms - +1.07ms
users/nirice/ensure-behaviors-connected-prior-to-template-rendering241.81ms - 243.20msunsure 🔍
-0% - +0%
-1.07ms - +1.01ms
-

usedJSHeapSize

VersionAvg timevs mastervs users/nirice/ensure-behaviors-connected-prior-to-template-rendering
master51.52ms - 51.55ms-unsure 🔍
-0% - +0%
-0.04ms - +0.02ms
users/nirice/ensure-behaviors-connected-prior-to-template-rendering51.52ms - 51.56msunsure 🔍
-0% - +0%
-0.02ms - +0.04ms
-
repeat-nested-reverse-itemCount=100

clickTrigger10x

VersionAvg timevs mastervs users/nirice/ensure-behaviors-connected-prior-to-template-rendering
master322.72ms - 327.39ms-unsure 🔍
-1% - +1%
-4.36ms - +2.21ms
users/nirice/ensure-behaviors-connected-prior-to-template-rendering323.82ms - 328.44msunsure 🔍
-1% - +1%
-2.21ms - +4.36ms
-

usedJSHeapSize

VersionAvg timevs mastervs users/nirice/ensure-behaviors-connected-prior-to-template-rendering
master58.49ms - 58.55ms-unsure 🔍
-0% - +0%
-0.06ms - +0.03ms
users/nirice/ensure-behaviors-connected-prior-to-template-rendering58.50ms - 58.57msunsure 🔍
-0% - +0%
-0.03ms - +0.06ms
-
repeat-nested-shift-itemCount=100

clickTrigger10x

VersionAvg timevs mastervs users/nirice/ensure-behaviors-connected-prior-to-template-rendering
master242.07ms - 261.86ms-unsure 🔍
-2% - +6%
-5.91ms - +14.57ms
users/nirice/ensure-behaviors-connected-prior-to-template-rendering245.02ms - 250.26msunsure 🔍
-6% - +2%
-14.57ms - +5.91ms
-

usedJSHeapSize

VersionAvg timevs mastervs users/nirice/ensure-behaviors-connected-prior-to-template-rendering
master51.52ms - 51.57ms-unsure 🔍
-0% - +0%
-0.03ms - +0.04ms
users/nirice/ensure-behaviors-connected-prior-to-template-rendering51.51ms - 51.56msunsure 🔍
-0% - +0%
-0.04ms - +0.03ms
-
repeat-nested-unshift-itemCount=100&addCount=20

clickTrigger10x

VersionAvg timevs mastervs users/nirice/ensure-behaviors-connected-prior-to-template-rendering
master402.65ms - 408.16ms-unsure 🔍
-2% - +0%
-6.52ms - +1.74ms
users/nirice/ensure-behaviors-connected-prior-to-template-rendering404.71ms - 410.87msunsure 🔍
-0% - +2%
-1.74ms - +6.52ms
-

usedJSHeapSize

VersionAvg timevs mastervs users/nirice/ensure-behaviors-connected-prior-to-template-rendering
master51.48ms - 51.52ms-unsure 🔍
-0% - +0%
-0.05ms - +0.00ms
users/nirice/ensure-behaviors-connected-prior-to-template-rendering51.51ms - 51.54msunsure 🔍
-0% - +0%
-0.00ms - +0.05ms
-

tachometer-reporter-action v2 for Validate Benchmarks

if (this.needsInitialization) {
this.finishInitialization();
} else if (this.view !== null) {
this.view.bind(this.source);
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

For the previous issue, is it because this.view.bind(this.source) is called before key.connectedCallback && key.connectedCallback(this);? Silly question: is it possible this.needsInitialization is false, but this.boundObservables !== null?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Sorry, which previous issue?

No, that case is not possible. Both of those conditions can only be true before / during the first connection of the controller. However, it is possible that boundObservables is null while needsInitialization is true.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Sorry, I mean the "current issue". I got the answer now, thx :)

Copy link
Copy Markdown
Contributor

@EisenbergEffect EisenbergEffect left a comment

Choose a reason for hiding this comment

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

Looks good. Glad we reverted the isConnected change. I had a feeling that was going to break some things.

@nicholasrice nicholasrice merged commit 220cc7e into master Oct 25, 2022
@nicholasrice nicholasrice deleted the users/nirice/ensure-behaviors-connected-prior-to-template-rendering branch October 25, 2022 20:04
janechu pushed a commit that referenced this pull request Jun 10, 2024
* feature and tests

* Change files

* Set isConnected at end of connect call to preserve existing behavior

Co-authored-by: nicholasrice <nicholasrice@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

rfc: consider connecting behaviors *before* rendering component templates

5 participants