bug: Unexpected Behaviour When Generating a StencilJS Starter App (ionic-pwa)

[stevexm]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Stencil Version

2.14.1

Current Behavior

Unexpected behaviour when generating a new Stencil PWA/app:

1. prompted with:

   Need to install the following packages:
   create-stencil
   Ok to proceed? (y) 

2. using starter selection: ionic-pwa and the app will not build:

   [ ERROR ]  TypeScript: ./node_modules/@stencil/core/compiler/lib.dom.d.ts:4482:101
          Type 'HTMLElementTagNameMap[K]' does not satisfy the constraint 'Element'.Type 'HTMLElement |
          HTMLAppHomeElement | HTMLAppProfileElement | HTMLAppRootElement | HTMLIonActionSheetElement | ... 154 more
          ... | HTMLTemplateElement' is not assignable to type 'Element'.Type 'HTMLIonIconElement' is not assignable
          to type 'Element'.Property 'ariaHidden' is optional in type 'HTMLIonIconElement' but required in type
          'Element'.
   L4481:   */
   L4482:  TagName<K extends keyof HTMLElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<HTMLElementTagNameMap[K]>;
   L4483:  getElementsByTagName<K extends keyof SVGElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<SVGElementTagNameMap[K]>;
   [ ERROR ]  TypeScript: ./node_modules/@stencil/core/compiler/lib.dom.d.ts:4770:101
          Type 'HTMLElementTagNameMap[K]' does not satisfy the constraint 'Element'.Type 'HTMLElement |
          HTMLAppHomeElement | HTMLAppProfileElement | HTMLAppRootElement | HTMLIonActionSheetElement | ... 154 more
          ... | HTMLTemplateElement' is not assignable to type 'Element'.
   L4769:  getElementsByClassName(classNames: string): HTMLCollectionOf<Element>;
   L4770:  TagName<K extends keyof HTMLElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<HTMLElementTagNameMap[K]>;
   L4771:  getElementsByTagName<K extends keyof SVGElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<SVGElementTagNameMap[K]>;
   [ ERROR ]  TypeScript: ./node_modules/ionicons/dist/types/components.d.ts:66:15
          Interface 'HTMLIonIconElement' cannot simultaneously extend types 'IonIcon' and 'HTMLStencilElement'.Named
          property 'ariaHidden' of types 'IonIcon' and 'HTMLStencilElement' are not identical.
    L65:  declare global {
    L66:      interface HTMLIonIconElement extends Components.IonIcon, HTMLStencilElement {
    L67:      }
   [ ERROR ]  TypeScript: ./node_modules/ionicons/dist/types/components.d.ts:66:15
          Interface 'HTMLIonIconElement' cannot simultaneously extend types 'IonIcon' and 'HTMLStencilElement'.Named
          property 'ariaLabel' of types 'IonIcon' and 'HTMLStencilElement' are not identical.
    L65:  declare global {
    L66:      interface HTMLIonIconElement extends Components.IonIcon, HTMLStencilElement {
    L67:      }
   [07:08.7]  build failed, watching for changes... in 3.28 s
   [07:08.7]  http://localhost:3333/

3. Using the starter selection: app and a vanilla JS StencilJS application is generated/built.

4. Colleague new to Stencil tried generating a starter, but ionic-pwa was not listed?

Is this the way the Stencil CLI now works? Do we no longer have the option of generating a minimal Ionic app with the CLI, do we need to use the vanilla app starter and then add in the Ionic core ourselves? Do we need to always install the create-stencil package?

Any help and advice would be much appreciated.

Thanks, Steve

Expected Behavior

1. Expect:

   npm init stencil

   to have an option to generate an ionic-based PWA.

Steps to Reproduce

1. Run:

   npm init stencil

Code Reproduction URL

https://gitlab.com/stevexm/penta-stenciljs-cli-test

Additional Information

Thanks again!

[tricki]

I cannot reproduce the first part (having to install stencil-create), not sure where that's coming from. The other errors look like version incompatibilities between the two Stencil versions (your own + Ionic's). Try to make sure they're the same.

About the PWA starter: It was deprecated and removed from stencil-create but you can still clone the repo yourself which will give you (almost) the same output as before.

Although, since it's deprecated you might want to start using (or building) an updated starter.

[rwaskiewicz]

Hey @stevexm 👋

@tricki is correct here regarding removing the PWA option from the create-stencil CLI. We removed this option in v2.0.0 of the CLI since we considered this to be a breaking change of sorts. I would guess the reason you're seeing:

Need to install the following packages:
  create-stencil
Ok to proceed? (y) 

on every run is a caching issue of some kind. There may be an older (v1.X) version hanging out somewhere on your system somewhere that npm is pulling from here. That would explain why you can see the PWA option and your co-worker cannot. Although it won't probably fix your cache (assuming my guess is right), you can verify there's some versioning issue by running:

npm init stencil@latest

which should pull the latest version of the create-stencil cli from the npm registry.

You should be able to generate an application still using create-stencil:

Please let me know if you have any additional questions!

[stevexm]

Hi Thomas, Ryan: g'day from Australia with many thanks for the StencilJS help. I really should do a better job reading the docs, about deprecations and related.

You are spot on about the "unexpected behaviour". When Stencil One was initially released I had done a global install and have been continuously updating the CLI since. So there must be something "stale" hanging around. I am going to clear the decks and restart tabla rasa, following your advice about cloning a starter, or maybe creating a vanilla app and importing Ionic when beginning a new project.

You guys rock, Stencil is the best thing since Vegemite! Our blockchain startup is growing fast and when different groups asking us for work to be done, they all being React shops see what Stencil/Ionic can do, without fail are converted.

If you happen to know of any Stencil devs interested in contract work, please have them reach out: steve.melnikoff@pentanetwork.org.

I am sure Ionic/Stencil is going to take over the cross-platform/device application world, please keep going with the beautiful tech you are creating.

Steve

[rwaskiewicz]

Thanks @stevexm for the kind words! They're much appreciated ❤️

I'm going to close this issue, but please let us know if you have any other issues!