diff --git a/.changeset/many-schools-grab.md b/.changeset/many-schools-grab.md new file mode 100644 index 0000000000..92c3041ebe --- /dev/null +++ b/.changeset/many-schools-grab.md @@ -0,0 +1,10 @@ +--- +'astro': patch +'@astrojs/renderer-preact': patch +'@astrojs/renderer-react': patch +'@astrojs/renderer-svelte': patch +'@astrojs/renderer-vue': patch +'@astrojs/renderer-solid': patch +--- + +Fix behavior of renderers when no children are passed in diff --git a/netlify.toml b/netlify.toml index aad6be03c6..402f958ece 100644 --- a/netlify.toml +++ b/netlify.toml @@ -1,2 +1,2 @@ [build] - ignore = "git diff --quiet main HEAD www/ docs/" + ignore = "git diff --quiet $COMMIT_REF $CACHED_COMMIT_REF -- docs/ www/" diff --git a/packages/astro/test/fixtures/slots-preact/src/components/Counter.jsx b/packages/astro/test/fixtures/slots-preact/src/components/Counter.jsx new file mode 100644 index 0000000000..cc11b9ee3f --- /dev/null +++ b/packages/astro/test/fixtures/slots-preact/src/components/Counter.jsx @@ -0,0 +1,21 @@ +import { h, Fragment } from 'preact'; +import { useState } from 'preact/hooks' + +export default function Counter({ children, count: initialCount, case: id }) { + const [count, setCount] = useState(initialCount); + const add = () => setCount((i) => i + 1); + const subtract = () => setCount((i) => i - 1); + + return ( + <> +
+ + 
{count}
+ +
+
+ {children ||

Fallback

} +
+ + ); +} diff --git a/packages/astro/test/fixtures/slots-preact/src/pages/index.astro b/packages/astro/test/fixtures/slots-preact/src/pages/index.astro new file mode 100644 index 0000000000..f8f101e73e --- /dev/null +++ b/packages/astro/test/fixtures/slots-preact/src/pages/index.astro @@ -0,0 +1,11 @@ +--- +import Counter from '../components/Counter.jsx' +--- +
+ + + {0} + {false} + {''} +

Hello world!

 +
diff --git a/packages/astro/test/fixtures/slots-react/src/components/Counter.jsx b/packages/astro/test/fixtures/slots-react/src/components/Counter.jsx new file mode 100644 index 0000000000..93f267ca4f --- /dev/null +++ b/packages/astro/test/fixtures/slots-react/src/components/Counter.jsx @@ -0,0 +1,20 @@ +import React, { useState } from 'react'; + +export default function Counter({ children, count: initialCount, case: id }) { + const [count, setCount] = useState(initialCount); + const add = () => setCount((i) => i + 1); + const subtract = () => setCount((i) => i - 1); + + return ( + <> +
+ + 
{count}
+ +
+
+ {children ||

Fallback

} +
+ + ); +} diff --git a/packages/astro/test/fixtures/slots-react/src/pages/index.astro b/packages/astro/test/fixtures/slots-react/src/pages/index.astro new file mode 100644 index 0000000000..f8f101e73e --- /dev/null +++ b/packages/astro/test/fixtures/slots-react/src/pages/index.astro @@ -0,0 +1,11 @@ +--- +import Counter from '../components/Counter.jsx' +--- +
+ + + {0} + {false} + {''} +

Hello world!

 +
diff --git a/packages/astro/test/fixtures/slots-solid/src/components/Counter.jsx b/packages/astro/test/fixtures/slots-solid/src/components/Counter.jsx new file mode 100644 index 0000000000..cbd8ccf225 --- /dev/null +++ b/packages/astro/test/fixtures/slots-solid/src/components/Counter.jsx @@ -0,0 +1,14 @@ +import React, { useState } from 'react'; + +export default function Counter({ children, count: initialCount, case: id }) { + return ( + <> +
+ 
{0}
+
+
+ {children ||

Fallback

} +
+ + ); +} diff --git a/packages/astro/test/fixtures/slots-solid/src/pages/index.astro b/packages/astro/test/fixtures/slots-solid/src/pages/index.astro new file mode 100644 index 0000000000..f8f101e73e --- /dev/null +++ b/packages/astro/test/fixtures/slots-solid/src/pages/index.astro @@ -0,0 +1,11 @@ +--- +import Counter from '../components/Counter.jsx' +--- +
+ + + {0} + {false} + {''} +

Hello world!

 +
diff --git a/packages/astro/test/fixtures/slots-svelte/src/components/Counter.svelte b/packages/astro/test/fixtures/slots-svelte/src/components/Counter.svelte new file mode 100644 index 0000000000..11901049e9 --- /dev/null +++ b/packages/astro/test/fixtures/slots-svelte/src/components/Counter.svelte @@ -0,0 +1,36 @@ + + +
+ + 
{ count }
+ +
+
+ +

