You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
224 lines
6.5 KiB
224 lines
6.5 KiB
1 month ago
|
/**
|
||
|
* @author Yosuke Ota
|
||
|
* See LICENSE file in root directory for full license.
|
||
|
*/
|
||
|
'use strict'
|
||
|
|
||
|
const utils = require('../../../utils')
|
||
|
/**
|
||
|
* @typedef {object} SlotVForVariables
|
||
|
* @property {VForExpression} expr
|
||
|
* @property {VVariable[]} variables
|
||
|
*/
|
||
|
/**
|
||
|
* @typedef {object} SlotContext
|
||
|
* @property {VElement} element
|
||
|
* @property {VAttribute | VDirective | null} slot
|
||
|
* @property {VDirective | null} vFor
|
||
|
* @property {SlotVForVariables | null} slotVForVars
|
||
|
* @property {string} normalizedName
|
||
|
*/
|
||
|
/**
|
||
|
* Checks whether the given element can use v-slot.
|
||
|
* @param {VElement} element
|
||
|
* @param {SourceCode} sourceCode
|
||
|
* @param {ParserServices.TokenStore} tokenStore
|
||
|
*/
|
||
|
module.exports = function canConvertToVSlot(element, sourceCode, tokenStore) {
|
||
|
const ownerElement = element.parent
|
||
|
if (
|
||
|
ownerElement.type === 'VDocumentFragment' ||
|
||
|
!utils.isCustomComponent(ownerElement) ||
|
||
|
ownerElement.name === 'component'
|
||
|
) {
|
||
|
return false
|
||
|
}
|
||
|
const slot = getSlotContext(element, sourceCode)
|
||
|
if (slot.vFor && !slot.slotVForVars) {
|
||
|
// E.g., <template v-for="x of xs" #one></template>
|
||
|
return false
|
||
|
}
|
||
|
if (hasSameSlotDirective(ownerElement, slot, sourceCode, tokenStore)) {
|
||
|
return false
|
||
|
}
|
||
|
return true
|
||
|
}
|
||
|
/**
|
||
|
* @param {VElement} element
|
||
|
* @param {SourceCode} sourceCode
|
||
|
* @returns {SlotContext}
|
||
|
*/
|
||
|
function getSlotContext(element, sourceCode) {
|
||
|
const slot =
|
||
|
utils.getAttribute(element, 'slot') ||
|
||
|
utils.getDirective(element, 'bind', 'slot')
|
||
|
const vFor = utils.getDirective(element, 'for')
|
||
|
const slotVForVars = getSlotVForVariableIfUsingIterationVars(slot, vFor)
|
||
|
|
||
|
return {
|
||
|
element,
|
||
|
slot,
|
||
|
vFor,
|
||
|
slotVForVars,
|
||
|
normalizedName: getNormalizedName(slot, sourceCode)
|
||
|
}
|
||
|
}
|
||
|
|
||
|
/**
|
||
|
* Gets the `v-for` directive and variable that provide the variables used by the given `slot` attribute.
|
||
|
* @param {VAttribute | VDirective | null} slot The current `slot` attribute node.
|
||
|
* @param {VDirective | null} [vFor] The current `v-for` directive node.
|
||
|
* @returns { SlotVForVariables | null } The SlotVForVariables.
|
||
|
*/
|
||
|
function getSlotVForVariableIfUsingIterationVars(slot, vFor) {
|
||
|
if (!slot || !slot.directive) {
|
||
|
return null
|
||
|
}
|
||
|
const expr =
|
||
|
vFor && vFor.value && /** @type {VForExpression} */ (vFor.value.expression)
|
||
|
const variables =
|
||
|
expr && getUsingIterationVars(slot.value, slot.parent.parent)
|
||
|
return expr && variables && variables.length > 0 ? { expr, variables } : null
|
||
|
}
|
||
|
|
||
|
/**
|
||
|
* Gets iterative variables if a given expression node is using iterative variables that the element defined.
|
||
|
* @param {VExpressionContainer|null} expression The expression node to check.
|
||
|
* @param {VElement} element The element node which has the expression.
|
||
|
* @returns {VVariable[]} The expression node is using iteration variables.
|
||
|
*/
|
||
|
function getUsingIterationVars(expression, element) {
|
||
|
const vars = []
|
||
|
if (expression && expression.type === 'VExpressionContainer') {
|
||
|
for (const { variable } of expression.references) {
|
||
|
if (
|
||
|
variable != null &&
|
||
|
variable.kind === 'v-for' &&
|
||
|
variable.id.range[0] > element.startTag.range[0] &&
|
||
|
variable.id.range[1] < element.startTag.range[1]
|
||
|
) {
|
||
|
vars.push(variable)
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
return vars
|
||
|
}
|
||
|
|
||
|
/**
|
||
|
* Get the normalized name of a given `slot` attribute node.
|
||
|
* @param {VAttribute | VDirective | null} slotAttr node of `slot`
|
||
|
* @param {SourceCode} sourceCode The source code.
|
||
|
* @returns {string} The normalized name.
|
||
|
*/
|
||
|
function getNormalizedName(slotAttr, sourceCode) {
|
||
|
if (!slotAttr) {
|
||
|
return 'default'
|
||
|
}
|
||
|
if (!slotAttr.directive) {
|
||
|
return slotAttr.value ? slotAttr.value.value : 'default'
|
||
|
}
|
||
|
return slotAttr.value ? `[${sourceCode.getText(slotAttr.value)}]` : '[null]'
|
||
|
}
|
||
|
|
||
|
/**
|
||
|
* Checks whether parent element has the same slot as the given slot.
|
||
|
* @param {VElement} ownerElement The parent element.
|
||
|
* @param {SlotContext} targetSlot The SlotContext with a slot to check if they are the same.
|
||
|
* @param {SourceCode} sourceCode
|
||
|
* @param {ParserServices.TokenStore} tokenStore
|
||
|
*/
|
||
|
function hasSameSlotDirective(
|
||
|
ownerElement,
|
||
|
targetSlot,
|
||
|
sourceCode,
|
||
|
tokenStore
|
||
|
) {
|
||
|
for (const group of utils.iterateChildElementsChains(ownerElement)) {
|
||
|
if (group.includes(targetSlot.element)) {
|
||
|
continue
|
||
|
}
|
||
|
for (const childElement of group) {
|
||
|
const slot = getSlotContext(childElement, sourceCode)
|
||
|
if (!targetSlot.slotVForVars || !slot.slotVForVars) {
|
||
|
if (
|
||
|
!targetSlot.slotVForVars &&
|
||
|
!slot.slotVForVars &&
|
||
|
targetSlot.normalizedName === slot.normalizedName
|
||
|
) {
|
||
|
return true
|
||
|
}
|
||
|
continue
|
||
|
}
|
||
|
if (
|
||
|
equalSlotVForVariables(
|
||
|
targetSlot.slotVForVars,
|
||
|
slot.slotVForVars,
|
||
|
tokenStore
|
||
|
)
|
||
|
) {
|
||
|
return true
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
return false
|
||
|
}
|
||
|
|
||
|
/**
|
||
|
* Determines whether the two given `v-slot` variables are considered to be equal.
|
||
|
* @param {SlotVForVariables} a First element.
|
||
|
* @param {SlotVForVariables} b Second element.
|
||
|
* @param {ParserServices.TokenStore} tokenStore The token store.
|
||
|
* @returns {boolean} `true` if the elements are considered to be equal.
|
||
|
*/
|
||
|
function equalSlotVForVariables(a, b, tokenStore) {
|
||
|
if (a.variables.length !== b.variables.length) {
|
||
|
return false
|
||
|
}
|
||
|
if (!equal(a.expr.right, b.expr.right)) {
|
||
|
return false
|
||
|
}
|
||
|
|
||
|
const checkedVarNames = new Set()
|
||
|
const len = Math.min(a.expr.left.length, b.expr.left.length)
|
||
|
for (let index = 0; index < len; index++) {
|
||
|
const aPtn = a.expr.left[index]
|
||
|
const bPtn = b.expr.left[index]
|
||
|
|
||
|
const aVar = a.variables.find(
|
||
|
(v) => aPtn.range[0] <= v.id.range[0] && v.id.range[1] <= aPtn.range[1]
|
||
|
)
|
||
|
const bVar = b.variables.find(
|
||
|
(v) => bPtn.range[0] <= v.id.range[0] && v.id.range[1] <= bPtn.range[1]
|
||
|
)
|
||
|
if (aVar && bVar) {
|
||
|
if (aVar.id.name !== bVar.id.name) {
|
||
|
return false
|
||
|
}
|
||
|
if (!equal(aPtn, bPtn)) {
|
||
|
return false
|
||
|
}
|
||
|
checkedVarNames.add(aVar.id.name)
|
||
|
} else if (aVar || bVar) {
|
||
|
return false
|
||
|
}
|
||
|
}
|
||
|
return a.variables.every(
|
||
|
(v) =>
|
||
|
checkedVarNames.has(v.id.name) ||
|
||
|
b.variables.some((bv) => v.id.name === bv.id.name)
|
||
|
)
|
||
|
|
||
|
/**
|
||
|
* Determines whether the two given nodes are considered to be equal.
|
||
|
* @param {ASTNode} a First node.
|
||
|
* @param {ASTNode} b Second node.
|
||
|
* @returns {boolean} `true` if the nodes are considered to be equal.
|
||
|
*/
|
||
|
function equal(a, b) {
|
||
|
if (a.type !== b.type) {
|
||
|
return false
|
||
|
}
|
||
|
return utils.equalTokens(a, b, tokenStore)
|
||
|
}
|
||
|
}
|