Proxies are cool. I use them in github.com/thebinarysearchtree/artwork which I haven't released. That libraries tag line is "you wanted less javascript and more html, so we delivered - artwork, the 100% javascript and css front-end framework". Anyway, I use proxies when I want a bunch of divs with classnames. You just do

  const { container, heading } = divs;

and then container is assigned to an HTMLDivElement <div class="container"></div> and the same type of thing for heading because divs is a proxy for an object with getters that can figure out the name of the variable you are destructing into and create a new element with that class name. It saves a lot of code.

  const container = document.createElement('div'); 
  container.className = 'container';
  const heading = document.createElement('div'); 
  heading.className = 'heading';

The other way you can create elements is just with a common:

  const heading = span({ title: artName, innerText: whatever });

etc so my web components have less code than react components, and run at native hand-written speed. Proxies aren't actually slow despite what I had read via google. In fact, the proxy is a bit faster than the naive implementation because it caches the divs and cloneNodes them.

For the second way of creating elements (the span example), instead of creating a function for every html or svg tag, I use another proxy so you can do:

  const { span, h3 } = html;

and it creates the span and h3 function dynamically. This saves me writing all the code for each tag and allows new tags to be used without me having to add them to the library.

user:	rembrant
created:	February 16, 2022
karma:	7