feat(site): remove unnecessary hydration workarounds

This commit is contained in:
Darius Cepulis
2025-10-30 00:39:39 -05:00
parent 8f2a2c100b
commit 476fabf7aa
9 changed files with 45 additions and 49 deletions
+14 -16
View File
@@ -3,9 +3,15 @@ import type { SupportedFramework } from '@/types/docs';
interface Props {
frameworks?: SupportedFramework[];
/**
* I'm running into some crazy problems with hydration.
* Putting client:load in one of these conditionals causes Astro to just give up hydrating the whole app for some reason.
* If you're running into that, too, this prop may be for you.
*/
withHydrationWorkaround?: boolean;
}
const { frameworks } = Astro.props;
const { frameworks, withHydrationWorkaround } = Astro.props;
const { framework } = Astro.params;
// Only render if current framework matches, or if no frameworks specified (all frameworks)
@@ -13,19 +19,11 @@ const shouldRender = !frameworks || frameworks.includes(framework as SupportedFr
---
{
/*
What I WANT to do is
```
{shouldRender && <slot />}
```
But I'm running into some crazy problems with hydration.
Putting client:load in one of these conditionals causes Astro to just give up hydrating the whole app for some reason.
TODO: fix this
So, while I debug those... let's do this
*/
withHydrationWorkaround ? (
<div class="contents" hidden={!shouldRender}>
<slot />
</div>
) : (
shouldRender && <slot />
)
}
<div class="contents" hidden={!shouldRender}>
<slot />
</div>
+14 -16
View File
@@ -3,9 +3,15 @@ import type { AnySupportedStyle } from '@/types/docs';
interface Props {
styles?: AnySupportedStyle[];
/**
* I'm running into some crazy problems with hydration.
* Putting client:load in one of these conditionals causes Astro to just give up hydrating the whole app for some reason.
* If you're running into that, too, this prop may be for you.
*/
withHydrationWorkaround?: boolean;
}
const { styles } = Astro.props;
const { styles, withHydrationWorkaround } = Astro.props;
const { style } = Astro.params;
// Only render if current style matches, or if no styles specified (all styles)
@@ -13,19 +19,11 @@ const shouldRender = !styles || styles.includes(style as AnySupportedStyle);
---
{
/*
What I WANT to do is
```
{shouldRender && <slot />}
```
But I'm running into some crazy problems with hydration.
Putting client:load in one of these conditionals causes Astro to just give up hydrating the whole app for some reason.
TODO: fix this
So, while I debug those... let's do this
*/
withHydrationWorkaround ? (
<div class="contents" hidden={!shouldRender}>
<slot />
</div>
) : (
shouldRender && <slot />
)
}
<div class="contents" hidden={!shouldRender}>
<slot />
</div>