fix(compiler): write exports for defineCustomElement typedefs (#4194)

* write exports for defineCustomElement typedefs * update tests * fix SNC violation * update relative typedef path generation to use tag name
ionic-team · Mar 29, 2023 · 89cd845 · 89cd845
1 parent 0193a14
commit 89cd845
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
diff --git a/src/compiler/output-targets/dist-custom-elements/custom-elements-types.ts b/src/compiler/output-targets/dist-custom-elements/custom-elements-types.ts
@@ -72,10 +72,22 @@ const generateCustomElementsTypesOutput = async (
             // - get the relative path to the component's source file from the source directory
             // - join that relative path to the relative path from the `index.d.ts` file to the
             //   directory where typedefs are saved
-            const componentSourceRelPath = relative(config.srcDir, component.sourceFilePath).replace('.tsx', '');
+            const componentSourceRelPath = relative(config.srcDir, component.sourceFilePath).replace(/\.tsx$/, '');
             const componentDTSPath = join(componentsTypeDirectoryRelPath, componentSourceRelPath);
 
-            return `export { ${importName} as ${exportName} } from '${componentDTSPath}';`;
+            const defineFunctionExportName = `defineCustomElement${exportName}`;
+            // Get the path to the sibling typedef file for the current component
+            // When we bundle the code to generate the component JS files it generates
+            // the JS and typedef files based on the component tag name. So, we can
+            // just use the tagname to create the relative path
+            const localComponentTypeDefFilePath = `./${component.tagName}`;
+
+            return [
+              `export { ${importName} as ${exportName} } from '${componentDTSPath}';`,
+              // We need to alias each `defineCustomElement` function typedef to match the aliased name given to the
+              // function in the `index.js`
+              `export { defineCustomElement as ${defineFunctionExportName} } from '${localComponentTypeDefFilePath}';`,
+            ].join('\n');
           }),
           ``,
         ]

diff --git a/src/compiler/output-targets/test/custom-elements-types.spec.ts b/src/compiler/output-targets/test/custom-elements-types.spec.ts
@@ -67,11 +67,13 @@ describe('Custom Elements Typedef generation', () => {
     const expectedTypedefOutput = [
       '/* TestApp custom elements */',
       `export { StubCmp as MyComponent } from '${join(componentsTypeDirectoryPath, 'my-component', 'my-component')}';`,
+      `export { defineCustomElement as defineCustomElementMyComponent } from './my-component';`,
       `export { MyBestComponent as MyBestComponent } from '${join(
         componentsTypeDirectoryPath,
         'the-other-component',
         'my-real-best-component'
       )}';`,
+      `export { defineCustomElement as defineCustomElementMyBestComponent } from './my-best-component';`,
       '',
       '/**',
       ' * Used to manually set the base path where assets can be found.',