10 files changed, 33 insertions, 18 deletions
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 };
 }