Fallback

+ +
+ + diff --git a/packages/astro/test/fixtures/slots-svelte/src/pages/index.astro b/packages/astro/test/fixtures/slots-svelte/src/pages/index.astro new file mode 100644 index 0000000000..bc25c17c71 --- /dev/null +++ b/packages/astro/test/fixtures/slots-svelte/src/pages/index.astro @@ -0,0 +1,11 @@ +--- +import Counter from '../components/Counter.svelte' +--- +
+ + + {0} + {false} + {''} +

Hello world!

 +
diff --git a/packages/astro/test/fixtures/slots-vue/src/components/Counter.vue b/packages/astro/test/fixtures/slots-vue/src/components/Counter.vue new file mode 100644 index 0000000000..304511560d --- /dev/null +++ b/packages/astro/test/fixtures/slots-vue/src/components/Counter.vue @@ -0,0 +1,46 @@ + + + + + diff --git a/packages/astro/test/fixtures/slots-vue/src/pages/index.astro b/packages/astro/test/fixtures/slots-vue/src/pages/index.astro new file mode 100644 index 0000000000..65ca267269 --- /dev/null +++ b/packages/astro/test/fixtures/slots-vue/src/pages/index.astro @@ -0,0 +1,11 @@ +--- +import Counter from '../components/Counter.vue' +--- +
+ + + {0} + {false} + {''} +

Hello world!

 +
