Compiling with only some components from a dependency library (i.e. ionic)

Stencil
1

I’ve built a custom component which depends on @ionic/core to show some buttons.
When compiling the component, I’ve imported the whole ionic library and it works fine, but it also generates the component with all unnecessary ion- components.

As discussed in https://github.com/ionic-team/stencil/issues/3233 with @sean-perkins I’ve tried to import only the required components. The component can be found at https://github.com/appfeel/pdf-component and I’ve made a branch optim-deps with the proposed solution, which does not output any ion- component from @ionic/core:

import 'ionicons';
import { defineCustomElement as ionBtnCustomComponent } from '@ionic/core/components/ion-button.js';
import { defineCustomElement as ionBtnsCustomComponent } from '@ionic/core/components/ion-buttons.js';

export { Components, JSX } from './components';

ionBtnCustomComponent();
ionBtnsCustomComponent();

In this case no ionic component is built and the necessary ion-button and ion-buttons components don’t render. I’ve also tried to place initialize() in index.ts with same result:

import { initialize } from "@ionic/core/components";

initialize();

Also tried to place initialize() inside component constructor with same result. In this case the <ion-button> does not have shadow dom:

Captura de Pantalla 2022-02-07 a les 20.10.37
Captura de Pantalla 2022-02-07 a les 20.10.37806×316 39.4 KB

Is there any option to build the component with only the necessary components from @ionic/core?

2

Hello :wave:

After testing out your repository for a little while, I believe the issue may be tracked here: Importing Stencil-generated custom elements in another Stencil project fails · Issue #2531 · ionic-team/stencil · GitHub.

Consuming and initializing Stencil custom element bundles in another project works as expected, but doesn’t appear to work within another Stencil library.

With refactoring your project to use a globalScript and initializing the components from there, I was able to get the component to attempt to mount, but it fails with the following exceptions:

Trying to lazily load component <ion-spinner> with style mode "undefined", but it does not exist.

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'then')
    at initializeComponent (app-globals-7dae6cf8.js: