Skip to content

fallthroughAttributes improvements: requiredness and hiding #5882

@jods4

Description

@jods4

What problem does this feature solve?

<!-- @fallthroughAttributes true --> is a great tool on components meant to wrap and extend other components.

In practice, there are a few details that could be more accurate.
Let's call O the outside wrapper and I the inner component.

  1. All fallthrough attributes are optional props on O, so unlike regular DX there's no indication when you use <O> and do not set a required props.
    Ideally this should take into account any prop directly set by O on I, which means it's now optional on O itself (or should it not be a prop at all? I'm not sure whether $attrs fallback or explicitly defined props take precedence).

  2. In a component compiled with fallthroughAttributes, esp. when consider the previous point where missing mandatory props are required on wrapper component, vue-tsc should not display an error because of missing required properties on I (because those props will fallthrough from O usage). I currently use <!-- @vue-ignore --> to mute it but this is a heavy hammer: any other legit vue error is also ignored.

  3. The type generation should omit props from O that hide existing props from I, as at runtime they will not fallthrough. It creates TS error when the types are not compatible: for example I has a: number, O has a: string, then when using <O a="test"> TS complains that "test" is not an assignable to number.

In my opinion number (3) is the most annoying issue because it creates a lot of errors in the codebase that can't be avoided.

(1) is not actually creating TS error (although DX will not warn about potential runtime errors), and (2) can be ignored with a single comment in the wrapper template.

What does the proposed solution look like?

No visible change in api or options.
All changes impact the props type generation, as described above.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions