Hacker News Reader

Comment by dxchester | Hacker News Reader

I also sometimes enjoy this approach of starting from absolutely nothing.

Instead of taking the path of starting with DOM manipulation and then going to a framework as necessary, I've kept really trying to make raw web components work, but kept finding that I wanted just a little bit more.

I managed to get the more I wanted -- sensible template interpolation with event binding -- boiled down to a tag function in 481 bytes / 12 lines of (dense) source code, which I feel like is small enough that you can copy/paste it around and not feel to bad about it. It's here if anyone cares to look: https://github.com/dchester/yhtml

View on HN

An even simpler bit of sugar over the DOM that I embed whenever I need just a little bit of JS:

  function $E(t,p,c) {
      const el=document.createElement(t)
      Object.assign(el,p)
      el.append(...c)
      return el
  }

Usage:

    const button = $E('button', {onclick: () => alert('click!')}, [
        $E('img', {src: '/assets/icon-lightbulb.png'}, []),
        'Ding!',
    ])

(With thanks to 'goranmoomin: https://news.ycombinator.com/item?id=23590750)

Oh, didn’t expect a reference to me at all, was thinking that the function was very similar to mine :)

That function is now in my must-haves in my new Django side projects; I usually overuse them before I finally move to a JSX-based UI library. It’s great for simple DOM manipulation… and for me it seems to create a semi-simple migration path in the case the code gets complex.

Wow! What a coincidence! I literally have something extremely similar which I called `$e`. I think one crucial thing you did not mention is that this conforms to the signature of jsxFactory, meaning if you run some kind of transpiler that supports jsx, you can literally do:

parent.append(<p>Hello</p>);

(Mine has slightly more functionalities, such as allowing passing in styles as a object, auto concatenate array of strings for class names, etc.)

Joining this thread to say that I, too, have written a very similar function and also use jsxFactory to have JSX support in personal projects. I find that using it along with an extremely simple implementation of a kind of state listener[0] produces something really nice for small projects.

It's a bit like a jquery for the '20s.

[0] https://github.com/curlywurlycraig/vdom-util/blob/master/src...

Reply on news.ycombinator.com