private fields not handled by proxies (f.e. createMutable)

[trusktr]

Describe the bug

import { createMutable } from "solid-js/store";

class MyClass {
  #a = 123
  get a() { return this.#a }
  set a(val) { this.#a = val }

  constructor() {
    return createMutable(this) // comment this out and the example works
  }
}

const o = new MyClass()
console.log(o.a) // runtime error

Your Example Website or App

https://playground.solidjs.com/anonymous/553aed2c-926e-41b6-8684-c63c8122c5db

Steps to Reproduce the Bug or Issue

Run the playground.

Expected behavior

no error, "123" should be logged

Screenshots or Videos

N/A

Platform

N/A

Additional context

Solid's Proxys need to be updated to handle private fields.

[Iceman8911]

Isn't this a js limitation where proxies cannot access private class properties (at least, without very hacky and inconsistent workarounds). I just use private ts properties instead and prefix them with underscores.

[titoBouzout]

The issue is that the getter is being binded to the proxy instead of to the original object, as private properties can only be accessed by the instance that defined it, it throws. (this doesn't match)

To fix, it needs to bind to value here, instead of p

solid/packages/solid/store/src/mutable.ts

Line 120 in a5b51fe

const get = desc[prop].get!.bind(p);

and also the getter will bypass the proxy now, so somehow it need to be wrapped with code that provides the same functionality of the get proxy trap

solid/packages/solid/store/src/mutable.ts

Lines 39 to 60 in a5b51fe

	if (property === $RAW) return target;
	if (property === $PROXY) return receiver;
	if (property === $TRACK) {
	trackSelf(target);
	return receiver;
	}
	const nodes = getNodes(target, $NODE);
	const tracked = nodes[property];
	let value = tracked ? tracked() : target[property];
	if (property === $NODE || property === $HAS || property === "__proto__") return value;
	if (!tracked) {
	const desc = Object.getOwnPropertyDescriptor(target, property);
	const isFunction = typeof value === "function";
	if (getListener() && (!isFunction || target.hasOwnProperty(property)) && !(desc && desc.get))
	value = getNode(nodes, property, value)();
	else if (value != null && isFunction && value === Array.prototype[property as any]) {
	return (...args: unknown[]) =>
	batch(() => Array.prototype[property as any].apply(receiver, args));
	}
	}
	return isWrappable(value) ? wrap(value) : value;