Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Is it a better way to add framework-oriented dts files for better typescript support? #8

Open
LoTwT opened this issue Aug 2, 2023 · 3 comments

Comments

@LoTwT
Copy link
Contributor

LoTwT commented Aug 2, 2023

I tried this fantastic dockbar in React and it's my first time to use Web Component in React.

issue

I need to add the following type definitions for better use and I still can't get the right props.

declare namespace JSX {
  interface IntrinsicElements {
    "dock-wrapper": any
    "dock-item": any
  }
}

expectation

Is it a better way that the repo offers dts files?
Or it is just my turn to add them to my repo?

@CatsJuice
Copy link
Owner

That's a good suggestion!
I'm also new to web-component. I'll try to refine this part of the type definition.

@CatsJuice
Copy link
Owner

CatsJuice commented Aug 2, 2023

@LoTwT
It seems that if I want to and types for react in this package, I have to add @types/react for devDeps. I'm not pretty sure is that appropriate. And for other frameworks, we may need some other types. In my opinion, relying on external framework like React in a web-component project may contradict the original design intention.

For temporary, maybe you can declare types in your own repo. Here is an example that may helps:

type CustomElement<T> = Partial<
  T & { children: unknown } & import("react").DOMAttributes<T> &
    import("react").HTMLAttributes<T> &
    import("react").Attributes
>;

declare namespace JSX {
  interface IntrinsicElements {
    ["dock-wrapper"]: CustomElement<import("dockbar").DockWrapper>;
    ["dock-item"]: CustomElement<import("dockbar").DockItem>;
  }
}

I will continue exploring viable solution and improving them in the README.

@LoTwT
Copy link
Contributor Author

LoTwT commented Aug 2, 2023

@LoTwT It seems that if I want to and types for react in this package, I have to add @types/react for devDeps. I'm not pretty sure is that appropriate. And for other frameworks, we may need some other types. In my opinion, relying on external framework like React in a web-component project may contradict(反驳) the original design intention(意图).

For temporary(临时), maybe you can declare types in your own repo. Here is a example that may helps:

type CustomElement<T> = Partial<
  T & { children: unknown } & import("react").DOMAttributes<T> &
    import("react").HTMLAttributes<T> &
    import("react").Attributes
>;

declare namespace JSX {
  interface IntrinsicElements {
    ["dock-wrapper"]: CustomElement<import("dockbar").DockWrapper>;
    ["dock-item"]: CustomElement<import("dockbar").DockItem>;
  }
}

I will continue exploring viable(可行) solution and improving them in the README.

You are right. Extra dependencies are verbose.
Displaying the type definitions prominently in the README is enough.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants