Subscribe on changes!

Attribute shorthand not working with Indexed Access Types

avatar
Jul 4th 2023

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

avatar
Jul 6th 2023

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

avatar
Jul 8th 2023

@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