summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorGravatar Drew Powers <1369770+drwpow@users.noreply.github.com> 2021-11-23 15:38:26 -0700
committerGravatar GitHub <noreply@github.com> 2021-11-23 15:38:26 -0700
commit8a5de03098f0376420bcad66397e911e45779462 (patch)
tree6b0c07f5011f7792e448a04f1a72881c3a082542
parent60c5eb6ad5cf0c2d0fb643e1bc76257077f97b8b (diff)
downloadastro-8a5de03098f0376420bcad66397e911e45779462.tar.gz
astro-8a5de03098f0376420bcad66397e911e45779462.tar.zst
astro-8a5de03098f0376420bcad66397e911e45779462.zip
Fix client:visible (#1999)
Fixes #1963
-rw-r--r--.changeset/famous-mice-sparkle.md5
-rw-r--r--docs/src/components/RightSidebar/ThemeToggleButton.tsx10
-rw-r--r--packages/astro/src/runtime/client/visible.ts13
3 files changed, 18 insertions, 10 deletions
diff --git a/.changeset/famous-mice-sparkle.md b/.changeset/famous-mice-sparkle.md
new file mode 100644
index 000000000..37f163d31
--- /dev/null
+++ b/.changeset/famous-mice-sparkle.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fix client:visible with multiple copies of same component
diff --git a/docs/src/components/RightSidebar/ThemeToggleButton.tsx b/docs/src/components/RightSidebar/ThemeToggleButton.tsx
index d3dc678c2..68927fad2 100644
--- a/docs/src/components/RightSidebar/ThemeToggleButton.tsx
+++ b/docs/src/components/RightSidebar/ThemeToggleButton.tsx
@@ -14,9 +14,9 @@ const icons = [
fill="currentColor"
>
<path
- fillRule="evenodd"
+ fill-rule="evenodd"
d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
- clipRule="evenodd"
+ clip-rule="evenodd"
/>
</svg>,
<svg
@@ -30,7 +30,7 @@ const icons = [
</svg>,
];
-const ThemeToggle: FunctionalComponent = () => {
+function ThemeToggle() {
const [theme, setTheme] = useState(() => {
if (import.meta.env.SSR) {
return undefined;
@@ -59,7 +59,7 @@ const ThemeToggle: FunctionalComponent = () => {
const icon = icons[i];
const checked = t === theme;
return (
- <label className={checked ? ' checked' : ''}>
+ <label class={checked ? 'checked' : ''}>
{icon}
<input
type="radio"
@@ -78,6 +78,6 @@ const ThemeToggle: FunctionalComponent = () => {
})}
</div>
);
-};
+}
export default ThemeToggle;
diff --git a/packages/astro/src/runtime/client/visible.ts b/packages/astro/src/runtime/client/visible.ts
index bf49c8b3c..8abd6e1c4 100644
--- a/packages/astro/src/runtime/client/visible.ts
+++ b/packages/astro/src/runtime/client/visible.ts
@@ -16,11 +16,14 @@ export default async function onVisible(astroId: string, _options: HydrateOption
}
};
- const io = new IntersectionObserver(([entry]) => {
- if (!entry.isIntersecting) return;
- // As soon as we hydrate, disconnect this IntersectionObserver for every `astro-root`
- io.disconnect();
- cb();
+ const io = new IntersectionObserver((entries) => {
+ for (const entry of entries) {
+ if (!entry.isIntersecting) continue;
+ // As soon as we hydrate, disconnect this IntersectionObserver for every `astro-root`
+ io.disconnect();
+ cb();
+ break; // break loop on first match
+ }
});
for (const root of roots) {