chore(vue,types): Add initial support for SFC files to improve runtime prop checking #4902

wobsoriano · 2025-01-15T20:03:01Z

Description

This PR adds initial support for Vue Single-File Components starting with the <SignIn /> component.

Right now we're using render functions to build out our Clerk components and this Esbuild plugin to generate prop types (e.g. SignInProps) to runtime props. This way, we can have the Vue SDK component prop in sync with prop types imported from @clerk/types.

The problem above is that it generates props but without runtime type validation (only type validation in IDE). Example output:

With this PR, it also generate runtime type props:

Everything should still function the same. I'll do a follow up PR for the rest of the components 🫡

Additional context

We're also doing this to unblock the release of the new sign-in-or-up feature which is not properly working with the current setup. If you have something like this:

<SignIn withSignUp />
<SignIn with-sign-up />
<SignIn :with-sign-up="true" />

The 3rd one above will only work as we're forcefully setting the value. The first 2 ones are expected to output true as the value but instead outputs an empty string:

This results in a falsy value and depending on the logic, might have some unexpected results. It happens because it does not have a proper runtime type.

Checklist

pnpm test runs as expected.
pnpm build runs as expected.
(If applicable) JSDoc comments have been added or updated for any package exports
(If applicable) Documentation has been updated

Type of change

vercel · 2025-01-15T20:03:02Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
clerk-js-sandbox	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 16, 2025 4:24pm

changeset-bot · 2025-01-15T20:03:05Z

🦋 Changeset detected

Latest commit: 03ab2e3

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 22 packages

Name	Type
@clerk/types	Patch
@clerk/vue	Patch
@clerk/astro	Patch
@clerk/backend	Patch
@clerk/clerk-js	Patch
@clerk/elements	Patch
@clerk/expo-passkeys	Patch
@clerk/clerk-expo	Patch
@clerk/express	Patch
@clerk/fastify	Patch
@clerk/localizations	Patch
@clerk/nextjs	Patch
@clerk/nuxt	Patch
@clerk/react-router	Patch
@clerk/clerk-react	Patch
@clerk/remix	Patch
@clerk/shared	Patch
@clerk/tanstack-start	Patch
@clerk/testing	Patch
@clerk/themes	Patch
@clerk/ui	Patch
@clerk/chrome-extension	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

…cking

wobsoriano · 2025-01-15T20:35:38Z

packages/vue/tsup.config.ts

