Description
Please describe what the rule should do:
The rule should notify when defineExpose is used after any top-level await. Doing so causes problems as described in this core Vue.js issue:
vuejs/core#4930
What category should the rule belong to?
[x] Warns about a potential error (problem)
Provide 2-3 code examples that this rule should warn about:
// Example 1
...
<script setup>
...
const foo = { bar: 'baz' };
await asyncOperation();
defineExpose({ foo }); // `defineExpose` should be called before any top-level `await`.
...
</script>
...
// Example 2
...
<script setup>
...
await asyncOperation();
const foo = { bar: 'baz' };
defineExpose({ foo }); // `defineExpose` should be called before any top-level `await`.
...
</script>
...Additional context
The current workaround is to manually remember to place all awaits after defineExpose. Forgetting to do so leads to problems that are hard to debug. In the context of my examples, a JavaScript error would be thrown when foo is used (foo is not defined or similar) in some other component and it's unclear the source of the problem is actually in the component defining foo.
The problem seems challenging to fix in Vue.js itself:
vuejs/core#4930 (comment)