Feature Request: Typescript support

[redxtech]

Feature Request: Typescript support

[spencercap]

something like this in vue 3 SFC:

VuePlyr.vue:

<script lang="ts">
import { defineComponent, PropType } from 'vue';

import Plyr from 'plyr';
import 'plyr/dist/plyr.css';

export default defineComponent({
	name: 'VuePlyr',
	props: {
		/** Options object for plyr config. **/
		options: {
			type: Object as PropType<Plyr.Options>,
			required: false
		}
	},
	data() {
		return {
			player: {} as Plyr
		};
	},
	computed: {
		opts(): any {
			const options = this.options;
			if (
				options &&
				!Object.prototype.hasOwnProperty.call(
					this.options,
					'hideYouTubeDOMError'
				)
			) {
				(options as any).hideYouTubeDOMError = true;
			}
			return options;
		}
	},
	mounted() {
		this.player = new Plyr(this.$el, this.opts);
	},
	beforeUnmount() {
		try {
			this.player.destroy();
		} catch (e) {
			if (
				!(
					this.opts.hideYouTubeDOMError &&
					e.message === 'The YouTube player is not attached to the DOM.'
				)
			) {
				// eslint-disable-next-line no-console
				console.error(e);
			}
		}
	},
	render() {
		const slots = this.$slots.default;
		return typeof slots === 'function' ? slots()[0] : slots;
	}
});
</script>

[redxtech]

I'm going to close this for now. Feel free to re open it again if you want, but the best way to get this implemented would be to just make a PR to add the support and either explain in code comments what you're doing or explain in the PR description with what the code added does. If it works and you don't throw in any weird stuff that I don't understand (if this happens I'll just ask you about it) then I will have no problem merging a PR to add TS support.

[redxtech]

I have never used typescript. What would I have to do to make this a possibility?

If you want to make a PR just explain what you're doing so that I can maintain it in the future and I will accept it.

[LukasBombach]

Fair enough. I was gonna do a PR but I abandoned my project now, I don't know if I'll pick it up again. If so, I'll just open a PR.

[redxtech]

Sounds good.

[apuatcfbd]

something like this in vue 3 SFC:

VuePlyr.vue:

<script lang="ts">
import { defineComponent, PropType } from 'vue';

import Plyr from 'plyr';
import 'plyr/dist/plyr.css';

export default defineComponent({
	name: 'VuePlyr',
	props: {
		/** Options object for plyr config. **/
		options: {
			type: Object as PropType<Plyr.Options>,
			required: false
		}
	},
	data() {
		return {
			player: {} as Plyr
		};
	},
	computed: {
		opts(): any {
			const options = this.options;
			if (
				options &&
				!Object.prototype.hasOwnProperty.call(
					this.options,
					'hideYouTubeDOMError'
				)
			) {
				(options as any).hideYouTubeDOMError = true;
			}
			return options;
		}
	},
	mounted() {
		this.player = new Plyr(this.$el, this.opts);
	},
	beforeUnmount() {
		try {
			this.player.destroy();
		} catch (e) {
			if (
				!(
					this.opts.hideYouTubeDOMError &&
					e.message === 'The YouTube player is not attached to the DOM.'
				)
			) {
				// eslint-disable-next-line no-console
				console.error(e);
			}
		}
	},
	render() {
		const slots = this.$slots.default;
		return typeof slots === 'function' ? slots()[0] : slots;
	}
});
</script>

Can you please explain what's going on in render fn?
How to convert this to <script setup ?

[redxtech]

I actually have something in the works for this right no, not sure how long it will take though since I am employed full time. I'll look into it soon though.

[spencercap]

@apuatcfbd sorry, i'm also too busy at the moment to convert this component. but you can mix and match different types of vue components in one webapp btw.