Sign in
Log inSign up
Cristiana Man

207 likes

13.6K reads

10 comments

Sanvi Merin
Sanvi Merin
Apr 12, 2021

Helpful! Planning to build a component library of popups!

9
1 reply
Cristiana Man
Cristiana Man
Author
Apr 12, 2021

Thanks! I am so happy this article was helpful! Good luck with the popups library!

Edidiong Asikpo (Didi)
Edidiong Asikpo (Didi)
Apr 12, 2021

I haven't used Storybook before so, I definitely learned a lot from this article.

Amazing article, Cristiana Man. Thanks for sharing.

4
1 reply
Cristiana Man
Cristiana Man
Author
Apr 12, 2021

Thanks for the support! I am really glad to hear you learned something from it!

Harshil Parmar
Harshil Parmar
Apr 13, 2021

Thank you so much !! this is what I am looking for so long 馃憤

2
1 reply
Cristiana Man
Cristiana Man
Author
Apr 14, 2021

Happy to hear!

Dmitriy
Dmitriy
Jul 1, 2021

Thank you! I would be glad to see an article about "Create React Library" with typescript

Marko Francekovic
Marko Francekovic
Sep 10, 2021

Christiana, this is such a crisp and clean guide. Thank you!

1 reply
Marko Francekovic
Marko Francekovic
Sep 10, 2021

One thing I've noticed. It seems you presume that the rollup is installed globally, as you have not included it in the dependencies.

If rollup is not present globally, the npm run build doesn't work.

If this helps somebody: Option 1 - npm install -g rollup Option 2 - npm install --save-dev rollup

Rob Levin
Rob Levin
Sep 30, 2021

Thanks for the guide Cristiana! I just went through this dance myself and here are some additional things I found interesting:

  • Use npm pack to test out what's getting placed in your published package. Also, it lets you npm i path/to/tarbal-0-0-0.tgz to verify. Much more reliable then pure npm linking on both sides.
  • I had to do
    typescript({
      declaration: true,
    }),

and in my tsconfig

    "noEmit": false,
    "emitDeclarationOnly": true,

and then use tsc to build the types with:

    "build:types": "tsc -p tsconfig.json && tsc -p tsconfig-cjs.json",

where my tsconfig-cjs.json extended the main one just changing the module to CommonJS and outDir to dist/cjs. It seems dist is most popular default e.g. for create-react-app aka react-scripts it seems to "want" stuff in dist (I had put stuff in lib before).

It's probably worth experimenting with the postcss options:

    postcss({
      minimize: true,
      sourceMap: true,
      extract: true,
    }),

I wanted my css minimized and not inlined. I thought I'd need to add module: true but there's a default in postcss that if you already name your files foo.module.css it'll treat it as a CSS module anyway (of course this is only for folks who care about that).

All this was done for my AgnosticUI React package (but similar for Vue and Svelte packages too)

I definitely took a lot of tweaking and I referenced many other blog articles and docs before getting it to my liking. Thanks again for yours Cristiana!