Add TypeScript defintion

[nmussy]

Hey,

It'd be nice to add TypeScript definitions to the project. I can make a PR if needed.

EDIT: Looking at how compact the src/ is, it might even be worth switching the project to TypeScript, if you feel up to it

[Wildhoney]

I'd rather keep it as standard JS.

Would be awesome to have a definition file though – thanks @nmussy!

[nmussy]

No problem, I'll probably make a PR tonight. It should be pretty easy to maintain, but you can @ me in the future if you need me to update it.

[Wildhoney]

Thank you @nmussy 👍

[schibrikov]

Also wanted to use the package in TS, but ran into definitions absence.
I'm still not sure I need to use it, but if I decide, I can create definitions myself.

Any news on this? @nmussy

[nmussy]

Yeah, sorry about that, I hit a wall with the `root.div` part of the API. I wanted to type check the NodeElement, but I might have to allow a generic string. I was going to look into it this weekend, but I'll ping you if I give up. 😁

…

On Fri, Aug 2, 2019, 3:11 PM Eugeny Schibrikov ***@***.***> wrote: Also wanted to use the package in TS, but ran into definitions absence. I'm still not sure I need to use it, but if I decide, I can create definitions myself. Any news on this? @nmussy <https://github.com/nmussy> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#61?email_source=notifications&email_token=AATDXYBDDF7SVMTJOMLE7V3QCQXAPA5CNFSM4IHRRG22YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD3NWM5Q#issuecomment-517695094>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AATDXYCPOXWMWCZRTO4EFCLQCQXAPANCNFSM4IHRRG2Q> .

[Wildhoney]

Any luck folks?

[nmussy]

Still haven't looked into it more, sorry. I'll open a PR with what I have so far tonight

[MalekBouba]

Same issue.. can we help?

[nmussy]

Yeah, sorry about that guys. I'm on holiday at the moment, I'll see what I can do over the weekend

…

On Thu, Aug 29, 2019, 11:14 AM Malek Boubakri ***@***.***> wrote: Same issue.. can we help? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#61?email_source=notifications&email_token=AATDXYD6PPSNPU2E6XRH63TQG6HPDA5CNFSM4IHRRG22YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD5N2LDY#issuecomment-526099855>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AATDXYBGCCTNCEOW2B3QALDQG6HPDANCNFSM4IHRRG2Q> .

[yurist38]

I'm about to start using it and missing TS definitions too... If you guys have any draft of definitions and have no time to complete, please commit the stuff and let us know. Some of us can contribute to making it done, I'm pretty sure.

[yurist38]

I made my try in the end and that's what I ended up with for now:

declare module 'react-shadow' {
  import { ReactNode, ComponentType } from 'react';

  type RenderElement = keyof HTMLElementTagNameMap;

  type Root = {
    [name in RenderElement]: ComponentType;
  }

  const root: Root;

  export default root;
}

If you have any idea what is wrong or how I can improve these typings - please feel free to share!

[nmussy]

That's basically what I had in mind, but the issue with that is that you could Shadow DOM a custom element.

…

On Mon, Oct 7, 2019 at 6:37 PM Yuri Drabik ***@***.***> wrote: I made my try in the end and that's what I ended up with for now: declare module 'react-shadow' { import { ReactNode, ComponentType } from 'react'; type RenderElement = keyof HTMLElementTagNameMap; type Root = { [name in RenderElement]: ComponentType; } const root: Root; export default root; } If you have any idea what is wrong or how I can improve these typings - please feel free to share! — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#61?email_source=notifications&email_token=AATDXYA6H5HDF3UKZXO6PBDQNNQULA5CNFSM4IHRRG22YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEARAA2I#issuecomment-539099241>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AATDXYG6NTIY3TUHI3LBSELQNNQULANCNFSM4IHRRG2Q> .

[marijnbent]

Same problem here. Any luck fixing it?

[benji6]

@yurist38 your types were really helpful for me. I think this might be a slight improvement:

declare module "react-shadow" {
  import * as React from "react";

  type RenderElement = keyof HTMLElementTagNameMap;

  type Root = {
    [name in RenderElement]: React.ComponentType<
      React.HTMLAttributes<HTMLElementTagNameMap[name]>
    >;
  };

  const ReactShadowRoot: Root;

  export default ReactShadowRoot;
}

I'm just passing a type argument of React.HTMLAttributes<HTMLElementTagNameMap[name]> to React.ComponentType. It's not quite right though because if the element is a button for instance we should be using React.ButtonHTMLAttributes instead of React.HTMLAttributes, but it did solve a type error I was getting.

[Wildhoney]

Still no luck guys?

[yurist38]

I've opened a PR based on the solution from @benji6 (thanks for that!). Let's see if it's going to be merged...

[Wildhoney]

@yurist38 just a question of how HTMLElementTagNameMap works if you're using custom elements? For example root.myCustomElement that yields a <my-custom-element> node is perfectly fine in react-shadow, whereas HTMLElementTagNameMap seems to be a map of only the standard HTML elements.

Wouldn't that cause issues? Do we need to allow for arbitrary string types, too?

[yurist38]

@Wildhoney yes, your concern was correct. Just tested it locally, it doesn't work with a custom element. So I think you're right and we have to make it less strict... I'm opening a PR with refactoring to string.