µCE

...µhtml based Custom Elements...

You can test it here : µCE

devuser : <input oninput="fetchUserPosts(this.value)"/>

<dev-articles id="devuser" username="artydev" />

import {define, html} from 'https://unpkg.com/uce?module';

const urlDev = (username) =>  
  `https://dev.to/api/articles?username=${username}`

define('dev-articles', {
  callApi: username =>
    fetch(urlDev(username))
      .then(data => data.json()),

  observedAttributes: ['username'],

  async attributeChanged(key, _, value) {
    var posts = await this.callApi(value)
    this.render(posts)
  },

  fetchUser(e) {
     devuser.setAttribute("username", e.target.value)
  },

  render(posts) {
    posts && this.html
      `
        <center style="display:block">
          devUser: <input oninput="${(e) => this.fetchUser(e)}"/>
        </center>
        <ul>
          ${posts.map((t) => html`<li>${t.title}</li>`)}
        </ul>
      `
  }
});

Comments

[Josh]

It regularly astonishes and depresses me, how little traction Andrea Giammarchi's libraries have ever gained.

If every app built in React were using his libraries instead, even the lowest-tier smartphone specs would be able to run most web apps without any issues

[artydev]

Andrea makes awesome works, too good to be true for many.☹️