Merge branch 'main' into v3.0.0-dev

Author: rwaskiewicz

package-lock.json

@@ -289,12 +289,12 @@ export const createSystem = (c?: { logger?: Logger }) => {
       error: null,
     };
 
-    remoreDirSyncRecursive(p, opts, results);
+    removeDirSyncRecursive(p, opts, results);
 
     return results;
   };
 
-  const remoreDirSyncRecursive = (
+  const removeDirSyncRecursive = (
     p: string,
     opts: CompilerSystemRemoveDirectoryOptions,
     results: CompilerSystemRemoveDirectoryResults
@@ -309,7 +309,7 @@ export const createSystem = (c?: { logger?: Logger }) => {
           const item = items.get(dirItemPath);
           if (item) {
             if (item.isDirectory) {
-              remoreDirSyncRecursive(dirItemPath, opts, results);
+              removeDirSyncRecursive(dirItemPath, opts, results);
             } else if (item.isFile) {
               const removeFileResults = removeFileSync(dirItemPath);
               if (removeFileResults.error) {

src/compiler/sys/stencil-sys.ts

@@ -414,8 +414,20 @@ export const updateConstructor = (
  * @param classDeclaration a class declaration AST node
  * @returns whether this class has parents or not
  */
-const needsSuper = (classDeclaration: ts.ClassDeclaration): boolean =>
-  classDeclaration.heritageClauses && classDeclaration.heritageClauses.length > 0;
+const needsSuper = (classDeclaration: ts.ClassDeclaration): boolean => {
+  const hasHeritageClauses = classDeclaration.heritageClauses && classDeclaration.heritageClauses.length > 0;
+
+  if (hasHeritageClauses) {
+    // A {@link ts.SyntaxKind.HeritageClause} node may be for extending a
+    // superclass _or_ for implementing an interface. We only want to add a
+    // `super()` call to our synthetic constructor here in the case that there
+    // is a superclass, so we can check for that situation by checking for the
+    // presence of a heritage clause with the `.token` property set to
+    // `ts.SyntaxKind.ExtendsKeyword`.
+    return classDeclaration.heritageClauses.some((clause) => clause.token === ts.SyntaxKind.ExtendsKeyword);
+  }
+  return false;
+};
 
 /**
  * Create a statement with a call to `super()` suitable for including in the body of a constructor.

src/compiler/transformers/decorators-to-static/convert-decorators.ts

@@ -8,19 +8,7 @@ export const CLASS_DECORATORS_TO_REMOVE = ['Component'] as const;
  * Decorators on class members that we remove as part of the compilation
  * process
  */
-export const MEMBER_DECORATORS_TO_REMOVE = [
-  'Element',
-  'Event',
-  'Listen',
-  'Method',
-  'Prop',
-  // TODO(STENCIL-591): Remove Deprecated Decorator Names
-  'PropDidChange',
-  // TODO(STENCIL-591): Remove Deprecated Decorator Names
-  'PropWillChange',
-  'State',
-  'Watch',
-] as const;
+export const MEMBER_DECORATORS_TO_REMOVE = ['Element', 'Event', 'Listen', 'Method', 'Prop', 'State', 'Watch'] as const;
 
 /**
  * Decorators whose 'decorees' we need to rewrite during compilation from

src/compiler/transformers/decorators-to-static/decorators-constants.ts

@@ -148,6 +148,33 @@ describe('convert-decorators', () => {
         }}`
     );
   });
+
+  it('should not add a super call to the constructor if necessary', () => {
+    const t = transpileModule(`
+    @Component({tag: 'cmp-a'})
+      export class CmpA implements Foobar {
+        @State() count: number = 0;
+      }
+    `);
+
+    expect(t.outputText).toBe(
+      c`export class CmpA {
+        constructor() {
+          this.count = 0;
+        }
+
+        static get is() {
+          return "cmp-a";
+        }
+
+        static get states() {
+          return {
+            "count": {}
+          };
+        }}`
+    );
+  });
+
   it('should not convert `@Event` fields to constructor-initialization', () => {
     const t = transpileModule(`
     @Component({tag: 'cmp-a'})

src/compiler/transformers/test/convert-decorators.spec.ts

@@ -105,6 +105,7 @@ describe('parse events', () => {
       references: {
         Mode: {
           location: 'local',
+          path: 'module.tsx',
         },
       },
     });

src/compiler/transformers/test/parse-events.spec.ts

@@ -492,6 +492,15 @@ const getTypeReferenceLocation = (typeName: string, tsNode: ts.Node): d.Componen
   if (isExported) {
     return {
       location: 'local',
+      // If this is a local import, we know the path to the type
+      // is the same as the current source file path
+      //
+      // We need to explicitly include the path here because
+      // future logic for generating app types will use this resolved reference
+      // to ensure that type name collisions do no occur in the output type
+      // declaration file. If this path is omitted, the correct aliased type names
+      // will not be used for component event definitions
+      path: sourceFileObj.fileName,
     };
   }
 

src/compiler/transformers/transform-utils.ts

@@ -61,6 +61,7 @@ export const runTsProgram = async (
   // Finalize components metadata
   buildCtx.moduleFiles = Array.from(compilerCtx.moduleMap.values());
   buildCtx.components = getComponentsFromModules(buildCtx.moduleFiles);
+
   updateComponentBuildConditionals(compilerCtx.moduleMap, buildCtx.components);
   resolveComponentDependencies(buildCtx.components);
 

src/compiler/transpile/run-program.ts

@@ -19,7 +19,7 @@ import { updateReferenceTypeImports } from './update-import-refs';
  * @returns `true` if the type declaration file written to disk has changed, `false` otherwise
  */
 export const generateAppTypes = async (
-  config: d.Config,
+  config: d.ValidatedConfig,
   compilerCtx: d.CompilerCtx,
   buildCtx: d.BuildCtx,
   destination: string
@@ -44,7 +44,7 @@ export const generateAppTypes = async (
     );
   }
 
-  const writeResults = await compilerCtx.fs.writeFile(componentsDtsFilePath, componentTypesFileContent, {
+  const writeResults = await compilerCtx.fs.writeFile(normalizePath(componentsDtsFilePath), componentTypesFileContent, {
     immediateWrite: true,
   });
   const hasComponentsDtsChanged = writeResults.changedContent;
@@ -92,29 +92,30 @@ const generateComponentTypesFile = (config: d.Config, buildCtx: d.BuildCtx, areT
   c.push(COMPONENTS_DTS_HEADER);
   c.push(`import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";`);
 
-  // write the import statements for our type declaration file
-  c.push(
-    ...Object.keys(typeImportData).map((filePath) => {
-      const typeData = typeImportData[filePath];
-      let importFilePath: string;
-      if (isAbsolute(filePath)) {
-        importFilePath = normalizePath('./' + relative(config.srcDir, filePath)).replace(/\.(tsx|ts)$/, '');
-      } else {
-        importFilePath = filePath;
-      }
-
-      return `import { ${typeData
-        .sort(sortImportNames)
-        .map((td) => {
-          if (td.localName === td.importName) {
-            return `${td.importName}`;
-          } else {
-            return `${td.localName} as ${td.importName}`;
-          }
-        })
-        .join(`, `)} } from "${importFilePath}";`;
-    })
-  );
+  // Map event type metadata to partial expressions (omitting import/export keywords)
+  // e.g. { TestEvent } from '../path/to/event/test-event.interface';
+  const expressions = Object.keys(typeImportData).map((filePath) => {
+    const typeData = typeImportData[filePath];
+
+    let importFilePath = filePath;
+    if (isAbsolute(filePath)) {
+      importFilePath = normalizePath('./' + relative(config.srcDir, filePath)).replace(/\.(tsx|ts)$/, '');
+    }
+
+    return `{ ${typeData
+      .sort(sortImportNames)
+      .map((td) => {
+        if (td.localName === td.importName) {
+          return `${td.importName}`;
+        } else {
+          return `${td.localName} as ${td.importName}`;
+        }
+      })
+      .join(`, `)} } from "${importFilePath}";`;
+  });
+
+  // Write all import and export statements for event types
+  c.push(...expressions.map((ref) => `import ${ref}`), ...expressions.map((ref) => `export ${ref}`));
 
   c.push(`export namespace Components {`);
   c.push(...modules.map((m) => `${m.component}`));