fix(ssr): support export { Cmp as default }

Author: wjhsf

packages/@lwc/engine-server/src/__tests__/fixtures/exports/component-as-default/modules/x/light/light.js

@@ -1,7 +1,7 @@
 import { LightningElement } from 'lwc';
 
-class Component extends LightningElement {
+class Light extends LightningElement {
     static renderMode = 'light';
 }
 
-export { Component as default };
+export { Light as default };

packages/@lwc/engine-server/src/__tests__/fixtures/exports/component-as-default/modules/x/parent/parent.js

@@ -1,3 +1,3 @@
 import { LightningElement } from 'lwc';
 
-export default class Component extends LightningElement {}
+export default class Parent extends LightningElement {}

packages/@lwc/engine-server/src/__tests__/fixtures/exports/component-as-default/modules/x/shadow/shadow.js

@@ -1,5 +1,5 @@
 import { LightningElement } from 'lwc';
 
-class Component extends LightningElement {}
+class Shadow extends LightningElement {}
 
-export { Component as default };
+export { Shadow as default };

packages/@lwc/ssr-compiler/src/compile-template/transformers/component/component.ts

@@ -37,19 +37,23 @@ const bYieldFromChildGenerator = esTemplateWithYield`
         }
 
         const scopeToken = hasScopedStylesheets ? stylesheetScopeToken : undefined;
-        const Ctor = ${/* Component */ is.identifier};
+        const generateMarkup = ${/* Component */ is.identifier}[__SYMBOL__GENERATE_MARKUP];
 
-        yield* Ctor[__SYMBOL__GENERATE_MARKUP](
-            ${/* tag name */ is.literal}, 
-            childProps, 
-            childAttrs, 
-            shadowSlottedContent,
-            lightSlottedContentMap,
-            scopedSlottedContentMap,
-            instance,
-            scopeToken,
-            contextfulParent
-        );
+        if (!generateMarkup) {
+            yield __unimplementedTmpl(${/* tag name */ is.literal}, ${/* Component */ 3});
+        } else {
+            yield* generateMarkup(
+                ${/* tag name */ 4}, 
+                childProps, 
+                childAttrs, 
+                shadowSlottedContent,
+                lightSlottedContentMap,
+                scopedSlottedContentMap,
+                instance,
+                scopeToken,
+                contextfulParent
+            );
+        }
     }
 `<EsBlockStatement>;
 
@@ -60,6 +64,7 @@ export const Component: Transformer<IrComponent> = function Component(node, cxt)
     cxt.import({ default: childComponentLocalName }, importPath);
     cxt.import({
         SYMBOL__GENERATE_MARKUP: '__SYMBOL__GENERATE_MARKUP',
+        unimplementedTmpl: '__unimplementedTmpl',
     });
     const childTagName = node.name;
 

packages/@lwc/ssr-runtime/src/index.ts

@@ -28,6 +28,7 @@ export {
     serverSideRenderComponent,
     // renderComponent is an alias for serverSideRenderComponent
     serverSideRenderComponent as renderComponent,
+    unimplementedTmpl,
 } from './render';
 export { normalizeTextContent, renderTextContent } from './render-text-content';
 export { hasScopedStaticStylesheets, renderStylesheets } from './styles';

packages/@lwc/ssr-runtime/src/render.ts

@@ -125,6 +125,20 @@ export function fallbackTmplNoYield(
     }
 }
 
+/**
+ * If a component is incorrectly implemented, and is missing a `generateMarkup` function,
+ * then use this template as a fallback so the world doesn't explode.
+ * @example export { Cmp as default }
+ */
+export function unimplementedTmpl(tagName: string, Cmp?: LightningElementConstructor): string {
+    let html = `<${tagName}>`;
+    if (Cmp?.renderMode !== 'light') {
+        html += '<template shadowrootmode="open"></template>';
+    }
+    html += `</${tagName}>`;
+    return html;
+}
+
 export type GenerateMarkupFn = (
     tagName: string,
     props: Properties | null,