/** * @fileoverview disallow mutation component props * @author 2018 Armano */ 'use strict' const utils = require('../utils') const { findVariable } = require('eslint-utils') // ------------------------------------------------------------------------------ // Rule Definition // ------------------------------------------------------------------------------ module.exports = { meta: { type: 'suggestion', docs: { description: 'disallow mutation of component props', categories: ['vue3-essential', 'essential'], url: 'https://eslint.vuejs.org/rules/no-mutating-props.html' }, fixable: null, // or "code" or "whitespace" schema: [ // fill in your schema ] }, /** @param {RuleContext} context */ create(context) { /** @type {Map>} */ const propsMap = new Map() /** @type { { type: 'export' | 'mark' | 'definition', object: ObjectExpression } | null } */ let vueObjectData = null /** * @param {ASTNode} node * @param {string} name */ function report(node, name) { context.report({ node, message: 'Unexpected mutation of "{{key}}" prop.', data: { key: name } }) } /** * @param {ASTNode} node * @returns {VExpressionContainer} */ function getVExpressionContainer(node) { let n = node while (n.type !== 'VExpressionContainer') { n = /** @type {ASTNode} */ (n.parent) } return n } /** * @param {MemberExpression|AssignmentProperty} node * @returns {string} */ function getPropertyNameText(node) { const name = utils.getStaticPropertyName(node) if (name) { return name } if (node.computed) { const expr = node.type === 'Property' ? node.key : node.property const str = context.getSourceCode().getText(expr) return `[${str}]` } return '?unknown?' } /** * @param {ASTNode} node * @returns {node is Identifier} */ function isVmReference(node) { if (node.type !== 'Identifier') { return false } const parent = node.parent if (parent.type === 'MemberExpression') { if (parent.property === node) { // foo.id return false } } else if (parent.type === 'Property') { // {id: foo} if (parent.key === node && !parent.computed) { return false } } const exprContainer = getVExpressionContainer(node) for (const reference of exprContainer.references) { if (reference.variable != null) { // Not vm reference continue } if (reference.id === node) { return true } } return false } /** * @param {MemberExpression|Identifier} props * @param {string} name */ function verifyMutating(props, name) { const invalid = utils.findMutating(props) if (invalid) { report(invalid.node, name) } } /** * @param {Pattern} param * @param {string[]} path * @returns {Generator<{ node: Identifier, path: string[] }>} */ function* iterateParamProperties(param, path) { if (!param) { return } if (param.type === 'Identifier') { yield { node: param, path } } else if (param.type === 'RestElement') { yield* iterateParamProperties(param.argument, path) } else if (param.type === 'AssignmentPattern') { yield* iterateParamProperties(param.left, path) } else if (param.type === 'ObjectPattern') { for (const prop of param.properties) { if (prop.type === 'Property') { const name = getPropertyNameText(prop) yield* iterateParamProperties(prop.value, [...path, name]) } else if (prop.type === 'RestElement') { yield* iterateParamProperties(prop.argument, path) } } } else if (param.type === 'ArrayPattern') { for (let index = 0; index < param.elements.length; index++) { const element = param.elements[index] yield* iterateParamProperties(element, [...path, `${index}`]) } } } return Object.assign( {}, utils.defineVueVisitor(context, { onVueObjectEnter(node) { propsMap.set( node, new Set( utils .getComponentProps(node) .map((p) => p.propName) .filter(utils.isDef) ) ) }, onVueObjectExit(node, { type }) { if ( (!vueObjectData || vueObjectData.type !== 'export') && type !== 'instance' ) { vueObjectData = { type, object: node } } }, onSetupFunctionEnter(node) { const propsParam = node.params[0] if (!propsParam) { // no arguments return } if ( propsParam.type === 'RestElement' || propsParam.type === 'ArrayPattern' ) { // cannot check return } for (const { node: prop, path } of iterateParamProperties( propsParam, [] )) { const variable = findVariable(context.getScope(), prop) if (!variable) { continue } for (const reference of variable.references) { if (!reference.isRead()) { continue } const id = reference.identifier const invalid = utils.findMutating(id) if (!invalid) { continue } let name if (path.length === 0) { if (invalid.pathNodes.length === 0) { continue } const mem = invalid.pathNodes[0] name = getPropertyNameText(mem) } else { if (invalid.pathNodes.length === 0 && invalid.kind !== 'call') { continue } name = path[0] } report(invalid.node, name) } } }, /** @param {(Identifier | ThisExpression) & { parent: MemberExpression } } node */ 'MemberExpression > :matches(Identifier, ThisExpression)'( node, { node: vueNode } ) { if (!utils.isThis(node, context)) { return } const mem = node.parent if (mem.object !== node) { return } const name = utils.getStaticPropertyName(mem) if ( name && /** @type {Set} */ (propsMap.get(vueNode)).has(name) ) { verifyMutating(mem, name) } } }), utils.defineTemplateBodyVisitor(context, { /** @param {ThisExpression & { parent: MemberExpression } } node */ 'VExpressionContainer MemberExpression > ThisExpression'(node) { if (!vueObjectData) { return } const mem = node.parent if (mem.object !== node) { return } const name = utils.getStaticPropertyName(mem) if ( name && /** @type {Set} */ (propsMap.get(vueObjectData.object)).has( name ) ) { verifyMutating(mem, name) } }, /** @param {Identifier } node */ 'VExpressionContainer Identifier'(node) { if (!vueObjectData) { return } if (!isVmReference(node)) { return } const name = node.name if ( name && /** @type {Set} */ (propsMap.get(vueObjectData.object)).has( name ) ) { verifyMutating(node, name) } }, /** @param {ESNode} node */ "VAttribute[directive=true][key.name.name='model'] VExpressionContainer > *"( node ) { if (!vueObjectData) { return } const nodes = utils.getMemberChaining(node) const first = nodes[0] let name if (isVmReference(first)) { name = first.name } else if (first.type === 'ThisExpression') { const mem = nodes[1] if (!mem) { return } name = utils.getStaticPropertyName(mem) } else { return } if ( name && /** @type {Set} */ (propsMap.get(vueObjectData.object)).has( name ) ) { report(node, name) } } }) ) } }