fix(compiler): add heritage clauses earlier in native transform (#4769)

alicewriteswrongs · web-flow · commit 9a92ad12f628 · 2023-09-11T13:19:51.000Z
This fixes an issue that surface in the stencil / ionic-framework nightly tests, where a `super()` call was mistakenly omitted from native components. This was occurring after changing to use the `updateConstructor` helper function in #4741 in the native transform. When that function updates the constructor on a class it inspects the class declaration's heritage clauses to determine if a `super()` call needs to be present in the constructor, and adds one if needed. In the native component transform, however, the transformer to add an `extends HTMLElement` heritage clause and transform the constructor were called separately and then combined into a single updated class declaration using `updateComponentClass`. This meant that when the `updateConstructor` function was called the class declaration node didn't yet have a heritage function, so a `super()` call was not added. This was addressed by a small refactor to the heritage clause insertion function. Instead of creating and returning an updated heritage clause it uses `ts.factory.updateClassDeclaration` to return an updated class declaration node with an appropriate heritage clause added to it. This updated class declaration is then passed to `updateConstructor` and a `super()` call is correctly inserted.
diff --git a/src/compiler/transformers/component-native/native-component.ts b/src/compiler/transformers/component-native/native-component.ts
@@ -35,9 +35,9 @@ export const updateNativeComponentClass = (
   moduleFile: d.Module,
   cmp: d.ComponentCompilerMeta,
 ): ts.ClassDeclaration | ts.VariableStatement => {
-  const heritageClauses = updateNativeHostComponentHeritageClauses(classNode, moduleFile);
-  const members = updateNativeHostComponentMembers(transformOpts, classNode, moduleFile, cmp);
-  return updateComponentClass(transformOpts, classNode, heritageClauses, members);
+  const withHeritageClauses = updateNativeHostComponentHeritageClauses(classNode, moduleFile);
+  const members = updateNativeHostComponentMembers(transformOpts, withHeritageClauses, moduleFile, cmp);
+  return updateComponentClass(transformOpts, withHeritageClauses, withHeritageClauses.heritageClauses, members);
 };
 
 /**
@@ -46,15 +46,15 @@ export const updateNativeComponentClass = (
  *
  * @param classNode the syntax tree of the Stencil component class to update
  * @param moduleFile the Stencil Module associated with the provided class node
- * @returns the generated heritage clause
+ * @returns an updated class declaration with the generated heritage clause
  */
 const updateNativeHostComponentHeritageClauses = (
   classNode: ts.ClassDeclaration,
   moduleFile: d.Module,
-): ts.NodeArray<ts.HeritageClause> | [ts.HeritageClause] => {
+): ts.ClassDeclaration => {
   if (classNode.heritageClauses != null && classNode.heritageClauses.length > 0) {
     // the syntax tree has a heritage clause already, don't generate a new one
-    return classNode.heritageClauses;
+    return classNode;
   }
 
   if (moduleFile.cmps.length >= 1) {
@@ -66,7 +66,14 @@ const updateNativeHostComponentHeritageClauses = (
     ts.factory.createExpressionWithTypeArguments(ts.factory.createIdentifier(HTML_ELEMENT), []),
   ]);
 
-  return [heritageClause];
+  return ts.factory.updateClassDeclaration(
+    classNode,
+    classNode.modifiers,
+    classNode.name,
+    classNode.typeParameters,
+    [heritageClause],
+    classNode.members,
+  );
 };
 
 /**
