Ive been looking back at one of my favourite library creations, which I still use in my projects and have a whole methodology around it, Reactive CSS Properties, but I want to talk today about a technical aspect of the library which I find very interesting, a little magic but still very cool and imperative.
const BLANK = {};
const getterFactory = new Proxy(BLANK, {
get(tar, prop, value) {
// no matter what return an object
return {
imANewThing: 'woo!'
}
}
});
export { getterFactory };
What we have here is a blank object that ideally you would not reference so it isn't accessible, its just a placeholder, when you access a property like this
import { getterFactory } from 'thinAir';
getterFactory.foo
// or
const { justAboutAnythingYouWant } = getterFactory;
You will always give you a new instance of an object with imANewThing. Thats quite cool if for example you want to conveniently create something in a library. for example in my reactive css properties library:
import rCSSProps from "reactive-css-properties";
// rCSSProps object has no undefined properties and will always yield a class-like callable object.
// The name of your destructured variable is the name of the css variable in snake-case
const { themeTextColor } = rCSSProps();
// insert `--theme-text-color: #000;` into the root element `style` (<html> in this example).
themeTextColor("#000");
// or provide a fallback for browsers which do not support css custom properties
themeTextColor("#000", "#000");
I was just destructuring css custom properties out of nowhere, the rCSSProps is our getter factory and it is a function which can then configure the output of all of the getters.
nice huh?
Well I hope you like the idea and maybe you can think of a sweet web server using something like:
const { homeRoute, someOtherRoute, byeBye } = route('/foo');
homeRoute.get = () => {
}
byeBye;
ps, for the geeks like me, how is this working?
Simple, in any attempt to get any property on our object through ['squareBrackets'], .dotNotaiton or { destructure } we divert the usual return value of the get in the proxy get trap handler thing, and disregard the usual undefined in favour of a value we control.
In a way its like a class in that we instantiate it by proxy, but its actually no different to a regular variable reference.
Top comments (0)