[cdrini]

Oh cool, that's very clever! Probably a little too clever for me, though :P I think the code is misleading, and you can't handle classes with hyphens in it (and if you do, that's even more misleading!). But it's a neat application of proxies!

For folks wondering, here's how it would work:

    const htmlClasses = new Proxy({}, {
      get: (target, prop, receiver) => document.querySelector('.' + prop)
    });

    // Get element with class pagetop
    htmlClasses.pagetop;

    const htmlNodes = new Proxy({}, {
      get: (target, prop, receiver) => document.querySelectorAll(prop)
    });

    // Get all h3s
    htmlNodes.h3;

You can run this on hackernews to see it work.

[picaso]

Yes you can definitely argue that it is misleading, but given the alternative I was faced with (React) whose entire world is misleading and unknown, I decided I liked this option better. I write less code, I understand my code more, and it is native hand-written performance. You can also argue that these are all features of JavaScript, and so if you think that is misleading, getters are also misleading because the getter could be doing all kinds of things even though it looks like a standard property access. So it has to be put into perspective with Vue/React/etc, where your code doesn't even correspond to anything and the React engine underneath recreates the dom, diffs it, updates when it wants, etc, and the setState stuff relies on declaration order and all kinds of ridiculous garbage.

Anyway, I just think it is cool kind of for the same reason it is misleading :)

You can do a loop like:

  for (let i = 0; i < 100; i++) {
    const { cool } = divs;
    cool.innerText = new Date();
    document.body.append(cool);
  }

and cool is actually a new div each time, even though you would think it was the same cool from divs (divs.cool). It also caches the div, so it is faster than even if you wrote the manual version with createElement.

I could get rid of it, because my other approach to element creation would is:

  const cool = div({ className: 'cool' });

which isn't too bad, but when I have a lot of divs, it is just nicer to do:

  const {
    root,
    headingContainer,
    userContainer } = divs;

Also, yeah, it actually creates hyphened classes. so headingContainer goes to .heading-container. That is just how I work and so it is a convention.