andrewvasilchuk · andreww2012 · Apr 24, 2023
diff --git a/.prettierignore b/.prettierignore
@@ -1 +1,2 @@
-dist
+dist/
+coverage/
diff --git a/README.md b/README.md
@@ -228,9 +228,9 @@ npm run test
 
 ### Unit
 
-Jest is used for unit-tests.
+Vitest is used for unit-tests.
 
-[`Jest`](https://jestjs.io) and [`VueTestUtils`](https://vue-test-utils.vuejs.org) is used for unit tests.
+[`Vitest`](https://vitest.dev/) and [`VueTestUtils`](https://test-utils.vuejs.org) are used for unit tests.
 
 You can run unit tests by running the next command:
 
@@ -267,8 +267,8 @@ To build the production ready bundle simply run `npm run build`:
 After the successful build the following files will be generated in the `dist` folder:
 
 ```
-├── vue-lazy-youtube-video.common.js
-├── vue-lazy-youtube-video.esm.js
+├── vue-lazy-youtube-video.cjs.js
+├── vue-lazy-youtube-video.mjs
 ├── vue-lazy-youtube-video.js
 ├── vue-lazy-youtube-video.min.js
 ├── style.css
@@ -280,10 +280,9 @@ After the successful build the following files will be generated in the `dist` f
 ## Powered by
 
 - [`Vue`](https://vuejs.org)
-- [`Rollup`](https://rollupjs.org/guide/en) (and plugins)
-- [`Babel`](https://babeljs.io)
-- [`Jest`](https://jestjs.io)
-- [`Vue Test Utils`](http://vue-test-utils.vuejs.org)
+- [`Vite`](https://vitejs.dev/) (and plugins)
+- [`Vitest`](https://vitest.dev/)
+- [`Vue Test Utils`](https://test-utils.vuejs.org/)
 - [`TypeScript`](http://www.typescriptlang.org)
 - [`PostCSS`](https://postcss.org)
 

diff --git a/build/base/plugins/index.js b/build/base/plugins/index.js
diff --git a/build/rollup.config.dev.js b/build/rollup.config.dev.js
diff --git a/build/rollup.config.prod.js b/build/rollup.config.prod.js
diff --git a/demo/App.ts b/demo/App.ts
diff --git a/demo/App.vue b/demo/App.vue
@@ -0,0 +1,68 @@
+<template>
+  <ul>
+    <li>
+      <VueLazyYoutubeVideo
+        src="https://www.youtube.com/embed/uxPdPpi5W4o"
+        previewImageSize="maxresdefault"
+        alt="foo"
+        buttonLabel="baz"
+        :imgListeners="thumbnailListeners"
+      ></VueLazyYoutubeVideo>
+    </li>
+    <li>
+      <VueLazyYoutubeVideo
+        src="https://www.youtube.com/embed/uxPdPpi5W4o"
+        aspectRatio="1:1"
+        previewImageSize="default"
+        :parameters="{ start: 32 }"
+      ></VueLazyYoutubeVideo>
+    </li>
+    <li>
+      <VueLazyYoutubeVideo
+        src="https://www.youtube.com/embed/uxPdPpi5W4o"
+        :thumbnail="{ webp: 'foo', jpg: 'bar' }"
+      ></VueLazyYoutubeVideo>
+    </li>
+    <li>
+      <VueLazyYoutubeVideo
+        src="https://www.youtube.com/embed/uxPdPpi5W4o"
+        :webp="false"
+        :autoplay="false"
+        :iframeAttributes="iframeAttributes"
+        enablejsapi
+        injectPlayerScript
+        @load:iframe="onIframeLoad($event)"
+        @init:player="onPlayerInit($event)"
+      ></VueLazyYoutubeVideo>
+    </li>
+  </ul>
+</template>
+
+<script lang="ts" setup>
+import VueLazyYoutubeVideo from '../src'
+import { InitPlayerEventPayload, LoadIframeEventPayload } from '../types'
+
+const thumbnailListeners = {
+  load() {
+    console.log('load')
+  },
+}
+const iframeAttributes = {
+  id: 'foo',
+}
+
+const onIframeLoad = ({ iframe }: LoadIframeEventPayload) => {
+  console.log('<iframe />: ', iframe)
+  const id = iframe ? iframe.id : iframeAttributes.id
+  console.log('Resolved <iframe /> id: ', id)
+  const player = new YT.Player(id, {})
+  console.log('YT.Player instance: ', player)
+  setTimeout(() => {
+    player.stopVideo()
+  }, 3000)
+}
+
+const onPlayerInit = ({ instance }: InitPlayerEventPayload) => {
+  console.log(instance)
+}
+</script>
diff --git a/demo/index.html b/demo/index.html
@@ -5,12 +5,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <link rel="stylesheet" href="./demo.css" />
     <script src="https://www.youtube.com/player_api"></script>
     <title>vue-lazy-youtube-video</title>
   </head>
+
   <body>
     <div id="app"></div>
-    <script src="./demo.js"></script>
+    <script type="module" src="./index.ts"></script>
   </body>
 </html>
diff --git a/demo/index.ts b/demo/index.ts
@@ -1,13 +1,10 @@
-import Vue from 'vue'
-import App from './App'
-import { Plugin } from '../src'
 import '../src/styles/index.css'
 
-Vue.config.productionTip = false
+import { createApp } from 'vue'
+import App from './App.vue'
+import { plugin } from '../src'
 
-Vue.use(Plugin)
+const app = createApp(App)
+app.use(plugin)
 
-new Vue({
-  el: '#app',
-  render: (h) => h(App),
-})
+app.mount('#app')
diff --git a/jest.config.js b/jest.config.js