michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

fix: islands are not being rendered correctly (#8580)

Browse source
This commit is contained in:
Rishi Raj Jain 2023-09-18 15:05:27 +05:30 • committed by GitHub
parent fca6892f8d
commit 8d361169b8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 8 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/eighty-trainers-accept.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
add hide to style & script generated for island

6
packages/astro/src/runtime/server/scripts.ts
View file

@ -1,7 +1,7 @@
import type { SSRResult } from '../../@types/astro.js'; import type { SSRResult } from '../../@types/astro.js';
import islandScript from './astro-island.prebuilt.js'; import islandScript from './astro-island.prebuilt.js';
const ISLAND_STYLES = `<style>astro-island,astro-slot,astro-static-slot{display:contents}</style>`; const ISLAND_STYLES = `<style style="display:none">astro-island,astro-slot,astro-static-slot{display:contents}</style>`;
export function determineIfNeedsHydrationScript(result: SSRResult): boolean { export function determineIfNeedsHydrationScript(result: SSRResult): boolean {
if (result._metadata.hasHydrationScript) { if (result._metadata.hasHydrationScript) {
@ -36,12 +36,12 @@ export function getPrescripts(result: SSRResult, type: PrescriptType, directive:
// deps to be loaded immediately. // deps to be loaded immediately.
switch (type) { switch (type) {
case 'both': case 'both':
return `${ISLAND_STYLES}<script>${getDirectiveScriptText( return `${ISLAND_STYLES}<script style="display:none">${getDirectiveScriptText(
result, result,
directive directive
)};${islandScript}</script>`; )};${islandScript}</script>`;
case 'directive': case 'directive':
return `<script>${getDirectiveScriptText(result, directive)}</script>`; return `<script style="display:none">${getDirectiveScriptText(result, directive)}</script>`;
} }
return ''; return '';
} }