babel-plugin-jsx icon indicating copy to clipboard operation
babel-plugin-jsx copied to clipboard

[BUG] Typescript typings

Open Indeedornot opened this issue 2 years ago • 2 comments

🐛 Bug description

I'll use this issue to report multiple issues I have found while working with the plugin

  • Lack of typing for vModel
      {/* vModel property is not known - but works */}
      <LogMessages
        vModel={toLog.value}
        // v-model={toLog.value} - works, untyped due to it being looked up on intrinsic attributes and it having a fallthrough case
      />

      {/* Works and is typed */}
      <LogMessages
        onUpdate:modelValue={(e) => (toLog.value = e)}
        modelValue={toLog.value}
      />
  • resolveTypes does not generate typed emits
      {/* Event type is not resolved */}
      <LogInput onLog={(msg) => log(msg)} />

const LogInput = defineComponent(
  (_,
    { emit }: SetupContext<{ log: (msg: string) => void }>// : { emit: { log: (msg: string) => void } } - no difference in typing
  ) => {
    const input = ref('')
    const log = (msg: string) => emit('log', msg);
    return () => (
      <div>
        <input
          vModel={input.value}
          onKeydown={(e) => {
            if (e.key !== 'Enter') return;
            log(input.value);
            input.value = '';
          }}
        />
      </div>
    );
  }
  // #Works with such declaration:
  // {
  //   emits: {
  //     log: (msg: string) => true
  //   }
  // }
  // #Does not work with runtime and resolveTypes
)

used jsx-explorer to check code

  • 'class', 'style' and other passthrough attributes are throwing error even with 'inheritAttrs': true
      <LogMessages
        //class is not found throwing an error
        class=""
      />

    inheritAttrs: true

📝 Steps to reproduce

Create a new tsx repository using create-vue

Reproduction Link: Reproduction

🏞 Desired result

  • Typed vModel based on checking 'onUpdate:modelValue' and 'modelValue' props (and other names)
  • Proper resolving emits type
  • Proper inheritAttrs typing or allowing passthrough of attributes like onClick, class, style and similiar

🚑 Other information

Indeedornot avatar Mar 03 '24 20:03 Indeedornot

After diving deeper into this issue it appears to be a connection of problems between two repositories Language Tools And this one There would be need to add a resolver for defineComponent for types including the resolveTypes and vModel

Should this issue be moved to Language Tools repository?

Indeedornot avatar Mar 07 '24 16:03 Indeedornot