chore(vue,types): Add initial support for SFC files to improve runtim…

…e prop checking (#4902)

.changeset/dry-pears-approve.md

@@ -0,0 +1,6 @@
+---
+'@clerk/types': patch
+'@clerk/vue': patch
+---
+
+Improve runtime prop checking for single-file components

packages/types/src/clerk.ts

@@ -990,7 +990,7 @@ export type SignInCombinedProps = RoutingOptions & {
   LegacyRedirectProps &
   AfterSignOutUrl;
 
-interface TransferableOption {
+export interface TransferableOption {
   /**
    * Indicates whether or not sign in attempts are transferable to the sign up flow.
    * When set to false, prevents opaque sign ups when a user attempts to sign in via OAuth with an email that doesn't exist.

packages/vue/package.json

@@ -41,10 +41,11 @@
     "dist"
   ],
   "scripts": {
-    "build": "tsup",
+    "build": "tsup --onSuccess \"pnpm build:dts\"",
+    "build:dts": "vue-tsc --declaration --emitDeclarationOnly -p tsconfig.build.json",
     "dev": "tsup --watch",
     "lint": "eslint src/",
-    "lint:attw": "attw --pack . --ignore-rules no-resolution cjs-resolves-to-esm",
+    "lint:attw": "attw --pack . --ignore-rules no-resolution cjs-resolves-to-esm internal-resolution-error",
     "lint:publint": "publint",
     "publish:local": "pnpm yalc push --replace --sig",
     "test": "vitest",
@@ -56,8 +57,11 @@
   },
   "devDependencies": {
     "@testing-library/vue": "^8.1.0",
+    "@vitejs/plugin-vue": "^5.2.1",
     "@vue.ts/tsx-auto-props": "^0.6.0",
-    "vue": "3.5.12"
+    "unplugin-vue": "^5.2.1",
+    "vue": "3.5.12",
+    "vue-tsc": "^2.0.24"
   },
   "peerDependencies": {
     "vue": "^3.2.0"

packages/vue/src/components/SignInButton.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { useAttrs, useSlots } from 'vue';
+import type { SignInProps } from '@clerk/types';
+import { useClerk } from '../composables/useClerk';
+import { assertSingleChild, normalizeWithDefaultValue } from '../utils';
+
+type SignInButtonProps = Pick<
+  SignInProps,
+  'fallbackRedirectUrl' | 'forceRedirectUrl' | 'signUpForceRedirectUrl' | 'signUpFallbackRedirectUrl' | 'initialValues'
+> & {
+  mode?: 'modal' | 'redirect';
+};
+
+const props = defineProps<SignInButtonProps>();
+
+const clerk = useClerk();
+const slots = useSlots();
+const attrs = useAttrs();
+
+function getChildComponent() {
+  const children = normalizeWithDefaultValue(slots.default?.({}), 'Sign in');
+  return assertSingleChild(children, 'SignInButton');
+}
+
+function clickHandler() {
+  const { mode, ...opts } = props;
+
+  if (mode === 'modal') {
+    return clerk.value?.openSignIn(opts);
+  }
+
+  void clerk.value?.redirectToSignIn({
+    ...opts,
+    signInFallbackRedirectUrl: props.fallbackRedirectUrl,
+    signInForceRedirectUrl: props.forceRedirectUrl,
+  });
+}
+</script>
+
+<template>
+  <component
+    :is="getChildComponent"
+    v-bind="attrs"
+    @click="clickHandler"
+  >
+    <slot />
+  </component>
+</template>

packages/vue/src/components/__tests__/SignInButton.test.ts

@@ -3,7 +3,7 @@ import { render, screen } from '@testing-library/vue';
 import { vi } from 'vitest';
 import { defineComponent, h, ref } from 'vue';
 
-import { SignInButton } from '../SignInButton';
+import SignInButton from '../SignInButton.vue';
 
 const mockRedirectToSignIn = vi.fn();
 const originalError = console.error;

packages/vue/src/components/index.ts

@@ -1,6 +1,5 @@
 export {
   SignUp,
-  SignIn,
   UserProfile,
   UserButton,
   OrganizationSwitcher,
@@ -10,6 +9,7 @@ export {
   GoogleOneTap,
   Waitlist,
 } from './uiComponents';
+export { default as SignIn } from './ui-components/SignIn.vue';
 
 export {
   ClerkLoaded,
@@ -25,7 +25,7 @@ export {
   RedirectToOrganizationProfile,
 } from './controlComponents';
 
-export { SignInButton } from './SignInButton';
+export { default as SignInButton } from './SignInButton.vue';
 export { SignUpButton } from './SignUpButton';
 export { SignOutButton } from './SignOutButton';
 export { SignInWithMetamaskButton } from './SignInWithMetamaskButton';

packages/vue/src/components/ui-components/SignIn.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { Portal } from '../uiComponents';
+import { useClerk } from '../../composables';
+import type { SignInProps } from '@clerk/types';
+
+const clerk = useClerk();
+
+const props = defineProps<SignInProps>();
+</script>
+
+<template>
+  <Portal
+    :mount="clerk?.mountSignIn"
+    :unmount="clerk?.unmountSignIn"
+    :props="props"
+    :update-props="(clerk as any)?.__unstable__updateProps"
+  />
+</template>

packages/vue/src/components/uiComponents.ts

@@ -4,7 +4,6 @@ import type {
   OrganizationListProps,
   OrganizationProfileProps,
   OrganizationSwitcherProps,
-  SignInProps,
   SignUpProps,
   UserButtonProps,
   UserProfileProps,
@@ -61,7 +60,7 @@ const CustomPortalsRenderer = defineComponent((props: CustomPortalsRendererProps
  * The component only mounts when Clerk is fully loaded and automatically
  * handles cleanup on unmount.
  */
-const Portal = defineComponent((props: MountProps) => {
+export const Portal = defineComponent((props: MountProps) => {
   const portalRef = ref<HTMLDivElement | null>(null);
   const isPortalMounted = ref(false);
   // Make the props reactive so the watcher can react to changes
@@ -258,18 +257,6 @@ export const GoogleOneTap = defineComponent((props: GoogleOneTapProps) => {
     });
 });
 
-export const SignIn = defineComponent((props: SignInProps) => {
-  const clerk = useClerk();
-
-  return () =>
-    h(Portal, {
-      mount: clerk.value?.mountSignIn,
-      unmount: clerk.value?.unmountSignIn,
-      updateProps: (clerk.value as any)?.__unstable__updateProps,
-      props,
-    });
-});
-
 export const SignUp = defineComponent((props: SignUpProps) => {
   const clerk = useClerk();
 

packages/vue/src/env.d.ts

@@ -0,0 +1,6 @@
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
+
+  const component: DefineComponent<Record<string, unknown>, Record<string, unknown>, any>;
+  export default component;
+}

packages/vue/tsconfig.build.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "declaration": true,
+    "declarationDir": "./dist"
+  },
+  "include": ["src/**/*.ts", "src/**/*.vue"],
+  "exclude": ["src/**/*.test.ts"]
+}

packages/vue/tsconfig.json

@@ -7,7 +7,6 @@
     "strict": true,
     "noImplicitAny": true,
     "noUnusedLocals": true,
-    "noEmit": true,
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": false,
     "skipLibCheck": true

packages/vue/tsup.config.ts

@@ -1,5 +1,6 @@
 import autoPropsPlugin from '@vue.ts/tsx-auto-props/esbuild';
 import { defineConfig, type Options } from 'tsup';
+import vuePlugin from 'unplugin-vue/esbuild';
 
 import { name, version } from './package.json';
 
@@ -13,8 +14,10 @@ export default defineConfig(() => {
     bundle: true,
     sourcemap: true,
     minify: false,
-    dts: true,
+    dts: false,
     esbuildPlugins: [
+      // Adds .vue files support
+      vuePlugin() as EsbuildPlugin,
       // Automatically generates runtime props from TypeScript types/interfaces for all
       // control and UI components, adding them to Vue components during build via
       // Object.defineProperty

packages/vue/vitest.config.ts

@@ -1,8 +1,10 @@
+import vue from '@vitejs/plugin-vue';
 import { defineConfig } from 'vitest/config';
 
 export default defineConfig({
   test: {
     globals: true,
     environment: 'jsdom',
   },
+  plugins: [vue()],
 });