DEV Community 👩‍💻👨‍💻

Cover image for µCE
artydev
artydev

Posted on

µCE

...µhtml based Custom Elements...

You can test it here : µCE

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

<dev-articles id="devuser" username="artydev" />
Enter fullscreen mode Exit fullscreen mode
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>
      `
  }
});

Enter fullscreen mode Exit fullscreen mode

Top comments (2)

Collapse
 
thepeoplesbourgeois profile image
Josh • Edited on

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

Collapse
 
artydev profile image
artydev

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

Regex for lazy developers

regex for lazy devs

You know who you are. Sorry for the callout 😆