fix(dist-custom-elements): add ssr checks (#3131)

willmartian · web-flow · commit 9a232ea36832 · 2021-11-09T16:42:47.000-05:00
the generated defineCustomElement function now checks if customElements is defined,
and exits if it is not.

HTMLElement is now imported from stencil if one or more components are found in a
module
diff --git a/src/compiler/transformers/component-native/add-define-custom-element-function.ts b/src/compiler/transformers/component-native/add-define-custom-element-function.ts
@@ -143,6 +143,9 @@ const createCustomElementsDefineCase = (tagName: string, actionExpression: ts.Ex
  * Add the main `defineCustomElement` function e.g.
  * ```javascript
  * function defineCustomElement() {
+ *  if (typeof customElements === 'undefined') {
+ *    return;
+ *  }
  *  const components = ['my-component'];
  *   components.forEach(tagName => {
  *     switch (tagName) {
@@ -176,6 +179,13 @@ const addDefineCustomElementFunction = (
     undefined,
     ts.factory.createBlock(
       [
+        ts.factory.createIfStatement(
+          ts.factory.createStrictEquality(
+            ts.factory.createTypeOfExpression(ts.factory.createIdentifier('customElements')),
+            ts.factory.createStringLiteral('undefined')
+          ),
+          ts.factory.createBlock([ts.factory.createReturnStatement()])
+        ),
         ts.factory.createVariableStatement(
           undefined,
           ts.factory.createVariableDeclarationList(
diff --git a/src/compiler/transformers/component-native/native-component.ts b/src/compiler/transformers/component-native/native-component.ts
@@ -27,12 +27,12 @@ const updateNativeHostComponentHeritageClauses = (classNode: ts.ClassDeclaration
     return classNode.heritageClauses;
   }
 
-  if (moduleFile.cmps.length > 1) {
+  if (moduleFile.cmps.length >= 1) {
     addCoreRuntimeApi(moduleFile, RUNTIME_APIS.HTMLElement);
   }
 
-  const heritageClause = ts.createHeritageClause(ts.SyntaxKind.ExtendsKeyword, [
-    ts.createExpressionWithTypeArguments([], ts.createIdentifier(HTML_ELEMENT)),
+  const heritageClause = ts.factory.createHeritageClause(ts.SyntaxKind.ExtendsKeyword, [
+    ts.factory.createExpressionWithTypeArguments(ts.factory.createIdentifier(HTML_ELEMENT), []),
   ]);
 
   return [heritageClause];
diff --git a/src/compiler/transformers/test/native-constructor.spec.ts b/src/compiler/transformers/test/native-constructor.spec.ts
@@ -37,7 +37,7 @@ describe('nativeComponentTransform', () => {
       const transpiledModule = transpileModule(code, null, compilerCtx, null, [], [transformer]);
 
       expect(transpiledModule.outputText).toContain(
-        `import { attachShadow as __stencil_attachShadow, defineCustomElement as __stencil_defineCustomElement } from "@stencil/core";`
+        `import { HTMLElement, attachShadow as __stencil_attachShadow, defineCustomElement as __stencil_defineCustomElement } from "@stencil/core";`
       );
       expect(transpiledModule.outputText).toContain(`this.__attachShadow()`);
     });
@@ -62,7 +62,7 @@ describe('nativeComponentTransform', () => {
       const transpiledModule = transpileModule(code, null, compilerCtx, null, [], [transformer]);
 
       expect(transpiledModule.outputText).toContain(
-        `import { attachShadow as __stencil_attachShadow, defineCustomElement as __stencil_defineCustomElement } from "@stencil/core";`
+        `import { HTMLElement, attachShadow as __stencil_attachShadow, defineCustomElement as __stencil_defineCustomElement } from "@stencil/core";`
       );
       expect(transpiledModule.outputText).toContain(`this.__attachShadow()`);
     });

Original file line number	Diff line number	Diff line change
`@@ -27,12 +27,12 @@ const updateNativeHostComponentHeritageClauses = (classNode: ts.ClassDeclaration`
`27`	`27`	`return classNode.heritageClauses;`
`28`	`28`	`}`
`29`	`29`
`30`		`- if (moduleFile.cmps.length > 1) {`
	`30`	`+ if (moduleFile.cmps.length >= 1) {`
`31`	`31`	`addCoreRuntimeApi(moduleFile, RUNTIME_APIS.HTMLElement);`
`32`	`32`	`}`
`33`	`33`
`34`		`- const heritageClause = ts.createHeritageClause(ts.SyntaxKind.ExtendsKeyword, [`
`35`		`- ts.createExpressionWithTypeArguments([], ts.createIdentifier(HTML_ELEMENT)),`
	`34`	`+ const heritageClause = ts.factory.createHeritageClause(ts.SyntaxKind.ExtendsKeyword, [`
	`35`	`+ ts.factory.createExpressionWithTypeArguments(ts.factory.createIdentifier(HTML_ELEMENT), []),`
`36`	`36`	`]);`
`37`	`37`
`38`	`38`	`return [heritageClause];`