Type issues with Transition and latest Vue 2.x

[rchl]

With latest Vue 2 version (currently 2.7.16) this code creates a type issue:

<template>
  <transition>
    <span v-show="true">Foo</span>
  </transition>
</template>

Object literal may only specify known properties, and 'persisted' does not exist in type 'Readonly<Partial<{}> & Omit<Readonly, undefined>>'. ​ts(2353)

The issue appears to be due to @vue/compiler-dom adding a persisted prop to the transition node when parsing such construct and Volar adding it to the generated template code which, combined with the latest version of Vue 2 which includes proper types for the Transition component, causes this issue. Previously the type of Transition component was something less strict or unknown so there was no issue.

(there is also an issue with using a key attribute but that is maybe an issue with Vue types)

[rchl]

The persisted Transition prop is only supported in Vue 3 so in theory it shouldn't be added when parsing Vue 2 code but there seems to be no way for the vue dom compiler to know that. It can take compatConfig option but Volar doesn't pass it on purpose (#576) so we can't use it. I guess Volar would have to filter it out when running in Vue 2.x mode.

[rchl]

I've also noticed that this issue doesn't reproduce in the vscode extension but it reproduces in vue-tsc and LSP-volar (ST package).

That's because @vue/compiler-dom is adding this persisted prop conditionally, depending on the value of the NODE_ENV environment variable. It doesn't include transformTransition (which is responsible for this behavior) in production (__DEV__ maps to process.env.NODE_ENV in compiled bundle) and that makes the extension not have this issue because it bundles this code with NODE_ENV set to production.

So while I think that my fix still makes sense, maybe there should also be an issue for bundling the code of vue-tsc with NODE_ENV=production set and other editor packages would also have to bundle the code or set NODE_ENV appropriately.