Fix nested astro-island hydration race condition

[bluwy]

Changes

Fix #6301

• Setup astro:hydrate event listener and client directive init only after one macrotask when MutationObserver detected a change.
• Don't hydrate elements that are disconnected from the DOM.
• Setup prebuilt target to es2018 so we can write bleeding-edge code, while the prebuilt output is downleveled.

Testing

The issue author helped confirmed this worked. The existing e2e tests should also pass.

Docs

n/a. bug fix.

[changeset-bot]

🦋 Changeset detected

Latest commit: 1b5b456

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

[bluwy]

!preview nested-hydrate

[github-actions]

 > root@0.0.0 release /home/runner/work/astro/astro > pnpm run build && changeset publish "--tag" "next--nested-hydrate" > root@0.0.0 build /home/runner/work/astro/astro > turbo run build --filter=astro --filter=create-astro --filter="@astrojs/*" --filter="@benchmark/*" �[2m• Packages in scope: @astrojs/alpinejs, @astrojs/cloudflare, @astrojs/deno, @astrojs/image, @astrojs/lit, @astrojs/markdoc, @astrojs/markdown-component, @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/turbolinks, @astrojs/vercel, @astrojs/vue, @astrojs/webapi, @benchmark/timer, astro, create-astro�[0m �[2m• Running�[0m �[2m�[1mbuild�[0m�[0m �[2min 29 packages�[0m �[2m• Remote caching enabled�[0m �[35m@astrojs/webapi:build: �[0mcache hit, suppressing output �[2m20bbcfd7581aee94�[0m �[33mcreate-astro:build: �[0mcache hit, suppressing output �[2m7d642506415504e8�[0m �[32m@astrojs/prism:build: �[0mcache hit, suppressing output �[2m936984ebe8570bb6�[0m �[34m@astrojs/telemetry:build: �[0mcache hit, suppressing output �[2m7250870093981949�[0m �[36m@astrojs/markdown-remark:build: �[0mcache hit, suppressing output �[2m0d20e73873da31ef�[0m �[35mastro:build: �[0mcache miss, executing �[2m69f518f24a8ddbc3�[0m �[35mastro:build: �[0m �[35mastro:build: �[0m> astro@0.0.0-nested-hydrate-20230524151829 build /home/runner/work/astro/astro/packages/astro �[35mastro:build: �[0m> pnpm run prebuild && astro-scripts build "src/**/*.{ts,js}" && tsc && pnpm run postbuild �[35mastro:build: �[0m �[35mastro:build: �[0m �[35mastro:build: �[0m> astro@0.0.0-nested-hydrate-20230524151829 prebuild /home/runner/work/astro/astro/packages/astro �[35mastro:build: �[0m> astro-scripts prebuild --to-string "src/runtime/server/astro-island.ts" "src/runtime/client/{idle,load,media,only,visible}.ts" �[35mastro:build: �[0m �[35mastro:build: �[0m �[35mastro:build: �[0m> astro@0.0.0-nested-hydrate-20230524151829 postbuild /home/runner/work/astro/astro/packages/astro �[35mastro:build: �[0m> astro-scripts copy "src/**/*.astro" && astro-scripts copy "src/**/*.wasm" �[35mastro:build: �[0m �[34m@astrojs/lit:build: �[0mcache miss, executing �[2me2d35fb58b99e60e�[0m �[33m@astrojs/mdx:build: �[0mcache miss, executing �[2mb442fc7795224a6b�[0m �[35m@astrojs/netlify:build: �[0mcache miss, executing �[2m3358aea85ffca764�[0m �[32m@astrojs/alpinejs:build: �[0mcache miss, executing �[2m996b2dcd63753d87�[0m �[35m@astrojs/node:build: �[0mcache miss, executing �[2mbb80d82e7881f262�[0m �[36m@astrojs/partytown:build: �[0mcache miss, executing �[2mfe9559b13dadc8a5�[0m �[34m@astrojs/rss:build: �[0mcache miss, executing �[2m7d6dcc5a48b443ba�[0m �[36m@astrojs/vue:build: �[0mcache miss, executing �[2m23d4dce4860b45b1�[0m �[32m@astrojs/deno:build: �[0mcache miss, executing �[2m04b716af6cc2536d�[0m �[33m@benchmark/timer:build: �[0mcache miss, executing �[2m06f5b68f38e0d1d8�[0m �[35m@astrojs/netlify:build: �[0m �[35m@astrojs/netlify:build: �[0m> @astrojs/netlify@2.2.3 build /home/runner/work/astro/astro/packages/integrations/netlify �[35m@astrojs/netlify:build: �[0m> astro-scripts build "src/**/*.ts" && tsc �[35m@astrojs/netlify:build: �[0m �[34m@astrojs/lit:build: �[0m �[34m@astrojs/lit:build: �[0m> @astrojs/lit@2.0.2 build /home/runner/work/astro/astro/packages/integrations/lit �[34m@astrojs/lit:build: �[0m> astro-scripts build "src/**/*.ts" && tsc �[34m@astrojs/lit:build: �[0m �[33m@astrojs/mdx:build: �[0m �[33m@astrojs/mdx:build: �[0m> @astrojs/mdx@0.0.0-nested-hydrate-20230524151829 build /home/runner/work/astro/astro/packages/integrations/mdx �[33m@astrojs/mdx:build: �[0m> astro-scripts build "src/**/*.ts" && tsc �[33m@astrojs/mdx:build: �[0m �[32m@astrojs/alpinejs:build: �[0m �[32m@astrojs/alpinejs:build: �[0m> @astrojs/alpinejs@0.2.2 build /home/runner/work/astro/astro/packages/integrations/alpinejs �[32m@astrojs/alpinejs:build: �[0m> astro-scripts build "src/**/*.ts" && tsc �[32m@astrojs/alpinejs:build: �[0m �[35m@astrojs/node:build: �[0m �[35m@astrojs/node:build: �[0m> @astrojs/node@5.1.4 build /home/runner/work/astro/astro/packages/integrations/node �[35m@astrojs/node:build: �[0m> astro-scripts build "src/**/*.ts" && tsc �[35m@astrojs/node:build: �[0m �[36m@astrojs/partytown:build: �[0m �[36m@astrojs/partytown:build: �[0m> @astrojs/partytown@1.2.2 build /home/runner/work/astro/astro/packages/integrations/partytown �[36m@astrojs/partytown:build: �[0m> astro-scripts build "src/**/*.ts" && tsc �[36m@astrojs/partytown:build: �[0m �[34m@astrojs/rss:build: �[0m �[34m@astrojs/rss:build: �[0m> @astrojs/rss@2.4.3 build /home/runner/work/astro/astro/packages/astro-rss �[34m@astrojs/rss:build: �[0m> astro-scripts build "src/**/*.ts" && tsc �[34m@astrojs/rss:build: �[0m �[36m@astrojs/vue:build: �[0m �[36m@astrojs/vue:build: �[0m> @astrojs/vue@2.2.0 build /home/runner/work/astro/astro/packages/integrations/vue �[36m@astrojs/vue:build: �[0m> astro-scripts build "src/index.ts" && astro-scripts build "src/editor.cts" --force-cjs --no-clean-dist && tsc �[36m@astrojs/vue:build: �[0m �[32m@astrojs/deno:build: �[0m �[32m@astrojs/deno:build: �[0m> @astrojs/deno@4.1.1 build /home/runner/work/astro/astro/packages/integrations/deno �[32m@astrojs/deno:build: �[0m> astro-scripts build "src/**/*.ts" && tsc �[32m@astrojs/deno:build: �[0m �[33m@benchmark/timer:build: �[0m �[33m@benchmark/timer:build: �[0m> @benchmark/timer@0.0.0 build /home/runner/work/astro/astro/benchmark/packages/timer �[33m@benchmark/timer:build: �[0m> astro-scripts build "src/**/*.ts" && tsc �[33m@benchmark/timer:build: �[0m �[32m@astrojs/cloudflare:build: �[0mcache miss, executing �[2mee6fff2516083281�[0m �[34m@astrojs/react:build: �[0mcache miss, executing �[2m2ce3b34c77c261e4�[0m �[33m@astrojs/vercel:build: �[0mcache miss, executing �[2m70d20b5ac5ab32cc�[0m �[36m@astrojs/image:build: �[0mcache miss, executing �[2m537e6b5a0b5c126d�[0m �[35m@astrojs/svelte:build: �[0mcache miss, executing �[2mc961624f11875426�[0m �[32m@astrojs/solid-js:build: �[0mcache miss, executing �[2m70008501b3c70ef8�[0m �[32m@astrojs/cloudflare:build: �[0m �[32m@astrojs/cloudflare:build: �[0m> @astrojs/cloudflare@6.3.0 build /home/runner/work/astro/astro/packages/integrations/cloudflare �[32m@astrojs/cloudflare:build: �[0m> astro-scripts build "src/**/*.ts" && tsc �[32m@astrojs/cloudflare:build: �[0m �[34m@astrojs/react:build: �[0m �[34m@astrojs/react:build: �[0m> @astrojs/react@2.2.0 build /home/runner/work/astro/astro/packages/integrations/react �[34m@astrojs/react:build: �[0m> astro-scripts build "src/**/*.ts" && tsc �[34m@astrojs/react:build: �[0m �[33m@astrojs/markdoc:build: �[0mcache miss, executing �[2m01d23d0dfd4c2b35�[0m �[34m@astrojs/tailwind:build: �[0mcache miss, executing �[2m41d2bbd9b169c175�[0m �[33m@astrojs/vercel:build: �[0m �[33m@astrojs/vercel:build: �[0m> @astrojs/vercel@3.4.0 build /home/runner/work/astro/astro/packages/integrations/vercel �[33m@astrojs/vercel:build: �[0m> astro-scripts build "src/**/*.ts" && tsc �[33m@astrojs/vercel:build: �[0m �[36m@astrojs/preact:build: �[0mcache miss, executing �[2m377dae32bd72a351�[0m �[35m@astrojs/svelte:build: �[0m �[35m@astrojs/svelte:build: �[0m> @astrojs/svelte@2.2.0 build /home/runner/work/astro/astro/packages/integrations/svelte �[35m@astrojs/svelte:build: �[0m> astro-scripts build "src/index.ts" && astro-scripts build "src/editor.cts" --force-cjs --no-clean-dist && tsc �[35m@astrojs/svelte:build: �[0m �[36m@astrojs/image:build: �[0m �[36m@astrojs/image:build: �[0m> @astrojs/image@0.16.9 build /home/runner/work/astro/astro/packages/integrations/image �[36m@astrojs/image:build: �[0m> astro-scripts build "src/**/*.ts" && tsc �[36m@astrojs/image:build: �[0m �[35m@astrojs/prefetch:build: �[0mcache miss, executing �[2ma74568f7f350af81�[0m �[32m@astrojs/solid-js:build: �[0m �[32m@astrojs/solid-js:build: �[0m> @astrojs/solid-js@2.2.0 build /home/runner/work/astro/astro/packages/integrations/solid �[32m@astrojs/solid-js:build: �[0m> astro-scripts build "src/**/*.ts" && tsc �[32m@astrojs/solid-js:build: �[0m �[33m@astrojs/markdoc:build: �[0m �[33m@astrojs/markdoc:build: �[0m> @astrojs/markdoc@0.2.3 build /home/runner/work/astro/astro/packages/integrations/markdoc �[33m@astrojs/markdoc:build: �[0m> astro-scripts build "src/**/*.ts" && tsc �[33m@astrojs/markdoc:build: �[0m �[34m@astrojs/tailwind:build: �[0m �[34m@astrojs/tailwind:build: �[0m> @astrojs/tailwind@3.1.3 build /home/runner/work/astro/astro/packages/integrations/tailwind �[34m@astrojs/tailwind:build: �[0m> astro-scripts build "src/**/*.ts" && tsc �[34m@astrojs/tailwind:build: �[0m �[36m@astrojs/preact:build: �[0m �[36m@astrojs/preact:build: �[0m> @astrojs/preact@2.2.0 build /home/runner/work/astro/astro/packages/integrations/preact �[36m@astrojs/preact:build: �[0m> astro-scripts build "src/**/*.ts" && tsc �[36m@astrojs/preact:build: �[0m �[35m@astrojs/prefetch:build: �[0m �[35m@astrojs/prefetch:build: �[0m> @astrojs/prefetch@0.2.3 build /home/runner/work/astro/astro/packages/integrations/prefetch �[35m@astrojs/prefetch:build: �[0m> astro-scripts build "src/**/*.ts" && tsc �[35m@astrojs/prefetch:build: �[0m �[33m@astrojs/sitemap:build: �[0mcache miss, executing �[2m23107dab8965eb23�[0m �[32m@astrojs/turbolinks:build: �[0mcache miss, executing �[2mf8ff901480477074�[0m �[33m@astrojs/sitemap:build: �[0m �[33m@astrojs/sitemap:build: �[0m> @astrojs/sitemap@1.3.1 build /home/runner/work/astro/astro/packages/integrations/sitemap �[33m@astrojs/sitemap:build: �[0m> astro-scripts build "src/**/*.ts" && tsc �[33m@astrojs/sitemap:build: �[0m �[32m@astrojs/turbolinks:build: �[0m �[32m@astrojs/turbolinks:build: �[0m> @astrojs/turbolinks@0.2.2 build /home/runner/work/astro/astro/packages/integrations/turbolinks �[32m@astrojs/turbolinks:build: �[0m> astro-scripts build "src/**/*.ts" && tsc �[32m@astrojs/turbolinks:build: �[0m Tasks: 28 successful, 28 total Cached: 5 cached, 28 total Time: 1m24.959s 🦋 �[33mwarn�[39m �[31m===============================IMPORTANT!===============================�[39m 🦋 �[33mwarn�[39m Packages will be released under the next--nested-hydrate tag 🦋 �[33mwarn�[39m �[31m----------------------------------------------------------------------�[39m 🦋 �[36minfo�[39m npm info astro 🦋 �[36minfo�[39m npm info @astrojs/prism 🦋 �[36minfo�[39m npm info @astrojs/rss 🦋 �[36minfo�[39m npm info create-astro 🦋 �[36minfo�[39m npm info @astrojs/alpinejs 🦋 �[36minfo�[39m npm info @astrojs/cloudflare 🦋 �[36minfo�[39m npm info @astrojs/deno 🦋 �[36minfo�[39m npm info @astrojs/image 🦋 �[36minfo�[39m npm info @astrojs/lit 🦋 �[36minfo�[39m npm info @astrojs/markdoc 🦋 �[36minfo�[39m npm info @astrojs/mdx 🦋 �[36minfo�[39m npm info @astrojs/netlify 🦋 �[36minfo�[39m npm info @astrojs/node 🦋 �[36minfo�[39m npm info @astrojs/partytown 🦋 �[36minfo�[39m npm info @astrojs/preact 🦋 �[36minfo�[39m npm info @astrojs/prefetch 🦋 �[36minfo�[39m npm info @astrojs/react 🦋 �[36minfo�[39m npm info @astrojs/sitemap 🦋 �[36minfo�[39m npm info @astrojs/solid-js 🦋 �[36minfo�[39m npm info @astrojs/svelte 🦋 �[36minfo�[39m npm info @astrojs/tailwind 🦋 �[36minfo�[39m npm info @astrojs/turbolinks 🦋 �[36minfo�[39m npm info @astrojs/vercel 🦋 �[36minfo�[39m npm info @astrojs/vue 🦋 �[36minfo�[39m npm info @astrojs/markdown-component 🦋 �[36minfo�[39m npm info @astrojs/markdown-remark 🦋 �[36minfo�[39m npm info @astrojs/telemetry 🦋 �[36minfo�[39m npm info @astrojs/webapi 🦋 �[36minfo�[39m astro is being published because our local version (0.0.0-nested-hydrate-20230524151829) has not been published on npm 🦋 �[33mwarn�[39m @astrojs/prism is not being published because version 2.1.2 is already published on npm 🦋 �[33mwarn�[39m @astrojs/rss is not being published because version 2.4.3 is already published on npm 🦋 �[33mwarn�[39m create-astro is not being published because version 3.1.5 is already published on npm 🦋 �[33mwarn�[39m @astrojs/alpinejs is not being published because version 0.2.2 is already published on npm 🦋 �[33mwarn�[39m @astrojs/cloudflare is not being published because version 6.3.0 is already published on npm 🦋 �[33mwarn�[39m @astrojs/deno is not being published because version 4.1.1 is already published on npm 🦋 �[33mwarn�[39m @astrojs/image is not being published because version 0.16.9 is already published on npm 🦋 �[33mwarn�[39m @astrojs/lit is not being published because version 2.0.2 is already published on npm 🦋 �[33mwarn�[39m @astrojs/markdoc is not being published because version 0.2.3 is already published on npm 🦋 �[36minfo�[39m @astrojs/mdx is being published because our local version (0.0.0-nested-hydrate-20230524151829) has not been published on npm 🦋 �[33mwarn�[39m @astrojs/netlify is not being published because version 2.2.3 is already published on npm 🦋 �[33mwarn�[39m @astrojs/node is not being published because version 5.1.4 is already published on npm 🦋 �[33mwarn�[39m @astrojs/partytown is not being published because version 1.2.2 is already published on npm 🦋 �[33mwarn�[39m @astrojs/preact is not being published because version 2.2.0 is already published on npm 🦋 �[33mwarn�[39m @astrojs/prefetch is not being published because version 0.2.3 is already published on npm 🦋 �[33mwarn�[39m @astrojs/react is not being published because version 2.2.0 is already published on npm 🦋 �[33mwarn�[39m @astrojs/sitemap is not being published because version 1.3.1 is already published on npm 🦋 �[33mwarn�[39m @astrojs/solid-js is not being published because version 2.2.0 is already published on npm 🦋 �[33mwarn�[39m @astrojs/svelte is not being published because version 2.2.0 is already published on npm 🦋 �[33mwarn�[39m @astrojs/tailwind is not being published because version 3.1.3 is already published on npm 🦋 �[33mwarn�[39m @astrojs/turbolinks is not being published because version 0.2.2 is already published on npm 🦋 �[33mwarn�[39m @astrojs/vercel is not being published because version 3.4.0 is already published on npm 🦋 �[33mwarn�[39m @astrojs/vue is not being published because version 2.2.0 is already published on npm 🦋 �[33mwarn�[39m @astrojs/markdown-component is not being published because version 1.0.4 is already published on npm 🦋 �[33mwarn�[39m @astrojs/markdown-remark is not being published because version 2.2.1 is already published on npm 🦋 �[33mwarn�[39m @astrojs/telemetry is not being published because version 2.1.1 is already published on npm 🦋 �[33mwarn�[39m @astrojs/webapi is not being published because version 2.1.1 is already published on npm 🦋 �[36minfo�[39m Publishing �[36m"astro"�[39m at �[32m"0.0.0-nested-hydrate-20230524151829"�[39m 🦋 �[36minfo�[39m Publishing �[36m"@astrojs/mdx"�[39m at �[32m"0.0.0-nested-hydrate-20230524151829"�[39m 🦋 �[32msuccess�[39m packages published successfully: 🦋 astro@0.0.0-nested-hydrate-20230524151829 🦋 @astrojs/mdx@0.0.0-nested-hydrate-20230524151829 🦋 Creating git tags... 🦋 New tag: astro@0.0.0-nested-hydrate-20230524151829 🦋 New tag: @astrojs/mdx@0.0.0-nested-hydrate-20230524151829

[bluwy]

NOTE: this.hydrate already has the this.hydrator guard, so this can be simplified.