defineProps compiler macro can't handle imported types

[NozomuIkuta]

The official docs says that:

In dev mode, the compiler will try to infer corresponding runtime validation from the types. For example here foo: String is inferred from the foo: string type. If the type is a reference to an imported type, the inferred result will be foo: null (equal to any type) since the compiler does not have information of external files.

sefirot/lib/components/STableCellPill.vue

Lines 3 to 10 in 6e2a64d

	import type { TableCellPillColor } from '../composables/Table'
	const props = defineProps<{
	value?: any
	record: any
	getter?: string | ((value: any) => string)
	color?: TableCellPillColor | ((value: any) => TableCellPillColor)
	}>()

color?: TableCellPillColor | ((value: any) => TableCellPillColor) 

// will be converted to prop type validation logic like below

[null, function()]

I tried to use a function like color: () => 'success', but then browser throws an error of "Maximum call stack size exceeded", if there are lots of table cells that call the function synchronously.

---

I discussed with @kiaking how we should handle this issue until Vue 3 supports props of imported types, and here is our conclusion.

• Define types (e.g. TableCellPillColor in this time) in 2 places

  • One is where the type is supposed to be defined (e.g. composables/Table in this time)

  • The other is where the type is actually used for defineProps compiler macro

    type TableCellPillColor = 'info' | 'success' | 'warning' | 'danger' | 'mute'
    
    const props = defineProps<{
      color?: TableCellPillColor | ((value: any) => TableCellPillColor)
    }>()

• We don't duplicate all the possible types in 2 places at once: rather, we do it for each type as we found such kind of error messages

• Once defineProps macro supports props of imported types, we delete the duplicated type definition

• Until then, we will make it sure by careful PR review that type definition is defined/managed in 2 places

---

If you have any other good ideas, please let us know. 🙋‍♂️

[kiaking]

I'll take this one.