Merge pull request #2698 from PrefectHQ/dependabot/npm_and_yarn/vue-t…

…sc-2.1.4

Bump vue-tsc from 2.0.29 to 2.1.4

package.json

@@ -72,7 +72,7 @@
         "vite": "5.4.2",
         "vite-svg-loader": "^5.1.0",
         "vitest": "^2.0.5",
-        "vue-tsc": "^2.0.29"
+        "vue-tsc": "^2.1.4"
     },
     "peerDependencies": {
         "@prefecthq/prefect-design": "^2.11.5",

src/schemas/components/SchemaFormPropertyUnknown.vue

@@ -1,5 +1,5 @@
 <template>
-  <component :is="input?.component" v-bind="input?.props" class="schema-form-property-string" />
+  <component :is="input.component" v-bind="input.props" class="schema-form-property-string" />
 </template>
 
 <script lang="ts" setup>
@@ -59,6 +59,6 @@
       })
     }
 
-    return { component: null, props: {} }
+    return withProps(() => ({ template: '' }))
   })
 </script>

src/schemas/compositions/useSchemaPropertyInput.ts

@@ -66,7 +66,7 @@ export function useSchemaPropertyInput(schemaProperty: MaybeRefOrGetter<SchemaPr
     const exhaustive: never = propertyValue.value
     console.error(new Error(`SchemaFormProperty input is not exhaustive: ${JSON.stringify(exhaustive)}`))
 
-    return { component: null, props: {} }
+    return withProps(() => ({ template: '' }))
   })
 
   return { input }

src/services/schemas/properties/SchemaPropertyService.ts

@@ -1,12 +1,12 @@
 import { SelectOption } from '@prefecthq/prefect-design'
+import { Component } from 'vue'
 import { JsonInput } from '@/components'
 import { InvalidSchemaValueError } from '@/models/InvalidSchemaValueError'
 import { getSchemaPropertyAttrs, getSchemaPropertyComponentWithDefaultProps, getSchemaPropertyDefaultValidators, schemaPropertyComponentWithProps, SchemaPropertyComponentWithProps } from '@/services/schemas/utilities'
 import { schemaHas, SchemaProperty, SchemaPropertyInputAttrs, SchemaPropertyMeta, SchemaValue } from '@/types/schemas'
 import { Require } from '@/types/utilities'
 import { sameValue } from '@/utilities'
 import { isNumberArray, isStringArray } from '@/utilities/arrays'
-import { ComponentDefinition } from '@/utilities/components'
 import { fieldRules, isJson, ValidationMethod, ValidationMethodFactory } from '@/utilities/validation'
 
 export type SchemaPropertyServiceSource = {
@@ -131,7 +131,7 @@ export abstract class SchemaPropertyService {
     }
   }
 
-  protected componentIs(component: ComponentDefinition): boolean {
+  protected componentIs(component: Component): boolean {
     return this.component?.component === component
   }
 

src/utilities/components.ts

@@ -1,34 +1,40 @@
-export type Component = { $props: unknown }
-export type ComponentDefinition = { new(...args: unknown[]): Component }
+import { AsyncComponentLoader, Component, FunctionalComponent } from 'vue'
 
-// https://stackoverflow.com/questions/73732549/narrow-number-argument-of-function-to-be-literal-type?noredirect=1#comment130199140_73732549
-// eslint-disable-next-line @typescript-eslint/ban-types
-type NoInfer<T> = T & {}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type Constructor = new (...args: any) => any
 
-type WithPropsArgs<T extends ComponentDefinition, E extends string = '', P = InstanceType<T>['$props']> = Omit<Partial<P>, E> extends Omit<P, E>
+export type ComponentProps<TComponent extends Component> = TComponent extends Constructor
+  ? InstanceType<TComponent>['$props']
+  : TComponent extends AsyncComponentLoader<infer T extends Component>
+    ? ComponentProps<T>
+    : TComponent extends FunctionalComponent<infer T>
+      ? T
+      : never
+
+type WithPropsArgs<T extends Component, E extends string = '', P = ComponentProps<T>> = Omit<Partial<P>, E> extends Omit<P, E>
   ? [ component: T, props?: Omit<P, E> & Record<string, unknown> ]
   : [ component: T, props: Omit<P, E> & Record<string, unknown> ]
 
-type WithProps<T extends ComponentDefinition, E extends string = '', P = InstanceType<T>['$props']> = Omit<Partial<P>, E> extends Omit<P, E>
+type WithProps<T extends Component, E extends string = '', P = ComponentProps<T>> = Omit<Partial<P>, E> extends Omit<P, E>
   ? { component: T, props?: Omit<P, E> & Record<string, unknown> }
   : { component: T, props: Omit<P, E> & Record<string, unknown> }
 
-export function withProps<T extends ComponentDefinition>(...[component, props]: WithPropsArgs<T>): WithProps<NoInfer<T>> {
+export function withProps<T extends Component>(...[component, props]: WithPropsArgs<T>): WithProps<T> {
   return {
     component,
     props,
-  }
+  } as WithProps<T>
 }
 
-export function withPropsWithoutExcluded<T extends ComponentDefinition, E extends string>(excluded: E | E[], ...[component, props]: WithPropsArgs<T, E>): WithProps<NoInfer<T>, E> {
+export function withPropsWithoutExcluded<T extends Component, E extends string>(excluded: E | E[], ...[component, props]: WithPropsArgs<T, E>): WithProps<T, E> {
   return {
     component,
     props,
-  }
+  } as WithProps<T, E>
 }
 
 export function withPropsWithoutExcludedFactory<E extends string>(prop: E | E[]) {
-  return function<T extends ComponentDefinition>(...args: WithPropsArgs<T, E>): WithProps<T, E> {
+  return function<T extends Component>(...args: WithPropsArgs<T, E>): WithProps<T, E> {
     return withPropsWithoutExcluded(prop, ...args)
   }
 }