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

Fix client hydration in experimentalReactChildren #8898

Merged
merged 8 commits into from
Oct 24, 2023
Merged

Fix client hydration in experimentalReactChildren #8898

merged 8 commits into from
Oct 24, 2023
+75 −27

Conversation

matthewp
Copy link
Contributor

@matthewp matthewp commented Oct 23, 2023 •
edited
Loading

Changes

  • Turns element children into React components with experimentalReactChildren
  • This fixes hydration.

Testing

  • Test added

Docs

N/A

@changeset-bot
Copy link

changeset-bot bot commented Oct 23, 2023 •
edited
Loading

🦋 Changeset detected

Latest commit: 759154e

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: react Related to React (scope) pkg: integration Related to any renderer integration (scope) pr: docs A PR that includes documentation for review labels Oct 23, 2023
@matthewp
Copy link
Contributor Author

!preview react-children-client

@matthewp
Copy link
Contributor Author

!preview react-children-client

1 similar comment
@matthewp
Copy link
Contributor Author

!preview react-children-client

@github-actions
Copy link
Contributor

Snapshots have been released for the following packages:

  • @astrojs/vercel@experimental--react-children-client
  • @astrojs/react@experimental--react-children-client
  • astro@experimental--react-children-client
Publish Log 
🦋  warn ===============================IMPORTANT!===============================
🦋  warn Packages will be released under the experimental--react-children-client tag
🦋  warn ----------------------------------------------------------------------
🦋  info npm info astro
🦋  info npm info @astrojs/prism
🦋  info npm info @astrojs/rss
🦋  info npm info create-astro
🦋  info npm info @astrojs/alpinejs
🦋  info npm info @astrojs/lit
🦋  info npm info @astrojs/markdoc
🦋  info npm info @astrojs/mdx
🦋  info npm info @astrojs/node
🦋  info npm info @astrojs/partytown
🦋  info npm info @astrojs/preact
🦋  info npm info @astrojs/prefetch
🦋  info npm info @astrojs/react
🦋  info npm info @astrojs/sitemap
🦋  info npm info @astrojs/solid-js
🦋  info npm info @astrojs/svelte
🦋  info npm info @astrojs/tailwind
🦋  info npm info @astrojs/vercel
🦋  info npm info @astrojs/vue
🦋  info npm info @astrojs/internal-helpers
🦋  info npm info @astrojs/markdown-remark
🦋  info npm info @astrojs/telemetry
🦋  info npm info @astrojs/underscore-redirects
🦋  info astro is being published because our local version (0.0.0-react-children-client-20231023164643) has not been published on npm
🦋  warn @astrojs/prism is not being published because version 3.0.0 is already published on npm
🦋  warn @astrojs/rss is not being published because version 3.0.0 is already published on npm
🦋  warn create-astro is not being published because version 4.3.0 is already published on npm
🦋  warn @astrojs/alpinejs is not being published because version 0.3.1 is already published on npm
🦋  warn @astrojs/lit is not being published because version 3.0.2 is already published on npm
🦋  warn @astrojs/markdoc is not being published because version 0.6.0 is already published on npm
🦋  warn @astrojs/mdx is not being published because version 1.1.2 is already published on npm
🦋  warn @astrojs/node is not being published because version 6.0.3 is already published on npm
🦋  warn @astrojs/partytown is not being published because version 2.0.1 is already published on npm
🦋  warn @astrojs/preact is not being published because version 3.0.1 is already published on npm
🦋  warn @astrojs/prefetch is not being published because version 0.4.1 is already published on npm
🦋  info @astrojs/react is being published because our local version (0.0.0-react-children-client-20231023164643) has not been published on npm
🦋  warn @astrojs/sitemap is not being published because version 3.0.2 is already published on npm
🦋  warn @astrojs/solid-js is not being published because version 3.0.2 is already published on npm
🦋  warn @astrojs/svelte is not being published because version 4.0.3 is already published on npm
🦋  warn @astrojs/tailwind is not being published because version 5.0.2 is already published on npm
🦋  info @astrojs/vercel is being published because our local version (0.0.0-react-children-client-20231023164643) has not been published on npm
🦋  warn @astrojs/vue is not being published because version 3.0.2 is already published on npm
🦋  warn @astrojs/internal-helpers is not being published because version 0.2.1 is already published on npm
🦋  warn @astrojs/markdown-remark is not being published because version 3.3.0 is already published on npm
🦋  warn @astrojs/telemetry is not being published because version 3.0.3 is already published on npm
🦋  warn @astrojs/underscore-redirects is not being published because version 0.3.1 is already published on npm
🦋  info Publishing "astro" at "0.0.0-react-children-client-20231023164643"
🦋  info Publishing "@astrojs/react" at "0.0.0-react-children-client-20231023164643"
🦋  info Publishing "@astrojs/vercel" at "0.0.0-react-children-client-20231023164643"
🦋  success packages published successfully:
🦋  [email protected]
🦋  @astrojs/[email protected]
🦋  @astrojs/[email protected]
🦋  Creating git tags...
🦋  New tag:  [email protected]
🦋  New tag:  @astrojs/[email protected]
🦋  New tag:  @astrojs/[email protected]
Build Log 

