Better monorepo support

[thereis]

Problem or use case

Currently, I am trying to implement the untitled-ui in a monorepo, with turbopack, but due to the TypeScript paths, it's not able to import the files and resolve to the correct path.

Proposed solution

Instead of using the typescript paths, use relative paths and correctly export the dependencies/components into a single index.ts file.

Alternatives considered

No response

Examples or mockups

No response

[deebov]

Hey @thereis, thanks for the idea!

Would you mind sharing why you wouldn't choose to use alias import paths (@/)? I think it's the most widely used approach right now and it has been popularized by shadcn.

Regarding the single index.ts file that just re-exports other exports: we generally don't think there's much benefit to this as you're literally creating an abstraction with no useful purpose. Exporting other exports from a single file means: 1) you always have to update this file whenever you add/remove exported variables; 2) conflict in IDE suggestions — might be suggested to import the same variables from both index.ts and the origin file; 3) an extra layer of obstruction to get to the source of the imported variable i.e. you have to first go to the index.ts and then to the origin file which is slower than directly going to the origin file.

I hope this clarifies our decision a little bit 😊

[deebov]

Thanks both for the feedback!

I think being able to specify the alias paths would def. be helpful. Maybe something like this: https://ui.shadcn.com/docs/components-json#aliases

But when it comes to the relative paths, it's a bit tricky because you have to calculate the relative path for EVERY file and import path inside that file. But still doable though.

If we add a way to re-map the import aliases like shadcn does, would that solve your issue? i.e. https://ui.shadcn.com/docs/monorepo

[thereis]

@deebov thanks for the fast reply! The following image shows what could be a good approach of solving this problem with the monorepo!

I also wonder if having somewhat of this approach could help us upgrade the component whenever there's an update, without having the hassle of manually fixing it.

[SamAmann]

@deebov

I think being able to specify the alias paths would def. be helpful. Maybe something like this: https://ui.shadcn.com/docs/components-json#aliases

That's exactly what I had in mind. With the possibility to customize the different aliases (utils, lib, components, ...), and be able to mirror your file structure (being able to change the aliases for ui, app and marketing components I guess).

If we add a way to re-map the import aliases like shadcn does, would that solve your issue? i.e. https://ui.shadcn.com/docs/monorepo

That would definitely be an improvement on my end!

[deebov]

We're already working on this btw. Should be out soon...

[deebov]

Hey guys here's a small update on what we're planning to ship (no ETA): #95 (comment)