What is the best way to build a new stencil component for Ionic?

Stencil
1

I’m getting ready to build a new custom web component that is:

  • Built using the Stencil library/toolkit
  • Designed to be used solely within Ionic apps and/or PWAs
  • Based on other modal components, e.g. ion-action-sheet or ion-modal

ion-action-sheet and ion-modal both make use of common framework utilities, e.g. overlays, which in turn depend upon other components like ion-animation-controller.

I see several possible courses of action:

  1. Copy the required modules/resources into my project:
    The obvious problem with this is that it makes it difficult to update my component to take advantage of changes/upgrades in the @ionic libraries. I’d have to watch the repo for changes in specific files and incorporate those manually when they occur.
  2. Fork ionic-team/ionic and implement alongside the other ionic components:
    The problem is I don’t immediately see how I could compile just my custom component and distribute/publish it separately from the rest of the entire ionic framework. At least at the level of the root package.json, there do not seem to be any build scripts designed just for exporting components.
  3. Put ionic-angular in my Stencil project’s devDependencies:
    This seems like it might be the best option. Then I could just import the code I need to make my component work. However, if I just do npm i -D ionic-angular I get the distributed version of the framework and not all of the source. It doesn’t include everything that I need, e.g. it doesn’t have OverlayInterface which I’d like to implement in my component class.

Update: I think I figured it out…

Instead of ionic-angular you should add @ionic/core to your devDependencies as follows:

$ npm i -D @ionic/core

Then you can import things like OverlayInterface using:

import { OverlayInterface } from "@ionic/core/dist/collection/utils/overlays";

If I’ve got this wrong, or if someone knows of a better way to do this, please let me know!

Thanks!!!

2

There’s a major issue with Ionic-Angular and the shadow dom that is fixed in 4, but is not currently scheduled to be fixed in 3. Bottom line: your Stencil component may work fine in Ionic Serve, and not work at all in an on-device app. For people familiar with my posts, that is why I was posting constantly about Stencil, then stopped completely. I’m waiting for 4 to hit at least beta before I build more Stencil components, because of this wall.

At the moment, Stencil is a better tool if you’re building in React Native than it is if you’re building in Ionic Angular.

2 Likes