fix(language-core): ObjectDirective does not work with defineSlots

close #4327
vuejs · Apr 30, 2024 · c24c6a7 · c24c6a7
1 parent d523035
commit c24c6a7
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 44 deletions.
diff --git a/packages/language-core/lib/codegen/template/elementChildren.ts b/packages/language-core/lib/codegen/template/elementChildren.ts
@@ -22,7 +22,8 @@ export function* generateElementChildren(
 
  // fix https://github.com/vuejs/language-tools/issues/932
  if (
- !ctx.hasSlotElements.has(node)
+ componentCtxVar
+ && !ctx.hasSlotElements.has(node)
  && node.children.length
  && node.tagType !== CompilerDOM.ElementTypes.ELEMENT
  && node.tagType !== CompilerDOM.ElementTypes.TEMPLATE

diff --git a/packages/language-core/lib/codegen/template/slotOutlet.ts b/packages/language-core/lib/codegen/template/slotOutlet.ts
@@ -58,55 +58,54 @@ export function* generateSlotOutlet(
  `}`,
  );
  yield `)${endOfLine}`;
- return;
  }
  else {
  yield `var ${varSlot} = {${newLine}`;
  yield* generateElementProps(options, ctx, node, node.props.filter(prop => prop !== nameProp), true);
  yield `}${endOfLine}`;
- }
 
- if (
- nameProp?.type === CompilerDOM.NodeTypes.ATTRIBUTE
- && nameProp.value
- ) {
- ctx.slots.push({
- name: nameProp.value.content,
- loc: nameProp.loc.start.offset + nameProp.loc.source.indexOf(nameProp.value.content, nameProp.name.length),
- tagRange: [startTagOffset, startTagOffset + node.tag.length],
- varName: varSlot,
- nodeLoc: node.loc,
- });
- }
- else if (
- nameProp?.type === CompilerDOM.NodeTypes.DIRECTIVE
- && nameProp.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION
- ) {
- const slotExpVar = ctx.getInternalVariable();
- yield `var ${slotExpVar} = `;
- yield* generateInterpolation(
- options,
- ctx,
- nameProp.exp.content,
- nameProp.exp,
- nameProp.exp.loc.start.offset,
- ctx.codeFeatures.all,
- '(',
- ')',
- );
- yield ` as const${endOfLine}`;
- ctx.dynamicSlots.push({
- expVar: slotExpVar,
- varName: varSlot,
- });
- }
- else {
- ctx.slots.push({
- name: 'default',
- tagRange: [startTagOffset, startTagOffset + node.tag.length],
- varName: varSlot,
- nodeLoc: node.loc,
- });
+ if (
+ nameProp?.type === CompilerDOM.NodeTypes.ATTRIBUTE
+ && nameProp.value
+ ) {
+ ctx.slots.push({
+ name: nameProp.value.content,
+ loc: nameProp.loc.start.offset + nameProp.loc.source.indexOf(nameProp.value.content, nameProp.name.length),
+ tagRange: [startTagOffset, startTagOffset + node.tag.length],
+ varName: varSlot,
+ nodeLoc: node.loc,
+ });
+ }
+ else if (
+ nameProp?.type === CompilerDOM.NodeTypes.DIRECTIVE
+ && nameProp.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION
+ ) {
+ const slotExpVar = ctx.getInternalVariable();
+ yield `var ${slotExpVar} = `;
+ yield* generateInterpolation(
+ options,
+ ctx,
+ nameProp.exp.content,
+ nameProp.exp,
+ nameProp.exp.loc.start.offset,
+ ctx.codeFeatures.all,
+ '(',
+ ')',
+ );
+ yield ` as const${endOfLine}`;
+ ctx.dynamicSlots.push({
+ expVar: slotExpVar,
+ varName: varSlot,
+ });
+ }
+ else {
+ ctx.slots.push({
+ name: 'default',
+ tagRange: [startTagOffset, startTagOffset + node.tag.length],
+ varName: varSlot,
+ nodeLoc: node.loc,
+ });
+ }
  }
  yield* ctx.generateAutoImportCompletion();
  yield* generateElementChildren(options, ctx, node, currentComponent, componentCtxVar);

diff --git a/test-workspace/tsc/vue2/tsconfig.json b/test-workspace/tsc/vue2/tsconfig.json
@@ -17,6 +17,7 @@
  "../vue3/#3615",
  "../vue3/#3656",
  "../vue3/#3672",
+ "../vue3/#4327",
  "../vue3/components",
  "../vue3/defineEmits",
  "../vue3/defineModel",

diff --git a/test-workspace/tsc/vue3/#4327/main.vue b/test-workspace/tsc/vue3/#4327/main.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { ObjectDirective } from 'vue';
+
+const vTest: ObjectDirective<HTMLElement, any | undefined> = {
+ mounted() { },
+};
+
+defineSlots<{
+ default(): any;
+}>();
+</script>
+
+<template>
+ <slot>
+ <p v-test="{}">Default slot content</p>
+ </slot>
+</template>