[Stencil] Publishing a Stencil component to npm

Stencil
1

Does anyone know how to publish a Stencil 0.2.3 component to npm? I can’t seem to follow the documentation correctly, and I get error messages that seems to contradict the docs. One such message:

package.json “main” property is required when generating a distribution and must be set to:
dist/star-rating.js

even though the docs say main should be set to something else.

2

Let me 10 minutes, I did it today but I’ve to do some adjustments…

1 Like
3

I could pack/publish with the “new” way but can’t include it in a project. I clear that up and comes with the solution (I’m trying this new way https://github.com/ionic-team/stencil/issues/502)

4

It’s working…let me 5 to document

5

Looks as though there’s a tool missing: npm run build-for-npm. I’ve used ng-packagr to publish Angular components. Maybe when Stencil stabilizes I’ll throw together “stencil-packagr.”

I’ll try to follow what you’ve written as soon as you post it, thank you (and thank you to @dkundel).

6

I use to think as you do because I was trying to publish my StencilJS library/component from “inside” the dist folder, as I would do with an Angular/ng-packagr module. To do so, I was copying and editing manually package.json because I was facing the same issue as you did. But like @dkundel described, it’s possible to pack (and I guess publish) a StencilJS component from the root folder.

Like:

git clone https://github.com/ionic-team/stencil-component-starter my-component
cd my-component
git remote rm origin
npm install
npm run build
npm pack

If you would like to add a README and LICENSE to the component, you could then edit package.json attribute files and add it there

"files": [
    "dist/", "readme.md", "LICENSE"
 ],

P.S.: I gonna edit my solution to import the component in a Ionic project within the next minutes and link it here

UPDATE

I just published my component again to npm, this works too with npm publish

7

What if the component has peer dependencies? Does that information end up in the tarball after npm pack?

8

I don’t have other dependencies in my component so I could not tell, but if I understand correctly, the package.json of the root of my component end up 1 to 1 (exactly the same) in my tarball

9

For the record, that’s the post where I try to describe how to import a Stencil component in an Ionic project