µCE

artydev - Oct 18 '20 - - Dev Community

...µ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
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Terabox Video Player