Problems using stencil WC depending on 3rd libs in ionic project

[mburger81]

Stencil version:

@stencil/core@0.18.1

I'm submitting a:

[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:
We are creating a web-component for the beautiful Masonry lib (https://github.com/desandro/masonry), we combine ion-col size-{breakpoints} style with the functionallity of dhe Masonry dashboard.

The problem is, after we build the webcomponent with stenciljs and tested it on stencils dev server we build the component and added it to an ionic project, but not everything is working well there. After a lot of time of investigation is seems that some dependencies of masonry-layout are not working well. But the problem seems not to be the libs but how they are bundled.

Sorry but we can not figure out which are the bundle problem. We tried different solution of including the lib and release it.

1. if we install the bundle with npm install masonry-layout --save we load the module with
   import Masonry from 'masonry-layout';
   and we can do
   new Masonry(this.el, this.options);
   in dev anything is working great, we bundle the component and we see the masonry module and dependencies are included and web component bundle.
   But if we use this bundle in an ionic project, there is no issue on javascript side but the bundle does not work as expected. So I think this is a bundling problem, or not?.

2. If we copy the minified bundle in the stencil project and load it this way

import { Masonry } from './js/masonry.pkgd.min.js';
new this.win['Masonry'](this.el, this.options);

in DEV is anything fine again but on the ionic/angular side we run into this error

[ng] ERROR in ./node_modules/@lanthings/masonry-web-component/dist/esm/es5/build/chunk-86fd7326.js
[ng] Module not found: Error: Can't resolve 'jquery' in '/tmp/ionic4-masonry/node_modules/@lanthings/masonry-web-component/dist/esm/es5/build'

3. The only one solution working, is if we include on stenciljs and also after on ionic/angular side the script with script tag. So it is not bundled in web-component and also it is loaded on the angular side in window
   <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>

So we think there should be a bundling issue on first version.

[mburger81]

Hello, we figured out the problem was not the how stencil bundled the lib, but the problem was the used Stencil StateTunnel which is once per instance and not per component, this drives the lib crazy.
See this issue
ionic-team/stencil-state-tunnel#8