Convert project to TypeScript

Hi 👋 ,

I was about to create a draft PR but I’ve noticed you’ve merged my fork into a new branch. I’ve created this issue to give you a heads up and also a run down of the changes.

Heads up:

I’m waiting on a new release from plyr since I fixed a type issue yesterday. Also, I’m still testing this is in a Next.js project so I’ll let you know if everything works on my end.

The rundown:

• The project is written in Typescript and uses the types from the official repo. Fixes #201
• plyr-react was not Next.js friendly since it imported the css styles within the component and that is no longer supported. Users will need to import the styles manually. Fixes #162
• The component separates the source prop from options prop since original Options type does not include source.
• Configuration files are simplified. It’s best to keep things simple but feel free to change it.

Thank you.

Update

Plyr seems to work correctly with the latest version of Next.js.

[chintan9]

@iwatakeshi Done

[iwatakeshi]

The PR has already been merged. I’m not sure if @chintan9 wants to make the changes I’ve mentioned here, but if he does then that’s all that needs to be done…I think.

@chintan9 You could publish the package as alpha and see if things work, even though we’re waiting on a new Plyr release. You’ll just have to add to the docs that the types for Source is incorrect so the developer needs to use any to remove the warnings:

<Plyr source={source as any} />

Maybe the one thing that comes to mind is that Plyr (the package) is globally available and therefore shadows the component’s type def (Plyr), I’m thinking we should add a new type def (plyr.d.ts or react-plyr.d.ts) that looks something like this:

import Plyr from '...'

declare module "plyr-react" {
  export Plyr
}

Then, just change the types property in package.json to point to that file… I think.

I’ll leave it up to you to decide.