Merge ee22b8a into daa419b

solidjs · Jan 14, 2024 · a3c382f · a3c382f
2 parents daa419b + ee22b8a
commit a3c382f
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 2 deletions.
diff --git a/packages/solid/store/src/mutable.ts b/packages/solid/store/src/mutable.ts
@@ -94,19 +94,35 @@ function wrap<T extends StoreNode>(value: T): T {
     Object.defineProperty(value, $PROXY, { value: (p = new Proxy(value, proxyTraps)) });
     const keys = Object.keys(value),
       desc = Object.getOwnPropertyDescriptors(value);
+
+    const proto = Object.getPrototypeOf(value);
+    const isClass =
+      value !== null &&
+      typeof value === "object" &&
+      !Array.isArray(value) &&
+      proto !== Object.prototype;
+    if (isClass) {
+      const descriptors = Object.getOwnPropertyDescriptors(proto);
+      keys.push(...Object.keys(descriptors));
+      Object.assign(desc, descriptors);
+    }
+
     for (let i = 0, l = keys.length; i < l; i++) {
       const prop = keys[i];
+      if (isClass && prop === "constructor") continue;
       if (desc[prop].get) {
         const get = desc[prop].get!.bind(p);
         Object.defineProperty(value, prop, {
-          get
+          get,
+          configurable: true
         });
       }
       if (desc[prop].set) {
         const og = desc[prop].set!,
           set = (v: T[keyof T]) => batch(() => og.call(p, v));
         Object.defineProperty(value, prop, {
-          set
+          set,
+          configurable: true
         });
       }
     }

diff --git a/packages/solid/store/test/mutableWithClass.spec.tsx b/packages/solid/store/test/mutableWithClass.spec.tsx
@@ -0,0 +1,55 @@
+/**
+ * @jsxImportSource solid-js
+ * @vitest-environment jsdom
+ */
+import { createMutable } from "../src";
+import { render } from "../../web";
+
+describe("Class Operator test", () => {
+  test("read and set class", () => {
+    let ref: any;
+    class D {
+      f = 1;
+      get e() {
+        return this.f * 4;
+      }
+    }
+    class A {
+      a = 1;
+      get b() {
+        return this.a * 4;
+      }
+      child = new D();
+    }
+    let m: any;
+    function Test() {
+      m = createMutable(new A());
+      m.a++;
+      m.child.f++;
+
+      return (
+        <button
+          type="button"
+          onClick={() => {
+            m.a++;
+            m.child.f++;
+          }}
+          ref={ref}
+        >
+          {m.a} - {m.b}
+        </button>
+      );
+    }
+    const div = document.createElement("div");
+
+    render(Test, div);
+    expect(m.b).toBe(8);
+    expect(m.child.e).toBe(8);
+    ref.$$click();
+    expect(m.b).toBe(12);
+    expect(m.child.e).toBe(12);
+    ref.$$click();
+    expect(m.b).toBe(16);
+    expect(m.child.e).toBe(16);
+  });
+});