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

Wrong props parser with generics #9871

Closed
tragid opened this issue Dec 19, 2023 · 3 comments
Closed

Wrong props parser with generics #9871

tragid opened this issue Dec 19, 2023 · 3 comments
Labels

Comments

@tragid
Copy link

tragid commented Dec 19, 2023

Vue version

3.3.13

Link to minimal reproduction

https://github.com/tragid/vue-generics-error

Steps to reproduce

  1. Create some base props type with generic. And 2 prop types extending that type with proper generic
export interface IBaseFormInput<T> {
  label?: string;
  required?: boolean;
  readonly?: boolean;
  disabled?: boolean;
  description?: string;
  value?: T;
}

export interface IFormTextInput
  extends IBaseFormInput<string>,
    IBaseFormInputWithPlaceholder,
    IBaseFormInputWithAutocomplete {
}

export interface IFormCheckboxInput
  extends IBaseFormInput<boolean>,
    IBaseFormInputWithAutocomplete {
  confirm?: {
    header?: string;
    message?: string;
    accept: string;
    reject?: string;
  };
}
  1. Create 2 components, whose props extend IFormTextInput (first component) and IFormCheckboxInput (second component)

  2. Render that components in app with provided generic prop (value in example)

What is expected?

Components are rendered without errors

What is actually happening?

Components are rendered with errors.
Sometimes first component (textInput) renders wrong default value (passed empty string - but renders true). Console says it has boolean true as input prop.

Sometimes first component renders correctly, but second component (checkbox) renders with warnings, saying Boolean is passed as prop, but String is expected (but generic is boolean)

Screenshot 2023-12-19 at 18 05 32 Screenshot 2023-12-19 at 18 04 49 Screenshot 2023-12-19 at 18 04 24 Screenshot 2023-12-19 at 18 04 09

System Info

System:
    OS: macOS 14.1.2
    CPU: (8) x64 Intel(R) Core(TM) i7-8557U CPU @ 1.70GHz
    Memory: 168.85 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.9.0 - ~/.nvm/versions/node/v20.9.0/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.1.0 - ~/.nvm/versions/node/v20.9.0/bin/npm
  Browsers:
    Chrome: 120.0.6099.109
    Safari: 17.1.2
    Safari Technology Preview: 17.4
  npmPackages:
    vue: ^3.3.13 => 3.3.13

Any additional comments?

Version 3.3.9 works as expected

@edison1105 edison1105 added 🐞 bug Something isn't working scope: script-setup labels Dec 20, 2023
@edison1105
Copy link
Member

edison1105 commented Dec 20, 2023

a workaround.
I made a mistake, it seems there is no workaround.

relate PR https://github.com/vuejs/core/pull/8511/files

Here the generic parameters are overridden, causing parsing to fail

if (typeParameters) {
scope = createChildScope(scope)
Object.assign(scope.types, typeParameters)
}
;(e as MaybeWithScope)._ownerScope = scope

@edison1105 edison1105 added has workaround A workaround has been found to avoid the problem regression and removed has workaround A workaround has been found to avoid the problem labels Dec 20, 2023
yyx990803 added a commit that referenced this issue Dec 22, 2023
@edison1105 edison1105 reopened this Dec 25, 2023
@edison1105
Copy link
Member

Never mind! The problem should have been fixed by 03aa0d4.

But it's weird, the problem still happens on the local playground.

@yyx990803
Copy link
Member

@edison1105 it requires a change in @vue/repl to enable AST reuse: vuejs/repl@5e4c710

@github-actions github-actions bot locked and limited conversation to collaborators Jan 9, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants