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.

Sign up for GitHub

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

Jump to bottom

Improve nested and client:only hydration #3455

Merged
merged 15 commits into from
May 31, 2022
Merged

Improve nested and client:only hydration #3455

merged 15 commits into from
May 31, 2022

Conversation

natemoo-re
Copy link
Member

@natemoo-re natemoo-re commented May 26, 2022 •
edited
Loading

Changes

Testing

  • Adds a client:only e2e test
  • Adds framework nesting e2e tests for every framework

Docs

N/A

@changeset-bot
Copy link

changeset-bot bot commented May 26, 2022 •
edited
Loading

🦋 Changeset detected

Latest commit: 00ccc48

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

This PR includes changesets to release 10 packages
Name Type
@astrojs/preact Patch
@astrojs/react Patch
@astrojs/solid-js Patch
@astrojs/svelte Patch
@astrojs/vue Patch
astro Patch
@e2e/preact-component Patch
@e2e/react-component Patch
@e2e/solid-component Patch
@e2e/svelte-component 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 pkg: astro Related to the core `astro` package (scope) pkg: react Related to React (scope) pkg: integration Related to any renderer integration (scope) labels May 26, 2022
@github-actions
Copy link
Contributor

github-actions bot commented May 26, 2022 •
edited
Loading

⚖️ Bundle Size Check

Latest commit: ee3ee55

File Old Size New Size Change
events 0 B 398 B + 398 B
client:idle 516 B 996 B + 480 B
client:load 420 B 900 B + 480 B
client:media 531 B 1011 B + 480 B
client:only 420 B 900 B + 480 B
client:visible 620 B 1.09 KB + 496 B

@github-actions github-actions bot added pkg: solid Related to Solid (scope) pkg: svelte Related to Svelte (scope) pkg: vue Related to Vue (scope) labels May 26, 2022
@natemoo-re natemoo-re linked an issue May 26, 2022 that may be closed by this pull request
🐛 BUG: Loss of reactivity in Vue component (production only) #2530
Closed
@natemoo-re natemoo-re mentioned this pull request May 26, 2022
Closed
@natemoo-re natemoo-re linked an issue May 26, 2022 that may be closed by this pull request
🐛 BUG: client:only errors @ React, Vue, & Solid #3362
Closed
1 task
@natemoo-re natemoo-re changed the title WIP: improve nested, client:only hydration Improve nested and client:only hydration May 26, 2022
@natemoo-re natemoo-re marked this pull request as ready for review May 26, 2022 21:52
@matthewp
Copy link
Contributor

  • I like that this is done low-level with minimal file size increased. Think the improved UX justifies it.
  • I like all of the E2E tests.
  • Had one suggested code change.
  • Needs a changeset.

@github-actions github-actions bot added the pkg: preact Related to Preact (scope) label May 27, 2022
@natemoo-re natemoo-re mentioned this pull request May 27, 2022
Closed
@narration-sd narration-sd mentioned this pull request May 28, 2022
Closed
1 task
tony-sull
tony-sull approved these changes May 31, 2022
View reviewed changes
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! Really clean fix for the client:only bug and test coverage, and the events will come in handy down the road

@natemoo-re natemoo-re merged commit e9a77d8 into main May 31, 2022
@natemoo-re natemoo-re deleted the fix/nested-islands branch May 31, 2022 16:29
@github-actions github-actions bot mentioned this pull request May 31, 2022
Merged
@matthewp matthewp mentioned this pull request May 31, 2022
Closed
SiriousHunter pushed a commit to SiriousHunter/astro that referenced this pull request Feb 3, 2023
@natemoo-re @matthewp
Improve nested and client:only hydration (withastro#3455)
809100f 
* wip: fix nested islands

* fix: improve hydration for dynamic content

* chore: fix bundle-size script for new files

* chore: allow-list client:* directive files

* fix(withastro#3362): fix client:only behavior for React, Vue, Solid

* test: add client-only e2e test

* chore: update lockfile

* test: fix e2e tests

* test: add framework nesting e2e tests

* Update packages/astro/src/runtime/client/events.ts

Co-authored-by: Matthew Phillips <matthew@skypack.dev>

* chore: add changeset

* fix(preact): ignore hydrate roots

* chore: remove `ssr` check in integrations

* Revert "chore: remove `ssr` check in integrations"

This reverts commit ba27eaa.

* chore: add changeset

Co-authored-by: Matthew Phillips <matthew@skypack.dev>
@bluwy bluwy mentioned this pull request Jun 12, 2023
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@matthewp matthewp matthewp left review comments

@tony-sull tony-sull tony-sull approved these changes

Assignees
No one assigned
Labels
pkg: astro Related to the core `astro` package (scope) pkg: integration Related to any renderer integration (scope) pkg: preact Related to Preact (scope) pkg: react Related to React (scope) pkg: solid Related to Solid (scope) pkg: svelte Related to Svelte (scope) pkg: vue Related to Vue (scope)
Projects
None yet
Milestone
No milestone
3 participants
@natemoo-re @matthewp @tony-sull