fix(compiler): fix typedef file generated for dist-custom-elements (#3468)

alicewriteswrongs · web-flow · commit 854d498840c1 · 2022-07-13T15:57:30.000-04:00
This fixes the typedef file generated for the `index.js` file produced
by `dist-custom-elements`. Previously it was mistakenly assuming that
the path to a component's `d.ts` file could be generated on the basis of
the `tag` set on the component. This _is_ the case if the component's
filename is equal to it's tag, but there is no requirement that that be
the case.

This changes the way that the relative path from
`${outputDir}/components/index.d.ts` to the `.d.ts` file for a specific
component is generated.

Previously we were doing something like:

```ts
${outputDir}/types/components/${component.tagName}/${component.tagName}
```

This doesn't work if a component is saved in
`src/components/button/button.tsx` but has a tag like `custom-button`.
So to fix this we can instead:

- find the relative path from the source root to the component, giving
  us e.g. `components/button/button.tsx`
- join that relative path with the relative path from where `index.d.ts`
  is going to be saved (`${outputDir}/components/index.d.ts`) to the
  directory where types are written (e.g. `${outputDir}/types`)

This will give us an import in `index.d.ts` that looks like:

```ts
export { Button as CustomButton } from '../types/components/button/button.tsx';
```
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
@@ -45,7 +45,7 @@ const generateCustomElementsTypesOutput = async (
   // the path where we're going to write the typedef for the whole dist-custom-elements output
   const customElementsDtsPath = join(outputTarget.dir!, 'index.d.ts');
   // the directory where types for the individual components are written
-  const componentsTypeDirectoryPath = relative(outputTarget.dir!, join(typesDir, 'components'));
+  const componentsTypeDirectoryRelPath = relative(outputTarget.dir!, typesDir);
 
   const components = buildCtx.components.filter((m) => !m.isCollectionDependency);
 
@@ -56,7 +56,14 @@ const generateCustomElementsTypesOutput = async (
       const importName = component.componentClassName;
       // typedefs for individual components can be found under paths like
       // $TYPES_DIR/components/my-component/my-component.d.ts
-      const componentDTSPath = join(componentsTypeDirectoryPath, component.tagName, component.tagName);
+      //
+      // To construct this path we:
+      //
+      // - 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 componentDTSPath = join(componentsTypeDirectoryRelPath, componentSourceRelPath);
 
       return `export { ${importName} as ${exportName} } from '${componentDTSPath}';`;
     }),
diff --git a/src/compiler/output-targets/dist-custom-elements/index.ts b/src/compiler/output-targets/dist-custom-elements/index.ts
@@ -204,7 +204,7 @@ export const addCustomElementInputs = (buildCtx: d.BuildCtx, bundleOpts: BundleO
       exp.push(`export const ${exportName} = ${importAs};`);
       exp.push(`export const defineCustomElement = cmpDefCustomEle;`);
 
-      // Here we push an export (with a rename for `defineCustomElement` for
+      // Here we push an export (with a rename for `defineCustomElement`) for
       // this component onto our array which references the `coreKey` (prefixed
       // with `\0`). We have to do this so that our import is referencing the
       // correct virtual module, if we instead referenced, for instance,
diff --git a/src/compiler/output-targets/test/custom-elements-types.spec.ts b/src/compiler/output-targets/test/custom-elements-types.spec.ts
@@ -31,8 +31,16 @@ const setup = () => {
 
 describe('Custom Elements Typedef generation', () => {
   it('should generate an index.d.ts file corresponding to the index.js file', async () => {
-    const componentOne = stubComponentCompilerMeta();
+    // this component tests the 'happy path' of a component's filename coinciding with its
+    // tag name
+    const componentOne = stubComponentCompilerMeta({
+      tagName: 'my-component',
+      sourceFilePath: '/src/components/my-component/my-component.tsx',
+    });
+    // this component tests that we correctly resolve its path when the component tag does
+    // not match its filename
     const componentTwo = stubComponentCompilerMeta({
+      sourceFilePath: '/src/components/the-other-component/my-real-best-component.tsx',
       componentClassName: 'MyBestComponent',
       tagName: 'my-best-component',
     });
@@ -47,11 +55,11 @@ describe('Custom Elements Typedef generation', () => {
 
     const expectedTypedefOutput = [
       '/* TestApp custom elements */',
-      `export { StubCmp as StubCmp } from '${join(componentsTypeDirectoryPath, 'stub-cmp', 'stub-cmp')}';`,
+      `export { StubCmp as MyComponent } from '${join(componentsTypeDirectoryPath, 'my-component', 'my-component')}';`,
       `export { MyBestComponent as MyBestComponent } from '${join(
         componentsTypeDirectoryPath,
-        'my-best-component',
-        'my-best-component'
+        'the-other-component',
+        'my-real-best-component'
       )}';`,
       '',
       '/**',
