From ab214689827fa25aa68e524e4e4bc11204c55cb7 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Sat, 17 Apr 2021 14:38:30 -0400
Subject: [PATCH] wip: warn v-if/v-for co-usage

---
 .../compiler-core/src/compat/compatConfig.ts  |  6 +++--
 packages/compiler-core/src/parse.ts           | 26 ++++++++++++++++++-
 2 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/packages/compiler-core/src/compat/compatConfig.ts b/packages/compiler-core/src/compat/compatConfig.ts
index 712cdd930..6c54111ca 100644
--- a/packages/compiler-core/src/compat/compatConfig.ts
+++ b/packages/compiler-core/src/compat/compatConfig.ts
@@ -81,8 +81,10 @@ const deprecationData: Record<CompilerDeprecationTypes, DeprecationData> = {
   [CompilerDeprecationTypes.COMPILER_V_IF_V_FOR_PRECEDENCE]: {
     message:
       `v-if / v-for precedence when used on the same element has changed ` +
-      `in Vue 3. It is best to avoid the ambiguity with either <template> tags ` +
-      `or a computed property that filters v-for data source.`,
+      `in Vue 3: v-if now takes higher precedence and will no longer have ` +
+      `access to v-for scope variables. It is best to avoid the ambiguity ` +
+      `with <template> tags or use a computed property that filters v-for ` +
+      `data source.`,
     link: `https://v3.vuejs.org/guide/migration/v-if-v-for.html`
   },
 
diff --git a/packages/compiler-core/src/parse.ts b/packages/compiler-core/src/parse.ts
index 1e7d97012..9db216f16 100644
--- a/packages/compiler-core/src/parse.ts
+++ b/packages/compiler-core/src/parse.ts
@@ -33,7 +33,8 @@ import {
 import {
   checkCompatEnabled,
   CompilerCompatOptions,
-  CompilerDeprecationTypes
+  CompilerDeprecationTypes,
+  warnDeprecation
 } from './compat/compatConfig'
 
 type OptionalOptions =
@@ -488,6 +489,29 @@ function parseTag(
     props = parseAttributes(context, type).filter(p => p.name !== 'v-pre')
   }
 
+  // warn v-if/v-for usage on the same element
+  if (__COMPAT__ && __DEV__ && !__TEST__) {
+    let hasIf = false
+    let hasFor = false
+    for (let i = 0; i < props.length; i++) {
+      const p = props[i]
+      if (p.type === NodeTypes.DIRECTIVE) {
+        if (p.name === 'if') {
+          hasIf = true
+        } else if (p.name === 'for') {
+          hasFor = true
+        }
+      }
+      if (hasIf && hasFor) {
+        warnDeprecation(
+          CompilerDeprecationTypes.COMPILER_V_IF_V_FOR_PRECEDENCE,
+          context,
+          getSelection(context, start)
+        )
+      }
+    }
+  }
+
   // Tag close.
   let isSelfClosing = false
   if (context.source.length === 0) {