ZjsComponent: A Pragmatic Approach to Reusable UI Fragments for Web Development

> I see what you mean. I do understand the desire to reduce boilerplate. I'd go for a small framework like Lit (I'm sure there are even smaller ones out there) for that but I wouldn't fault anyone for writing their own. I guess, good for you you could get a paper out of it, too. It just doesn't feel particularly novel to warrant one.

I appreciate the sentiment; while this is, indeed, a paper, it is not a published or peer-reviewed paper. I wrote it with no intention of actually publishing it anywhere, and putting it on Arxiv is better long-term than putting it into Github or similar (I expect Arxiv to outlive any code forge).

In much the same way that I looked at web components and thought "What a nice idea. Here is how I can make this incrementally better and support client-side includes as well", I am hoping that this 100-lines of code will someday be looked at by someone else, who will (with the benefit of future knowledge and tech), then say "What a nice idea. Here is how I can make this incrementally better AND support ".

In any case, I thank you for your criticism and your time; your criticism can only make this better (for example, after reading your criticism, I think that showing a side-by-side comparison of my counter example with a custom element doing the same thing will make it more obvious why I find zjs-components more pleasant to write and use than Custom Elements).

Cheers :-)

[EDIT: Here is the comparison, in case you are still curious]

Here is the small comparison; I gave ChatGPT the ZjsComponent README.md and got it to write the example in the README as a custom element web component.

Here are the two implementations:

Implementation as a zjs-component:

    
        Counter Value: 0
    
    
         +1 
         +2 
         +5 
    

    
        function increment(amount) {
            const el = this.querySelector("[name='counter-value']");
            el.textContent = parseInt(el.textContent) + amount;
        }

        exports.increment = increment;
    

Usage of zjs-component:

Implementation as a custom element web component:

    
    
    class CounterComponent extends HTMLElement {
      constructor() {
        super();

        this.attachShadow({ mode: 'open' });

        this.shadowRoot.innerHTML = `
          
            Counter Value: 0
          
          
             +1 
             +2 
             +5 
          
        `;
      }

      connectedCallback() {
        this.shadowRoot.querySelectorAll('button').forEach(btn => {
          btn.addEventListener('click', () => {
            const amount = parseInt(btn.getAttribute('data-amount'), 10);
            this.increment(amount);
          });
        });
      }

      increment(amount) {
        const valueEl = this.shadowRoot.getElementById('counter-value');
        valueEl.textContent = parseInt(valueEl.textContent, 10) + amount;
      }
    }

    customElements.define('counter-component', CounterComponent);
    

Usage of the custom element web component:

I really like what you have done.

I know you are trying to avoid boiler plate but I'm wondering how technically difficult it would be to provide an alternative for those of us who really like named components? Something like:

  
    ZjsComponent.register("counter-component", "counter.zjsc");
  

Then I can just use in the named way, like: