feat: Make @acme/ui export everything from a barrel file instead of individual files

[Gabriel Bianchi]

Describe the feature you'd like to request

Make one barrel export for all @acme/ui

Describe the solution you'd like to see

Only have ".": "./src/index.ts", in exports in package.json and make index.ts be a barrel file export.

Reasoning: I think it's easier to extend other components through this way. But it might be personal preference. I do this in my repo:
https://github.com/dBianchii/kodix-turbo/blob/main/packages/ui/src/index.tsx

Additional information

No response

[Gabriel Bianchi]

Let me know if you want this change @juliusmarminge , I can provide PR for it. If you don't like the idea also, just close this PR 👍

[Gabriel Bianchi]

Also, forget to mention the main reason why I prefer this way. You can then import components directly from @acme/ui. See:

//before
import { cn } from "@acme/ui";
import { Button } from "@acme/ui/button";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormMessage,
  useForm,
} from "@acme/ui/form";
import { Input } from "@acme/ui/input";
import { toast } from "@acme/ui/toast";


//after (very nice)
import {
  Button,
  cn,
  Form,
  FormControl,
  FormField,
  FormItem,
  FormMessage,
  Input,
  toast,
} from "@acme/ui";
  

[Julius Marminge]

Barrel files kinda suck imo, but definetely a personal preferens

[George Gebbett]

ik this is closed and not planned but to add my 2 cents - i recently removed our ui package barrel files from a t3 turborepo and that decreased the size of each serverless function by 14mb!!

[Gabriel Bianchi]

Hi @georgegebbett , so you're now doing in a similar way like this repo?

I thought that this could be increasing load. I struggle with high load times, maybe I should try to remove the barrel files

[George Gebbett]

Yeah we now import everything from the file where it is defined - Next is apparently really bad at tree shaking these barrels and everything ends up being everywhere - our serverless functions (including the API routes!) all somehow contained the entire UI package and removing the barrels reduced the size of each function by 14mb. We also saw a ~50% reduction in 1st load JS across pretty much every route in the app.

I removed the barrels with the help of a script that was largely authored by ChatGPT as we had literally hundreds of usages and updating manually would have probably taken several days.

[Gabriel Bianchi]

@georgegebbett , thank you so much for your input. I just tried doing it for my entire codebase. I noticed significant results. Take a look at the builds:

Before:

And after not using a barrel file:

I then plotted it down to a google sheets:

I noticd that for the most part, size has increased, but first load js has mostly decreased. I wonder why that is...

[Gabriel Bianchi]

And my PR for it as well on my codebase:
dBianchii/kodix-turbo#46

[George Gebbett]

haha I did a similar thing but I didn't look at the sizes which I'm now a little paranoid might have gone up! unsure why they might but in all honesty i'm not really a FE guy and Next.js does lots of things I don't really understand!