> [email protected] build /home/runner/work/astro/astro
> turbo run build --filter=astro --filter=create-astro --filter="@astrojs/*" --filter="@benchmark/*"

• Packages in scope: @astrojs/alpinejs, @astrojs/cloudflare, @astrojs/internal-helpers, @astrojs/lit, @astrojs/markdoc, @astrojs/markdown-remark, @astrojs/mdx, @astrojs/netlify, @astrojs/node, @astrojs/partytown, @astrojs/preact, @astrojs/prefetch, @astrojs/prism, @astrojs/react, @astrojs/rss, @astrojs/sitemap, @astrojs/solid-js, @astrojs/svelte, @astrojs/tailwind, @astrojs/telemetry, @astrojs/underscore-redirects, @astrojs/vercel, @astrojs/vue, @benchmark/timer, astro, create-astro
• Running build in 26 packages
• Remote caching enabled
::group::@astrojs/prism:build
cache hit, suppressing logs 1fbe4acc344b9100
::endgroup::
::group::@astrojs/internal-helpers:build
cache hit, suppressing logs c6ad1a8f27dca66f
::endgroup::
::group::@astrojs/telemetry:build
cache hit, suppressing logs 8f791e5bb7108651
::endgroup::
::group::create-astro:build
cache hit, suppressing logs 2e6f5442bbb5cf44
::endgroup::
::group::@astrojs/markdown-remark:build
cache miss, executing 5ea7eda930ba6d10

> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/markdown/remark
> astro-scripts build "src/**/*.ts" && tsc -p tsconfig.json

::endgroup::
::group::astro:build
cache miss, executing 69003937c4fbce7a

> [email protected] build /home/runner/work/astro/astro/packages/astro
> pnpm run prebuild && astro-scripts build "src/**/*.{ts,js}" && tsc && pnpm run postbuild


> [email protected] prebuild /home/runner/work/astro/astro/packages/astro
> astro-scripts prebuild --to-string "src/runtime/server/astro-island.ts" "src/runtime/client/{idle,load,media,only,visible}.ts"


> [email protected] postbuild /home/runner/work/astro/astro/packages/astro
> astro-scripts copy "src/**/*.astro" && astro-scripts copy "src/**/*.wasm"

::endgroup::
::group::@astrojs/underscore-redirects:build
cache miss, executing 50a908e9cb362792

> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/underscore-redirects
> astro-scripts build "src/**/*.ts" && tsc -p tsconfig.json

::endgroup::
::group::@astrojs/tailwind:build
cache miss, executing 32a20d78bca5f912

> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/integrations/tailwind
> astro-scripts build "src/**/*.ts" && tsc

::endgroup::
::group::@astrojs/lit:build
cache miss, executing 6ad5a9e126821333

> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/integrations/lit
> astro-scripts build "src/**/*.ts" && tsc

::endgroup::
::group::@astrojs/rss:build
cache miss, executing 511e7e511873dec1

> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/astro-rss
> astro-scripts build "src/**/*.ts" && tsc

::endgroup::
::group::@astrojs/react:build
cache miss, executing 69629907974f8f3c

> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/integrations/react
> astro-scripts build "src/**/*.ts" && tsc

::endgroup::
::group::@astrojs/prefetch:build
cache miss, executing 06f8d7fc70aa360a

> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/integrations/prefetch
> astro-scripts build "src/**/*.ts" && tsc

