hybrids 26 Oct 2020

Create Web Components with Hybrids

There is a relatively new library called hybrids which, among other things, simplifies the creation of web components. I made my first attempts with it by programming the comment function with it. You can try out the implementation by writing a comment. I would like to know what others think of it.

Here is the implementation of the “PostComment” web component:

<script src="//cdnjs.cloudflare.com/ajax/libs/ramda/0.25.0/ramda.min.js"></script>

<script type="module">
  import {property, define, html} from
    "https://unpkg.com/hybrids@4.3.1/src/index.js"

  const issueUrl = issue =>
    `https://github.com/gwohlgemuth/comments/issues/${issue}`

  const commentsUrl = unit =>
    'https://api.github.com/repos/gwohlgemuth/comments/issues/comments'

  const commentsPromise = R.compose(fetch, commentsUrl)

  const issueNumber = R.compose(Number, R.head, R.reverse, R.split('/'))

  const filterIssueComment = issue => comment =>
    issueNumber(comment.issue_url) === (issue)

  const commentsJson = issue => comments =>
    comments.json().then(interpretJson(issue))

  const commentContentHtml = comment =>
    commentHtml(comment.user.avatar_url)(comment.user.login)(comment.body)

  const filterComments = R.compose(R.filter, filterIssueComment)

  const interpretJson = issue => comments =>
    html`<ul>${R.map(commentContentHtml)(filterComments(issue)(comments))}</ul>`

  const commentHtml = avatar_url => login => body => {
    return html`
<li>
  <div style="display: flex;">
    <img style="margin-right: 10px" src="${avatar_url}" width="20" height="20">
    <div>@${login}</div>
  </div>
  <div ><span>${body}</span></div>
</li>`
  }

  const commentSectionHtml = issue => html`
<div>
  <a href=${issueUrl ( issue )}>Post a comment on Github</a>
  <div>
    ${html.resolve(commentsPromise().then(commentsJson(issue)))}
  </div>
</div>`

  const PostComment = {
    issue : 0
  , render : ({issue}) => commentSectionHtml(issue)
  }

  define('post-comment' , PostComment)
</script>

The implementation is in the file “comment-new.html” and is used in this post as follows:

{% include comment-new.html %}

<post-comment issue=”2”></post-comment>

Issue 2 was thus assigned to the comments