From 7c6ac02705d2681092bcfb231c99414800af4cb7 Mon Sep 17 00:00:00 2001
From: Yosuke Ota <otameshiyo23@gmail.com>
Date: Thu, 18 Nov 2021 14:35:15 +0900
Subject: [PATCH] Add `vue/no-expose-after-await` rule (#1712)

---
 docs/rules/README.md                     |   1 +
 docs/rules/no-expose-after-await.md      |  51 ++++++
 lib/index.js                             |   1 +
 lib/rules/no-expose-after-await.js       | 202 +++++++++++++++++++++++
 tests/lib/rules/no-expose-after-await.js | 152 +++++++++++++++++
 5 files changed, 407 insertions(+)
 create mode 100644 docs/rules/no-expose-after-await.md
 create mode 100644 lib/rules/no-expose-after-await.js
 create mode 100644 tests/lib/rules/no-expose-after-await.js

diff --git a/docs/rules/README.md b/docs/rules/README.md
index 684731a95..5794cc3ed 100644
--- a/docs/rules/README.md
+++ b/docs/rules/README.md
@@ -324,6 +324,7 @@ For example:
 | [vue/no-child-content](./no-child-content.md) | disallow element's child contents which would be overwritten by a directive like `v-html` or `v-text` | :bulb: |
 | [vue/no-duplicate-attr-inheritance](./no-duplicate-attr-inheritance.md) | enforce `inheritAttrs` to be set to `false` when using `v-bind="$attrs"` |  |
 | [vue/no-empty-component-block](./no-empty-component-block.md) | disallow the `<template>` `<script>` `<style>` block to be empty |  |
+| [vue/no-expose-after-await](./no-expose-after-await.md) | disallow asynchronously registered `expose` |  |
 | [vue/no-invalid-model-keys](./no-invalid-model-keys.md) | require valid keys in model option |  |
 | [vue/no-multiple-objects-in-class](./no-multiple-objects-in-class.md) | disallow to pass multiple objects into array to class |  |
 | [vue/no-potential-component-option-typo](./no-potential-component-option-typo.md) | disallow a potential typo in your component property | :bulb: |
diff --git a/docs/rules/no-expose-after-await.md b/docs/rules/no-expose-after-await.md
new file mode 100644
index 000000000..9b7bc8e37
--- /dev/null
+++ b/docs/rules/no-expose-after-await.md
@@ -0,0 +1,51 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-expose-after-await
+description: disallow asynchronously registered `expose`
+---
+# vue/no-expose-after-await
+
+> disallow asynchronously registered `expose`
+
+- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> ***This rule has not been released yet.*** </badge>
+
+## :book: Rule Details
+
+This rule reports the `expose()` after `await` expression.  
+In `setup()` function, `expose()` should be registered synchronously.
+
+<eslint-code-block :rules="{'vue/no-expose-after-await': ['error']}">
+
+```vue
+<script>
+import { watch } from 'vue'
+export default {
+  async setup(props, { expose }) {
+    /* ✓ GOOD */
+    expose({/* ... */})
+
+    await doSomething()
+
+    /* ✗ BAD */
+    expose({/* ... */})
+  }
+}
+</script>
+```
+
+</eslint-code-block>
+
+## :wrench: Options
+
+Nothing.
+
+## :books: Further Reading
+
+- [Vue RFCs - 0042-expose-api](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0042-expose-api.md)
+- [Vue RFCs - 0013-composition-api](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0013-composition-api.md)
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-expose-after-await.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-expose-after-await.js)
diff --git a/lib/index.js b/lib/index.js
index 437ed3e49..c9969917c 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -89,6 +89,7 @@ module.exports = {
     'no-empty-component-block': require('./rules/no-empty-component-block'),
     'no-empty-pattern': require('./rules/no-empty-pattern'),
     'no-export-in-script-setup': require('./rules/no-export-in-script-setup'),
+    'no-expose-after-await': require('./rules/no-expose-after-await'),
     'no-extra-parens': require('./rules/no-extra-parens'),
     'no-invalid-model-keys': require('./rules/no-invalid-model-keys'),
     'no-irregular-whitespace': require('./rules/no-irregular-whitespace'),
diff --git a/lib/rules/no-expose-after-await.js b/lib/rules/no-expose-after-await.js
new file mode 100644
index 000000000..e1e3104d6
--- /dev/null
+++ b/lib/rules/no-expose-after-await.js
@@ -0,0 +1,202 @@
+/**
+ * @author Yosuke Ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+const { findVariable } = require('eslint-utils')
+const utils = require('../utils')
+
+// ------------------------------------------------------------------------------
+// Helpers
+// ------------------------------------------------------------------------------
+
+/**
+ * Get the callee member node from the given CallExpression
+ * @param {CallExpression} node CallExpression
+ */
+function getCalleeMemberNode(node) {
+  const callee = utils.skipChainExpression(node.callee)
+
+  if (callee.type === 'MemberExpression') {
+    const name = utils.getStaticPropertyName(callee)
+    if (name) {
+      return { name, member: callee }
+    }
+  }
+  return null
+}
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'disallow asynchronously registered `expose`',
+      categories: undefined,
+      // categories: ['vue3-essential'], TODO Change with the major version
+      url: 'https://eslint.vuejs.org/rules/no-expose-after-await.html'
+    },
+    fixable: null,
+    schema: [],
+    messages: {
+      forbidden: 'The `expose` after `await` expression are forbidden.'
+    }
+  },
+  /** @param {RuleContext} context */
+  create(context) {
+    /**
+     * @typedef {object} SetupScopeData
+     * @property {boolean} afterAwait
+     * @property {[number,number]} range
+     * @property {Set<Identifier>} exposeReferenceIds
+     * @property {Set<Identifier>} contextReferenceIds
+     */
+    /**
+     * @typedef {object} ScopeStack
+     * @property {ScopeStack | null} upper
+     * @property {FunctionDeclaration | FunctionExpression | ArrowFunctionExpression} scopeNode
+     */
+    /** @type {Map<FunctionDeclaration | FunctionExpression | ArrowFunctionExpression, SetupScopeData>} */
+    const setupScopes = new Map()
+
+    /** @type {ScopeStack | null} */
+    let scopeStack = null
+
+    return utils.defineVueVisitor(context, {
+      onSetupFunctionEnter(node) {
+        const contextParam = node.params[1]
+        if (!contextParam) {
+          // no arguments
+          return
+        }
+        if (contextParam.type === 'RestElement') {
+          // cannot check
+          return
+        }
+        if (contextParam.type === 'ArrayPattern') {
+          // cannot check
+          return
+        }
+        /** @type {Set<Identifier>} */
+        const contextReferenceIds = new Set()
+        /** @type {Set<Identifier>} */
+        const exposeReferenceIds = new Set()
+        if (contextParam.type === 'ObjectPattern') {
+          const exposeProperty = utils.findAssignmentProperty(
+            contextParam,
+            'expose'
+          )
+          if (!exposeProperty) {
+            return
+          }
+          const exposeParam = exposeProperty.value
+          // `setup(props, {emit})`
+          const variable =
+            exposeParam.type === 'Identifier'
+              ? findVariable(context.getScope(), exposeParam)
+              : null
+          if (!variable) {
+            return
+          }
+          for (const reference of variable.references) {
+            if (!reference.isRead()) {
+              continue
+            }
+            exposeReferenceIds.add(reference.identifier)
+          }
+        } else if (contextParam.type === 'Identifier') {
+          // `setup(props, context)`
+          const variable = findVariable(context.getScope(), contextParam)
+          if (!variable) {
+            return
+          }
+          for (const reference of variable.references) {
+            if (!reference.isRead()) {
+              continue
+            }
+            contextReferenceIds.add(reference.identifier)
+          }
+        }
+        setupScopes.set(node, {
+          afterAwait: false,
+          range: node.range,
+          exposeReferenceIds,
+          contextReferenceIds
+        })
+      },
+      /**
+       * @param {FunctionExpression | FunctionDeclaration | ArrowFunctionExpression} node
+       */
+      ':function'(node) {
+        scopeStack = {
+          upper: scopeStack,
+          scopeNode: node
+        }
+      },
+      ':function:exit'() {
+        scopeStack = scopeStack && scopeStack.upper
+      },
+      /** @param {AwaitExpression} node */
+      AwaitExpression(node) {
+        if (!scopeStack) {
+          return
+        }
+        const setupScope = setupScopes.get(scopeStack.scopeNode)
+        if (!setupScope || !utils.inRange(setupScope.range, node)) {
+          return
+        }
+        setupScope.afterAwait = true
+      },
+      /** @param {CallExpression} node */
+      CallExpression(node) {
+        if (!scopeStack) {
+          return
+        }
+        const setupScope = setupScopes.get(scopeStack.scopeNode)
+        if (
+          !setupScope ||
+          !setupScope.afterAwait ||
+          !utils.inRange(setupScope.range, node)
+        ) {
+          return
+        }
+        const { contextReferenceIds, exposeReferenceIds } = setupScope
+        if (
+          node.callee.type === 'Identifier' &&
+          exposeReferenceIds.has(node.callee)
+        ) {
+          // setup(props,{expose}) {expose()}
+          context.report({
+            node,
+            messageId: 'forbidden'
+          })
+        } else {
+          const expose = getCalleeMemberNode(node)
+          if (
+            expose &&
+            expose.name === 'expose' &&
+            expose.member.object.type === 'Identifier' &&
+            contextReferenceIds.has(expose.member.object)
+          ) {
+            // setup(props,context) {context.emit()}
+            context.report({
+              node,
+              messageId: 'forbidden'
+            })
+          }
+        }
+      },
+      onSetupFunctionExit(node) {
+        setupScopes.delete(node)
+      }
+    })
+  }
+}
diff --git a/tests/lib/rules/no-expose-after-await.js b/tests/lib/rules/no-expose-after-await.js
new file mode 100644
index 000000000..2f33c58e6
--- /dev/null
+++ b/tests/lib/rules/no-expose-after-await.js
@@ -0,0 +1,152 @@
+/**
+ * @author Yosuke Ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const RuleTester = require('eslint').RuleTester
+const rule = require('../../../lib/rules/no-expose-after-await')
+
+const tester = new RuleTester({
+  parser: require.resolve('vue-eslint-parser'),
+  parserOptions: {
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  }
+})
+
+tester.run('no-expose-after-await', rule, {
+  valid: [
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default {
+        async setup(_, {expose}) {
+          expose({ /* ... */ }) // ok
+          await doSomething()
+        }
+      }
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default {
+        async setup(_, ctx) {
+          ctx.expose({ /* ... */ }) // ok
+          await doSomething()
+        }
+      }
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default {
+        async setup(_, {expose}) {
+          expose({ /* ... */ })
+        }
+      }
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default {
+        async setup(_, ctx) {
+          ctx.expose({ /* ... */ })
+        }
+      }
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default {
+        async _setup(_, {expose}) {
+          expose({ /* ... */ })
+          await doSomething()
+          expose({ /* ... */ })
+        }
+      }
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default {
+        async _setup(_, ctx) {
+          ctx.expose({ /* ... */ })
+          await doSomething()
+          ctx.expose({ /* ... */ })
+        }
+      }
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      defineExpose({ /* ... */ })
+      await doSomething()
+      defineExpose({ /* ... */ })
+      </script>
+      `,
+      parserOptions: { ecmaVersion: 2022 }
+    }
+  ],
+  invalid: [
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default {
+        async setup(_, {expose}) {
+          await doSomething()
+          expose({ /* ... */ })
+        }
+      }
+      </script>
+      `,
+      errors: [
+        {
+          message: 'The `expose` after `await` expression are forbidden.',
+          line: 6,
+          column: 11
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default {
+        async setup(_, ctx) {
+          await doSomething()
+          ctx.expose({ /* ... */ })
+        }
+      }
+      </script>
+      `,
+      errors: [
+        {
+          message: 'The `expose` after `await` expression are forbidden.',
+          line: 6,
+          column: 11
+        }
+      ]
+    }
+  ]
+})