Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Let's create a package!

Let's create a package!

An overview (that escalates quickly) on creating and maintain a node package

Ariadne Gomes

July 19, 2023
Tweet

Other Decks in Programming

Transcript

  1. Let’s create a
    package!

    View Slide

  2. This is a work of fiction. Any similarity to actual persons,
    living or dead, or actual events, is purely coincidental.
    Disclaimer

    View Slide

  3. How it starts

    View Slide

  4. Ok!
    I think we
    should create
    a package!

    View Slide

  5. Create repository

    View Slide

  6. Write the code

    View Slide

  7. Add package details

    View Slide

  8. Create changelog

    View Slide

  9. Commit and publish

    View Slide

  10. Create tag

    View Slide

  11. Add package to project

    View Slide

  12. The end

    View Slide

  13. Oh, you wish darling

    View Slide

  14. Let’s create a
    package!
    - and maintain it -

    View Slide

  15. True!
    Hey, we need
    Typescript!

    View Slide

  16. Add type safety

    View Slide

  17. Update package details

    View Slide

  18. Update changelog

    View Slide

  19. Commit and publish

    View Slide

  20. Create new tag

    View Slide

  21. Update package in project

    View Slide

  22. My job here is done

    View Slide

  23. All right!
    What about
    CommonJS?

    View Slide

  24. Main differences

    View Slide

  25. Add CommonJS support

    View Slide

  26. Update package details

    View Slide

  27. Rinse and repeat
    • Update changelog
    • Commit and publish
    • Create tag
    • Update package in projects
    • So on and so forth…

    View Slide

  28. Simple, right?

    View Slide

  29. Okay!
    I need now
    to change the
    page title

    View Slide

  30. Update code

    View Slide

  31. Multiple entries

    View Slide

  32. Rinse and repeat
    • Update changelog
    • Commit and publish
    • Create tag
    • Update package in projects
    • So on and so forth…

    View Slide

  33. Exports options

    View Slide

  34. But wait, there’s more!

    View Slide

  35. Handling special files
    • .vue – Compile Vue files into JS
    • .css – Transpile if using .scss, .less, etc and publish raw CSS files
    • .jsx
    • SolidJS – Transpile and publish raw JSX files
    • React – Compile into JS
    • Other assets – publish them raw
    * Check your favorite framework guides

    View Slide

  36. Build tools
    • Rollup
    • Webpack
    • Parcel
    • esbuild
    • Turbopack
    • SWC
    • Vite
    • tsup
    • Unbuild
    • Tsdx
    • Microbundle

    View Slide

  37. It’s a lot!

    View Slide

  38. How can we
    simplify things?

    View Slide

  39. Getting help
    from robots

    View Slide

  40. Publishing packages
    Monorepo options:
    • changeset
    • multi-semantic-release
    Automate: defining next version number, generating the release notes,
    creating tags and publishing the package.
    Single package:
    • semantic-release
    • gitversion
    • release-it

    View Slide

  41. Publishing packages

    View Slide

  42. Monorepos
    Pros
    • Tear down barriers
    • Code sharing
    • Dependency management
    • Release management
    • Refactoring
    Cons
    • Initial setup
    • Build pipelines
    • Access Control

    View Slide

  43. Publishing packages

    View Slide

  44. Updating packages

    View Slide

  45. Templates

    View Slide

  46. Yes! More!

    View Slide

  47. publint.dev

    View Slide

  48. Do we
    need it?
    What about
    CommonJS?

    View Slide

  49. Differences

    View Slide

  50. ECMAScript + CommonJS

    View Slide

  51. Simplify build steps

    View Slide

  52. Let’s keep
    it simple
    Hey, we need
    Typescript!

    View Slide

  53. Add types with JSDoc

    View Slide

  54. Export .ts raw

    View Slide

  55. View Slide

  56. Are
    we sure?
    I think we
    should create
    a package!

    View Slide

  57. The end
    - now for real -

    View Slide

  58. Recommended reading

    View Slide

  59. Questions?
    ?

    View Slide

  60. Inspirations for
    this talk
    Packaging libraries talk by Bjorn Lu
    Ship ESM & CJS in one Package by Antfu
    Maintaining packages at funda

    View Slide

  61. Thanks!
    https://github.com/dine
    https://mastodon.social/@dine
    @dine.bsky.social

    View Slide