I am going to use third-party web components library in a Stencil project. But when I do this, all dependent code are included into bundle with my stencil component and is a big size. How to separate third-party components/modules code in stencil build?
import { Component, h } from '@stencil/core';
import { ModuleManager } from 'igniteui-webcomponents-core';
import { IgcDataGridModule } from 'igniteui-webcomponents-grids';
import { IgcDataGridComponent } from 'igniteui-webcomponents-grids';
@Component({
tag: 'test-component',
styleUrl: 'test-component.css',
shadow: true,
})
export class TestComponent {
data: Array<Object>;
grid: IgcDataGridComponent;
constructor() {
ModuleManager.register(
IgcDataGridModule
);
}
componentDidRender() {
this.grid.dataSource = this.data;
}
render() {
...
return (
<div>Test component
<igc-data-grid ref={el => this.grid = el as IgcDataGridComponent}
height="100%"
width="100%"
auto-generate-columns="true"
default-column-min-width="100"
summary-scope="Root"
is-column-options-enabled="true"
is-group-collapsable="true"
group-header-display-mode="Combined"
group-summary-display-mode="RowBottom"
column-moving-mode="Deferred"
column-moving-animation-mode="SlideOver"
column-moving-separator-width="2"
column-showing-animation-mode="slideFromRightAndFadeIn"
column-hiding-animation-mode="slideToRightAndFadeOut"
selection-mode="SingleRow"
corner-radius-top-left="0"
corner-radius-top-right="0">
</igc-data-grid>
</div>
);
}
}
For example, in this code I need igc-data-grid component will be bundled into separate file. Also igniteui-webcomponents-core, igniteui-webcomponents-grids modules needs to be in separate files to be used in, probably, other stencil components.