-
-
Notifications
You must be signed in to change notification settings - Fork 81
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Make Color.js proxy-friendly, resolves #305 #306
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@LeaVerou LGTM! I agree that comparing this.id === space.id
isn't ideal... but I can't think of an obviously better alternative?
@@ -57,7 +57,12 @@ export default class ColorSpace { | |||
this.referred = options.referred; | |||
|
|||
// Compute ancestors and store them, since they will never change | |||
this.#path = this.#getPath().reverse(); | |||
Object.defineProperty(this, "path", { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
should this have some @private
jsdoc to let IDEs know they should treat it as private ?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It doesn’t really need to be private, as long as it’s immutable.
This will also close #220 due to not using private methods anymore |
Ok, merging this with a heavy heart 💔 |
@LeaVerou There's a simple way to opt in to being transparent to proxies if you explicitly want that: access private fields by deferring to the actual object, instead of the current value of class Example {
_ = this;
#private = 42;
method() {
console.log(this._.#private);
}
}
let proxiedExample = new Proxy(new Example, {});
console.log(proxiedExample.method()); // 42 That won't solve your problems with Vue specifically because it's not just a simple Proxy - it recursively Proxy's every single property (including But you can interop with Vue specifically with a little more work, if you really want that: import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
function makeVueNotProxyBox(value) {
return {
[Symbol.toStringTag]: 'box', // using a custom toStringTag will prevent Vue from trying to proxy this thing
_: value,
};
}
class Foo {
#bar = 1;
_ = makeVueNotProxyBox(this);
get bar() {
return this._._.#bar;
}
}
createApp({
data() {
return {
foo: new Foo()
}
}
}).mount("#app"); (This assumes you want to make a thing work with Vue without actually depending on Vue. There's easier ways if you're specifically designing Vue components.) |
It's really sad that we have to resort to this. This should be a feature natively supported by JS, instead of having developers take care of it. If I knew private properties would be implemented like this, I'd rather not have them at all and just stick with the good old |
@redzzy30 You have to write code like in my example anyway if you want |
No description provided.