feat(vue): [EX-02] verify installed consumers and preserve lifecycle contracts

example/vue.js/src/App.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
+import type Artplayer from 'artplayer'
+import type { Option } from 'artplayer'
 import { reactive } from 'vue'
-import Artplayer, { type Option } from 'artplayer'
 import Player from './Player.vue'
 
-const option = reactive<Partial<Option>>({
+const option = reactive({
   url: 'https://artplayer.org/assets/sample/video.mp4',
   autoSize: true,
-})
+} satisfies Partial<Option>)
 
 const style = reactive({
   width: '800px',
@@ -15,6 +16,7 @@ const style = reactive({
 })
 
 function getInstance(art: Artplayer) {
+  // eslint-disable-next-line no-console
   console.log('Artplayer instance:', art)
 }
 </script>

example/vue.js/src/Player.vue

@@ -1,44 +1,28 @@
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref, shallowRef } from 'vue'
+import type { Option } from 'artplayer'
+import Artplayer from 'artplayer'
 
-// Test type
-import Artplayer, { type Option } from 'artplayer'
-
-// Test i18n
-import fr from 'artplayer/i18n/fr'
-import id from 'artplayer/i18n/id'
-
-// Test plugins
-import artplayerPluginDocumentPip from 'artplayer-plugin-document-pip'
-import artplayerPluginDanmuku from 'artplayer-plugin-danmuku'
+import { onBeforeUnmount, onMounted, shallowRef } from 'vue'
+import { playerOptions } from './player-options'
 
 const props = defineProps<{ option: Partial<Option> }>()
 const emit = defineEmits(['getInstance'])
 
 const art = shallowRef<Artplayer | null>(null)
-const $container = ref<HTMLDivElement | null>(null)
+const $container = shallowRef<HTMLDivElement | null>(null)
 
 onMounted(() => {
-  art.value = new Artplayer({
-    ...props.option,
-    url: props.option.url as string,
-    container: $container.value as HTMLDivElement,
-    i18n: { id, fr },
-    lang: 'fr',
-    plugins: [
-      artplayerPluginDocumentPip({
-        //
-      }),
-      artplayerPluginDanmuku({
-        danmuku: 'https://artplayer.org/assets/sample/danmuku.xml',
-      }),
-    ],
-  })
+  const container = $container.value
+  if (!container)
+    return
+  art.value = new Artplayer(playerOptions(props.option, container))
   emit('getInstance', art.value)
 })
 
 onBeforeUnmount(() => {
-  art.value?.destroy(false)
+  const instance = art.value
+  art.value = null
+  instance?.destroy(false)
 })
 </script>
 

example/vue.js/src/player-options.ts

@@ -0,0 +1,23 @@
+import type { Option } from 'artplayer'
+import artplayerPluginDanmuku from 'artplayer-plugin-danmuku'
+import artplayerPluginDocumentPip from 'artplayer-plugin-document-pip'
+import fr from 'artplayer/i18n/fr'
+import id from 'artplayer/i18n/id'
+
+// Preserve this example's existing overrides and create plugins per instance.
+export function playerOptions(option: Partial<Option>, container: HTMLDivElement): Option {
+  return {
+    ...option,
+    container,
+    // Partial<Option> is the historical wrapper API; Artplayer validates missing URLs.
+    url: option.url as string,
+    i18n: { id, fr },
+    lang: 'fr',
+    plugins: [
+      artplayerPluginDocumentPip({}),
+      artplayerPluginDanmuku({
+        danmuku: 'https://artplayer.org/assets/sample/danmuku.xml',
+      }),
+    ],
+  }
+}