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

[Lit] Fix hydration not having the same reactive values as server #6080

Merged
merged 8 commits into from Feb 1, 2023

Conversation

e111077
Copy link
Contributor

@e111077 e111077 commented Jan 31, 2023

fixes #5777

Changes

  • Adds a clientEntrypoint to Lit that sets props on the client
  • Adds defer-hydration attribute to defer hydration until we have set props on client

Testing

Changed the props to be different from default value in the e2e test

Docs

This is a bugfix. Makes Lit integration work as intended.

@changeset-bot
Copy link

changeset-bot bot commented Jan 31, 2023

🦋 Changeset detected

Latest commit: f3530b2

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

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 pkg: astro Related to the core `astro` package (scope) pkg: lit Related to Lit (scope) pkg: integration Related to any renderer integration (scope) labels Jan 31, 2023
@e111077 e111077 changed the title [Lit] Fix hydration not having the same reactive values at hydration [Lit] Fix hydration not having the same reactive values as server Jan 31, 2023
@e111077 e111077 marked this pull request as ready for review February 1, 2023 04:54
@e111077 e111077 requested a review from matthewp February 1, 2023 04:59
const isReactiveProperty = name in Ctr.prototype;
const isReflectedReactiveProperty = Ctr.elementProperties.get(name)?.reflect;

// Only defer hydration if we are setting a reactive property that cannot
Copy link
Contributor

Choose a reason for hiding this comment

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

love these comments


// Only defer hydration if we are setting a reactive property that cannot
// be reflected / serialized as a property.
shouldDeferHydration ||= isReactiveProperty && !isReflectedReactiveProperty;
Copy link
Contributor

Choose a reason for hiding this comment

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

I think you might be the first to add logical or assignments to our codebase.

@matthewp matthewp merged commit 0db2204 into withastro:main Feb 1, 2023
@astrobot-houston astrobot-houston mentioned this pull request Feb 1, 2023
matthewp pushed a commit that referenced this pull request Feb 3, 2023
)

* Fix lit hydration not having the same reactive values

* add changeset

* add clientEntrypoint to package exports

* update tests

* add changeset

* only add defer-hydration when strictly necessary

* remove second changest

* fix test typos
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) pkg: integration Related to any renderer integration (scope) pkg: lit Related to Lit (scope)
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Lit Element loses prop state for subsequent renders when rendered as island
2 participants