vuejs / core

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
https://vuejs.org/
MIT License
46.71k stars 8.19k forks source link

Attribute shorthand not working with Indexed Access Types #8716

Open hungify opened 1 year ago

hungify commented 1 year ago

Vue version

^3.2.47 and ^3.3.4

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-tkdgyx?file=src%2FApp.vue

Steps to reproduce

type ButtonProps = {
  size: 'small' | 'medium';
  disabled: boolean;
  // disabled: boolean | undefined; // Index access types are not working
};

const props = withDefaults(
  defineProps<{
    size: ButtonProps['size'];
    disabled?: ButtonProps['disabled']; // Index access types are not working
    loading?: boolean | undefined; // Same as above but works (don't worry about undefined)
  }>(),
  {
    size: 'medium',
    disabled: undefined,
  }
);

What is expected?

V-bind attribute with true value usually can be written in shorthand form.

<Button disabled size="medium" /> => Button component have to receive disabled = true

I don't know if that's an issue or not fully supported yet. Thanks for watching and replying

What is actually happening?

I tried to inspect with vite-plugin-inspect and see

mport { defineComponent as _defineComponent } from "vue";
const _sfc_main = /* @__PURE__ */ _defineComponent({
  __name: "Button",
  props: {
    size: { type: null, required: true, default: "medium" },
    disabled: { type: null, required: false, default: void 0 },
    loading: { type: [Boolean, null], required: false }
  },
  setup(__props, { expose }) {
    expose();
    const props = __props;
    console.log("### :: file: Button.vue:37 :: props:", props);
    const __returned__ = { props };
    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
    return __returned__;
  }
**});**

It looks like it's been normalized to null by compiler-sfc (I'm not sure )

System Info

No response

Any additional comments?

No response

edison1105 commented 1 year ago

It is functioning properly. see as well as your reproduction.

hungify commented 1 year ago

@edison1105 Maybe I made a mistake somewhere example above. But help me let check other reproduction:

https://stackblitz.com/edit/vitejs-vite-f41ufy?file=src%2FApp.vue,src%2Fcomponents%2FButton.vue&terminal=dev

image

image

A lot of libs like Vanilla-extra, Class Variance Authority, and Panda CSS was the same issue as that