From 45190cc870b1a916ccd63386d8f6cce11a8c1a30 Mon Sep 17 00:00:00 2001
From: CodeBear <249900679@qq.com>
Date: Wed, 29 Sep 2021 17:14:43 +0800
Subject: [PATCH 1/3] Fixed createDecorator

---
 example/src/App.vue             | 12 ++++-
 example/src/Base.vue            | 17 +++++++
 example/src/Comp.vue            | 24 ++++++++++
 example/src/Comp2.vue           | 24 ++++++++++
 example/src/decorators/Watch.ts | 20 +++++++++
 src/helpers.ts                  |  8 ++--
 src/vue.ts                      | 11 ++++-
 yarn.lock                       | 78 +++++++--------------------------
 8 files changed, 125 insertions(+), 69 deletions(-)
 create mode 100644 example/src/Base.vue
 create mode 100644 example/src/Comp.vue
 create mode 100644 example/src/Comp2.vue
 create mode 100644 example/src/decorators/Watch.ts

diff --git a/example/src/App.vue b/example/src/App.vue
index 5dce398..d641197 100644
--- a/example/src/App.vue
+++ b/example/src/App.vue
@@ -5,6 +5,8 @@
     <p>msg: {{ msg }}</p>
     <p>helloMsg: {{ helloMsg }}</p>
     <p>computed msg: {{ computedMsg }}</p>
+    <comp />
+    <comp2 />
     <p>
       <button @click="greet">Greet</button>
     </p>
@@ -12,12 +14,20 @@
 </template>
 
 <script lang="ts">
-import { Vue } from '../../src'
+import { Vue, Options } from '../../src'
+import Comp from './Comp.vue'
+import Comp2 from './Comp2.vue'
 
 class Props {
   propMessage!: string
 }
 
+@Options({
+  components: {
+    Comp,
+    Comp2
+  }
+})
 export default class App extends Vue.with(Props) {
   // inital data
   msg: number = 123
diff --git a/example/src/Base.vue b/example/src/Base.vue
new file mode 100644
index 0000000..1577fc9
--- /dev/null
+++ b/example/src/Base.vue
@@ -0,0 +1,17 @@
+<script lang="ts">
+import { Vue } from '../../src'
+import { Watch } from './decorators/Watch'
+
+export default class Base extends Vue {
+
+  public config = {
+    name: 'name',
+    value: 'value'
+  }
+
+  @Watch('config.name')
+  public onNameChangeBase() {
+    console.log('Base name change==>', this.config.value)
+  }
+}
+</script>
diff --git a/example/src/Comp.vue b/example/src/Comp.vue
new file mode 100644
index 0000000..a815317
--- /dev/null
+++ b/example/src/Comp.vue
@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <p @click="changeName">comp: Comp1</p>
+    <p>name: {{ config.name }}</p>
+    <p>value: {{ config.value }}</p>
+  </div>
+</template>
+
+<script lang="ts">
+import Base from './Base.vue'
+import { Watch } from './decorators/Watch'
+
+export default class Comp extends Base {
+
+  @Watch('config.name')
+  public onNameChange() {
+    console.log('Comp1 name change==>', this.config.name)
+  }
+
+  public changeName() {
+    this.config.name = Math.random() + ''
+  }
+}
+</script>
diff --git a/example/src/Comp2.vue b/example/src/Comp2.vue
new file mode 100644
index 0000000..d32af58
--- /dev/null
+++ b/example/src/Comp2.vue
@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <p @click="changeName">comp: Comp2</p>
+    <p>name: {{ config.name }}</p>
+    <p>value: {{ config.value }}</p>
+  </div>
+</template>
+
+<script lang="ts">
+import Base from './Base.vue'
+import { Watch } from './decorators/Watch'
+
+export default class Comp2 extends Base {
+
+  @Watch('config.name')
+  public onNameChange() {
+    console.log('Comp2 name change==>', this.config.name)
+  }
+
+  public changeName() {
+    this.config.name = Math.random() + ''
+  }
+}
+</script>
diff --git a/example/src/decorators/Watch.ts b/example/src/decorators/Watch.ts
new file mode 100644
index 0000000..d68d833
--- /dev/null
+++ b/example/src/decorators/Watch.ts
@@ -0,0 +1,20 @@
+import { WatchOptions } from 'vue'
+import { createDecorator, VueDecorator } from '../../../src'
+
+/**
+ * Decorator for watch options
+ * @param path the path or the expression to observe
+ * @param watchOptions
+ */
+export function Watch(path: string, watchOptions?: WatchOptions): VueDecorator {
+    return createDecorator((componentOptions, handler) => {
+        componentOptions.watch ||= Object.create(null)
+        const watch: any = componentOptions.watch
+        if (typeof watch[path] === 'object' && !Array.isArray(watch[path])) {
+            watch[path] = [watch[path]]
+        } else if (typeof watch[path] === 'undefined') {
+            watch[path] = []
+        }
+        watch[path].push({ handler, ...watchOptions })
+    })
+}
\ No newline at end of file
diff --git a/src/helpers.ts b/src/helpers.ts
index b6265c7..cf7bba7 100644
--- a/src/helpers.ts
+++ b/src/helpers.ts
@@ -33,14 +33,14 @@ export function createDecorator(
     const Ctor =
       typeof target === 'function'
         ? target
-        : (target.constructor as VueConstructor)
-    if (!Ctor.__d) {
-      Ctor.__d = []
+        : (target as any as VueConstructor)
+    if (!Ctor.hasOwnProperty('__d')) {
+      Object.defineProperty(Ctor, '__d', {value: []})
     }
     if (typeof index !== 'number') {
       index = undefined
     }
-    Ctor.__d.push((options) => factory(options, key, index))
+    Ctor?.__d?.push((options) => factory(options, key, index))
   }
 }
 
diff --git a/src/vue.ts b/src/vue.ts
index 8483e65..dca6ec6 100644
--- a/src/vue.ts
+++ b/src/vue.ts
@@ -296,7 +296,15 @@ class VueImpl {
       return promise ?? plainData
     }
 
-    const decorators = getOwn(Ctor, '__d')
+    let decorators = getOwn(Ctor, '__d')
+    if (!decorators) {
+      decorators = []
+    }
+    let parent = (Ctor as any).prototype
+    while(parent) {
+      decorators.push(...(parent?.__d || []))
+      parent = parent.prototype
+    }
     if (decorators) {
       decorators.forEach((fn) => fn(options))
     }
@@ -315,7 +323,6 @@ class VueImpl {
         options[key] = (Ctor as any)[key]
       }
     })
