fix: consistent component error event emits

harlan-zw · harlan-zw · commit c9d2b3ead976 · 2024-07-06T18:06:05.000+10:00
diff --git a/src/runtime/components/ScriptCrisp.vue b/src/runtime/components/ScriptCrisp.vue
@@ -23,6 +23,7 @@ const props = withDefaults(defineProps<{
 const emits = defineEmits<{
   // our emit
   ready: [e: ReturnType<typeof useScriptCrisp>]
+  error: []
 }>()
 
 const rootEl = ref(null)
@@ -60,6 +61,9 @@ onMounted(() => {
       })
       observer.observe(document.body, { childList: true, subtree: true })
     }
+    else if (status === 'error') {
+      emits('error')
+    }
   })
 })
 onBeforeUnmount(() => {
@@ -75,5 +79,6 @@ onBeforeUnmount(() => {
     <slot :ready="isReady" />
     <slot v-if="$script.status.value === 'awaitingLoad'" name="awaitingLoad" />
     <slot v-else-if="$script.status.value === 'loading' || !isReady" name="loading" />
+    <slot v-else-if="$script.status.value === 'error'" name="error" />
   </div>
 </template>
diff --git a/src/runtime/components/ScriptGoogleAdsense.vue b/src/runtime/components/ScriptGoogleAdsense.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useElementScriptTrigger } from '../composables/useElementScriptTrigger'
 import { useScriptGoogleAdsense } from '../registry/google-adsense'
-import { callOnce, onMounted, ref } from '#imports'
+import { callOnce, onMounted, ref, watch } from '#imports'
 import type { ElementScriptTrigger } from '#nuxt-scripts'
 
 const props = withDefaults(defineProps<{
@@ -18,20 +18,36 @@ const props = withDefaults(defineProps<{
   dataFullWidthResponsive: true,
 })
 
+const emits = defineEmits<{
+  // our emit
+  ready: [e: ReturnType<typeof useScriptGoogleAdsense>]
+  error: []
+}>()
+
 const rootEl = ref(null)
 const trigger = useElementScriptTrigger({ trigger: props.trigger, el: rootEl })
 
-const { $script } = useScriptGoogleAdsense({
+const instance = useScriptGoogleAdsense({
   client: props.dataAdClient,
   scriptOptions: {
     trigger,
   },
 })
 
+const { $script } = instance
+
 onMounted(() => {
   callOnce(() => {
     (window.adsbygoogle = window.adsbygoogle || []).push({})
   })
+  watch(instance.$script.status, () => {
+    if (instance.$script.status.value === 'loaded') {
+      emits('ready', instance)
+    }
+    else if (instance.$script.status.value === 'error') {
+      emits('error')
+    }
+  })
 })
 </script>
 
@@ -47,6 +63,7 @@ onMounted(() => {
     v-bind="{ ...$attrs }"
   >
     <slot v-if="$script.status.value === 'awaitingLoad'" name="awaitingLoad" />
-    <slot v-if="$script.status.value === 'loading'" name="loading" />
+    <slot v-else-if="$script.status.value === 'loading'" name="loading" />
+    <slot v-else-if="$script.status.value === 'error'" name="error" />
   </ins>
 </template>
diff --git a/src/runtime/components/ScriptGoogleMaps.vue b/src/runtime/components/ScriptGoogleMaps.vue
@@ -85,6 +85,7 @@ const props = withDefaults(defineProps<{
 const emits = defineEmits<{
   // our emit
   ready: [e: Ref<google.maps.Map | undefined>]
+  error: []
 }>()
 
 const apiKey = props.apiKey || scriptRuntimeConfig('googleMaps')?.apiKey
@@ -136,6 +137,11 @@ onMounted(() => {
   watch(ready, (v) => {
     v && emits('ready', map)
   })
+  watch($script.status, () => {
+    if ($script.status.value === 'error') {
+      emits('error')
+    }
+  })
   // create the map
   $script.then(async (instance) => {
     const maps = await instance.maps as any as typeof google.maps // some weird type issue here
@@ -253,6 +259,7 @@ onBeforeUnmount(() => {
       <ScriptLoadingIndicator color="black" />
     </slot>
     <slot v-if="$script.status.value === 'awaitingLoad'" name="awaitingLoad" />
+    <slot v-else-if="$script.status.value === 'error'" name="error" />
     <slot />
   </div>
 </template>
diff --git a/src/runtime/components/ScriptIntercom.vue b/src/runtime/components/ScriptIntercom.vue
@@ -25,6 +25,7 @@ const props = withDefaults(defineProps<{
 const emits = defineEmits<{
   // our emit
   ready: [e: ReturnType<typeof useScriptIntercom>]
+  error: []
 }>()
 
 const rootEl = ref(null)
@@ -66,6 +67,8 @@ onMounted(() => {
       })
       observer.observe(document.body, { childList: true, subtree: true })
     }
+    else if (status === 'error')
+      emits('error')
   })
 })
 onBeforeUnmount(() => {
@@ -85,5 +88,6 @@ onBeforeUnmount(() => {
     <slot :ready="isReady" />
     <slot v-if="$script.status.value === 'awaitingLoad'" name="awaitingLoad" />
     <slot v-else-if="$script.status.value === 'loading' || !isReady" name="loading" />
+    <slot v-else-if="$script.status.value === 'error'" name="error" />
   </div>
 </template>
diff --git a/src/runtime/components/ScriptStripePricingTable.vue b/src/runtime/components/ScriptStripePricingTable.vue
@@ -3,7 +3,7 @@ import { ref } from 'vue'
 import type { ElementScriptTrigger } from '../types'
 import { useElementScriptTrigger } from '../composables/useElementScriptTrigger'
 import { useScript } from '../composables/useScript'
-import { onBeforeUnmount } from '#imports'
+import { onBeforeUnmount, onMounted, watch } from '#imports'
 
 const props = withDefaults(defineProps<{
   trigger?: ElementScriptTrigger
@@ -17,30 +17,39 @@ const props = withDefaults(defineProps<{
 })
 
 const emit = defineEmits<{
-  ready: []
+  ready: [ReturnType<typeof useScript>]
+  error: []
 }>()
 
 const rootEl = ref<HTMLDivElement | undefined>()
 const containerEl = ref<HTMLDivElement | undefined>()
-const { $script } = useScript(`https://js.stripe.com/v3/pricing-table.js`, {
+const instance = useScript(`https://js.stripe.com/v3/pricing-table.js`, {
   trigger: useElementScriptTrigger({ trigger: props.trigger, el: rootEl }),
 })
+const { $script } = instance
 
 const pricingTable = ref<HTMLElement | undefined>()
-$script.then(() => {
-  const StripePricingTable = window.customElements.get('stripe-pricing-table')!
-  const stripePricingTable = new StripePricingTable()
-  stripePricingTable.setAttribute('publishable-key', props.publishableKey)
-  stripePricingTable.setAttribute('pricing-table-id', props.pricingTableId)
-  if (props.clientReferenceId)
-    stripePricingTable.setAttribute('client-reference-id', props.clientReferenceId)
-  if (props.customerEmail)
-    stripePricingTable.setAttribute('customer-email', props.customerEmail)
-  if (props.customerSessionClientSecret)
-    stripePricingTable.setAttribute('customer-session-client-secret', props.customerSessionClientSecret)
-  pricingTable.value = stripePricingTable
-  rootEl.value!.appendChild(stripePricingTable)
-  emit('ready')
+onMounted(() => {
+  $script.then(() => {
+    const StripePricingTable = window.customElements.get('stripe-pricing-table')!
+    const stripePricingTable = new StripePricingTable()
+    stripePricingTable.setAttribute('publishable-key', props.publishableKey)
+    stripePricingTable.setAttribute('pricing-table-id', props.pricingTableId)
+    if (props.clientReferenceId)
+      stripePricingTable.setAttribute('client-reference-id', props.clientReferenceId)
+    if (props.customerEmail)
+      stripePricingTable.setAttribute('customer-email', props.customerEmail)
+    if (props.customerSessionClientSecret)
+      stripePricingTable.setAttribute('customer-session-client-secret', props.customerSessionClientSecret)
+    pricingTable.value = stripePricingTable
+    rootEl.value!.appendChild(stripePricingTable)
+    emit('ready', instance)
+  })
+  watch($script.status, (status) => {
+    if (status === 'error') {
+      emit('error')
+    }
+  })
 })
 
 onBeforeUnmount(() => {
@@ -53,6 +62,7 @@ onBeforeUnmount(() => {
     <div ref="containerEl" />
     <slot v-if="$script.status.value === 'loading'" name="loading" />
     <slot v-if="$script.status.value === 'awaitingLoad'" name="awaitingLoad" />
+    <slot v-else-if="$script.status.value === 'error'" name="error" />
     <slot />
   </div>
 </template>
diff --git a/src/runtime/components/ScriptVimeoPlayer.vue b/src/runtime/components/ScriptVimeoPlayer.vue
@@ -190,6 +190,12 @@ onMounted(() => {
   watch(() => props.id, (v) => {
     v && player?.loadVideo(Number(v))
   })
+  watch($script.status, (status) => {
+    if (status === 'error') {
+      // @ts-expect-error untyped
+      emits('error')
+    }
+  })
 })
 
 const rootAttrs = computed(() => {
@@ -242,6 +248,7 @@ onBeforeUnmount(() => player?.unload())
       <ScriptLoadingIndicator color="white" />
     </slot>
     <slot v-if="$script.status.value === 'awaitingLoad'" name="awaitingLoad" />
+    <slot v-else-if="$script.status.value === 'error'" name="error" />
     <slot />
   </div>
 </template>
diff --git a/src/runtime/components/ScriptYouTubePlayer.vue b/src/runtime/components/ScriptYouTubePlayer.vue
@@ -85,6 +85,12 @@ onMounted(() => {
       }])),
     })
   })
+  watch($script.status, (status) => {
+    if (status === 'error') {
+      // @ts-expect-error untyped
+      emits('error')
+    }
+  })
 })
 
 defineExpose({
@@ -159,5 +165,6 @@ const placeholderAttrs = computed(() => {
       <ScriptLoadingIndicator />
     </slot>
     <slot v-if="$script.status.value === 'awaitingLoad'" name="awaitingLoad" />
+    <slot v-else-if="$script.status.value === 'error'" name="error" />
   </div>
 </template>
