feat: implement provide/inject using composition api

Author: softbeehive

src/components/StripeElement.vue

@@ -2,106 +2,95 @@
   <div ref="mountPoint"></div>
 </template>
 
-<script lang="ts">
-import type { StripeElementType } from '@stripe/stripe-js'
-import type {
-  StripeElementsWithoutOverload,
-  StripeElementOptions,
-} from '../../types/vue-stripe'
-
-import { createElement } from '../stripe-elements'
+<script setup lang="ts">
+import type { StripeElementType, StripeElements } from "@stripe/stripe-js"
 import {
-  defineComponent,
+  defineEmits,
+  inject,
   onBeforeUnmount,
   onMounted,
   ref,
   toRefs,
   watch,
-} from 'vue'
+  withDefaults,
+} from "vue"
+import { createElement } from "../stripe-elements"
+import type { StripeElementOptions } from "../stripe-elements"
 
-export default defineComponent({
-  name: 'StripeElement',
+interface Props {
+  type?: StripeElementType
+  elements?: StripeElements
+  options?: StripeElementOptions
+}
 
-  props: {
-    // elements object
-    // https://stripe.com/docs/js/elements_object/create
-    elements: {
-      type: Object as () => StripeElementsWithoutOverload,
-      required: true,
-    },
-    // type of the element
-    // https://stripe.com/docs/js/elements_object/create_element?type=card
-    type: {
-      type: String as () => StripeElementType,
-      default: () => 'card',
-    },
-    // element options
-    // https://stripe.com/docs/js/elements_object/create_element?type=card#elements_create-options
-    options: {
-      type: Object as () => StripeElementOptions,
-      default: () => ({}),
-    },
-  },
+const props = withDefaults(defineProps<Props>(), {
+  type: () =>
+    (inject("providedElements") as StripeElementType) ? "payment" : "card",
+  elements: () => inject("providedElements") as StripeElements,
+})
+const { type, elements, options } = toRefs(props)
 
-  setup(props, { emit }) {
-    const domElement = ref(document.createElement('div'))
-    const stripeElement = ref()
-    const mountPoint = ref()
-    const { elements, type, options } = toRefs(props)
+// TODO: verify it works
+const emit = defineEmits()
 
-    onMounted(() => {
-      const mountElement = () => {
-        stripeElement.value = createElement(
-          elements.value,
-          type.value,
-          options.value
-        )
-        mountPoint.value.appendChild(domElement.value)
-        stripeElement.value.mount(domElement.value)
-      }
+const domElement = ref(document.createElement("div"))
+const stripeElement = ref()
+const mountPoint = ref()
 
-      // Handle event listeners
-      const wrapperFn = (t: string, e: Event) => {
-        emit(t, e)
-      }
+onMounted(() => {
+  const mountElement = () => {
+    stripeElement.value = createElement(
+      elements.value,
+      type.value,
+      options.value,
+    )
+    mountPoint.value.appendChild(domElement.value)
+    stripeElement.value?.mount(domElement.value)
+  }
 
-      const handleEvents = () => {
-        // See stripe element events: https://stripe.com/docs/js/element/events
-        const eventTypes = [
-          'change',
-          'ready',
-          'focus',
-          'blur',
-          'click',
-          'escape',
-        ]
-        eventTypes.forEach((t) => {
-          stripeElement.value.on(t, wrapperFn.bind(null, t))
-        })
-      }
+  // Handle event listeners
+  const wrapperFn = (t: string, e: Event) => {
+    emit(t, e)
+  }
 
-      try {
-        mountElement()
-        handleEvents()
-      } catch (error) {
-        console.error(error)
-      }
-    })
+  const handleEvents = () => {
+    // See stripe element events: https://stripe.com/docs/js/element/events
+    const eventTypes = [
+      "change",
+      "ready",
+      "focus",
+      "blur",
+      "click",
+      "escape",
+      "loaderror",
+      "loaderstart",
+    ]
 
-    onBeforeUnmount(() => {
-      stripeElement.value?.unmount()
-      stripeElement.value?.destroy()
-    })
+    for (const eventType of eventTypes) {
+      stripeElement.value?.on(eventType, wrapperFn.bind(null, eventType))
+    }
+  }
 
-    watch(options, () => {
-      stripeElement.value?.update(props.options)
-    })
+  try {
+    mountElement()
+    handleEvents()
+  } catch (error) {
+    console.error(error)
+  }
+})
 
-    return {
-      stripeElement,
-      domElement,
-      mountPoint,
-    }
-  },
+onBeforeUnmount(() => {
+  stripeElement.value?.unmount()
+  stripeElement.value?.destroy()
+})
+
+watch(options, () => {
+  stripeElement.value?.update(props.options)
+})
+
+defineExpose({
+  stripeElement,
+  domElement,
+  mountPoint,
 })
 </script>

src/components/StripeElements.vue

@@ -1,53 +1,51 @@
 <template>
   <div v-if="elementsUsable">
-    <slot :instance="instance" :elements="elements"></slot>
+    <slot
+      :instance="instance"
+      :elements="elements"
+    ></slot>
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, computed, ref, toRefs, onMounted, watch } from 'vue'
-import { createElements, initStripe } from '../stripe-elements'
+<script setup lang="ts">
+import type {
+  Stripe,
+  StripeConstructorOptions,
+  StripeElements,
+  StripeElementsOptions,
+  StripeElementsUpdateOptions,
+} from "@stripe/stripe-js"
+import { computed, onMounted, provide, ref, toRefs, watch } from "vue"
+import { createElements, initStripe } from "../stripe-elements.ts"
 
-export default defineComponent({
-  name: 'StripeElements',
+const props = defineProps<{
+  stripeKey: string
+  instanceOptions?: StripeConstructorOptions
+  elementsOptions?: StripeElementsOptions
+}>()
 
-  props: {
-    stripeKey: {
-      type: String,
-      required: true,
-    },
-    instanceOptions: {
-      type: Object,
-      default: () => ({}),
-    },
-    elementsOptions: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
+const { stripeKey, instanceOptions, elementsOptions } = toRefs(props)
+const instance = ref<Stripe>()
+const elements = ref<StripeElements>()
+const elementsUsable = computed(() => {
+  return elements.value ? Object.keys(elements.value).length > 0 : false
+})
 
-  setup(props) {
-    const { stripeKey, instanceOptions, elementsOptions } = toRefs(props)
-    const instance = ref()
-    const elements = ref()
-    const elementsUsable = computed(() => {
-      return elements.value ? Object.keys(elements.value).length > 0 : false
-    })
+onMounted(() => {
+  instance.value = initStripe(stripeKey.value, instanceOptions.value)
+  elements.value = createElements(instance.value, elementsOptions.value)
+})
 
-    onMounted(() => {
-      instance.value = initStripe(stripeKey.value, instanceOptions.value)
-      elements.value = createElements(instance.value, elementsOptions.value)
-    })
+watch(elementsOptions, () => {
+  elements.value?.update(elementsOptions.value as StripeElementsUpdateOptions)
+})
 
-    watch(elementsOptions, () => {
-      elements.value?.update(elementsOptions.value)
-    })
+provide("providedInstance", instance)
+provide("providedElements", elements)
 
-    return {
-      elements,
-      instance,
-      elementsUsable,
-    }
-  },
+defineExpose({
+  elements,
+  instance,
+  elementsUsable,
 })
 </script>

src/main.ts

@@ -1,6 +1,6 @@
-import { createElement, createElements, initStripe } from './stripe-elements'
-import StripeElement from './components/StripeElement.vue'
-import StripeElements from './components/StripeElements.vue'
+import StripeElement from "./components/StripeElement.vue"
+import StripeElements from "./components/StripeElements.vue"
+import { createElement, createElements, initStripe } from "./stripe-elements.ts"
 
 export {
   createElement,