✨ Props sharing patterns and recommended method

[jd-solanki]

Hi 👋🏻

I have be discovery and experimenting with props sharing patterns I can use in my UI lib. Hence, I wanted to discuss and identify the best pattern for the job. Here's two pattern I'm aware of:

Object Pattern

I create a props object in props.ts along with my component SFC that export the props object:

import { PropType } from 'vue'

export const fooProps = {
  color: {
    type: string as PropType<'primary' | 'secondary'>,
    default: 'primary'
  }
}

export type FooProps = ExtractPropTypes<typeof fooProps>

Then, I import the props object in my component SFC and use it in the props option:

<script lang="ts" setup>
import { fooProps } from './props'

const props = defineProps(fooProps)
</script>

I reuse them in another component by importing the props object:

import { fooProps } from '../foo/props'

export const barProps = {
  ...fooProps,
  isActive: Boolean
}

export type BarProps = ExtractPropTypes<typeof barProps>

Pros

• I can write prop definition & defaults in single object

Cons

• If prop type is complex then I have to use PropType helper
• We can't generate correct type of props object using ExtractPropTypes helper because it's for child component according to Evan.

Interface & Defaults Object Pattern

In this pattern, I create an interface for props and a separate object for defaults:

export interface FooProps {
  color?: 'primary' | 'secondary'
}

export const fooDefaults = {
  color: 'primary'
}

Then, I import the props interface in my component SFC and use it in the props option:

<script lang="ts" setup>
import { FooProps, fooDefaults } from './props'

const props = withDefaults(defineProps<FooProps>(), fooDefaults)
</script>

I reuse them in another component by importing the props interface:

import { FooProps } from '../foo/props'

export interface BarProps extends FooProps {
  isActive: boolean
}

export const barDefaults = {
  ...fooDefaults,
}

Pros

• I can use TS interface for prop type

Cons

• I have to write prop definition & defaults separately and have to remember inject defaults in withDefaults helper or while merging props in another component
  • I can easily make errors like I mark color prop as required in interface and also had the default value in defaults object
• While writing defaults I don't have any kind of type safety. (InferDefaults isn't exported)

Questions

• Do we need to use as const for props' defaults object to get correct type of props object in SFC (considering volar)?

Conclusion 🤔

I'm not sure which pattern is better. I'm leaning towards the second pattern because I can use TS interface for prop type. But, I'm not sure if I'm missing something. I would love to hear core team's thoughts on this.

[seahindeniz]

Reusing props is such a DX issue at the moment.
There was also another alternative way that you could just simply create an interface and then extend another components props.

type SomeAnotherComponentsProps = InstanceType<typeof SomeAnotherComponent>['$props'];

interface Props extends SomeAnotherComponentsProps {
  // new props..
}

According to Evan's comment, this is an antipattern in Vue 3.3, which doesn't makes sense when you reuse props instead of having repetitive declarations