diff --git a/src/generators/server-side-rendering/index.ts b/src/generators/server-side-rendering/index.ts index f9c40ddb08..13ad9f026d 100644 --- a/src/generators/server-side-rendering/index.ts +++ b/src/generators/server-side-rendering/index.ts @@ -189,6 +189,14 @@ export default function ssr( } ` } + + ${ + /__missingComponent/.test(generator.renderCode) && deindent` + var __missingComponent = { + render: () => '' + }; + ` + } `.replace(/(@+|#+|%+)(\w*(?:-\w*)?)/g, (match: string, sigil: string, name: string) => { if (sigil === '@') return generator.alias(name); if (sigil === '%') return generator.templateVars.get(name); diff --git a/src/generators/server-side-rendering/visitors/Component.ts b/src/generators/server-side-rendering/visitors/Component.ts index 74c7e239e4..1689647ba1 100644 --- a/src/generators/server-side-rendering/visitors/Component.ts +++ b/src/generators/server-side-rendering/visitors/Component.ts @@ -71,7 +71,14 @@ export default function visitComponent( ) .join(', '); - const expression = node.name === ':Self' ? generator.name : `%components-${node.name}`; + const isSwitch = node.name === ':Switch'; + if (isSwitch) block.contextualise(node.expression); + + const expression = ( + node.name === ':Self' ? generator.name : + isSwitch ? `((${node.metadata.snippet}) || __missingComponent)` : + `%components-${node.name}` + ); bindings.forEach(binding => { block.addBinding(binding, expression); diff --git a/src/generators/server-side-rendering/visitors/Element.ts b/src/generators/server-side-rendering/visitors/Element.ts index e1d7e197d0..8834a2b90b 100644 --- a/src/generators/server-side-rendering/visitors/Element.ts +++ b/src/generators/server-side-rendering/visitors/Element.ts @@ -40,7 +40,7 @@ export default function visitElement( return; } - if (generator.components.has(node.name) || node.name === ':Self') { + if (generator.components.has(node.name) || node.name === ':Self' || node.name === ':Switch') { visitComponent(generator, block, node); return; }