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

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.

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

1 post - 1 participant

Read full topic