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

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
ionic-team · Nov 9, 2021 · 9a232ea · 9a232ea
1 parent 5bfbf40
commit 9a232ea
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 5 deletions.
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()`);
     });