Circular dependencies in Components.d.ts

[manucorporat]

If any component has a Prop() with a type referencing to another custom HTMLElement, the generated components.d.ts has conflicts (duplicated types) and the stencil build fails:

Reproducing component:

import { Component, Prop } from '@stencil/core';
import { HTMLIonTabElement } from '../../index';

@Component({
  tag: 'ion-tabbar',
  host: {
    theme: 'tabbar'
  }
})
export class TabBar {
  @Prop() selectedTab: HTMLIonTabElement;
}

Generated components.d.ts:

Stencil output:

➜  core git:(core) ✗ npm run dev

> @ionic/core@0.0.2-21 dev /Users/manuelmartinez-almeida/repos/ionic/ionic/packages/core
> sd concurrent "stencil build --dev --watch" "stencil-dev-server"

[46:34.4]  @stencil/core v0.0.8-0
[46:34.4]  build, dev mode, started ...
[46:34.4]  compile started ...
[46:40.1]  compile finished in 5.78 s

[ WARN  ]  Prop type provided is not supported, defaulting to any
           ' @Prop() get match() { return this.routeMatch; }' from
           /Users/manuelmartinez-almeida/repos/ionic/ionic/packages/core/src/components/router/router.tsx

[ ERROR ]  typescript: src/components.d.ts, line: 13
           Individual declarations in merged declaration 'HTMLIonTabElement' must be all exported or all local.

     L12:  } from './utils/helpers';
     L13:  import {
     L14:    GestureCallback,

[ ERROR ]  typescript: src/components.d.ts, line: 13
           Import declaration conflicts with local declaration of 'HTMLIonTabElement'.

     L12:  } from './utils/helpers';
     L13:  import {
     L14:    GestureCallback,

[ ERROR ]  typescript: src/components.d.ts, line: 27
           Cannot find module './components/popover/@stencil/core'.

     L26:  import {
     L27:    ActionSheetController as IonActionSheetController
     L28:  } from './components/action-sheet-controller/action-sheet-controller';

[ ERROR ]  typescript: src/components.d.ts, line: 94
           Cannot find name 'ActionSheetButton'.

[ ERROR ]  typescript: src/components.d.ts, line: 167
           Cannot find name 'AlertButton'.

    L166:          alertId?: string

[ ERROR ]  typescript: src/components.d.ts, line: 168
           Cannot find name 'AlertInput'.

[ ERROR ]  typescript: src/components.d.ts, line: 938
           Cannot find name 'GestureDetail'.

    L937:          notCaptured?: GestureCallback

[ ERROR ]  typescript: src/components.d.ts, line: 2123
           Cannot find name 'PickerButton'.

   L2124:  import {

[ ERROR ]  typescript: src/components.d.ts, line: 2734
           Cannot find name 'SelectPopoverOption'.

   L2735:  import {

[ ERROR ]  typescript: src/components.d.ts, line: 2876
           Cannot find name 'Slides'.

   L2875:  paginationType?: string,
   L2876:  parallax?: boolean,
   L2877:  slidesPerView?: number | 'auto',

[46:40.5]  build failed, watching for changes... in 6.12 s

[jthoms1]

Can you provide the contents of '../../index';?

[manucorporat]

@jthoms1 index.ts: https://github.com/ionic-team/ionic/blob/core-button-string-props/packages/core/src/index.d.ts

[manucorporat]

It is not a problem really related with index.d.ts, if I import from components.d.ts, it also break.

import { HTMLIonTabElement } from '../../components';

[jthoms1]

Understood just trying to get a grasp on the project structure so that I can create the proper tests in the future.

[manucorporat]

@jthoms1 awesome! let me know with anything I can help

[jthoms1]

This is no longer an issue with commit 1c24738c37e037755c013009e88f52dc3f36ee1e.