Project: Proxies as Variable Environments

Logbook

Wed Dec 27 10:08:45 PST 2023

When I was writing small scripts, like the "generate new post" script which I used to generate this page, I found I wanted more visibility into what my script was doing. Especially while developing or debugging, I wanted to see every time a variable changed. So I used a Proxy (MDN) to make a special store for special variables which would print whenever they were retrieved or set.

<script></script>

Future: I added a way adjust the level and the logger after creation. I also considered a way to set the initial state of the target (where currently I was using a literal empty object); that way one could just create a brand new store with the old initial value, maybe? I had to think more about it.

Future: I added a demo on this page for this proxy store, where I created a special logger which appended to an HTML element, and then a small form to edit the proxy

I also made a custom, functional logger which could be disabled.

<script></script>

As a quick example of how to use these together, here's a transcript from a session with them both:

const logger = createFunctionalLogger() // Will use `console.log`
store = createStore({ level: 2, log: logger.log }) 
store.value = 3 // Logs "Setting 'value' to '3'" 
logger.off()
store.value = 6 // No log
logger.on()
store.value = 8 // Logs "Setting 'value' to '8'"