-
     return options
   }
 
diff --git a/yarn.lock b/yarn.lock
index 3206300..ddbce38 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1352,11 +1352,6 @@
   dependencies:
     "@sinonjs/commons" "^1.7.0"
 
-"@types/anymatch@*":
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/@types/anymatch/-/anymatch-1.3.1.tgz#336badc1beecb9dacc38bea2cf32adf627a8421a"
-  integrity sha512-/+CRPXpBDpo2RK9C68N3b2cOvO0Cf5B9aPijHsoDQTHivnGSObdOF2BRQOYjojWTDy6nQvMjmqRXIxH55VjxxA==
-
 "@types/argparse@1.0.38":
   version "1.0.38"
   resolved "https://registry.yarnpkg.com/@types/argparse/-/argparse-1.0.38.tgz#a81fd8606d481f873a3800c6ebae4f1d768a56a9"
@@ -1447,13 +1442,6 @@
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.6.tgz#f4c7ec43e81b319a9815115031709f26987891f0"
   integrity sha512-3c+yGKvVP5Y9TYBEibGNR+kLtijnj7mYrXRg+WpFb2X9xm04g/DXYkfg4hmzJQosc9snFNUPkbYIhu+KAm6jJw==
 
-"@types/mini-css-extract-plugin@^0.9.1":
-  version "0.9.1"
-  resolved "https://registry.yarnpkg.com/@types/mini-css-extract-plugin/-/mini-css-extract-plugin-0.9.1.tgz#d4bdde5197326fca039d418f4bdda03dc74dc451"
-  integrity sha512-+mN04Oszdz9tGjUP/c1ReVwJXxSniLd7lF++sv+8dkABxVNthg6uccei+4ssKxRHGoMmPxdn7uBdJWONSJGTGQ==
-  dependencies:
-    "@types/webpack" "*"
-
 "@types/minimist@^1.2.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@types/minimist/-/minimist-1.2.0.tgz#69a23a3ad29caf0097f06eda59b361ee2f0639f6"
