How I created and published my first Stencil component

I decided that I wanted to try building a self contained Stencil component ready to use by anyone on the npm repository.

My idea was to create a web component that is heavily inspired by the Angular’s ng-container.
The plan was that st-container would have two attributes,

  • st-if, only shows the content inside the st-container if the given condition is true.
  • st-for, iterate over an array/list of items with the content like sort of a template.

Creating the project

So I started by cloning the Stencil component starter repository,

then I added the boilerplate to my own repository with command,

git remote add origin https://github.com/nerdic-coder/stencil-container.git

then I updated all the information in the package.json, README.md, stencil.config.js to describe my component instead of describing Stencils starter project.

In the package.json I updated the name, description, repository, author, bugs, homepage like this:

In the stencil.config.js I just changed the namespace to  stencil-container.

Building the component

Now we are ready to create the stencil component in the project.

First we need to create the component folder, go ahead and create a folder named ‘st-container’ inside ‘/src/components/’ folder.

In that folder we will create two files,

st-container.spec.ts, that contains the unit tests for the component.

st-container.tsx, the stencil component itself.

So what we have here is a very simple Stencil component. It takes a stIf as a property (@Prop()), that is given to the ‘st-container’ element. Then in ‘componentWillLoad()’ method we update the shouldRender attribute by evaluating the content of the stIf.

In the ‘render()’ method we check if the element and child elements should be rendered with the ‘if (this.shouldRender)’. If it should render we return the , the slot element is a placeholder for the content inside this component, the thing between the tags ”.

If you want to learn more about Stencil I suggest that you read the official Stencil getting started guide.

Publishing the component

So now when the component is done, the unit tests are working and the component is built. It’s time to publish it to the npm registry.

The first thing you need is an account at https://www.npmjs.com/

Then you need to run the command ‘npm adduser‘ and follow the instructions to login with your npm account on your machine.

Then all you need to do is run ‘npm publish‘ in your projects directory and it will be uploaded if you don’t receive any errors.

You can see the final result of my st-container over here: https://www.npmjs.com/package/stencil-container

The nice thing with Stencil components is that they by default have zero npm dependencies, pretty sweet I would say!

xwa87
No worries about this scenario with plain Stencil components!

Conclusion

That was all I had for you this time, you can see the full source on GitHub here: https://github.com/nerdic-coder/stencil-container

Let me know what you thought of this article in the comments below and send me a pull request if you see any errors. 🙂

 

Advertisements

One thought on “How I created and published my first Stencil component

Add yours

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Create a website or blog at WordPress.com

Up ↑

%d bloggers like this: