oruga-ui / oruga

🐛 Oruga is a lightweight library of UI components without any CSS framework dependency
https://oruga-ui.com
MIT License
1.12k stars 172 forks source link

vue-component-type-helpers not listed as dependency, dependent types all resolve to any #1038

Open IlyaSemenov opened 3 weeks ago

IlyaSemenov commented 3 weeks ago

Overview of the problem

Oruga version: 0.9.0-pre.1 Vuejs version: 3.4.37

Description

vue-component-type-helpers is naturally a direct dependency of oruga, e.g.:

https://github.com/oruga-ui/oruga/blob/67f7ac7d51ba3009f3142efb7aeecc95681fc503/packages/oruga/src/components/modal/types.ts#L1

however, it's not listed in package.json as a dependency (only as a dev dependency), and is thus not installed to user's node_modules when they install oruga.

As such, all dependent types, such as ModalProgrammaticProps, resolve to any:

image

Steps to reproduce

  1. Install "@oruga-ui/oruga-next": "0.9.0-pre.1" in empty project.
  2. Open node_modules/@oruga-ui/oruga-next/dist/types/components/modal/ModalProgrammatic.d.ts
  3. See how ModalProgrammaticProps resolves.

Expected behavior

vue-component-type-helpers should be a direct dependency of oruga-next, it should be installed in user's node_modules, and then ModalProgrammaticProps should resolve to the proper type.

Actual behavior

vue-component-type-helpers is not installed in user's node_modules, and ModalProgrammaticProps (and other similar types) resolve to any as Typescript's fallback measure.

mlmoravek commented 3 weeks ago

Oh yeah right! I've encountered the any type too, but I couldn't find the reason why this happens. Even though I would like to stay with zero dependencies, I will consider adding the dependency or rewiring these parts. Thanks alot!

IlyaSemenov commented 3 weeks ago

I suppose you could just borrow it from there, it's not a big deal really:

export type ComponentProps<T> =
    T extends new (...angs: any) => { $props: infer P; } ? NonNullable<P> :
    T extends (props: infer P, ...args: any) => any ? P :
    {};

Also, just a heads up, in tsup one can mark certain external packages to be bundled (inlined) with noExternal option: https://tsup.egoist.dev/#excluding-packages. This way, the type will be inlined automatically on .d.ts build.

I'm not sure what's the counterpart in raw vite/rollup/babel setup that you use in Oruga, but there could be one as well (after all, tsup uses rollup under the hood).