SolidJS•2mo ago

How to bundle components into a package with tsup

Hi, new to making library stuff, I have a list of components/ + index.ts file index.ts exports most of the components, so I'd want

import { Btn } from "abc-ui"`

import { Btn } from "abc-ui"`

But there are some components which need their own dir, like

import { Tabs, TabsList .. } from "abc-ui/tabs"

import { Tabs, TabsList .. } from "abc-ui/tabs"

I have not made a package before so idk how bundling etc works 😦 When I ran the tsup command, it bundled the entire list of named exports in the index.ts file, what about other components which arent imported in the main index.ts file

19 Replies

bigmistqke•2mo ago

you can define multiple entry points in tsup the following way:

export default defineConfig({
  // Outputs `dist/a.js` and `dist/b.js`.
  entry: ['src/a.ts', 'src/b.ts'],
  // Outputs `dist/foo.js` and `dist/bar.js`
  entry: {
    foo: 'src/a.ts',
    bar: 'src/b.ts',
  },
})

export default defineConfig({
  // Outputs `dist/a.js` and `dist/b.js`.
  entry: ['src/a.ts', 'src/b.ts'],
  // Outputs `dist/foo.js` and `dist/bar.js`
  entry: {
    foo: 'src/a.ts',
    bar: 'src/b.ts',
  },
})

see tsup docs

tsup

bundle typescript library with ease

bigmistqke•2mo ago

then you also need to refer to those entry points in the package json, but if you use https://github.com/solidjs-community/solid-lib-starter it is done for you

GitHub

GitHub - solidjs-community/solid-lib-starter: SolidJS library start...

SolidJS library starter template. Use it to create your own solid package. - solidjs-community/solid-lib-starter

siduckOP•2mo ago

but wouldnt it be too much manual work to hardcode entry points ? for example most of my components are single files with default exports, like Btn, Input so index.ts

export { Btn as default } blabla...

export { Btn as default } blabla...

- User must be able to import like this

import { Btn } from "myui"

import { Btn } from "myui"

and there are few ones like Tabs, Dropdown which arent exported in index.ts - User must import like :

import {Tabs, Tabslist } from "myui/tabs"

import {Tabs, Tabslist } from "myui/tabs"

  entry: [
    "index.ts",
    "components/tabs.tsx", 
    // ... And many !
  ],

  entry: [
    "index.ts",
    "components/tabs.tsx", 
    // ... And many !
  ],

siduckOP•2mo ago

but i dont want another components in my /dist!

siduckOP•2mo ago

ig i can put index.ts inside components but looks anti-pattern 😨 nvm i think i get what u meant now thanks

siduckOP•2mo ago

phew

bigmistqke•2mo ago

nice! tbh i have had to re-publish packages many times because i messed up the setup somewhere

siduckOP•2mo ago

i ran treeshake:true and tsup wiped off all .js files 😭

bigmistqke•2mo ago

it's a bit a mess 🙂

siduckOP•2mo ago

@bigmistqke

bigmistqke•2mo ago

it gives an error

siduckOP•2mo ago

bigmistqke•2mo ago

looks like it is having issues with the version where the jsx is being preserved not sure what's up with that. tbh i don't know if u really need to treeshake i wouldn't minify either tbh when building a package let the consumer of your library deal with treeshaking and minification

siduckOP•2mo ago

does the tooling also treeshake and minify the imported modules from a lib 😮 so why do i even need a bundler now, cant i just put jsx and types generated by tsc lol

bigmistqke•2mo ago

to make your library usable for the 0.1% of people that is into bundleless? idk if i would still build cjs tbh bundeless people i can still sympathize with, but cjs needs to go

siduckOP•2mo ago

but isnt it just importing components? like if someone would make a dir of components in his project dir then he would write it in jsx/tsx, and not js!!! so i just bundle in esm?

bigmistqke•2mo ago

that's what i do!

bigmistqke•2mo ago

you can also use solidjs without jsx: solid/html and solid/h, it's pretty cool!

GitHub

solid/packages/solid/html at main · solidjs/solid

A declarative, efficient, and flexible JavaScript library for building user interfaces. - solidjs/solid

siduckOP•2mo ago

cool

Gaming

Programming

How to bundle components into a package with tsup

Did you find this page helpful?