@@ -1479,49 +1467,11 @@
   resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.1.0.tgz#5f96562c1075ee715a5b138f0b7f591c1f40f6b8"
   integrity sha512-hiYA88aHiEIgDmeKlsyVsuQdcFn3Z2VuFd/Xm/HCnGnPD8UFU5BM128uzzRVVGEzKDKYUrRsRH9S2o+NUy/3IA==
 
-"@types/source-list-map@*":
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/@types/source-list-map/-/source-list-map-0.1.2.tgz#0078836063ffaf17412349bba364087e0ac02ec9"
-  integrity sha512-K5K+yml8LTo9bWJI/rECfIPrGgxdpeNbj+d53lwN4QjW1MCwlkhUms+gtdzigTeUyBr09+u8BwOIY3MXvHdcsA==
-
 "@types/stack-utils@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
   integrity sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw==
 
-"@types/tapable@*":
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-1.0.6.tgz#a9ca4b70a18b270ccb2bc0aaafefd1d486b7ea74"
-  integrity sha512-W+bw9ds02rAQaMvaLYxAbJ6cvguW/iJXNT6lTssS1ps6QdrMKttqEAMEG/b5CR8TZl3/L7/lH0ZV5nNR1LXikA==
-
-"@types/uglify-js@*":
-  version "3.9.3"
-  resolved "https://registry.yarnpkg.com/@types/uglify-js/-/uglify-js-3.9.3.tgz#d94ed608e295bc5424c9600e6b8565407b6b4b6b"
-  integrity sha512-KswB5C7Kwduwjj04Ykz+AjvPcfgv/37Za24O2EDzYNbwyzOo8+ydtvzUfZ5UMguiVu29Gx44l1A6VsPPcmYu9w==
-  dependencies:
-    source-map "^0.6.1"
-
-"@types/webpack-sources@*":
-  version "1.4.2"
-  resolved "https://registry.yarnpkg.com/@types/webpack-sources/-/webpack-sources-1.4.2.tgz#5d3d4dea04008a779a90135ff96fb5c0c9e6292c"
-  integrity sha512-77T++JyKow4BQB/m9O96n9d/UUHWLQHlcqXb9Vsf4F1+wKNrrlWNFPDLKNT92RJnCSL6CieTc+NDXtCVZswdTw==
-  dependencies:
-    "@types/node" "*"
-    "@types/source-list-map" "*"
-    source-map "^0.7.3"
-
-"@types/webpack@*":
-  version "4.41.22"
-  resolved "https://registry.yarnpkg.com/@types/webpack/-/webpack-4.41.22.tgz#ff9758a17c6bd499e459b91e78539848c32d0731"
-  integrity sha512-JQDJK6pj8OMV9gWOnN1dcLCyU9Hzs6lux0wBO4lr1+gyEhIBR9U3FMrz12t2GPkg110XAxEAw2WHF6g7nZIbRQ==
-  dependencies:
-    "@types/anymatch" "*"
-    "@types/node" "*"
-    "@types/tapable" "*"
-    "@types/uglify-js" "*"
-    "@types/webpack-sources" "*"
-    source-map "^0.6.0"
-
 "@types/yargs-parser@*":
   version "15.0.0"
   resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-15.0.0.tgz#cb3f9f741869e20cce330ffbeb9271590483882d"
@@ -3046,6 +2996,13 @@ create-hmac@^1.1.0, create-hmac@^1.1.4, create-hmac@^1.1.7:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
+cross-env@^7.0.3:
+  version "7.0.3"
+  resolved "https://registry.nlark.com/cross-env/download/cross-env-7.0.3.tgz?cache=0&sync_timestamp=1622605224328&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fcross-env%2Fdownload%2Fcross-env-7.0.3.tgz#865264b29677dc015ba8418918965dd232fc54cf"
+  integrity sha1-hlJkspZ33AFbqEGJGJZd0jL8VM8=
+  dependencies:
+    cross-spawn "^7.0.1"
+
 cross-spawn@^6.0.0, cross-spawn@^6.0.5:
   version "6.0.5"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
@@ -3057,10 +3014,10 @@ cross-spawn@^6.0.0, cross-spawn@^6.0.5:
     shebang-command "^1.2.0"
     which "^1.2.9"
 
-cross-spawn@^7.0.0:
+cross-spawn@^7.0.0, cross-spawn@^7.0.1:
   version "7.0.3"
