fix: renderer behavior with no children (#2078)

* fix: renderer behavior with no children

* [ci] Prettier fix

* Force CI

* fix: properly handle falsy values

* [ci] Prettier fix

* chore: force ci

* [experiment] netlify ignore

Co-authored-by: GitHub Action <github-action@users.noreply.github.com>

.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

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/"

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>
+    </>
+  );
+}

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>

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>
+    </>
+  );
+}

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>

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>
+    </>
+  );
+}

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>

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>

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>

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>

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>

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!');
+  });
+});

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!');
+  });
+});

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!');
+  });
+});

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!');
+  });
+});

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!');
+  });
+});

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);

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 };
 }
 

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
+  );

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) {

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

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>` };

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>

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;

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);
 };

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 };
 }