Cannot find name slotVariable when using v-slot in component, in multiple lines

[amoshydra]

• I have searched through existing issues
• I have read through docs
• I have read FAQ

Info

• Platform: Win
• Vetur version: 0.25.0
• VS Code version: 1.47.3 & 1.48.0-insider

Problem

Output > Vue Language Server

No error

Problems

{
	"resource": "retracted:/test-vetur/componentA.vue",
	"owner": "_generated_diagnostic_collection_name_#0",
	"code": "2304",
	"severity": 8,
	"message": "Cannot find name 'slotVariable'.",
	"source": "Vetur",
}

Description

Error with detecting slot's variables with when:

1. v-slot syntax is written directly on the component
2. v-slot syntax is written on the next line

See ComponentA in the screenshot below

Reproducible Case

❌ Code that reproduce the error

ComponentA

<template>
  <Parent
    v-slot="{ slotVariable }"
  >
    {{ slotVariable }}
  </Parent>
</template>

Virtual content

import __vlsComponent from "./ComponentA.vue";
import {
    __vlsRenderHelper,
    __vlsComponentHelper,
    __vlsIterationHelper
} from "vue-editor-bridge";
__vlsRenderHelper(__vlsComponent, function() {
    () => __vlsComponentHelper(this, "parent", {
        props: {},
        on: {},
        directives: []
    }, [slotVariable]);
});

✔ No error

ComponentB

<template>
  <Parent v-slot="{ slotVariable }">
    {{ slotVariable }}
  </Parent>
</template>

Virtual content

import __vlsComponent from "./ComponentA.vue";
import {
    __vlsRenderHelper,
    __vlsComponentHelper,
    __vlsIterationHelper
} from "vue-editor-bridge";
__vlsRenderHelper(__vlsComponent, function() {
    ({
        slotVariable
    }) => __vlsComponentHelper(this, "parent", {
        props: {},
        on: {},
        directives: []
    }, [slotVariable]);
});

ComponentC

<template>
  <Parent>
    <template v-slot="{ slotVariable }">
      {{ slotVariable }}
    <template>
  </Parent>
</template>

[amoshydra]

I found out that this issue only appear when the file is using CRLF.

And the error occurs in here:

vetur/server/src/services/typescriptService/transformTemplate.ts

Lines 588 to 592 in 271dbfc

	const start = params[0].range[0];
	const end = params[params.length - 1].range[1];
	const paramsStr = code.slice(start, end);
	// Wrap parameters with an arrow function to extract them as ts parameter declarations.
	const arrowFnStr = '(' + paramsStr + ') => {}';

Using example for ComponentA

CRLF

{
  start: 36,
  end: 52,
  code: "<template>\r\n  <Parent\r\n    v-slot=\"{ slotVariable }\"\r\n  >\r\n    {{ slotVariable }}\r\n  </Parent>\r\n            \n</template>",
  paramsStr: " slotVariable }\""
}

LF

{
  start: 33,
  end: 49,
  code: "<template>\n  <Parent\n    v-slot=\"{ slotVariable }\"\n  >\n    {{ slotVariable }}\n  </Parent>\n           \n</template>",
  paramsStr: "{ slotVariable }"
}

[amoshydra]

I think this should be related to vue-eslint-parser

• Template Interpolation Issue - First letter not recognized in event variable assignment #1319 (comment)
  • Fixed wrong location calculation when including CRLF. vue-eslint-parser#74

I guess we will need to wait for vuejs/vue-eslint-parser#74

[yoyo930021]

Fixed in 062d747.
But it is not released.