-  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
-  integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
+  resolved "https://registry.nlark.com/cross-spawn/download/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
+  integrity sha1-9zqFudXUHQRVUcF34ogtSshXKKY=
   dependencies:
     path-key "^3.1.0"
     shebang-command "^2.0.0"
@@ -8116,17 +8073,14 @@ vm-browserify@^1.0.1:
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
   integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
 
-vue-loader@^16.0.0-beta.5:
-  version "16.0.0-beta.7"
-  resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-16.0.0-beta.7.tgz#6f2726fa0e2b1fbae67895c47593bbf69f2b9ab8"
-  integrity sha512-xQ8/GZmRPdQ3EinnE0IXwdVoDzh7Dowo0MowoyBuScEBXrRabw6At5/IdtD3waKklKW5PGokPsm8KRN6rvQ1cw==
+vue-loader@^16.1.1:
+  version "16.8.1"
+  resolved "https://registry.npmmirror.com/vue-loader/download/vue-loader-16.8.1.tgz#354f12bc0897954158b71590f800295713a7792d"
+  integrity sha1-NU8SvAiXlUFYtxWQ+AApVxOneS0=
   dependencies:
-    "@types/mini-css-extract-plugin" "^0.9.1"
-    chalk "^3.0.0"
+    chalk "^4.1.0"
     hash-sum "^2.0.0"
-    loader-utils "^1.2.3"
-    merge-source-map "^1.1.0"
-    source-map "^0.6.1"
+    loader-utils "^2.0.0"
 
 vue@^3.0.0:
   version "3.0.0"

From 596d0a7f58fa9c7f1d01fedc397041c4e4f51587 Mon Sep 17 00:00:00 2001
From: CodeBear <249900679@qq.com>
Date: Wed, 29 Sep 2021 18:23:25 +0800
Subject: [PATCH 2/3] fix

---
 src/helpers.ts | 12 ++++++++----
 src/vue.ts     |  8 --------
 2 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/src/helpers.ts b/src/helpers.ts
index cf7bba7..23f926f 100644
--- a/src/helpers.ts
+++ b/src/helpers.ts
@@ -33,14 +33,18 @@ export function createDecorator(
     const Ctor =
       typeof target === 'function'
         ? target
-        : (target as any as VueConstructor)
-    if (!Ctor.hasOwnProperty('__d')) {
-      Object.defineProperty(Ctor, '__d', {value: []})
+        : (target.constructor as VueConstructor)
+    if (!Ctor.__d) {
+      Ctor.__d = []
+      ;(Ctor.__d as any).__n = Ctor.name
+    } else if ((Ctor.__d as any).__n !== Ctor.name){
+      Ctor.__d = [].concat(Ctor.__d as [])
+      ;(Ctor.__d as any).__n = Ctor.name
     }
     if (typeof index !== 'number') {
       index = undefined
     }
-    Ctor?.__d?.push((options) => factory(options, key, index))
+    Ctor.__d.push((options) => factory(options, key, index))
   }
 }
 
diff --git a/src/vue.ts b/src/vue.ts
index dca6ec6..7189035 100644
--- a/src/vue.ts
+++ b/src/vue.ts
@@ -297,14 +297,6 @@ class VueImpl {
     }
 
     let decorators = getOwn(Ctor, '__d')
-    if (!decorators) {
-      decorators = []
-    }
-    let parent = (Ctor as any).prototype
-    while(parent) {
-      decorators.push(...(parent?.__d || []))
-      parent = parent.prototype
-    }
     if (decorators) {
       decorators.forEach((fn) => fn(options))
     }

From a529c91b66474313fac504967b21dc025d1fea79 Mon Sep 17 00:00:00 2001
From: CodeBear <249900679@qq.com>
Date: Thu, 30 Sep 2021 10:15:32 +0800
Subject: [PATCH 3/3] Fixed createDecorator

---
 src/vue.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/vue.ts b/src/vue.ts
index 7189035..233f9a5 100644
--- a/src/vue.ts
+++ b/src/vue.ts
@@ -296,7 +296,7 @@ class VueImpl {
       return promise ?? plainData
     }
 
-    let decorators = getOwn(Ctor, '__d')
+    const decorators = getOwn(Ctor, '__d')
     if (decorators) {
       decorators.forEach((fn) => fn(options))
     }