Uh oh!
There was an error while loading. Please reload this page.
chore(vue,types): Add initial support for SFC files to improve runtime prop checking - #4902
Conversation
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
🦋 Changeset detectedLatest commit: 03ab2e3 The changes in this PR will be included in the next version bump. This PR includes changesets to release 22 packages
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 |
9260c12 to
fa6e4a4Compare| dts: false, | ||
| esbuildPlugins: [ | ||
| // Adds .vue files support | ||
| vuePlugin() as EsbuildPlugin, |
There was a problem hiding this comment.
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
| "unplugin-vue": "^5.2.1", | ||
| "vue": "3.5.12", | ||
| "vue-tsc": "^2.0.24" |
There was a problem hiding this comment.
unplugin-vue - esbuild plugin to tranform .vue files to JSvue-tsc - dts emit with .vue file support
| AfterSignOutUrl; | ||
| interface TransferableOption { | ||
| export interface TransferableOption { |
There was a problem hiding this comment.
I'm getting a transitive type dependency error because the SignInProps is exported but not the TransferableOption interface that it depends on
| globals: true, | ||
| environment: 'jsdom', | ||
| }, | ||
| plugins: [vue()], |
There was a problem hiding this comment.
Required when testing .vue SFC files
There was a problem hiding this comment.
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
There was a problem hiding this comment.
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
| "scripts": { | ||
| "build": "tsup", | ||
| "build": "tsup --onSuccess \"pnpm build:dts\"", | ||
| "build:dts": "vue-tsc --declaration --emitDeclarationOnly && rm -rf dist/components/__tests__", |
There was a problem hiding this comment.
Can you tell vue-tsc to ignore the test files so that we don't have to run rm -rf?
| <script setup lang="ts"> | ||
| import { Portal } from '../uiComponents'; | ||
| import { useClerk } from '../../composables'; | ||
| import { SignInProps } from '@clerk/types'; |
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:
The 3rd one above will only work as we're forcefully setting the value. The first 2 ones are expected to output
trueas 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 testruns as expected.pnpm buildruns as expected.Type of change