diff options
27 files changed, 356 insertions, 19 deletions
diff --git a/.changeset/many-schools-grab.md b/.changeset/many-schools-grab.md new file mode 100644 index 000000000..92c3041eb --- /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 aad6be03c..402f958ec 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 000000000..cc11b9ee3 --- /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 ( + <> + <div className="counter"> + <button onClick={subtract}>-</button> + <pre>{count}</pre> + <button onClick={add}>+</button> + </div> + <div id={id} className="counter-message"> + {children || <h1>Fallback</h1>} + </div> + </> + ); +} 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 000000000..f8f101e73 --- /dev/null +++ b/packages/astro/test/fixtures/slots-preact/src/pages/index.astro @@ -0,0 +1,11 @@ +--- +import Counter from '../components/Counter.jsx' +--- +<main> + <Counter case="default-self-closing" client:visible/> + <Counter case="default-empty" client:visible></Counter> + <Counter case="zero" client:visible>{0}</Counter> + <Counter case="false" client:visible>{false}</Counter> + <Counter case="string" client:visible>{''}</Counter> + <Counter case="content" client:visible><h1 id="slotted">Hello world!</h1></Counter> +</main> 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 000000000..93f267ca4 --- /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 ( + <> + <div className="counter"> + <button onClick={subtract}>-</button> + <pre>{count}</pre> + <button onClick={add}>+</button> + </div> + <div id={id} className="counter-message"> + {children || <h1>Fallback</h1>} + </div> + </> + ); +} 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 000000000..f8f101e73 --- /dev/null +++ b/packages/astro/test/fixtures/slots-react/src/pages/index.astro @@ -0,0 +1,11 @@ +--- +import Counter from '../components/Counter.jsx' +--- +<main> + <Counter case="default-self-closing" client:visible/> + <Counter case="default-empty" client:visible></Counter> + <Counter case="zero" client:visible>{0}</Counter> + <Counter case="false" client:visible>{false}</Counter> + <Counter case="string" client:visible>{''}</Counter> + <Counter case="content" client:visible><h1 id="slotted">Hello world!</h1></Counter> +</main> 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 000000000..cbd8ccf22 --- /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 ( + <> + <div className="counter"> + <pre>{0}</pre> + </div> + <div id={id} className="counter-message"> + {children || <h1>Fallback</h1>} + </div> + </> + ); +} 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 000000000..f8f101e73 --- /dev/null +++ b/packages/astro/test/fixtures/slots-solid/src/pages/index.astro @@ -0,0 +1,11 @@ +--- +import Counter from '../components/Counter.jsx' +--- +<main> + <Counter case="default-self-closing" client:visible/> + <Counter case="default-empty" client:visible></Counter> + <Counter case="zero" client:visible>{0}</Counter> + <Counter case="false" client:visible>{false}</Counter> + <Counter case="string" client:visible>{''}</Counter> + <Counter case="content" client:visible><h1 id="slotted">Hello world!</h1></Counter> +</main> 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 000000000..11901049e --- /dev/null +++ b/packages/astro/test/fixtures/slots-svelte/src/components/Counter.svelte @@ -0,0 +1,36 @@ +<script> + let count = 0; + export let id; + + function add() { + count += 1; + } + + function subtract() { + count -= 1; + } +</script> + +<div class="counter"> + <button on:click={subtract}>-</button> + <pre>{ count }</pre> + <button on:click={add}>+</button> +</div> +<div id={id}> + <slot> + <h1 id="fallback">Fallback</h1> + </slot> +</div> + +<style> + .counter{ + display: grid; + font-size: 2em; + grid-template-columns: repeat(3, minmax(0, 1fr)); + margin-top: 2em; + place-items: center; + } + .message { + text-align: center; + } +</style> 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 000000000..bc25c17c7 --- /dev/null +++ b/packages/astro/test/fixtures/slots-svelte/src/pages/index.astro @@ -0,0 +1,11 @@ +--- +import Counter from '../components/Counter.svelte' +--- +<main> + <Counter id="default-self-closing" client:visible/> + <Counter id="default-empty" client:visible></Counter> + <Counter case="zero" client:visible>{0}</Counter> + <Counter case="false" client:visible>{false}</Counter> + <Counter case="string" client:visible>{''}</Counter> + <Counter id="content" client:visible><h1 id="slotted">Hello world!</h1></Counter> +</main> 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 000000000..304511560 --- /dev/null +++ b/packages/astro/test/fixtures/slots-vue/src/components/Counter.vue @@ -0,0 +1,46 @@ +<template> + <div class="counter"> + <button @click="subtract()">-</button> + <pre>{{ count }}</pre> + <button @click="add()">+</button> + </div> + <div :id="case" class="counter-message"> + <slot> + <h1>Fallback</h1> + </slot> + </div> +</template> + +<script> +import { ref } from 'vue'; +export default { + props: { + case: String, + }, + setup(props) { + const count = ref(0); + const add = () => (count.value = count.value + 1); + const subtract = () => (count.value = count.value - 1); + + return { + case: props.case, + count, + add, + subtract, + }; + }, +}; +</script> + +<style> +.counter { + display: grid; + font-size: 2em; + grid-template-columns: repeat(3, minmax(0, 1fr)); + margin-top: 2em; + place-items: center; +} +.counter-message { + text-align: center; +} +</style> 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 000000000..65ca26726 --- /dev/null +++ b/packages/astro/test/fixtures/slots-vue/src/pages/index.astro @@ -0,0 +1,11 @@ +--- +import Counter from '../components/Counter.vue' +--- +<main> + <Counter case="default-self-closing" client:visible/> + <Counter case="default-empty" client:visible></Counter> + <Counter case="zero" client:visible>{0}</Counter> + <Counter case="false" client:visible>{false}</Counter> + <Counter case="string" client:visible>{''}</Counter> + <Counter case="content" client:visible><h1 id="slotted">Hello world!</h1></Counter> +</main> diff --git a/packages/astro/test/slots-preact.test.js b/packages/astro/test/slots-preact.test.js new file mode 100644 index 000000000..1f8579475 --- /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 000000000..d65411970 --- /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 000000000..29c2005d4 --- /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 000000000..08296f8a1 --- /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 000000000..7a52f7aab --- /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 22dd28124..85c18c76c 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 b50468ab5..696217abb 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 b699a76d0..aa29d1ba9 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 905390f38..2660c8762 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 f4cdb4ead..9aa0ecbb8 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 101f3480a..238d7531a 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(`<astro-fragment>${children}</astro-fragment>`), + children: children != null ? ssr(`<astro-fragment>${children}</astro-fragment>`) : children, }) ); return { html: html + `<script>window._$HYDRATION||(window._$HYDRATION={events:[],completed:new WeakSet})</script>` }; diff --git a/packages/renderers/renderer-svelte/Wrapper.svelte b/packages/renderers/renderer-svelte/Wrapper.svelte index 78d4a402b..c1ee77d91 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; </script> <svelte:component this={Component} {...props}> - {#if __astro_children} + {#if __astro_children != null} <astro-fragment> {@html __astro_children} </astro-fragment> diff --git a/packages/renderers/renderer-svelte/Wrapper.svelte.ssr.js b/packages/renderers/renderer-svelte/Wrapper.svelte.ssr.js index 909e719fb..b866f0894 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-fragment>${__astro_children}</astro-fragment>`; + } - return `${validate_component(Component || missing_component, 'svelte:component').$$render( - $$result, - Object.assign(props), - {}, - { - default: () => `${__astro_children ? `<astro-fragment>${__astro_children}</astro-fragment>` : ``}`, - } - )}`; + 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 dfbd48a30..edda137cd 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 b4254458d..83e389b5d 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 }; } |