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 race condition with directive definitions #4375

Merged
merged 1 commit into from
Aug 22, 2022
Merged

Fix race condition with directive definitions #4375

merged 1 commit into from
Aug 22, 2022

Conversation

matthewp
Copy link
Contributor

Changes

  • This replaces a reverted PR: Ensure hydration scripts inside of slots render ASAP #4288
  • That PR attempted to ensure that directive scripts always came before the first island that needed them.
    • This idea was based on the flawed idea that would move those scripts up the rendering chain through state, but this resulted in scripts some times being placed in the middle of where attribute expressions go.
  • This is a new approach that accepts that some times an island will exist before the directive script is ready. When this happens listen to an event that fires when the directive script gets defined.
  • Closes TypeError Astro[this.getAttribute(...)] in Chrome #4286

Testing

E2E test added that recreates the problem.

Docs

Bug fix

@changeset-bot
Copy link

changeset-bot bot commented Aug 17, 2022

🦋 Changeset detected

Latest commit: bbcaa50

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 14 packages
Name Type
astro Patch
@e2e/astro-component Patch
@e2e/error-react-spectrum Patch
@e2e/error-sass Patch
@e2e/errors Patch
@e2e/hydration-race Patch
@e2e/lit-component Patch
@e2e/preact-component Patch
@e2e/react-component Patch
@e2e/solid-component Patch
@e2e/solid-recurse Patch
@e2e/svelte-component Patch
@e2e/e2e-tailwindcss Patch
@e2e/ts-resolution Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@github-actions github-actions bot added the pkg: astro Related to the core `astro` package (scope) label Aug 17, 2022
@github-actions
Copy link
Contributor

⚖️ Bundle Size Check

Latest commit: bbcaa50

File Old Size New Size Change
client:idle 178 B 224 B + 46 B
client:load 95 B 141 B + 46 B
client:media 198 B 245 B + 47 B
client:only 95 B 141 B + 46 B
client:visible 276 B 325 B + 49 B

Copy link
Contributor

@tony-sull tony-sull left a comment

Choose a reason for hiding this comment

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

lgtm

Astro[this.getAttribute('client') as directiveAstroKeys](
const directive = this.getAttribute('client') as directiveAstroKeys;
if(Astro[directive] === undefined) {
window.addEventListener(`astro:${directive}`, () => this.start(), { once: true });
Copy link
Contributor

Choose a reason for hiding this comment

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

nice and clean 👏

Choose a reason for hiding this comment

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

()=>this.start() may be simply passed as this.start to make it cleaner

@matthewp matthewp merged commit 5e82f6c into main Aug 22, 2022
@matthewp matthewp deleted the slot-race branch August 22, 2022 14:39
This was referenced Aug 22, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
pkg: astro Related to the core `astro` package (scope)
Projects
None yet
Development

Successfully merging this pull request may close these issues.

TypeError Astro[this.getAttribute(...)] in Chrome
3 participants