fix: fix bug #5, @component cannot handle the class fields added to the prototype of the class

Author: Haixing-Hu

src/utils.js

@@ -65,13 +65,15 @@ function collectMethod(obj, key, options) {
     options[key] = obj[key];
   } else {
     const descriptor = Object.getOwnPropertyDescriptor(obj, key);
-    if (descriptor.value) { // deal with class methods
+    if (typeof descriptor.value === 'function') { // deal with class methods
       options.methods[key] = descriptor.value;
-    } else {                // deal with computed properties
+    } else if (descriptor.value === undefined) {  // deal with computed properties
       options.computed[key] = {
         get: descriptor.get,
         set: descriptor.set,
       };
+    } else {                                      // deal with class fields
+      options.fields[key] = descriptor.value;
     }
   }
 }

test/bug-5.test.js

@@ -0,0 +1,47 @@
+/*******************************************************************************
+ *
+ *    Copyright (c) 2022 - 2023.
+ *    Haixing Hu, Qubit Co. Ltd.
+ *
+ *    All rights reserved.
+ *
+ ******************************************************************************/
+import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import { Component, toVue } from '../src';
+
+function AddMessage(target, context) {
+  // add a new field to the target class
+  target.prototype.message = 'Hello';
+}
+
+@Component({
+  template: '<div><div id="value">{{ value }}</div><div id="message">{{ message }}</div></div>',
+})
+@AddMessage
+class Test {
+  value = 123;
+}
+const TestComponent = toVue(Test);
+
+
+describe('bug #5', () => {
+  test('Should handle the class field added to the prototype of the class', async () => {
+    const w1 = mount(TestComponent);
+    const v1 = w1.vm;
+    expect(v1.value).toBe(123);
+    expect(v1.message).toBe('Hello');
+    const w2 = mount(TestComponent);
+    const v2 = w2.vm;
+    expect(v2.value).toBe(123);
+    expect(v2.message).toBe('Hello');
+    v2.message = 'World';
+    expect(v1.message).toBe('Hello');
+    expect(v2.message).toBe('World');
+    await nextTick();
+    const m1 = w1.get('#message');
+    const m2 = w2.get('#message');
+    expect(m1.text()).toBe('Hello');
+    expect(m2.text()).toBe('World');
+  });
+});