chore(vue): Convert render function based UI components to Vue single-file components (#5022)

Co-authored-by: Lennart <[email protected]>

Author: wobsoriano

.changeset/eighty-beds-behave.md

@@ -0,0 +1,5 @@
+---
+"@clerk/vue": patch
+---
+
+Improve runtime prop checking of all Vue Clerk components

packages/vue/src/components/ClerkHostRenderer.ts

@@ -0,0 +1,82 @@
+import type { PropType } from 'vue';
+import { defineComponent, h, onScopeDispose, ref, toRef, watchEffect } from 'vue';
+
+import type { CustomPortalsRendererProps } from '../types';
+import { ClerkLoaded } from './controlComponents';
+
+type AnyObject = Record<string, any>;
+
+export const CustomPortalsRenderer = defineComponent((props: CustomPortalsRendererProps) => {
+  return () => [...(props?.customPagesPortals ?? []), ...(props?.customMenuItemsPortals ?? [])];
+});
+
+/**
+ * Used to orchestrate mounting of Clerk components in a host Vue application.
+ * Components are rendered into a specific DOM node using mount/unmount methods provided by the Clerk class.
+ */
+export const ClerkHostRenderer = defineComponent({
+  props: {
+    mount: {
+      type: Function as PropType<(node: HTMLDivElement, props: AnyObject) => void>,
+      required: false,
+    },
+    unmount: {
+      type: Function as PropType<(node: HTMLDivElement) => void>,
+      required: false,
+    },
+    open: {
+      type: Function as PropType<(props: AnyObject) => void>,
+      required: false,
+    },
+    close: {
+      type: Function as PropType<() => void>,
+      required: false,
+    },
+    updateProps: {
+      type: Function as PropType<(props: { node: HTMLDivElement; props: AnyObject | undefined }) => void>,
+      required: false,
+    },
+    props: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+  },
+  setup(props) {
+    const portalRef = ref<HTMLDivElement | null>(null);
+    const isPortalMounted = ref(false);
+    // Make the props reactive so the watcher can react to changes
+    const componentProps = toRef(props, 'props');
+
+    watchEffect(() => {
+      if (!portalRef.value) {
+        return;
+      }
+
+      if (isPortalMounted.value) {
+        props.updateProps?.({ node: portalRef.value, props: componentProps.value });
+      } else {
+        if (props.mount) {
+          props.mount(portalRef.value, componentProps.value);
+        }
+        if (props.open) {
+          props.open(componentProps.value);
+        }
+        isPortalMounted.value = true;
+      }
+    });
+
+    onScopeDispose(() => {
+      if (isPortalMounted.value && portalRef.value) {
+        if (props.unmount) {
+          props.unmount(portalRef.value);
+        }
+        if (props.close) {
+          props.close();
+        }
+      }
+    });
+
+    return () => h(ClerkLoaded, () => h('div', { ref: portalRef }));
+  },
+});

packages/vue/src/components/SignInButton.ts

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { useAttrs, useSlots } from 'vue';
+import type { RedirectUrlProp } from '@clerk/types';
+import { useClerk } from '../composables/useClerk';
+import { assertSingleChild, normalizeWithDefaultValue } from '../utils';
+
+type Props = RedirectUrlProp & {
+  mode?: 'modal' | 'redirect';
+};
+
+const props = defineProps<Props>();
+
+const clerk = useClerk();
+const slots = useSlots();
+const attrs = useAttrs();
+
+function getChildComponent() {
+  const children = normalizeWithDefaultValue(slots.default?.({}), 'Sign in with Metamask');
+  return assertSingleChild(children, 'SignInWithMetamaskButton');
+}
+
+function clickHandler() {
+  void clerk.value?.authenticateWithMetamask({ redirectUrl: props.redirectUrl || undefined });
+}
+</script>
+
+<template>
+  <component
+    :is="getChildComponent"
+    v-bind="attrs"
+    @click="clickHandler"
+  >
+    <slot />
+  </component>
+</template>

packages/vue/src/components/SignInWithMetamaskButton.ts

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { useAttrs, useSlots } from 'vue';
+import type { SignOutOptions } from '@clerk/types';
+import { useClerk } from '../composables/useClerk';
+import { assertSingleChild, normalizeWithDefaultValue } from '../utils';
+
+interface SignOutButtonProps {
+  signOutOptions?: SignOutOptions;
+  sessionId?: string;
+  redirectUrl?: string;
+}
+
+const props = defineProps<SignOutButtonProps>();
+
+const clerk = useClerk();
+const slots = useSlots();
+const attrs = useAttrs();
+
+function getChildComponent() {
+  const children = normalizeWithDefaultValue(slots.default?.({}), 'Sign out');
+  return assertSingleChild(children, 'SignOutButton');
+}
+
+function clickHandler() {
+  const signOutOptions: SignOutOptions = {
+    redirectUrl: props.signOutOptions?.redirectUrl ?? props.redirectUrl,
+    sessionId: props.signOutOptions?.sessionId ?? props.sessionId,
+  };
+  void clerk.value?.signOut(signOutOptions);
+}
+</script>
+
+<template>
+  <component
+    :is="getChildComponent"
+    v-bind="attrs"
+    @click="clickHandler"
+  >
+    <slot />
+  </component>
+</template>