Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(vue): add correct InputProp types #263

Merged
merged 1 commit into from
Jun 17, 2022
Merged

Conversation

liamdebeasi
Copy link
Contributor

@liamdebeasi liamdebeasi commented Jun 17, 2022

Pull request checklist

Please check if your PR fulfills the following requirements:

  • Tests for the changes have been added (for bug fixes / features)
  • Docs have been reviewed and added / updated if needed (for bug fixes / features)
  • Build (npm run build) was run locally for affected output targets
  • Tests (npm test) were run locally and passed

Pull request type

Please check the type of change your PR introduces:

  • Bugfix
  • Feature
  • Code style update (formatting, renaming)
  • Refactoring (no functional changes, no api changes)
  • Build related changes
  • Documentation content changes
  • Other (please describe):

What is the current behavior?

Issue URL: See ionic-team/ionic-framework#25485

In Vue 3.0.0, prop types defaulted to any. In Vue 3.0.1 they defaulted to {}. vuejs/core@6aa2256

Ionic recently updated dev deps to build with Vue 3.2.x (previously, we were using Vue 3.0.0).

This uncovered an issue where all component props had incorrect types:

export declare const IonLabel: import("vue").DefineComponent<JSX.IonLabel & import("./vue-component-lib/utils").InputProps, object, {}, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{} & {
    toString?: string;
    valueOf?: unknown;
    toLocaleString?: string;
    color?: import("@ionic/core").Color;
    position?: "fixed" | "stacked" | "floating";
    mode?: "ios" | "md";
    constructor?: Function;
    modelValue?: string | boolean;
    hasOwnProperty?: (v: PropertyKey) => boolean;
    isPrototypeOf?: (v: Object) => boolean;
    propertyIsEnumerable?: (v: PropertyKey) => boolean;
}>, {}>;

Note that toString, valueOf, and toLocaleString types should be functions that return strings. This was caused by InputProps extending Object. We never caught it because test apps were being built with Vue 3.0.0 which essentially turned off type checking with its usage of any.

Additionally, our test apps were using Vue CLI + Webpack, and this issue seems to only impact Vite.

What is the new behavior?

  • Do not extend from Object

Does this introduce a breaking change?

  • Yes
  • No

Other information

@liamdebeasi liamdebeasi requested a review from a team June 17, 2022 15:15
@liamdebeasi liamdebeasi requested a review from a team as a code owner June 17, 2022 15:15
@liamdebeasi liamdebeasi requested review from sean-perkins and removed request for a team June 17, 2022 15:22
@liamdebeasi liamdebeasi merged commit 3ca07df into main Jun 17, 2022
@liamdebeasi liamdebeasi deleted the vue-extends-object branch June 17, 2022 15:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants