Support for custom elements

[diffcunha]

This PR adds the support for custom components (web components)

~Blocked on: https://github.com/choojs/hyperx/pull/68~

// MyComponent.js

class MyComponent extends HTMLElement {
  connectedCallback () {
    this._shadow = this.attachShadow({ mode: 'open' })
    this._shadow.appendChild(html`<span>Hello ${this.getAttribute('foo')}</span>`)
  }
}

MyComponent.tagName = 'my-component'

// MyParagraph.js

class MyParagraph extends HTMLParagraphElement {
  connectedCallback () {
    this._shadow = this.attachShadow({ mode: 'open' })
    this._shadow.appendChild(html`<strong>${this.children[0]}</strong>`)
  }
}

MyParagraph.tagName = 'my-paragraph'
MyParagraph.options = { extends: 'p' }

// index.js

var tree = html`
  <div>
    <${MyComponent} foo="bar"></${MyComponent}>
    <p is=${MyParagraph}><span>Lorem ipsum</span></p>
  </div>
`

[bcomnes]

Very cool!

[yoshuawuyts]

I'm open to landing this, but in order to do so it would need to include tests for client, server & transforms too. It's a pretty big patch, and I suspect there might be a few rough edges.

[diffcunha]

@yoshuawuyts PR updated, only babel transform is missing. @goto-bus-stop and @AndyOGo pushed a few commits replacing bel with nanohtml on tests. I was doing the same so there might be some weird things to be fixed

[AndyOGo]

@diffcunha Correct I refactored all tests, which where using bel instead of nanohtml. I would suggest you pull and rebase your branch onto master to get the updated stuff.

[diffcunha]

@AndyOGo I rebased already. I have a question: how did you made the require('nanohtml') work in tests? Previously bel was available to be required because it’s a dep of choo and choo is a dep of this project. I had to use pathmodify plugin to provide nanohtml as a relative path.

[AndyOGo]

@diffcunha That's weird. Actually I did nothing... just run npm run test to check if it works, and it worked 🤔

[goto-bus-stop]

@diffcunha the transform output didn't use the main nanohtml import previously, so it didn't matter whether the import path could be resolved.

[diffcunha]

@goto-bus-stop that’s it! Thanks

[diffcunha]

@yoshuawuyts PR updated. The major change here is that transformed code is generated around our createElement only instead of document.createElement and other auxiliary functions. One single implementation rather than 3 separate ones (browserify transform, babel plugin and template string runtime eval)

[goto-bus-stop]

Had to take some time to get used to this massive refactor, but I like the createElement change for sure :+1: appreciate your work on this!

[jmealo]

@goto-bus-stop @diffcunha: Kudos on the team work! Where did we land on this?

[AndyOGo]

@diffcunha @goto-bus-stop @bcomnes @jmealo I just submitted a relatively smaller PR #137 , which just adds support for is attribute (extended build-in elements as defined by custom elements V1 spec), please see #136

I think that should be all which is needed. May I ask you to review it?

[AndyOGo]

PS: I also provided tests 💪