Let's create a package!

Slide 1

Slide 1 text

Let’s create a package!

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

How it starts

Slide 4

Slide 4 text

Ok! I think we should create a package!

Slide 5

Slide 5 text

Create repository

Slide 6

Slide 6 text

Write the code

Slide 7

Slide 7 text

Add package details

Slide 8

Slide 8 text

Create changelog

Slide 9

Slide 9 text

Commit and publish

Slide 10

Slide 10 text

Create tag

Slide 11

Slide 11 text

Add package to project

Slide 12

Slide 12 text

The end

Slide 13

Slide 13 text

Oh, you wish darling

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

True! Hey, we need Typescript!

Slide 16

Slide 16 text

Add type safety

Slide 17

Slide 17 text

Update package details

Slide 18

Slide 18 text

Update changelog

Slide 19

Slide 19 text

Commit and publish

Slide 20

Slide 20 text

Create new tag

Slide 21

Slide 21 text

Update package in project

Slide 22

Slide 22 text

My job here is done

Slide 23

Slide 23 text

All right! What about CommonJS?

Slide 24

Slide 24 text

Main differences

Slide 25

Slide 25 text

Add CommonJS support

Slide 26

Slide 26 text

Update package details

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Simple, right?

Slide 29

Slide 29 text

Okay! I need now to change the page title

Slide 30

Slide 30 text

Update code

Slide 31

Slide 31 text

Multiple entries

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Exports options

Slide 34

Slide 34 text

But wait, there’s more!

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

It’s a lot!

Slide 38

Slide 38 text

How can we simplify things?

Slide 39

Slide 39 text

Getting help from robots

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

Publishing packages

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

Publishing packages

Slide 44

Slide 44 text

Updating packages

Slide 45

Slide 45 text

Templates

Slide 46

Slide 46 text

Yes! More!

Slide 47

Slide 47 text

publint.dev

Slide 48

Slide 48 text

Do we need it? What about CommonJS?

Slide 49

Slide 49 text

Differences

Slide 50

Slide 50 text

ECMAScript + CommonJS

Slide 51

Slide 51 text

Simplify build steps

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

Add types with JSDoc

Slide 54

Slide 54 text

Export .ts raw

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

The end - now for real -

Slide 58

Slide 58 text

Slide 59

Slide 59 text

Questions? ?

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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