Skip to content

Commit c9d2b3e

Browse files
harlan-zwharlan-zw
committed
fix: consistent component error event emits
1 parent d32e0d8 commit c9d2b3e

File tree

7 files changed

+77
-20
lines changed

7 files changed

+77
-20
lines changed

‎src/runtime/components/ScriptCrisp.vue‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ const props = withDefaults(defineProps<{
2323
const emits = defineEmits<{
2424
// our emit
2525
ready: [e: ReturnType<typeof useScriptCrisp>]
26+
error: []
2627
}>()
2728
2829
const rootEl = ref(null)
@@ -60,6 +61,9 @@ onMounted(() => {
6061
})
6162
observer.observe(document.body, { childList: true, subtree: true })
6263
}
64+
else if (status === 'error') {
65+
emits('error')
66+
}
6367
})
6468
})
6569
onBeforeUnmount(() => {
@@ -75,5 +79,6 @@ onBeforeUnmount(() => {
7579
<slot :ready="isReady" />
7680
<slot v-if="$script.status.value === 'awaitingLoad'" name="awaitingLoad" />
7781
<slot v-else-if="$script.status.value === 'loading' || !isReady" name="loading" />
82+
<slot v-else-if="$script.status.value === 'error'" name="error" />
7883
</div>
7984
</template>

‎src/runtime/components/ScriptGoogleAdsense.vue‎

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script setup lang="ts">
22
import { useElementScriptTrigger } from '../composables/useElementScriptTrigger'
33
import { useScriptGoogleAdsense } from '../registry/google-adsense'
4-
import { callOnce, onMounted, ref } from '#imports'
4+
import { callOnce, onMounted, ref, watch } from '#imports'
55
import type { ElementScriptTrigger } from '#nuxt-scripts'
66
77
const props = withDefaults(defineProps<{
@@ -18,20 +18,36 @@ const props = withDefaults(defineProps<{
1818
dataFullWidthResponsive: true,
1919
})
2020
21+
const emits = defineEmits<{
22+
// our emit
23+
ready: [e: ReturnType<typeof useScriptGoogleAdsense>]
24+
error: []
25+
}>()
26+
2127
const rootEl = ref(null)
2228
const trigger = useElementScriptTrigger({ trigger: props.trigger, el: rootEl })
2329
24-
const { $script } = useScriptGoogleAdsense({
30+
const instance = useScriptGoogleAdsense({
2531
client: props.dataAdClient,
2632
scriptOptions: {
2733
trigger,
2834
},
2935
})
3036
37+
const { $script } = instance
38+
3139
onMounted(() => {
3240
callOnce(() => {
3341
(window.adsbygoogle = window.adsbygoogle || []).push({})
3442
})
43+
watch(instance.$script.status, () => {
44+
if (instance.$script.status.value === 'loaded') {
45+
emits('ready', instance)
46+
}
47+
else if (instance.$script.status.value === 'error') {
48+
emits('error')
49+
}
50+
})
3551
})
3652
</script>
3753

@@ -47,6 +63,7 @@ onMounted(() => {
4763
v-bind="{ ...$attrs }"
4864
>
4965
<slot v-if="$script.status.value === 'awaitingLoad'" name="awaitingLoad" />
50-
<slot v-if="$script.status.value === 'loading'" name="loading" />
66+
<slot v-else-if="$script.status.value === 'loading'" name="loading" />
67+
<slot v-else-if="$script.status.value === 'error'" name="error" />
5168
</ins>
5269
</template>

‎src/runtime/components/ScriptGoogleMaps.vue‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,7 @@ const props = withDefaults(defineProps<{
8585
const emits = defineEmits<{
8686
// our emit
8787
ready: [e: Ref<google.maps.Map | undefined>]
88+
error: []
8889
}>()
8990
9091
const apiKey = props.apiKey || scriptRuntimeConfig('googleMaps')?.apiKey
@@ -136,6 +137,11 @@ onMounted(() => {
136137
watch(ready, (v) => {
137138
v && emits('ready', map)
138139
})
140+
watch($script.status, () => {
141+
if ($script.status.value === 'error') {
142+
emits('error')
143+
}
144+
})
139145
// create the map
140146
$script.then(async (instance) => {
141147
const maps = await instance.maps as any as typeof google.maps // some weird type issue here
@@ -253,6 +259,7 @@ onBeforeUnmount(() => {
253259
<ScriptLoadingIndicator color="black" />
254260
</slot>
255261
<slot v-if="$script.status.value === 'awaitingLoad'" name="awaitingLoad" />
262+
<slot v-else-if="$script.status.value === 'error'" name="error" />
256263
<slot />
257264
</div>
258265
</template>

‎src/runtime/components/ScriptIntercom.vue‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ const props = withDefaults(defineProps<{
2525
const emits = defineEmits<{
2626
// our emit
2727
ready: [e: ReturnType<typeof useScriptIntercom>]
28+
error: []
2829
}>()
2930
3031
const rootEl = ref(null)
@@ -66,6 +67,8 @@ onMounted(() => {
6667
})
6768
observer.observe(document.body, { childList: true, subtree: true })
6869
}
70+
else if (status === 'error')
71+
emits('error')
6972
})
7073
})
7174
onBeforeUnmount(() => {
@@ -85,5 +88,6 @@ onBeforeUnmount(() => {
8588
<slot :ready="isReady" />
8689
<slot v-if="$script.status.value === 'awaitingLoad'" name="awaitingLoad" />
8790
<slot v-else-if="$script.status.value === 'loading' || !isReady" name="loading" />
91+
<slot v-else-if="$script.status.value === 'error'" name="error" />
8892
</div>
8993
</template>

‎src/runtime/components/ScriptStripePricingTable.vue‎

Lines changed: 27 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { ref } from 'vue'
33
import type { ElementScriptTrigger } from '../types'
44
import { useElementScriptTrigger } from '../composables/useElementScriptTrigger'
55
import { useScript } from '../composables/useScript'
6-
import { onBeforeUnmount } from '#imports'
6+
import { onBeforeUnmount, onMounted, watch } from '#imports'
77
88
const props = withDefaults(defineProps<{
99
trigger?: ElementScriptTrigger
@@ -17,30 +17,39 @@ const props = withDefaults(defineProps<{
1717
})
1818
1919
const emit = defineEmits<{
20-
ready: []
20+
ready: [ReturnType<typeof useScript>]
21+
error: []
2122
}>()
2223
2324
const rootEl = ref<HTMLDivElement | undefined>()
2425
const containerEl = ref<HTMLDivElement | undefined>()
25-
const { $script } = useScript(`https://js.stripe.com/v3/pricing-table.js`, {
26+
const instance = useScript(`https://js.stripe.com/v3/pricing-table.js`, {
2627
trigger: useElementScriptTrigger({ trigger: props.trigger, el: rootEl }),
2728
})
29+
const { $script } = instance
2830
2931
const pricingTable = ref<HTMLElement | undefined>()
30-
$script.then(() => {
31-
const StripePricingTable = window.customElements.get('stripe-pricing-table')!
32-
const stripePricingTable = new StripePricingTable()
33-
stripePricingTable.setAttribute('publishable-key', props.publishableKey)
34-
stripePricingTable.setAttribute('pricing-table-id', props.pricingTableId)
35-
if (props.clientReferenceId)
36-
stripePricingTable.setAttribute('client-reference-id', props.clientReferenceId)
37-
if (props.customerEmail)
38-
stripePricingTable.setAttribute('customer-email', props.customerEmail)
39-
if (props.customerSessionClientSecret)
40-
stripePricingTable.setAttribute('customer-session-client-secret', props.customerSessionClientSecret)
41-
pricingTable.value = stripePricingTable
42-
rootEl.value!.appendChild(stripePricingTable)
43-
emit('ready')
32+
onMounted(() => {
33+
$script.then(() => {
34+
const StripePricingTable = window.customElements.get('stripe-pricing-table')!
35+
const stripePricingTable = new StripePricingTable()
36+
stripePricingTable.setAttribute('publishable-key', props.publishableKey)
37+
stripePricingTable.setAttribute('pricing-table-id', props.pricingTableId)
38+
if (props.clientReferenceId)
39+
stripePricingTable.setAttribute('client-reference-id', props.clientReferenceId)
40+
if (props.customerEmail)
41+
stripePricingTable.setAttribute('customer-email', props.customerEmail)
42+
if (props.customerSessionClientSecret)
43+
stripePricingTable.setAttribute('customer-session-client-secret', props.customerSessionClientSecret)
44+
pricingTable.value = stripePricingTable
45+
rootEl.value!.appendChild(stripePricingTable)
46+
emit('ready', instance)
47+
})
48+
watch($script.status, (status) => {
49+
if (status === 'error') {
50+
emit('error')
51+
}
52+
})
4453
})
4554
4655
onBeforeUnmount(() => {
@@ -53,6 +62,7 @@ onBeforeUnmount(() => {
5362
<div ref="containerEl" />
5463
<slot v-if="$script.status.value === 'loading'" name="loading" />
5564
<slot v-if="$script.status.value === 'awaitingLoad'" name="awaitingLoad" />
65+
<slot v-else-if="$script.status.value === 'error'" name="error" />
5666
<slot />
5767
</div>
5868
</template>

‎src/runtime/components/ScriptVimeoPlayer.vue‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -190,6 +190,12 @@ onMounted(() => {
190190
watch(() => props.id, (v) => {
191191
v && player?.loadVideo(Number(v))
192192
})
193+
watch($script.status, (status) => {
194+
if (status === 'error') {
195+
// @ts-expect-error untyped
196+
emits('error')
197+
}
198+
})
193199
})
194200
195201
const rootAttrs = computed(() => {
@@ -242,6 +248,7 @@ onBeforeUnmount(() => player?.unload())
242248
<ScriptLoadingIndicator color="white" />
243249
</slot>
244250
<slot v-if="$script.status.value === 'awaitingLoad'" name="awaitingLoad" />
251+
<slot v-else-if="$script.status.value === 'error'" name="error" />
245252
<slot />
246253
</div>
247254
</template>

‎src/runtime/components/ScriptYouTubePlayer.vue‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,12 @@ onMounted(() => {
8585
}])),
8686
})
8787
})
88+
watch($script.status, (status) => {
89+
if (status === 'error') {
90+
// @ts-expect-error untyped
91+
emits('error')
92+
}
93+
})
8894
})
8995
9096
defineExpose({
@@ -159,5 +165,6 @@ const placeholderAttrs = computed(() => {
159165
<ScriptLoadingIndicator />
160166
</slot>
161167
<slot v-if="$script.status.value === 'awaitingLoad'" name="awaitingLoad" />
168+
<slot v-else-if="$script.status.value === 'error'" name="error" />
162169
</div>
163170
</template>

0 commit comments

Comments
 (0)