Supports ES2022 (Class Fields) (#1481)

* Supports ES2022 (Class Fileds)

* Update

Author: ota-meshi

.vscode/settings.json

@@ -9,5 +9,9 @@
         "vue"
     ],
     "typescript.tsdk": "node_modules/typescript/lib",
-    "vetur.validation.script": false
+    "vetur.validation.script": false,
+    "[typescript]": {
+        "editor.formatOnSave": true,
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
 }

lib/rules/require-slots-as-functions.js

@@ -113,6 +113,10 @@ module.exports = {
         if (!utils.isThis(object.object, context)) {
           return
         }
+        if (node.property.type === 'PrivateIdentifier') {
+          // Unreachable
+          return
+        }
         verify(node, node.property)
       }
     })

lib/utils/indent-common.js

@@ -60,8 +60,10 @@ const KNOWN_NODES = new Set([
   'NewExpression',
   'ObjectExpression',
   'ObjectPattern',
+  'PrivateIdentifier',
   'Program',
   'Property',
+  'PropertyDefinition',
   'RestElement',
   'ReturnStatement',
   'SequenceExpression',
@@ -667,7 +669,7 @@ module.exports.defineVisitor = function create(
   /**
    * Collect prefix tokens of the given property.
    * The prefix includes `async`, `get`, `set`, `static`, and `*`.
-   * @param {Property|MethodDefinition} node The property node to collect prefix tokens.
+   * @param {Property|MethodDefinition|PropertyDefinition} node The property node to collect prefix tokens.
    */
   function getPrefixTokens(node) {
     const prefixes = []
@@ -1750,9 +1752,8 @@ module.exports.defineVisitor = function create(
         setOffset([dotToken, propertyToken], 1, objectToken)
       }
     },
-    /** @param {MethodDefinition | Property} node */
-    'MethodDefinition, Property'(node) {
-      const isMethod = node.type === 'MethodDefinition' || node.method === true
+    /** @param {MethodDefinition | Property | PropertyDefinition} node */
+    'MethodDefinition, Property, PropertyDefinition'(node) {
       const prefixTokens = getPrefixTokens(node)
       const hasPrefix = prefixTokens.length >= 1
 
@@ -1784,7 +1785,10 @@ module.exports.defineVisitor = function create(
         }
       }
 
-      if (isMethod) {
+      if (
+        node.type === 'MethodDefinition' ||
+        (node.type === 'Property' && node.method === true)
+      ) {
         const leftParenToken = tokenStore.getTokenAfter(lastKeyToken)
 
         setOffset(leftParenToken, 1, lastKeyToken)
@@ -1793,6 +1797,11 @@ module.exports.defineVisitor = function create(
         const valueToken = tokenStore.getTokenAfter(colonToken)
 
         setOffset([colonToken, valueToken], 1, lastKeyToken)
+      } else if (node.type === 'PropertyDefinition' && node.value != null) {
+        const eqToken = tokenStore.getTokenAfter(lastKeyToken)
+        const initToken = tokenStore.getTokenAfter(eqToken)
+
+        setOffset([eqToken, initToken], 1, lastKeyToken)
       }
     },
     /** @param {NewExpression} node */

lib/utils/index.js

@@ -1848,23 +1848,24 @@ function skipChainExpression(node) {
  */
 function getStaticPropertyName(node) {
   if (node.type === 'Property' || node.type === 'MethodDefinition') {
-    const key = node.key
-
     if (!node.computed) {
+      const key = node.key
       if (key.type === 'Identifier') {
         return key.name
       }
     }
+    const key = node.key
     // @ts-expect-error
     return getStringLiteralValue(key)
   } else if (node.type === 'MemberExpression') {
-    const property = node.property
     if (!node.computed) {
+      const property = node.property
       if (property.type === 'Identifier') {
         return property.name
       }
       return null
     }
+    const property = node.property
     // @ts-expect-error
     return getStringLiteralValue(property)
   }

package.json

@@ -74,6 +74,7 @@
     "eslint-plugin-prettier": "^3.1.3",
     "eslint-plugin-vue": "file:.",
     "eslint4b": "^7.0.0",
+    "espree": "^8.0.0-0",
     "lodash": "^4.17.15",
     "mocha": "^7.1.2",
     "nyc": "^15.0.1",

tests/fixtures/script-indent/class-fields-private-methods-01.vue

@@ -0,0 +1,64 @@
+<!--{}-->
+<script>
+class Counter {
+  get
+  #x
+    (
+    )
+  {
+  }
+  set
+  #x
+    (
+      value
+    ) {
+  }
+  static
+  get
+  #y
+    (
+    ) {
+  }
+  static
+  set
+  #y
+    (
+      value
+    ) {
+  }
+  inc() {
+    this
+      .#inc
+      (
+      )
+    this.
+      #inc
+      (
+      )
+  }
+  #inc
+    (
+    ) {
+    this
+      .#x++;
+    this.
+      #x++;
+    Counter
+      .#staticInc
+      (
+      )
+    Counter.
+      #staticInc(
+      )
+  }
+  static
+  #staticInc
+    (
+    ) {
+    Counter
+      .#y++;
+    Counter.
+      #y++;
+  }
+}
+</script>

tests/fixtures/script-indent/class-fields-private-properties-01.vue

@@ -0,0 +1,22 @@
+<!--{}-->
+<script>
+class Counter {
+  #x
+    =
+    0;
+  static
+  #y
+    =
+    0;
+  inc() {
+    this
+      .#x++;
+    this.
+      #x++;
+    Counter
+      .#y++;
+    Counter.
+      #y++;
+  }
+}
+</script>

tests/fixtures/script-indent/class-fields-properties-01.vue

@@ -0,0 +1,16 @@
+<!--{}-->
+<script>
+class Counter {
+  [
+    x
+  ]
+    =
+    0;
+  static
+  [
+    y
+  ]
+    =
+    0;
+}
+</script>

tests/fixtures/script-indent/class-fields-properties-02.vue

@@ -0,0 +1,12 @@
+<!--{}-->
+<script>
+class Counter {
+  x
+    =
+    0;
+  static
+  y
+    =
+    0;
+}
+</script>

tests/lib/rules/script-indent.js

@@ -114,8 +114,9 @@ function unIndent(strings) {
 const tester = new RuleTester({
   parser: require.resolve('vue-eslint-parser'),
   parserOptions: {
-    ecmaVersion: 2020,
-    sourceType: 'module'
+    ecmaVersion: 2022,
+    sourceType: 'module',
+    parser: require.resolve('espree') // espree v8.0.0-beta.x
   }
 })
 

typings/eslint-plugin-vue/global.d.ts

@@ -71,6 +71,7 @@ declare global {
   // ---- ES Nodes ----
 
   type Identifier = VAST.Identifier
+  type PrivateIdentifier = VAST.PrivateIdentifier
   type Literal = VAST.Literal
   type Program = VAST.Program
   type SwitchCase = VAST.SwitchCase
@@ -135,6 +136,7 @@ declare global {
   type AssignmentPattern = VAST.AssignmentPattern
   type ClassBody = VAST.ClassBody
   type MethodDefinition = VAST.MethodDefinition
+  type PropertyDefinition = VAST.PropertyDefinition
   type ModuleDeclaration = VAST.ModuleDeclaration
   type ImportDeclaration = VAST.ImportDeclaration
   type ExportNamedDeclaration = VAST.ExportNamedDeclaration

typings/eslint-plugin-vue/util-types/ast/ast.ts

@@ -179,6 +179,8 @@ export type NodeListenerMap = {
 export type ESNodeListenerMap = {
   Identifier: ES.Identifier
   'Identifier:exit': ES.Identifier
+  PrivateIdentifier: ES.PrivateIdentifier
+  'PrivateIdentifier:exit': ES.PrivateIdentifier
   Literal: ES.Literal
   'Literal:exit': ES.Literal
   Program: ES.Program
@@ -317,6 +319,8 @@ export type ESNodeListenerMap = {
   'ClassBody:exit': ES.ClassBody
   MethodDefinition: ES.MethodDefinition
   'MethodDefinition:exit': ES.MethodDefinition
+  PropertyDefinition: ES.PropertyDefinition
+  'PropertyDefinition:exit': ES.PropertyDefinition
   ImportDeclaration: ES.ImportDeclaration
   'ImportDeclaration:exit': ES.ImportDeclaration
   ExportNamedDeclaration: ES.ExportNamedDeclaration