[Showcase] Star Rating web component

Stencil
1

After much wrestling, I have created a Star Rating web component in Stencil and published it to npm.

Links: Gitbhub, npm

There are about 75 billion star rating packages on npm already. I used this as a simple example to learn the process. But the component is written in Stencil, so it’s framework-independent, and should work with Ionic, Angular, React, Vue, vanilla JS, etc. In that sense this yet-another-star-rating-component might be “new.”

Request:

I’ve used the component in an Ionic-Angular demo, and wrote up what I had to do to include it in the build process. if you use this component in a different framework, please let me know what you did to connect it to that framework. I don’t think the Stencil documentation is complete there yet.

1 Like
2

I’m doing nothing but pure Angular programming right now. Since Ionic is Angular driven would it be redundant for me to give it a shot?

3

The import is the same, but the build instructions will be different. And I am 100% certain the docs are not up to date. You might want to look at the stencil issues page on Github, because I think there’s a bug with Angular imports and the new Stencil version. I just posted an issue, and someone else posted something that might be the same thing in different words. Therefore:

  1. Yes please I hope you try to import this (or any Stencil component) into pure Angular, but
  2. You might want to wait a few days, since I think there’s a genuine bug / breaking change at the moment.

Edit: also 3) the bug might not affect Star Rating, since I packaged it with a previous (working) version of Stencil. I’m not sure if it will update automatically when you install it into a project.

4

I’ll go ahead and wait the few days to see if the issue gets cleared up in that time. After that few days, whether the bug gets squashed or not i’ll give it a go and see what happens.

1 Like
5

Great job and thx for sharing your web component @AaronSterling :thumbsup::tada:

Event maybe not triggered?

I tested it, worked fine except the rated event which was never emitted. Don’t know if I did something wrong? I did publish my test blank app where I tried your component in the following repo, if you would like to have a look https://github.com/peterpeterparker/ionic-stars

Note: before testing, after npm install, you would need to modify copy.config.js…I didn’t create a separate local copy, I have just modified the one under node_modules

Maybe a missing step in the readme?

Furthermore, if I’m not missing it, I think that maybe a third step is missing in your readme in section Ionic Angular Setup. The include of the lib (thru import 'star-rating-web-component...'; in app.module.ts or in index.html itself or ?, I’m curious to know how you do it) isn’t documented https://github.com/Aaron-Sterling/star-rating-web-component/blob/master/docs/ionic-angular-setup.md

Not related to your component but to the tech, Android 8.1 bug?

Finally, not related to your component but to the tech itself, I become to be worried about the integration on Android 8.1. With you component and a blank Ionic project I faced the exact same issue as I already did with my app and two different other components respectively Android 8.1 just don’t want to load the component.

Still don’t know if I do something wrong in the way I include/load the component or if it’s really a bug, but like I said, that “worries me a bit” ([Stencil] Error on Nexus 5X / Android 8.1 only)

Again thx for you component, furthermore to being a cool component which could be included in any modern frontend framework, it helps me to understand a bit more how it works :smiley:

6

EDIT: Sorry, I did something stupid when I updated from 1.0.0 to 1.0.1. Please install 1.0.2 and test, the rated event should emit now. Ignore some of my comment below.

Thank you so much for the lengthy comment.

I npm uninstalled and reinstalled the package in my demo, and the rated event is firing for me. (Edit: @jaydz I think this confirms it will work in an Angular project…) My import statement is different from the one in your repo, maybe that makes a difference? I’m taking about the second line here. It looks as though you found a weakness in my documentation, where I’m putting two steps inside one, so it’s easy to miss the package import instruction. I won’t change anything until I hear from you, but do you think that’s a correct assessment?

If that’s not the problem, I don’t know why rated does not emit for you.

I saw your Android 8.1 report before, but I don’t have any good ideas there yet, sorry. I’ve been putting a lot of energy into just getting these things working (well sort of working!) on ionic serve.

7

@AaronSterling thx for the new version and the notice about how to import correctly the component, it totally solved the issue, the event is well emitted :thumbsup:

Hahaha sorry for my comment then, I totally read your “how to” way to fast and didn’t noticed that it was correctly explained. My bad :wink: Maybe I was expecting three steps because I describe the import in mine that way :joy: Anyway all good :thumbsup:

Thx for the feedback on Android 8.1. No worries, if you find something sometimes somehow, let me know. Tried again after I did correct the import of your component but I was still facing the same error :frowning:

1 Like
8

No, your comment was helpful. If my doc wasn’t clear to you (who has direct experience here), it would be much more confusing to someone with no Stencil background. I changed the doc to make the import step more clear. Thank you again.

1 Like
9

Thx for your understanding, perfect! I would not miss it a 2nd time :wink:

Again, congrats for the cool component :tada::thumbsup::smiley: