Stencil: Distributing Reusable Stencil Components

[cagataycivici]

Really excited about Stencil, great work. We're planning to create a web component UI suite and I wonder how we can distribute reusable web components written with Stencil such as DataTable, Accordion, Tabs and so on? Do they require Stencil as a runtime dependency?

[davidmpaz]

I am also looking forward for this very much. It would be great if it could be possible just to have our components distributed as npm package to use later on in any web application (doesn't matter if we need a loader) as long as we can used it without conflicting, for example with WebPack.

Currently I can see in built starter app:

• www/build/app.registry.json:61 => loader
• www/build/app.registry.json:62 => core
• www/build/app.registry.json:63 => core polyfill

I will need to test whether is the right way to bundle all these (built) artifacts and require them in my application later on. Right now I am just asking before hand whether could be a way to go ;)

Thanks for sharing these nice piece of work

cheers

[kylecordes]

Since the Ionic team is building Stencil for their own use in Ionic itself, in theory all we should need to do as outside users of Stencil is to wait and see how they package the next version of Ionic built on it. That should definitively answer the question, since Ionic is a substantial pile of components (both in number, and in total size). If this problem is solved well enough to use in Ionic, it will therefore be good enough to use in most other web component packaging scenarios.

[jgw96]

Hello all! Just a warning, Stencil is still alpha so some of these instructions may change in the future but here is how you would publish packages of web components built with Stencil today:

• First, add this line https://github.com/jgw96/lazy-img/blob/master/stencil.config.js#L2 to your stencil config
• add this script to your repo https://github.com/jgw96/lazy-img/blob/master/scripts/publish.js (this requirement / hack will go away in the near future)
• add these three lines to your package.json https://github.com/jgw96/lazy-img/blob/master/package.json#L5, https://github.com/jgw96/lazy-img/blob/master/package.json#L6, https://github.com/jgw96/lazy-img/blob/master/package.json#L7
  -make sure to run the publish script as part of your publish command https://github.com/jgw96/lazy-img/blob/master/package.json#L16

[kylecordes]

It is also necessary to create an empty file src/index.d.ts, at least to make the script run. (Actually distributing... I haven't tried that yet.)

[kylecordes]

Also, this process currently passes along .scss files as part of the distributable output - perhaps not what web component consumers will typically have in mind? I know this is all alpha-alpha. :-)

[kylecordes]

@jgw96 I've taken a good look at https://github.com/jgw96/lazy-img and also follow the instructions above to try to make my own distributable web component using Stencil, but it's not yet clear exactly how it should be consumed. What JavaScript file should be included, from where, and so on. Do you know if any example of consuming a Stencil based web component from a plain HTML page with a couple of script tags? I am aware of build/app.js and so on, But those appear to be part of the non-distribution way of doing things, building up at composed of its own components versus simply grabbing some components from somewhere and using them.