New Design for Vue 3 JSX about babel-plugin-jsx

[tangjinzhou]

ref vuejs/jsx-vue2#141

[wonderful-panda]

About '.sync' modifier

In vue-next, we should use v-model instead of .sync modifier.

<MyComp v-model={[value, "foo"]} />

But I think this is not suitable for TSX in some points.

1. TypeScript can't check type of value is assignable to foo or not.

2. When foo is defined as required, TS2322 (Property 'foo' is missing in ...) will occur

I guess it is not impossible to solve them by changing type definitions, but it will makes type definitions too complex.

Simple solution is giving up v-model.

<MyComp foo={value} on={{ "update:foo": v => value = v }} />

Is there any other (more smart) solutions ?

[Amour1688]

<MyComp foo={value} on={{ "update:foo": v => value = v }} />

Will you change type definitions when giving up v-model like above.

interface Props {
  foo?: string;
  on?: {
    'update:foo': (val: string) => void;
  }
}

Or

interface Props {
  vModel?: [string, 'foo']
}

But I think it will be a misunderstand because vModel is not a prop