::endgroup::
::group::@astrojs/solid-js:build
cache miss, executing 8907eeab2400ac10

> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/integrations/solid
> astro-scripts build "src/**/*.ts" && tsc

::endgroup::
::group::@astrojs/preact:build
cache miss, executing ff657455a1d71028

> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/integrations/preact
> astro-scripts build "src/**/*.ts" && tsc

::endgroup::
::group::@astrojs/mdx:build
cache miss, executing 6c3206c2053ab232

> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/integrations/mdx
> astro-scripts build "src/**/*.ts" && tsc

::endgroup::
::group::@astrojs/vue:build
cache miss, executing ca8b155928cddceb

> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/integrations/vue
> astro-scripts build "src/index.ts" && astro-scripts build "src/editor.cts" --force-cjs --no-clean-dist && tsc

::endgroup::
::group::@astrojs/alpinejs:build
cache miss, executing 96cf573dea5380db

> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/integrations/alpinejs
> astro-scripts build "src/**/*.ts" && tsc

::endgroup::
::group::@astrojs/partytown:build
cache miss, executing af555da1c03251d4

> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/integrations/partytown
> astro-scripts build "src/**/*.ts" && tsc

::endgroup::
::group::@benchmark/timer:build
cache miss, executing 5347f96439aca9d5

> @benchmark/[email protected] build /home/runner/work/astro/astro/benchmark/packages/timer
> astro-scripts build "src/**/*.ts" && tsc

::endgroup::
::group::@astrojs/node:build
cache miss, executing 39f0b82c91f877c3

> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/integrations/node
> astro-scripts build "src/**/*.ts" && tsc

::endgroup::
::group::@astrojs/vercel:build
cache miss, executing 445424a27681c81a

> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/integrations/vercel
> astro-scripts build "src/**/*.ts" && tsc

::endgroup::
::group::@astrojs/markdoc:build
cache miss, executing ae1c7aa53db5a4e5

> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/integrations/markdoc
> astro-scripts build "src/**/*.ts" && tsc

::endgroup::
::group::@astrojs/svelte:build
cache miss, executing c4308093b90e4e4b

> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/integrations/svelte
> astro-scripts build "src/index.ts" && astro-scripts build "src/editor.cts" --force-cjs --no-clean-dist && tsc

::endgroup::
::group::@astrojs/sitemap:build
cache miss, executing 1ad1c87fc2cc765f

> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/integrations/sitemap
> astro-scripts build "src/**/*.ts" && tsc

::endgroup::

 Tasks:    24 successful, 24 total
Cached:    4 cached, 24 total
  Time:    1m22.355s

@matthewp matthewp marked this pull request as ready for review October 23, 2023 18:17
natemoo-re
natemoo-re reviewed Oct 23, 2023
View reviewed changes
Copy link
Member

@natemoo-re natemoo-re 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! Few questions but nothing blocking.

packages/integrations/react/client.js Outdated Show resolved Hide resolved
packages/integrations/react/server.js Show resolved Hide resolved
packages/integrations/react/vnode-children.js Outdated Show resolved Hide resolved
natemoo-re
natemoo-re approved these changes Oct 23, 2023
View reviewed changes
Copy link
Member

@natemoo-re natemoo-re left a comment

Choose a reason for hiding this comment

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

LGTM! Thanks for tackling this.

packages/integrations/react/vnode-children.js Show resolved Hide resolved
@matthewp matthewp merged commit 4dee387 into main Oct 24, 2023
13 checks passed
@matthewp matthewp deleted the exp-react-child-client branch October 24, 2023 12:05
@astrobot-houston astrobot-houston mentioned this pull request Oct 24, 2023
Merged
natemoo-re added a commit that referenced this pull request Nov 22, 2023
@matthewp @natemoo-re
Fix client hydration in experimentalReactChildren (#8898)
21d6716 
* Fix client hydration in experimentalReactChildren

* Add tests

* Add a changeset

* Use recursion instead of walking

* getChildren -> swap order

---------

Co-authored-by: Nate Moore <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@natemoo-re natemoo-re natemoo-re approved these changes

Assignees
No one assigned
Labels
pkg: integration Related to any renderer integration (scope) pkg: react Related to React (scope) pr: docs A PR that includes documentation for review
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@matthewp @natemoo-re