Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add
vue/valid-define-props rule (#1560)
- Loading branch information
Showing
6 changed files
with
475 additions
and
11 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,133 @@ | ||
| --- | ||
| pageClass: rule-details | ||
| sidebarDepth: 0 | ||
| title: vue/valid-define-props | ||
| description: enforce valid `defineProps` compiler macro | ||
| --- | ||
| # vue/valid-define-props | ||
|
|
||
| > enforce valid `defineProps` compiler macro | ||
| - :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> ***This rule has not been released yet.*** </badge> | ||
|
|
||
| This rule checks whether `defineProps` compiler macro is valid. | ||
|
|
||
| ## :book: Rule Details | ||
|
|
||
| This rule reports `defineProps` compiler macros in the following cases: | ||
|
|
||
| - `defineProps` are referencing locally declared variables. | ||
| - `defineProps` has both a literal type and an argument. e.g. `defineProps<{/*props*/}>({/*props*/})` | ||
| - `defineProps` has been called multiple times. | ||
| - Props are defined in both `defineProps` and `export default {}`. | ||
| - Props are not defined in either `defineProps` or `export default {}`. | ||
|
|
||
| <eslint-code-block :rules="{'vue/valid-define-props': ['error']}"> | ||
|
|
||
| ```vue | ||
| <script setup> | ||
| /* ✓ GOOD */ | ||
| defineProps({ msg: String }) | ||
| </script> | ||
| ``` | ||
|
|
||
| </eslint-code-block> | ||
|
|
||
| <eslint-code-block :rules="{'vue/valid-define-props': ['error']}"> | ||
|
|
||
| ```vue | ||
| <script setup> | ||
| /* ✓ GOOD */ | ||
| defineProps(['msg']) | ||
| </script> | ||
| ``` | ||
|
|
||
| </eslint-code-block> | ||
|
|
||
| ```vue | ||
| <script setup lang="ts"> | ||
| /* ✓ GOOD */ | ||
| defineProps<{ msg?:string }>() | ||
| </script> | ||
| ``` | ||
|
|
||
| <eslint-code-block :rules="{'vue/valid-define-props': ['error']}"> | ||
|
|
||
| ```vue | ||
| <script> | ||
| const def = { msg: String } | ||
| </script> | ||
| <script setup> | ||
| /* ✓ GOOD */ | ||
| defineProps(def) | ||
| </script> | ||
| ``` | ||
|
|
||
| </eslint-code-block> | ||
|
|
||
| <eslint-code-block :rules="{'vue/valid-define-props': ['error']}"> | ||
|
|
||
| ```vue | ||
| <script setup> | ||
| /* ✗ BAD */ | ||
| const def = { msg: String } | ||
| defineProps(def) | ||
| </script> | ||
| ``` | ||
|
|
||
| </eslint-code-block> | ||
|
|
||
| ```vue | ||
| <script setup lang="ts"> | ||
| /* ✗ BAD */ | ||
| defineProps<{ msg?:string }>({ msg: String }) | ||
| </script> | ||
| ``` | ||
|
|
||
| <eslint-code-block :rules="{'vue/valid-define-props': ['error']}"> | ||
|
|
||
| ```vue | ||
| <script setup> | ||
| /* ✗ BAD */ | ||
| defineProps({ msg: String }) | ||
| defineProps({ count: Number }) | ||
| </script> | ||
| ``` | ||
|
|
||
| </eslint-code-block> | ||
|
|
||
| <eslint-code-block :rules="{'vue/valid-define-props': ['error']}"> | ||
|
|
||
| ```vue | ||
| <script> | ||
| export default { | ||
| props: { msg: String } | ||
| } | ||
| </script> | ||
| <script setup> | ||
| /* ✗ BAD */ | ||
| defineProps({ count: Number }) | ||
| </script> | ||
| ``` | ||
|
|
||
| </eslint-code-block> | ||
|
|
||
| <eslint-code-block :rules="{'vue/valid-define-props': ['error']}"> | ||
|
|
||
| ```vue | ||
| <script setup> | ||
| /* ✗ BAD */ | ||
| defineProps() | ||
| </script> | ||
| ``` | ||
|
|
||
| </eslint-code-block> | ||
|
|
||
| ## :wrench: Options | ||
|
|
||
| Nothing. | ||
|
|
||
| ## :mag: Implementation | ||
|
|
||
| - [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/valid-define-props.js) | ||
| - [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/valid-define-props.js) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,145 @@ | ||
| /** | ||
| * @author Yosuke Ota <https://github.com/ota-meshi> | ||
| * See LICENSE file in root directory for full license. | ||
| */ | ||
| 'use strict' | ||
|
|
||
| const { findVariable } = require('eslint-utils') | ||
| const utils = require('../utils') | ||
|
|
||
| module.exports = { | ||
| meta: { | ||
| type: 'problem', | ||
| docs: { | ||
| description: 'enforce valid `defineProps` compiler macro', | ||
| // TODO Switch in the major version. | ||
| // categories: ['vue3-essential'], | ||
| categories: undefined, | ||
| url: 'https://eslint.vuejs.org/rules/valid-define-props.html' | ||
| }, | ||
| fixable: null, | ||
| schema: [], | ||
| messages: { | ||
| hasTypeAndArg: | ||
| '`defineProps` has both a type-only props and an argument.', | ||
| referencingLocally: | ||
| '`defineProps` are referencing locally declared variables.', | ||
| multiple: '`defineProps` has been called multiple times.', | ||
| notDefined: 'Props are not defined.', | ||
| definedInBoth: | ||
| 'Props are defined in both `defineProps` and `export default {}`.' | ||
| } | ||
| }, | ||
| /** @param {RuleContext} context */ | ||
| create(context) { | ||
| const scriptSetup = utils.getScriptSetupElement(context) | ||
| if (!scriptSetup) { | ||
| return {} | ||
| } | ||
|
|
||
| /** @type {Set<Expression | SpreadElement>} */ | ||
| const propsDefExpressions = new Set() | ||
| let hasDefaultExport = false | ||
| /** @type {CallExpression[]} */ | ||
| const definePropsNodes = [] | ||
| /** @type {CallExpression | null} */ | ||
| let emptyDefineProps = null | ||
|
|
||
| return utils.compositingVisitors( | ||
| utils.defineScriptSetupVisitor(context, { | ||
| onDefinePropsEnter(node) { | ||
| definePropsNodes.push(node) | ||
|
|
||
| if (node.arguments.length >= 1) { | ||
| if (node.typeParameters && node.typeParameters.params.length >= 1) { | ||
| // `defineProps` has both a literal type and an argument. | ||
| context.report({ | ||
| node, | ||
| messageId: 'hasTypeAndArg' | ||
| }) | ||
| return | ||
| } | ||
|
|
||
| propsDefExpressions.add(node.arguments[0]) | ||
| } else { | ||
| if ( | ||
| !node.typeParameters || | ||
| node.typeParameters.params.length === 0 | ||
| ) { | ||
| emptyDefineProps = node | ||
| } | ||
| } | ||
| }, | ||
| Identifier(node) { | ||
| for (const def of propsDefExpressions) { | ||
| if (utils.inRange(def.range, node)) { | ||
| const variable = findVariable(context.getScope(), node) | ||
| if ( | ||
| variable && | ||
| variable.references.some((ref) => ref.identifier === node) | ||
| ) { | ||
| if ( | ||
| variable.defs.length && | ||
| variable.defs.every((def) => | ||
| utils.inRange(scriptSetup.range, def.name) | ||
| ) | ||
| ) { | ||
| //`defineProps` are referencing locally declared variables. | ||
| context.report({ | ||
| node, | ||
| messageId: 'referencingLocally' | ||
| }) | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| }), | ||
| utils.defineVueVisitor(context, { | ||
| onVueObjectEnter(node, { type }) { | ||
| if (type !== 'export' || utils.inRange(scriptSetup.range, node)) { | ||
| return | ||
| } | ||
|
|
||
| hasDefaultExport = Boolean(utils.findProperty(node, 'props')) | ||
| } | ||
| }), | ||
| { | ||
| 'Program:exit'() { | ||
| if (!definePropsNodes.length) { | ||
| return | ||
| } | ||
| if (definePropsNodes.length > 1) { | ||
| // `defineProps` has been called multiple times. | ||
| for (const node of definePropsNodes) { | ||
| context.report({ | ||
| node, | ||
| messageId: 'multiple' | ||
| }) | ||
| } | ||
| return | ||
| } | ||
| if (emptyDefineProps) { | ||
| if (!hasDefaultExport) { | ||
| // Props are not defined. | ||
| context.report({ | ||
| node: emptyDefineProps, | ||
| messageId: 'notDefined' | ||
| }) | ||
| } | ||
| } else { | ||
| if (hasDefaultExport) { | ||
| // Props are defined in both `defineProps` and `export default {}`. | ||
| for (const node of definePropsNodes) { | ||
| context.report({ | ||
| node, | ||
| messageId: 'definedInBoth' | ||
| }) | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| ) | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.