diff --git a/packages/astro/test/slots-preact.test.js b/packages/astro/test/slots-preact.test.js new file mode 100644 index 0000000000..1f85794755 --- /dev/null +++ b/packages/astro/test/slots-preact.test.js @@ -0,0 +1,24 @@ +import { expect } from 'chai'; +import cheerio from 'cheerio'; +import { loadFixture } from './test-utils.js'; + +describe('Slots: Preact', () => { + let fixture; + + before(async () => { + fixture = await loadFixture({ projectRoot: './fixtures/slots-preact/', renderers: ['@astrojs/renderer-preact'] }); + await fixture.build(); + }); + + it('Renders default slot', async () => { + const html = await fixture.readFile('/index.html'); + const $ = cheerio.load(html); + + expect($('#default-self-closing').text().trim()).to.equal('Fallback'); + expect($('#default-empty').text().trim()).to.equal('Fallback'); + expect($('#zero').text().trim()).to.equal('0'); + expect($('#false').text().trim()).to.equal(''); + expect($('#string').text().trim()).to.equal(''); + expect($('#content').text().trim()).to.equal('Hello world!'); + }); +}); diff --git a/packages/astro/test/slots-react.test.js b/packages/astro/test/slots-react.test.js new file mode 100644 index 0000000000..d65411970a --- /dev/null +++ b/packages/astro/test/slots-react.test.js @@ -0,0 +1,24 @@ +import { expect } from 'chai'; +import cheerio from 'cheerio'; +import { loadFixture } from './test-utils.js'; + +describe('Slots: React', () => { + let fixture; + + before(async () => { + fixture = await loadFixture({ projectRoot: './fixtures/slots-react/', renderers: ['@astrojs/renderer-react'] }); + await fixture.build(); + }); + + it('Renders default slot', async () => { + const html = await fixture.readFile('/index.html'); + const $ = cheerio.load(html); + + expect($('#default-self-closing').text().trim()).to.equal('Fallback'); + expect($('#default-empty').text().trim()).to.equal('Fallback'); + expect($('#zero').text().trim()).to.equal('0'); + expect($('#false').text().trim()).to.equal(''); + expect($('#string').text().trim()).to.equal(''); + expect($('#content').text().trim()).to.equal('Hello world!'); + }); +}); diff --git a/packages/astro/test/slots-solid.test.js b/packages/astro/test/slots-solid.test.js new file mode 100644 index 0000000000..29c2005d4d --- /dev/null +++ b/packages/astro/test/slots-solid.test.js @@ -0,0 +1,24 @@ +import { expect } from 'chai'; +import cheerio from 'cheerio'; +import { loadFixture } from './test-utils.js'; + +describe('Slots: Solid', () => { + let fixture; + + before(async () => { + fixture = await loadFixture({ projectRoot: './fixtures/slots-solid/', renderers: ['@astrojs/renderer-solid'] }); + await fixture.build(); + }); + + it('Renders default slot', async () => { + const html = await fixture.readFile('/index.html'); + const $ = cheerio.load(html); + + expect($('#default-self-closing').text().trim()).to.equal('Fallback'); + expect($('#default-empty').text().trim()).to.equal('Fallback'); + expect($('#zero').text().trim()).to.equal('0'); + expect($('#false').text().trim()).to.equal(''); + expect($('#string').text().trim()).to.equal(''); + expect($('#content').text().trim()).to.equal('Hello world!'); + }); +}); diff --git a/packages/astro/test/slots-svelte.test.js b/packages/astro/test/slots-svelte.test.js new file mode 100644 index 0000000000..08296f8a1a --- /dev/null +++ b/packages/astro/test/slots-svelte.test.js @@ -0,0 +1,24 @@ +import { expect } from 'chai'; +import cheerio from 'cheerio'; +import { loadFixture } from './test-utils.js'; + +describe('Slots: Svelte', () => { + let fixture; + + before(async () => { + fixture = await loadFixture({ projectRoot: './fixtures/slots-svelte/', renderers: ['@astrojs/renderer-svelte'] }); + await fixture.build(); + }); + + it('Renders default slot', async () => { + const html = await fixture.readFile('/index.html'); + const $ = cheerio.load(html); + + expect($('#default-self-closing').text().trim()).to.equal('Fallback'); + expect($('#default-empty').text().trim()).to.equal('Fallback'); + expect($('#zero').text().trim()).to.equal(''); + expect($('#false').text().trim()).to.equal(''); + expect($('#string').text().trim()).to.equal(''); + expect($('#content').text().trim()).to.equal('Hello world!'); + }); +}); diff --git a/packages/astro/test/slots-vue.test.js b/packages/astro/test/slots-vue.test.js new file mode 100644 index 0000000000..7a52f7aab4 --- /dev/null +++ b/packages/astro/test/slots-vue.test.js @@ -0,0 +1,24 @@ +import { expect } from 'chai'; +import cheerio from 'cheerio'; +import { loadFixture } from './test-utils.js'; + +describe('Slots: Vue', () => { + let fixture; + + before(async () => { + fixture = await loadFixture({ projectRoot: './fixtures/slots-vue/', renderers: ['@astrojs/renderer-vue'] }); + await fixture.build(); + }); + + it('Renders default slot', async () => { + const html = await fixture.readFile('/index.html'); + const $ = cheerio.load(html); + + expect($('#default-self-closing').text().trim()).to.equal('Fallback'); + expect($('#default-empty').text().trim()).to.equal('Fallback'); + expect($('#zero').text().trim()).to.equal('0'); + expect($('#false').text().trim()).to.equal(''); + expect($('#string').text().trim()).to.equal(''); + expect($('#content').text().trim()).to.equal('Hello world!'); + }); +}); diff --git a/packages/renderers/renderer-preact/client.js b/packages/renderers/renderer-preact/client.js index 22dd281241..85c18c76c9 100644 --- a/packages/renderers/renderer-preact/client.js +++ b/packages/renderers/renderer-preact/client.js @@ -1,4 +1,4 @@ import { h, render } from 'preact'; import StaticHtml from './static-html.js'; -export default (element) => (Component, props, children) => render(h(Component, props, h(StaticHtml, { value: children })), element); +export default (element) => (Component, props, children) => render(h(Component, props, children != null ? h(StaticHtml, { value: children }) : children), element); diff --git a/packages/renderers/renderer-preact/server.js b/packages/renderers/renderer-preact/server.js index b50468ab5f..696217abb6 100644 --- a/packages/renderers/renderer-preact/server.js +++ b/packages/renderers/renderer-preact/server.js @@ -25,7 +25,7 @@ function check(Component, props, children) { } function renderToStaticMarkup(Component, props, children) { - const html = render(h(Component, { ...props, children: h(StaticHtml, { value: children }), innerHTML: children })); + const html = render(h(Component, props, children != null ? h(StaticHtml, { value: children }) : children)); return { html }; } diff --git a/packages/renderers/renderer-react/client.js b/packages/renderers/renderer-react/client.js index b699a76d00..aa29d1ba99 100644 --- a/packages/renderers/renderer-react/client.js +++ b/packages/renderers/renderer-react/client.js @@ -3,4 +3,11 @@ import { hydrate } from 'react-dom'; import StaticHtml from './static-html.js'; export default (element) => (Component, props, children) => - hydrate(createElement(Component, { ...props, suppressHydrationWarning: true }, createElement(StaticHtml, { value: children, suppressHydrationWarning: true })), element); + hydrate( + createElement( + Component, + { ...props, suppressHydrationWarning: true }, + children != null ? createElement(StaticHtml, { value: children, suppressHydrationWarning: true }) : children + ), + element + ); diff --git a/packages/renderers/renderer-react/server.js b/packages/renderers/renderer-react/server.js index 905390f38a..2660c8762d 100644 --- a/packages/renderers/renderer-react/server.js +++ b/packages/renderers/renderer-react/server.js @@ -50,7 +50,7 @@ function renderToStaticMarkup(Component, props, children, metadata) { delete props['class']; const vnode = React.createElement(Component, { ...props, - children: React.createElement(StaticHtml, { value: children }), + children: children != null ? React.createElement(StaticHtml, { value: children }) : undefined, }); let html; if (metadata && metadata.hydrate) { diff --git a/packages/renderers/renderer-solid/client.js b/packages/renderers/renderer-solid/client.js index f4cdb4ead4..9aa0ecbb80 100644 --- a/packages/renderers/renderer-solid/client.js +++ b/packages/renderers/renderer-solid/client.js @@ -1,8 +1,11 @@ import { hydrate, createComponent } from 'solid-js/web'; export default (element) => (Component, props, childHTML) => { - const children = document.createElement('astro-fragment'); - children.innerHTML = childHTML; + let children; + if (childHTML != null) { + children = document.createElement('astro-fragment'); + children.innerHTML = childHTML; + } // Using Solid's `hydrate` method ensures that a `root` is created // in order to properly handle reactivity. It also handles diff --git a/packages/renderers/renderer-solid/server.js b/packages/renderers/renderer-solid/server.js index 101f3480a5..238d7531a9 100644 --- a/packages/renderers/renderer-solid/server.js +++ b/packages/renderers/renderer-solid/server.js @@ -16,7 +16,7 @@ function renderToStaticMarkup(Component, props, children) { ...props, // In Solid SSR mode, `ssr` creates the expected structure for `children`. // In Solid client mode, `ssr` is just a stub. - children: ssr(`${children}`), + children: children != null ? ssr(`${children}`) : children, }) ); return { html: html + `` }; diff --git a/packages/renderers/renderer-svelte/Wrapper.svelte b/packages/renderers/renderer-svelte/Wrapper.svelte index 78d4a402b1..c1ee77d918 100644 --- a/packages/renderers/renderer-svelte/Wrapper.svelte +++ b/packages/renderers/renderer-svelte/Wrapper.svelte @@ -13,7 +13,7 @@ const { __astro_component: Component, __astro_children, ...props } = $$props; - {#if __astro_children} + {#if __astro_children != null} {@html __astro_children} diff --git a/packages/renderers/renderer-svelte/Wrapper.svelte.ssr.js b/packages/renderers/renderer-svelte/Wrapper.svelte.ssr.js index 909e719fb9..b866f0894f 100644 --- a/packages/renderers/renderer-svelte/Wrapper.svelte.ssr.js +++ b/packages/renderers/renderer-svelte/Wrapper.svelte.ssr.js @@ -3,15 +3,12 @@ import { create_ssr_component, missing_component, validate_component } from 'sve const App = create_ssr_component(($$result, $$props, $$bindings, slots) => { const { __astro_component: Component, __astro_children, ...props } = $$props; + const children = {}; + if (__astro_children != null) { + children.default = () => `${__astro_children}`; + } - return `${validate_component(Component || missing_component, 'svelte:component').$$render( - $$result, - Object.assign(props), - {}, - { - default: () => `${__astro_children ? `${__astro_children}` : ``}`, - } - )}`; + return `${validate_component(Component || missing_component, 'svelte:component').$$render($$result, Object.assign(props), {}, children)}`; }); export default App; diff --git a/packages/renderers/renderer-vue/client.js b/packages/renderers/renderer-vue/client.js index dfbd48a30f..edda137cd8 100644 --- a/packages/renderers/renderer-vue/client.js +++ b/packages/renderers/renderer-vue/client.js @@ -5,6 +5,10 @@ export default (element) => (Component, props, children) => { delete props['class']; // Expose name on host component for Vue devtools const name = Component.name ? `${Component.name} Host` : undefined; - const app = createSSRApp({ name, render: () => h(Component, props, { default: () => h(StaticHtml, { value: children }) }) }); + const slots = {}; + if (children != null) { + slots.default = () => h(StaticHtml, { value: children }); + } + const app = createSSRApp({ name, render: () => h(Component, props, slots) }); app.mount(element, true); }; diff --git a/packages/renderers/renderer-vue/server.js b/packages/renderers/renderer-vue/server.js index b4254458d3..83e389b5dd 100644 --- a/packages/renderers/renderer-vue/server.js +++ b/packages/renderers/renderer-vue/server.js @@ -7,7 +7,11 @@ function check(Component) { } async function renderToStaticMarkup(Component, props, children) { - const app = createSSRApp({ render: () => h(Component, props, { default: () => h(StaticHtml, { value: children }) }) }); + const slots = {}; + if (children != null) { + slots.default = () => h(StaticHtml, { value: children }); + } + const app = createSSRApp({ render: () => h(Component, props, slots) }); const html = await renderToString(app); return { html }; }