vuejs / language-tools

⚡ High-performance Vue language tooling based-on Volar.js
https://marketplace.visualstudio.com/items?itemName=Vue.volar
MIT License
5.55k stars 373 forks source link

slot name type will lose in a specific dom structure. #4443

Open Kanade-Lu opened 3 weeks ago

Kanade-Lu commented 3 weeks ago

Vue - Official version

2.0.19

Link to minimal reproduction

https://play.vuejs.org/#eNqtVl9P2zAQ/yq3TBog0fZhe8pKp63ioXvYEER7ITyE5FJCHTuynRaE+O4723GShhSBtr60vjvf/fy7f30KvlfVdFtjEAbzD5MJRKi0OcNksoj5XGNZsUQj/Qb6zLNi2/ykw1KUlT8AhDq5ZThJBatLTl88L9ZncWClSytcWlkc+DsLaG/b2OpO1CwDLjSglEJCwjPAB408U3D7CCsDzgHzQVuA8FGT8ooJ3dfOBvjbUL17LFHa4VOLRGW9O/1Q85l5radh5nkYRLAilcqi0qBQ1xWwhFsWVBxYi6KshNRgnEEuRQlHU+vZcH5kDbhGmScp0nOH1M0jOCNSHhfw5IBUUlQhbPBR5BDBJ1BaFnztdIIvWZFuvoVwLMUuhOgUXG5IQj7ohIz9SViNXlDwDB/owOvyFuUJnC2g5hsudtx4fB6iM8locAiZoVxlYQPgq5P6jAzEEjPEcsVzEfr7znZgZwMCrIXI1OuWJCw0w/H7qdgStjJZk77zUldMJFkjHrtWySJtVe37qazp1S9qOhxLlmVocX1DObu+ccXiSsMWQnBKReG6ZHqvBKcGtODiIKVyKBjK35UuKFwctI+Pg4QxsftpZVrWeOrl6R2mmxH5vXowsji4kKhQbjEOWp1O5Bq1U59f/aJG6ylLkdWMrF9RXqKi5xqMzuxHzTOC3bOzaFe24onESJ2bXlb+UQaoJdbaxwF1gOmEQ0/v4H6efmkS8kws+u4xE+xQ68EaOVJC6RjtNyIV/l4vNuemHWP+jnY83Iz/txXp3TGp84LjBYVUcxv9bTUZUT2Sh8XxCQ33rhxfTnqqVk/NdpILScwVZELAXkZqGO2N14+pkBLT4bC2k1fRRICQJyU2PqeGOMrRrBm47/DVTXHiI6mZ9gvnUuz2UJmxfDju6MZ4NxjaCcRVkXv3TdYJR7cvGntnikz1F9PbMRpv4/Dc3jywInvgyKWnjNCNbcneLYOzM/8nUrt12lSX+ZPRqamdew047GhCerBie/9MHCgHwDO/ByF4/gvLZtH3

Steps to reproduce

    <anyComp v-for="item in tableColumnConfig">
        <!-- #correct -->
        <!-- <slot :name="item.prop" /> -->

        <!-- #correct -->
        <!-- <template #default="tableRow">
          <slot :name="item.prop" />
        </template> -->

        <!-- #correct -->
        <!-- <div v-if="item.onClick"></div>
        <div v-else>
          <slot :name="item.prop" />
        </div> -->

        <!-- #error, lose type -->
        <template v-if="item" #default></template>
        <template v-else #default>
          <slot :name="item.prop" />
        </template>
      </anyComp>
<template>
  <Comp :table-column-config="tableColumnConfig">
    <!-- should not error and extends by ITest -->
    <template #testSlot>
    </template>
  </Comp>
</template>

<script setup lang="ts">
import Comp from './Comp.vue'
interface ITableColumnConfig<T = any> {
  prop: keyof T & string
  onClick?: (row: T, column?: any, cellValue?: any, index?: number) => unknown
}
interface ITest {
  orderId: string;
  testSlot: string;
  redeemInfo: {
    test: string;
  }
  goods: {
    test: string;
    title: string;
  }
  coverImage: {
    uploadImage: string;
  }
  price: string
}
const tableColumnConfig: ITableColumnConfig<ITest>[] = []
</script>

I think the key error point is "slot in template v-if v-else with #default"

KermanX commented 1 week ago

I think this can be solved by https://github.com/vuejs/core/pull/11150.

Currently, the Vue compiler removes the <slot v-else ... element in Comp.vue, so that Volar can't analyze it.

Kanade-Lu commented 1 week ago

vuejs/core#11150

Really appreciate for your response! Next time, I will first check the compilation result to identify the issue