+    dts: false,
    esbuildPlugins: [
+      // Adds .vue files support
+      vuePlugin() as EsbuildPlugin,


This vuePlugin transforms .vue files to JavaScript. We also turned off dts generation of tsup so that the vue-tsc module will generate it instead

wobsoriano · 2025-01-15T20:41:38Z

packages/vue/package.json

+    "unplugin-vue": "^5.2.1",
+    "vue": "3.5.12",
+    "vue-tsc": "^2.0.24"


unplugin-vue - esbuild plugin to tranform .vue files to JS
vue-tsc - dts emit with .vue file support

wobsoriano · 2025-01-15T21:26:15Z

packages/types/src/clerk.ts

@@ -990,7 +990,7 @@ export type SignInCombinedProps = RoutingOptions & {
  LegacyRedirectProps &
  AfterSignOutUrl;

-interface TransferableOption {
+export interface TransferableOption {


I'm getting a transitive type dependency error because the SignInProps is exported but not the TransferableOption interface that it depends on

wobsoriano · 2025-01-15T23:52:54Z

packages/vue/vitest.config.ts

 import { defineConfig } from 'vitest/config';

 export default defineConfig({
  test: {
    globals: true,
    environment: 'jsdom',
  },
+  plugins: [vue()],


Required when testing .vue SFC files

wobsoriano · 2025-01-15T23:56:11Z

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

This is the <SignIn /> component and functions the same as before only that we moved it into a single-file component (SFC) and that the Esbuild Vue plugin (check tsup config) can convert the typescript type props to runtime type props

wobsoriano · 2025-01-15T23:56:31Z

packages/vue/src/components/SignInButton.vue

This is the <SignInButton /> component and functions the same as before only that we moved it into a single-file component (SFC) and that the Esbuild Vue plugin (check tsup config) can convert the typescript type props to runtime type props

LekoArts · 2025-01-16T14:31:11Z

packages/vue/package.json

@@ -41,10 +41,11 @@
    "dist"
  ],
  "scripts": {
-    "build": "tsup",
+    "build": "tsup --onSuccess \"pnpm build:dts\"",
+    "build:dts": "vue-tsc --declaration --emitDeclarationOnly && rm -rf dist/components/__tests__",


Can you tell vue-tsc to ignore the test files so that we don't have to run rm -rf?

Updated! Got the idea here

LekoArts · 2025-01-16T14:37:22Z

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

+<script setup lang="ts">
+import { Portal } from '../uiComponents';
+import { useClerk } from '../../composables';
+import { SignInProps } from '@clerk/types';


Nit: Add type on the import

clerk-cookie added types vue labels Jan 15, 2025

vercel bot deployed to Preview January 15, 2025 20:04 View deployment

wobsoriano added 4 commits January 15, 2025 12:05

chore(vue): Initial vue component support for better runtime prop che…

ddf330e

…cking

chore(vue): Pass prop to SignIn component

17168f7

chore: add changeset

d612ec5

fix lockfile

fa6e4a4

wobsoriano force-pushed the rob/fix-vue-components-runtime-props branch from 9260c12 to fa6e4a4 Compare January 15, 2025 20:06

chore: update changeset

efda20f

vercel bot deployed to Preview January 15, 2025 20:10 View deployment

ignore resolution error

dca87dc

vercel bot temporarily deployed to Preview January 15, 2025 20:13 Inactive

wobsoriano marked this pull request as ready for review January 15, 2025 20:28

wobsoriano commented Jan 15, 2025

View reviewed changes

unexport type

6ad2975

wobsoriano changed the title ~~chore(vue,types): Add initial support for SFC files to improve runtime prop checking~~ chore(vue): Add initial support for SFC files to improve runtime prop checking Jan 15, 2025

chore: update changeset

615b731

clerk-cookie removed the types label Jan 15, 2025

vercel bot deployed to Preview January 15, 2025 20:39 View deployment

wobsoriano commented Jan 15, 2025

View reviewed changes

wobsoriano added 2 commits January 15, 2025 13:21

chore(types): Export TransferableOption type

1f7ad16

update changeset

f9a83c3

clerk-cookie added the types label Jan 15, 2025

vercel bot deployed to Preview January 15, 2025 21:23 View deployment

wobsoriano commented Jan 15, 2025

View reviewed changes

wobsoriano changed the title ~~chore(vue): Add initial support for SFC files to improve runtime prop checking~~ chore(vue,types): Add initial support for SFC files to improve runtime prop checking Jan 15, 2025

wobsoriano requested review from octoper and LekoArts January 15, 2025 21:37

wobsoriano requested a review from panteliselef January 15, 2025 21:37

clerk deleted a comment from clerk-cookie Jan 15, 2025

chore(vue): Refactor SignInButton render function to SFC

6d26ab1

vercel bot temporarily deployed to Preview January 15, 2025 23:19 Inactive

Merge branch 'main' into rob/fix-vue-components-runtime-props

772b8db

vercel bot deployed to Preview January 15, 2025 23:23 View deployment

chore(vue): Add vue vite plugin for tests

bc18a7a

vercel bot deployed to Preview January 15, 2025 23:44 View deployment

clean up test files included by vue-tsc

c2f62ef

vercel bot temporarily deployed to Preview January 15, 2025 23:51 Inactive

wobsoriano commented Jan 15, 2025

View reviewed changes

clerk deleted a comment from clerk-cookie Jan 15, 2025

wobsoriano commented Jan 15, 2025

View reviewed changes

octoper approved these changes Jan 16, 2025

View reviewed changes

LekoArts reviewed Jan 16, 2025

View reviewed changes

wobsoriano added 2 commits January 16, 2025 07:39

chore(vue): Add type to type imports

8ed8b4b

chore(vue): Separate build tsconfig options

95feecb

vercel bot temporarily deployed to Preview January 16, 2025 15:46 Inactive

wobsoriano requested a review from LekoArts January 16, 2025 15:47

Merge branch 'main' into rob/fix-vue-components-runtime-props

3fb2d9d

vercel bot deployed to Preview January 16, 2025 15:49 View deployment

run pnpm dedupe

03ab2e3

vercel bot deployed to Preview January 16, 2025 16:24 View deployment

wobsoriano merged commit 4af3538 into main Jan 16, 2025
29 checks passed

wobsoriano deleted the rob/fix-vue-components-runtime-props branch January 16, 2025 16:31

clerk-cookie mentioned this pull request Jan 16, 2025

ci(repo): Version packages #4908

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore(vue,types): Add initial support for SFC files to improve runtime prop checking #4902

chore(vue,types): Add initial support for SFC files to improve runtime prop checking #4902

wobsoriano commented Jan 15, 2025 •

edited

Loading

vercel bot commented Jan 15, 2025 •

edited

Loading

changeset-bot bot commented Jan 15, 2025 •

edited

Loading

wobsoriano Jan 15, 2025 •

edited

Loading

wobsoriano Jan 15, 2025

wobsoriano Jan 15, 2025

wobsoriano Jan 15, 2025 •

edited

Loading

wobsoriano Jan 15, 2025

wobsoriano Jan 15, 2025

LekoArts Jan 16, 2025

wobsoriano Jan 16, 2025

LekoArts Jan 16, 2025

wobsoriano Jan 16, 2025

chore(vue,types): Add initial support for SFC files to improve runtime prop checking #4902

chore(vue,types): Add initial support for SFC files to improve runtime prop checking #4902

Conversation

wobsoriano commented Jan 15, 2025 • edited Loading

Description

Additional context

Checklist

Type of change

vercel bot commented Jan 15, 2025 • edited Loading

changeset-bot bot commented Jan 15, 2025 • edited Loading

🦋 Changeset detected

wobsoriano Jan 15, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

wobsoriano Jan 15, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

wobsoriano commented Jan 15, 2025 •

edited

Loading

vercel bot commented Jan 15, 2025 •

edited

Loading

changeset-bot bot commented Jan 15, 2025 •

edited

Loading

wobsoriano Jan 15, 2025 •

edited

Loading

wobsoriano Jan 15, 2025 •

edited

Loading