From e89a99f342912f5d382e1e23fcb66bfc2a33e0b8 Mon Sep 17 00:00:00 2001 From: Mats Date: Tue, 27 Jul 2021 14:52:17 +0200 Subject: [PATCH] Fixes bug where Astro can't distinguish between two equal components differing only by props when hydrating (#846) --- .changeset/chilly-gorillas-wash.md | 5 +++++ packages/astro/src/internal/__astro_component.ts | 3 ++- 2 files changed, 7 insertions(+), 1 deletion(-) create mode 100644 .changeset/chilly-gorillas-wash.md diff --git a/.changeset/chilly-gorillas-wash.md b/.changeset/chilly-gorillas-wash.md new file mode 100644 index 0000000000..543006defc --- /dev/null +++ b/.changeset/chilly-gorillas-wash.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +This includes the props passed to a hydration component when generating the hash/id. This prevents multiple instances of the same component with differing props to be treated as the same component when hydrated by Astro. diff --git a/packages/astro/src/internal/__astro_component.ts b/packages/astro/src/internal/__astro_component.ts index 1ddd40b05c..9470e5b147 100644 --- a/packages/astro/src/internal/__astro_component.ts +++ b/packages/astro/src/internal/__astro_component.ts @@ -187,7 +187,8 @@ export function __astro_component(Component: any, metadata: AstroComponentMetada } // If we ARE hydrating this component, let's generate the hydration script - const astroId = hash.unique(html); + const stringifiedProps = JSON.stringify(props); + const astroId = hash.unique(html + stringifiedProps); const script = await generateHydrateScript({ instance, astroId, props }, metadata as Required); const astroRoot = `${html}`; return [astroRoot, script].join('\n');