123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142 |
- 'use strict'
- const { getStyleVariablesContext } = require('../utils/style-variables')
- const utils = require('../utils')
- const casing = require('../utils/casing')
- module.exports = {
- meta: {
- type: 'problem',
- docs: {
- description:
- 'prevent `<script setup>` variables used in `<template>` to be marked as unused',
- categories: ['base'],
- url: 'https://eslint.vuejs.org/rules/script-setup-uses-vars.html'
- },
- schema: []
- },
-
- create(context) {
- if (!utils.isScriptSetup(context)) {
- return {}
- }
-
- const scriptVariableNames = new Set()
- const globalScope = context.getSourceCode().scopeManager.globalScope
- if (globalScope) {
- for (const variable of globalScope.variables) {
- scriptVariableNames.add(variable.name)
- }
- const moduleScope = globalScope.childScopes.find(
- (scope) => scope.type === 'module'
- )
- for (const variable of (moduleScope && moduleScope.variables) || []) {
- scriptVariableNames.add(variable.name)
- }
- }
-
- function camelize(str) {
- return str.replace(/-(\w)/g, (_, c) => (c ? c.toUpperCase() : ''))
- }
-
- function markSetupReferenceVariableAsUsed(name) {
- if (scriptVariableNames.has(name)) {
- context.markVariableAsUsed(name)
- return true
- }
- const camelName = camelize(name)
- if (scriptVariableNames.has(camelName)) {
- context.markVariableAsUsed(camelName)
- return true
- }
- const pascalName = casing.capitalize(camelName)
- if (scriptVariableNames.has(pascalName)) {
- context.markVariableAsUsed(pascalName)
- return true
- }
- return false
- }
- return utils.defineTemplateBodyVisitor(
- context,
- {
- VExpressionContainer(node) {
- for (const ref of node.references.filter(
- (ref) => ref.variable == null
- )) {
- context.markVariableAsUsed(ref.id.name)
- }
- },
- VElement(node) {
- if (
- (!utils.isHtmlElementNode(node) && !utils.isSvgElementNode(node)) ||
- (node.rawName === node.name &&
- (utils.isHtmlWellKnownElementName(node.rawName) ||
- utils.isSvgWellKnownElementName(node.rawName))) ||
- utils.isBuiltInComponentName(node.rawName)
- ) {
- return
- }
- if (!markSetupReferenceVariableAsUsed(node.rawName)) {
-
-
- const dotIndex = node.rawName.indexOf('.')
- if (dotIndex > 0) {
- markSetupReferenceVariableAsUsed(node.rawName.slice(0, dotIndex))
- }
- }
- },
-
- 'VAttribute[directive=true]'(node) {
- if (utils.isBuiltInDirectiveName(node.key.name.name)) {
- return
- }
- markSetupReferenceVariableAsUsed(`v-${node.key.name.rawName}`)
- },
-
- 'VAttribute[directive=false]'(node) {
- if (node.key.name === 'ref' && node.value) {
- context.markVariableAsUsed(node.value.value)
- }
- }
- },
- {
- Program() {
- const styleVars = getStyleVariablesContext(context)
- if (styleVars) {
- for (const ref of styleVars.references) {
- context.markVariableAsUsed(ref.id.name)
- }
- }
- }
- },
- {
- templateBodyTriggerSelector: 'Program'
- }
- )
- }
- }
|