diff options
20 files changed, 152 insertions, 148 deletions
diff --git a/.changeset/eleven-toes-attack.md b/.changeset/eleven-toes-attack.md new file mode 100644 index 000000000..f17f30474 --- /dev/null +++ b/.changeset/eleven-toes-attack.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Consolidates hydration scripts into one diff --git a/packages/astro/src/@types/astro.ts b/packages/astro/src/@types/astro.ts index f0d7e7311..9e127c62a 100644 --- a/packages/astro/src/@types/astro.ts +++ b/packages/astro/src/@types/astro.ts @@ -1000,6 +1000,7 @@ export interface SSRElement { export interface SSRMetadata { renderers: SSRLoadedRenderer[]; pathname: string; + needsHydrationStyles: boolean; } export interface SSRResult { diff --git a/packages/astro/src/core/render/result.ts b/packages/astro/src/core/render/result.ts index 3a8a71235..27fc652d8 100644 --- a/packages/astro/src/core/render/result.ts +++ b/packages/astro/src/core/render/result.ts @@ -201,6 +201,7 @@ ${extra}` _metadata: { renderers, pathname, + needsHydrationStyles: false }, }; diff --git a/packages/astro/src/runtime/client/hmr.ts b/packages/astro/src/runtime/client/hmr.ts index 7cd773256..cefb3e068 100644 --- a/packages/astro/src/runtime/client/hmr.ts +++ b/packages/astro/src/runtime/client/hmr.ts @@ -7,9 +7,9 @@ if (import.meta.hot) { const doc = parser.parseFromString(html, 'text/html'); // Match incoming islands to current state - for (const root of doc.querySelectorAll('astro-root')) { + for (const root of doc.querySelectorAll('astro-island')) { const uid = root.getAttribute('uid'); - const current = document.querySelector(`astro-root[uid="${uid}"]`); + const current = document.querySelector(`astro-island[uid="${uid}"]`); if (current) { root.innerHTML = current?.innerHTML; } diff --git a/packages/astro/src/runtime/client/idle.ts b/packages/astro/src/runtime/client/idle.ts index 627d896db..d0b3f29a9 100644 --- a/packages/astro/src/runtime/client/idle.ts +++ b/packages/astro/src/runtime/client/idle.ts @@ -5,22 +5,17 @@ import type { GetHydrateCallback, HydrateOptions } from '../../@types/astro'; * (or after a short delay, if `requestIdleCallback`) isn't supported */ export default async function onIdle( - astroId: string, + root: HTMLElement, options: HydrateOptions, getHydrateCallback: GetHydrateCallback ) { const cb = async () => { - const roots = document.querySelectorAll(`astro-root[uid="${astroId}"]`); - if (roots.length === 0) { - throw new Error(`Unable to find the root for the component ${options.name}`); - } - let innerHTML: string | null = null; - let fragment = roots[0].querySelector(`astro-fragment`); - if (fragment == null && roots[0].hasAttribute('tmpl')) { + let fragment = root.querySelector(`astro-fragment`); + if (fragment == null && root.hasAttribute('tmpl')) { // If there is no child fragment, check to see if there is a template. // This happens if children were passed but the client component did not render any. - let template = roots[0].querySelector(`template[data-astro-template]`); + let template = root.querySelector(`template[data-astro-template]`); if (template) { innerHTML = template.innerHTML; template.remove(); @@ -29,10 +24,7 @@ export default async function onIdle( innerHTML = fragment.innerHTML; } const hydrate = await getHydrateCallback(); - - for (const root of roots) { - hydrate(root, innerHTML); - } + hydrate(root, innerHTML); }; if ('requestIdleCallback' in window) { diff --git a/packages/astro/src/runtime/client/load.ts b/packages/astro/src/runtime/client/load.ts index cf4cd83af..cba255e1d 100644 --- a/packages/astro/src/runtime/client/load.ts +++ b/packages/astro/src/runtime/client/load.ts @@ -4,21 +4,16 @@ import type { GetHydrateCallback, HydrateOptions } from '../../@types/astro'; * Hydrate this component immediately */ export default async function onLoad( - astroId: string, + root: HTMLElement, options: HydrateOptions, getHydrateCallback: GetHydrateCallback ) { - const roots = document.querySelectorAll(`astro-root[uid="${astroId}"]`); - if (roots.length === 0) { - throw new Error(`Unable to find the root for the component ${options.name}`); - } - let innerHTML: string | null = null; - let fragment = roots[0].querySelector(`astro-fragment`); - if (fragment == null && roots[0].hasAttribute('tmpl')) { + let fragment = root.querySelector(`astro-fragment`); + if (fragment == null && root.hasAttribute('tmpl')) { // If there is no child fragment, check to see if there is a template. // This happens if children were passed but the client component did not render any. - let template = roots[0].querySelector(`template[data-astro-template]`); + let template = root.querySelector(`template[data-astro-template]`); if (template) { innerHTML = template.innerHTML; template.remove(); @@ -27,10 +22,7 @@ export default async function onLoad( innerHTML = fragment.innerHTML; } - //const innerHTML = roots[0].querySelector(`astro-fragment`)?.innerHTML ?? null; + //const innerHTML = root.querySelector(`astro-fragment`)?.innerHTML ?? null; const hydrate = await getHydrateCallback(); - - for (const root of roots) { - hydrate(root, innerHTML); - } + hydrate(root, innerHTML); } diff --git a/packages/astro/src/runtime/client/media.ts b/packages/astro/src/runtime/client/media.ts index 32e883908..56b8dedf3 100644 --- a/packages/astro/src/runtime/client/media.ts +++ b/packages/astro/src/runtime/client/media.ts @@ -4,21 +4,16 @@ import type { GetHydrateCallback, HydrateOptions } from '../../@types/astro'; * Hydrate this component when a matching media query is found */ export default async function onMedia( - astroId: string, + root: HTMLElement, options: HydrateOptions, getHydrateCallback: GetHydrateCallback ) { - const roots = document.querySelectorAll(`astro-root[uid="${astroId}"]`); - if (roots.length === 0) { - throw new Error(`Unable to find the root for the component ${options.name}`); - } - let innerHTML: string | null = null; - let fragment = roots[0].querySelector(`astro-fragment`); - if (fragment == null && roots[0].hasAttribute('tmpl')) { + let fragment = root.querySelector(`astro-fragment`); + if (fragment == null && root.hasAttribute('tmpl')) { // If there is no child fragment, check to see if there is a template. // This happens if children were passed but the client component did not render any. - let template = roots[0].querySelector(`template[data-astro-template]`); + let template = root.querySelector(`template[data-astro-template]`); if (template) { innerHTML = template.innerHTML; template.remove(); @@ -29,9 +24,7 @@ export default async function onMedia( const cb = async () => { const hydrate = await getHydrateCallback(); - for (const root of roots) { - hydrate(root, innerHTML); - } + hydrate(root, innerHTML); }; if (options.value) { diff --git a/packages/astro/src/runtime/client/only.ts b/packages/astro/src/runtime/client/only.ts index 6400d44b8..8fe3ac726 100644 --- a/packages/astro/src/runtime/client/only.ts +++ b/packages/astro/src/runtime/client/only.ts @@ -4,21 +4,16 @@ import type { GetHydrateCallback, HydrateOptions } from '../../@types/astro'; * Hydrate this component immediately */ export default async function onLoad( - astroId: string, + root: HTMLElement, options: HydrateOptions, getHydrateCallback: GetHydrateCallback ) { - const roots = document.querySelectorAll(`astro-root[uid="${astroId}"]`); - if (roots.length === 0) { - throw new Error(`Unable to find the root for the component ${options.name}`); - } - let innerHTML: string | null = null; - let fragment = roots[0].querySelector(`astro-fragment`); - if (fragment == null && roots[0].hasAttribute('tmpl')) { + let fragment = root.querySelector(`astro-fragment`); + if (fragment == null && root.hasAttribute('tmpl')) { // If there is no child fragment, check to see if there is a template. // This happens if children were passed but the client component did not render any. - let template = roots[0].querySelector(`template[data-astro-template]`); + let template = root.querySelector(`template[data-astro-template]`); if (template) { innerHTML = template.innerHTML; template.remove(); @@ -27,8 +22,5 @@ export default async function onLoad( innerHTML = fragment.innerHTML; } const hydrate = await getHydrateCallback(); - - for (const root of roots) { - hydrate(root, innerHTML); - } + hydrate(root, innerHTML); } diff --git a/packages/astro/src/runtime/client/visible.ts b/packages/astro/src/runtime/client/visible.ts index e0c1fdc73..70570865f 100644 --- a/packages/astro/src/runtime/client/visible.ts +++ b/packages/astro/src/runtime/client/visible.ts @@ -2,25 +2,20 @@ import type { GetHydrateCallback, HydrateOptions } from '../../@types/astro'; /** * Hydrate this component when one of it's children becomes visible. - * We target the children because `astro-root` is set to `display: contents` + * We target the children because `astro-island` is set to `display: contents` * which doesn't work with IntersectionObserver */ export default async function onVisible( - astroId: string, + root: HTMLElement, options: HydrateOptions, getHydrateCallback: GetHydrateCallback ) { - const roots = document.querySelectorAll(`astro-root[uid="${astroId}"]`); - if (roots.length === 0) { - throw new Error(`Unable to find the root for the component ${options.name}`); - } - let innerHTML: string | null = null; - let fragment = roots[0].querySelector(`astro-fragment`); - if (fragment == null && roots[0].hasAttribute('tmpl')) { + let fragment = root.querySelector(`astro-fragment`); + if (fragment == null && root.hasAttribute('tmpl')) { // If there is no child fragment, check to see if there is a template. // This happens if children were passed but the client component did not render any. - let template = roots[0].querySelector(`template[data-astro-template]`); + let template = root.querySelector(`template[data-astro-template]`); if (template) { innerHTML = template.innerHTML; template.remove(); @@ -31,25 +26,21 @@ export default async function onVisible( const cb = async () => { const hydrate = await getHydrateCallback(); - for (const root of roots) { - hydrate(root, innerHTML); - } + hydrate(root, innerHTML); }; 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` + // As soon as we hydrate, disconnect this IntersectionObserver for every `astro-island` io.disconnect(); cb(); break; // break loop on first match } }); - for (const root of roots) { - for (let i = 0; i < root.children.length; i++) { - const child = root.children[i]; - io.observe(child); - } + for (let i = 0; i < root.children.length; i++) { + const child = root.children[i]; + io.observe(child); } } diff --git a/packages/astro/src/runtime/server/astro-island.ts b/packages/astro/src/runtime/server/astro-island.ts new file mode 100644 index 000000000..3eadeb1f5 --- /dev/null +++ b/packages/astro/src/runtime/server/astro-island.ts @@ -0,0 +1,35 @@ +/* +customElements.define('astro-island', class extends HTMLElement { + async connectedCallback(){ + const [ { default: setup } ] = await Promise.all([ + import(this.getAttribute('directive-url')), + import(this.getAttribute('before-hydration-url')) + ]); + + const opts = JSON.parse(this.getAttribute('opts')); + setup(this, opts, async () => { + const propsStr = this.getAttribute('props'); + const props = propsStr ? JSON.parse(propsStr) : {}; + const rendererUrl = this.getAttribute('renderer-url'); + const [ + { default: Component }, + { default: hydrate } + ] = await Promise.all([ + import(this.getAttribute('component-url')), + rendererUrl ? import(rendererUrl) : () => () => {} + ]); + + return (el, children) => hydrate(el)(Component, props, children); + }); + } +}); +*/ + +/** + * This is a minified version of the above. If you modify the above you need to + * copy/paste it into a .js file and then run: + * > node_modules/.bin/terser --mangle --compress -- file.js + * + * And copy/paste the result below + */ +export const islandScript = `customElements.define("astro-island",class extends HTMLElement{async connectedCallback(){const[{default:t}]=await Promise.all([import(this.getAttribute("directive-url")),import(this.getAttribute("before-hydration-url"))]);const e=JSON.parse(this.getAttribute("opts"));t(this,e,(async()=>{const t=this.getAttribute("props");const e=t?JSON.parse(t):{};const r=this.getAttribute("renderer-url");const[{default:s},{default:i}]=await Promise.all([import(this.getAttribute("component-url")),r?import(r):()=>()=>{}]);return(t,r)=>i(t)(s,e,r)}))}});`; diff --git a/packages/astro/src/runtime/server/hydration.ts b/packages/astro/src/runtime/server/hydration.ts index e7267fe16..f29379b10 100644 --- a/packages/astro/src/runtime/server/hydration.ts +++ b/packages/astro/src/runtime/server/hydration.ts @@ -1,8 +1,10 @@ import type { AstroComponentMetadata, SSRLoadedRenderer } from '../../@types/astro'; import type { SSRElement, SSRResult } from '../../@types/astro'; import { hydrationSpecifier, serializeListValue } from './util.js'; +import { escapeHTML } from './escape.js'; import serializeJavaScript from 'serialize-javascript'; + // Serializes props passed into a component so that they can be reused during hydration. // The value is any export function serializeProps(value: any) { @@ -110,32 +112,29 @@ export async function generateHydrateScript( ); } - let hydrationSource = ``; - - hydrationSource += renderer.clientEntrypoint - ? `const [{ ${ - componentExport.value - }: Component }, { default: hydrate }] = await Promise.all([import("${await result.resolve( - componentUrl - )}"), import("${await result.resolve(renderer.clientEntrypoint)}")]); - return (el, children) => hydrate(el)(Component, ${serializeProps(props)}, children); -` - : `await import("${await result.resolve(componentUrl)}"); - return () => {}; -`; - // TODO: If we can figure out tree-shaking in the final SSR build, we could safely - // use BEFORE_HYDRATION_SCRIPT_ID instead of 'astro:scripts/before-hydration.js'. - const hydrationScript = { - props: { type: 'module', 'data-astro-component-hydration': true }, - children: `import setup from '${await result.resolve(hydrationSpecifier(hydrate))}'; -${`import '${await result.resolve('astro:scripts/before-hydration.js')}';`} -setup("${astroId}", {name:"${metadata.displayName}",${ - metadata.hydrateArgs ? `value: ${JSON.stringify(metadata.hydrateArgs)}` : '' - }}, async () => { - ${hydrationSource} -}); -`, + const island: SSRElement = { + children: '', + props: { + // This is for HMR, probably can avoid it in prod + uid: astroId + } }; - return hydrationScript; + // Add component url + island.props['component-url'] = await result.resolve(componentUrl); + + // Add renderer url + if(renderer.clientEntrypoint) { + island.props['renderer-url'] = await result.resolve(renderer.clientEntrypoint); + island.props['props'] = escapeHTML(serializeProps(props)); + } + + island.props['directive-url'] = await result.resolve(hydrationSpecifier(hydrate)); + island.props['before-hydration-url'] = await result.resolve('astro:scripts/before-hydration.js'); + island.props['opts'] = escapeHTML(JSON.stringify({ + name: metadata.displayName, + value: metadata.hydrateArgs || '' + })) + + return island; } diff --git a/packages/astro/src/runtime/server/index.ts b/packages/astro/src/runtime/server/index.ts index d3700888c..69c97144b 100644 --- a/packages/astro/src/runtime/server/index.ts +++ b/packages/astro/src/runtime/server/index.ts @@ -11,6 +11,7 @@ import type { import { escapeHTML, HTMLString, markHTMLString } from './escape.js'; import { extractDirectives, generateHydrateScript, serializeProps } from './hydration.js'; import { serializeListValue } from './util.js'; +import { islandScript } from './astro-island.js'; export { markHTMLString, markHTMLString as unescapeHTML } from './escape.js'; export type { Metadata } from './metadata'; @@ -24,6 +25,8 @@ const htmlEnumAttributes = /^(contenteditable|draggable|spellcheck|value)$/i; // Note: SVG is case-sensitive! const svgEnumAttributes = /^(autoReverse|externalResourcesRequired|focusable|preserveAlpha)$/i; +const resultsWithHydrationScript = new WeakSet<SSRResult>(); + // INVESTIGATE: // 2. Less anys when possible and make it well known when they are needed. @@ -308,20 +311,36 @@ If you're still stuck, please open an issue on GitHub or join us at https://astr // Rather than appending this inline in the page, puts this into the `result.scripts` set that will be appended to the head. // INVESTIGATE: This will likely be a problem in streaming because the `<head>` will be gone at this point. - result.scripts.add( - await generateHydrateScript( - { renderer: renderer!, result, astroId, props }, - metadata as Required<AstroComponentMetadata> - ) + const island = await generateHydrateScript( + { renderer: renderer!, result, astroId, props }, + metadata as Required<AstroComponentMetadata> ); + result._metadata.needsHydrationStyles = true; // Render a template if no fragment is provided. const needsAstroTemplate = children && !/<\/?astro-fragment\>/.test(html); const template = needsAstroTemplate ? `<template data-astro-template>${children}</template>` : ''; + + if(needsAstroTemplate) { + island.props.tmpl = ''; + } + + island.children = `${ + html ?? '' + }${template}`; + + // Add the astro-island definition only once. Since the SSRResult object + // is scoped to a page renderer we can use it as a key to know if the script + // has been rendered or not. + let script = ''; + if(!resultsWithHydrationScript.has(result)) { + resultsWithHydrationScript.add(result); + script = `<script>${islandScript}</script>`; + } + return markHTMLString( - `<astro-root uid="${astroId}"${needsAstroTemplate ? ' tmpl' : ''}>${ - html ?? '' - }${template}</astro-root>` + script + + renderElement('astro-island', island, false) ); } @@ -546,13 +565,10 @@ export async function renderHead(result: SSRResult): Promise<string> { const styles = Array.from(result.styles) .filter(uniqueElements) .map((style) => renderElement('style', style)); - let needsHydrationStyles = false; + let needsHydrationStyles = result._metadata.needsHydrationStyles; const scripts = Array.from(result.scripts) .filter(uniqueElements) .map((script, i) => { - if ('data-astro-component-hydration' in script.props) { - needsHydrationStyles = true; - } return renderElement('script', { ...script, props: { ...script.props, 'astro-script': result._metadata.pathname + '/script-' + i }, @@ -562,7 +578,7 @@ export async function renderHead(result: SSRResult): Promise<string> { styles.push( renderElement('style', { props: {}, - children: 'astro-root, astro-fragment { display: contents; }', + children: 'astro-island, astro-fragment { display: contents; }', }) ); } diff --git a/packages/astro/test/0-css.test.js b/packages/astro/test/0-css.test.js index 65efdeba2..8a6130429 100644 --- a/packages/astro/test/0-css.test.js +++ b/packages/astro/test/0-css.test.js @@ -56,7 +56,7 @@ describe('CSS', function () { expect($('#passed-in').attr('class')).to.match(/outer astro-[A-Z0-9]+ astro-[A-Z0-9]+/); }); - it('Using hydrated components adds astro-root styles', async () => { + it('Using hydrated components adds astro-island styles', async () => { const inline = $('style').html(); expect(inline).to.include('display: contents'); }); diff --git a/packages/astro/test/astro-client-only.test.js b/packages/astro/test/astro-client-only.test.js index 5e2cc6ce8..7a096453f 100644 --- a/packages/astro/test/astro-client-only.test.js +++ b/packages/astro/test/astro-client-only.test.js @@ -16,13 +16,13 @@ describe('Client only components', () => { const html = await fixture.readFile('/index.html'); const $ = cheerioLoad(html); - // test 1: <astro-root> is empty - expect($('astro-root').html()).to.equal(''); + // test 1: <astro-island> is empty + expect($('astro-island').html()).to.equal(''); const $script = $('script'); const script = $script.html(); - // test 2: svelte renderer is on the page - expect(/import\(".\/entry.*/g.test(script)).to.be.ok; + // Has the renderer URL for svelte + expect($('astro-island').attr('renderer-url').length).to.be.greaterThan(0); }); it('Adds the CSS to the page', async () => { diff --git a/packages/astro/test/astro-dynamic.test.js b/packages/astro/test/astro-dynamic.test.js index 1b8b323ee..ed1e9df08 100644 --- a/packages/astro/test/astro-dynamic.test.js +++ b/packages/astro/test/astro-dynamic.test.js @@ -16,27 +16,25 @@ describe('Dynamic components', () => { const html = await fixture.readFile('/index.html'); const $ = cheerio.load(html); - expect($('script').length).to.eq(2); + expect($('script').length).to.eq(1); }); it('Loads pages using client:media hydrator', async () => { - const root = new URL('http://example.com/media/index.html'); const html = await fixture.readFile('/media/index.html'); const $ = cheerio.load(html); // test 1: static value rendered - expect($('script').length).to.equal(2); // One for each + expect($('script').length).to.equal(1); // One overall }); it('Loads pages using client:only hydrator', async () => { const html = await fixture.readFile('/client-only/index.html'); const $ = cheerio.load(html); - // test 1: <astro-root> is empty. - expect($('<astro-root>').html()).to.equal(''); - // test 2: correct script is being loaded. - // because of bundling, we don't have access to the source import, - // only the bundled import. - expect($('script').html()).to.include(`import setup from '../entry`); + // test 1: <astro-island> is empty. + expect($('astro-island').html()).to.equal(''); + + // Has the directive URL + expect($('astro-island').attr('directive-url').length).to.be.greaterThan(0); }); }); diff --git a/packages/astro/test/custom-elements.test.js b/packages/astro/test/custom-elements.test.js index a00ea6887..0a380026f 100644 --- a/packages/astro/test/custom-elements.test.js +++ b/packages/astro/test/custom-elements.test.js @@ -50,7 +50,7 @@ describe('Custom Elements', () => { // Hydration // test 3: Component and polyfill scripts bundled separately - expect($('script[type=module]')).to.have.lengthOf(1); + expect($('script')).to.have.lengthOf(2); }); it('Custom elements not claimed by renderer are rendered as regular HTML', async () => { diff --git a/packages/astro/test/react-component.test.js b/packages/astro/test/react-component.test.js index 749fc0c16..ee984e756 100644 --- a/packages/astro/test/react-component.test.js +++ b/packages/astro/test/react-component.test.js @@ -42,11 +42,7 @@ describe('React Components', () => { expect($('#pure')).to.have.lengthOf(1); // test 8: Check number of islands - expect($('astro-root[uid]')).to.have.lengthOf(5); - - // test 9: Check island deduplication - const uniqueRootUIDs = new Set($('astro-root').map((i, el) => $(el).attr('uid'))); - expect(uniqueRootUIDs.size).to.equal(4); + expect($('astro-island')).to.have.lengthOf(5); }); it('Can load Vue', async () => { diff --git a/packages/astro/test/vue-component.test.js b/packages/astro/test/vue-component.test.js index 3c57c6544..5fd3885ba 100644 --- a/packages/astro/test/vue-component.test.js +++ b/packages/astro/test/vue-component.test.js @@ -27,18 +27,11 @@ describe('Vue component', () => { // test 1: renders all components correctly expect(allPreValues).to.deep.equal(['0', '1', '1', '1', '10', '100', '1000']); - // test 2: renders 3 <astro-root>s - expect($('astro-root')).to.have.lengthOf(6); + // test 2: renders 3 <astro-islands>s + expect($('astro-island')).to.have.lengthOf(6); - // test 3: all <astro-root>s have uid attributes - expect($('astro-root[uid]')).to.have.lengthOf(6); - - // test 4: treats <my-button> as a custom element + // test 3: treats <my-button> as a custom element expect($('my-button')).to.have.lengthOf(7); - - // test 5: components with identical render output and props have been deduplicated - const uniqueRootUIDs = $('astro-root').map((i, el) => $(el).attr('uid')); - expect(new Set(uniqueRootUIDs).size).to.equal(5); }); }); diff --git a/packages/markdown/remark/src/rehype-islands.ts b/packages/markdown/remark/src/rehype-islands.ts index bbd584792..a8b78848d 100644 --- a/packages/markdown/remark/src/rehype-islands.ts +++ b/packages/markdown/remark/src/rehype-islands.ts @@ -9,14 +9,14 @@ const visit = _visit as ( ) => any; // This fixes some confusing bugs coming from somewhere inside of our Markdown pipeline. -// `unist`/`remark`/`rehype` (not sure) often generate malformed HTML inside of <astro-root> +// `unist`/`remark`/`rehype` (not sure) often generate malformed HTML inside of <astro-island> // For hydration to work properly, frameworks need the DOM to be the exact same on server/client. // This reverts some "helpful corrections" that are applied to our perfectly valid HTML! export default function rehypeIslands(): any { return function (node: any): any { return visit(node, 'element', (el) => { - // Bugs only happen inside of <astro-root> islands - if (el.tagName == 'astro-root') { + // Bugs only happen inside of <astro-island> islands + if (el.tagName == 'astro-island') { visit(el, 'text', (child, index, parent) => { if (child.type === 'text') { // Sometimes comments can be trapped as text, which causes them to be escaped diff --git a/packages/markdown/remark/src/remark-unwrap.ts b/packages/markdown/remark/src/remark-unwrap.ts index 3ce7a72c0..05f16fbee 100644 --- a/packages/markdown/remark/src/remark-unwrap.ts +++ b/packages/markdown/remark/src/remark-unwrap.ts @@ -8,7 +8,7 @@ const visit = _visit as ( callback?: (node: any, index: number, parent: any) => any ) => any; -// Remove the wrapping paragraph for <astro-root> islands +// Remove the wrapping paragraph for <astro-island> islands export default function remarkUnwrap() { const astroRootNodes = new Set(); let insideAstroRoot = false; @@ -19,10 +19,10 @@ export default function remarkUnwrap() { astroRootNodes.clear(); visit(tree, 'html', (node) => { - if (node.value.indexOf('<astro-root') > -1 && !insideAstroRoot) { + if (node.value.indexOf('<astro-island') > -1 && !insideAstroRoot) { insideAstroRoot = true; } - if (node.value.indexOf('</astro-root') > -1 && insideAstroRoot) { + if (node.value.indexOf('</astro-island') > -1 && insideAstroRoot) { insideAstroRoot = false; } astroRootNodes.add(node); |