From 84e386b10378cf70cda0c38113445b84aff17a91 Mon Sep 17 00:00:00 2001
From: codemeow <2553378438@qq.com>
Date: Mon, 28 Oct 2024 14:08:13 +0800
Subject: [PATCH 1/2] feat(runtime-core): use inversion value

---
 packages/runtime-core/src/vnode.ts            | 16 ++++++-
 .../examples/codemeow/useInversionValue.html  | 43 +++++++++++++++++++
 2 files changed, 58 insertions(+), 1 deletion(-)
 create mode 100644 packages/vue/examples/codemeow/useInversionValue.html

diff --git a/packages/runtime-core/src/vnode.ts b/packages/runtime-core/src/vnode.ts
index 30200789be8..5d65e46e917 100644
--- a/packages/runtime-core/src/vnode.ts
+++ b/packages/runtime-core/src/vnode.ts
@@ -642,11 +642,25 @@ function _createVNode(
   )
 }
 
+// eg. <select :disabled="false"></select> It can be abbreviated as <select !disabled></select>
+function formatInversionValue(props: (Data & VNodeProps) | null) {
+  if (props !== null)
+    Object.keys(props)
+      .filter(key => key[0] === '!')
+      .map(key => {
+        props[key.slice(1)] = false
+        delete props[key]
+      })
+  return props
+}
+
 export function guardReactiveProps(
   props: (Data & VNodeProps) | null,
 ): (Data & VNodeProps) | null {
   if (!props) return null
-  return isProxy(props) || isInternalObject(props) ? extend({}, props) : props
+  return isProxy(props) || isInternalObject(props)
+    ? extend({}, props)
+    : formatInversionValue(props)
 }
 
 export function cloneVNode<T, U>(
diff --git a/packages/vue/examples/codemeow/useInversionValue.html b/packages/vue/examples/codemeow/useInversionValue.html
new file mode 100644
index 00000000000..c2bc569e7e0
--- /dev/null
+++ b/packages/vue/examples/codemeow/useInversionValue.html
@@ -0,0 +1,43 @@
+<script src="../../dist/vue.global.js"></script>
+<script>
+    const { reactive, computed } = Vue
+
+    const AxisLabel = {
+        template: '<text>{{stat}}</text>',
+        props: {
+            stat: {
+                default: true,
+                type: Boolean
+            },
+        },
+        setup(props) {
+            return {
+
+            }
+        },
+    }
+</script>
+
+
+<div id="demo">
+    <div class="zzz">vvv
+        ---
+        <axis-label !stat></axis-label>
+    </div>
+</div>
+
+<script>
+    const { createApp, ref, watchEffect } = Vue
+    createApp({
+        components: {
+            AxisLabel,
+        },
+        setup() {
+            return {  }
+        },
+    }).mount('#demo')
+</script>
+
+<style>
+
+</style>
\ No newline at end of file

From dc6df3d603b5b3557eb08458db2d908a151b6c60 Mon Sep 17 00:00:00 2001
From: codemeow <2553378438@qq.com>
Date: Tue, 29 Oct 2024 10:27:59 +0800
Subject: [PATCH 2/2] feat(runtime-core): move to the compilation process

---
 packages/compiler-core/src/parser.ts             |  7 ++++++-
 packages/compiler-core/src/tokenizer.ts          |  3 ++-
 packages/runtime-core/src/vnode.ts               | 16 +---------------
 .../vue/examples/codemeow/useInversionValue.html | 16 ++++++++++------
 4 files changed, 19 insertions(+), 23 deletions(-)

diff --git a/packages/compiler-core/src/parser.ts b/packages/compiler-core/src/parser.ts
index 95c5e129f25..fc6d22d6692 100644
--- a/packages/compiler-core/src/parser.ts
+++ b/packages/compiler-core/src/parser.ts
@@ -199,7 +199,7 @@ const tokenizer = new Tokenizer(stack, {
   ondirname(start, end) {
     const raw = getSlice(start, end)
     const name =
-      raw === '.' || raw === ':'
+      raw === '.' || raw === ':' || raw === '!'
         ? 'bind'
         : raw === '@'
           ? 'on'
@@ -353,6 +353,11 @@ const tokenizer = new Tokenizer(stack, {
           }
         } else {
           // directive
+          const { rawName } = currentProp
+          if (rawName && rawName[0] === '!' && currentAttrValue === '') {
+            currentProp.rawName = `:${rawName.slice(1)}`
+            currentAttrValue = 'false'
+          }
           let expParseMode = ExpParseMode.Normal
           if (!__BROWSER__) {
             if (currentProp.name === 'for') {
diff --git a/packages/compiler-core/src/tokenizer.ts b/packages/compiler-core/src/tokenizer.ts
index 329e8b48181..2fada0bcd30 100644
--- a/packages/compiler-core/src/tokenizer.ts
+++ b/packages/compiler-core/src/tokenizer.ts
@@ -668,7 +668,8 @@ export default class Tokenizer {
       c === CharCodes.Dot ||
       c === CharCodes.Colon ||
       c === CharCodes.At ||
-      c === CharCodes.Number
+      c === CharCodes.Number ||
+      c === CharCodes.ExclamationMark
     ) {
       this.cbs.ondirname(this.index, this.index + 1)
       this.state = State.InDirArg
diff --git a/packages/runtime-core/src/vnode.ts b/packages/runtime-core/src/vnode.ts
index 5d65e46e917..30200789be8 100644
--- a/packages/runtime-core/src/vnode.ts
+++ b/packages/runtime-core/src/vnode.ts
@@ -642,25 +642,11 @@ function _createVNode(
   )
 }
 
-// eg. <select :disabled="false"></select> It can be abbreviated as <select !disabled></select>
-function formatInversionValue(props: (Data & VNodeProps) | null) {
-  if (props !== null)
-    Object.keys(props)
-      .filter(key => key[0] === '!')
-      .map(key => {
-        props[key.slice(1)] = false
-        delete props[key]
-      })
-  return props
-}
-
 export function guardReactiveProps(
   props: (Data & VNodeProps) | null,
 ): (Data & VNodeProps) | null {
   if (!props) return null
-  return isProxy(props) || isInternalObject(props)
-    ? extend({}, props)
-    : formatInversionValue(props)
+  return isProxy(props) || isInternalObject(props) ? extend({}, props) : props
 }
 
 export function cloneVNode<T, U>(
diff --git a/packages/vue/examples/codemeow/useInversionValue.html b/packages/vue/examples/codemeow/useInversionValue.html
index c2bc569e7e0..d3215ff630c 100644
--- a/packages/vue/examples/codemeow/useInversionValue.html
+++ b/packages/vue/examples/codemeow/useInversionValue.html
@@ -3,12 +3,16 @@
     const { reactive, computed } = Vue
 
     const AxisLabel = {
-        template: '<text>{{stat}}</text>',
+        template: '<text>{{stat}} {{stat===false}} {{wode}}</text>',
         props: {
             stat: {
                 default: true,
                 type: Boolean
             },
+            wode: {
+                default: false,
+                type: Boolean
+            }
         },
         setup(props) {
             return {
@@ -20,20 +24,20 @@
 
 
 <div id="demo">
-    <div class="zzz">vvv
-        ---
-        <axis-label !stat></axis-label>
+    <div class="zzz">
+        <input type="text" !value>
+        <axis-label !stat :nihao="false" wode></axis-label>
     </div>
 </div>
 
 <script>
-    const { createApp, ref, watchEffect } = Vue
+    const { createApp } = Vue
     createApp({
         components: {
             AxisLabel,
         },
         setup() {
-            return {  }
+            return {}
         },
     }).mount('#demo')
 </script>