Repository: ProjectEvergreen/wcc (js)

Issue:
using template literal backticks as quotes for custom element tag name breaks rendering
## Type of Change

<!-- Delete what does not apply -->
- Bug

## Summary
Using template string \` as quotes for the tag name in `customElements.define` definition  "breaks" the compiler.
```js
customElements.define(`wcc-footer`, Footer);
```

It will come out as it came in, un-serialized in the rendered HTML
```html
<wcc-footer></wcc-footer>
```

## Details
Example
```js
const template = document.createElement('template');

template.innerHTML = `
  <footer class="footer">
    <h4>
      <a href="https://www.greenwoodjs.io/">My Blog &copy;${new Date().getFullYear()} &#9672 Built with GreenwoodJS</a>
    </h4>
  </footer>
`;

class Footer extends HTMLElement {
  connectedCallback() {
    if (!this.shadowRoot) {
      this.attachShadow({ mode: 'open' });
      this.shadowRoot.appendChild(template.content.cloneNode(true));
    }
  }
}

export default Footer;

customElements.define(`wcc-footer`, Footer);
```

----

FWIW, double quotes work fine
```js
const template = document.createElement('template');

template.innerHTML = `
  <footer class="footer">
    <h4>
      <a href="https://www.greenwoodjs.io/">My Blog &copy;${new Date().getFullYear()} &#9672 Built with GreenwoodJS</a>
    </h4>
  </footer>
`;

class Footer extends HTMLElement {
  connectedCallback() {
    if (!this.shadowRoot) {
      this.attachShadow({ mode: 'open' });
      this.shadowRoot.appendChild(template.content.cloneNode(true));
    }
  }
}

export default Footer;

customElements.define("wcc-footer", Footer);
```

Pull request description:
check for literals vs template literal for tag name quotes in `customElements.define` call
…lements.define calls

<!--
## Submitting a Pull Request
We love contributions and appreciate any help you can offer!
-->

## Related Issue
resolves #97 

## Summary of Changes
1. Check for `Literal` vs `TemplateLiteral` when serializing custom elements tags
1. Add test case

Patch:
diff --git a/src/wcc.js b/src/wcc.js
index 018fab7..2419323 100644
--- a/src/wcc.js
+++ b/src/wcc.js
@@ -85,7 +85,9 @@ function registerDependencies(moduleURL, definitions, depth = 0) {
     ExpressionStatement(node) {
       if (isCustomElementDefinitionNode(node)) {
         const { arguments: args } = node.expression;
-        const tagName = args[0].value;
+        const tagName = args[0].type === 'Literal'
+          ? args[0].value // single and double quotes
+          : args[0].quasis[0].value.raw; // template literal
         const tree = parseJsx(moduleURL);
         const isEntry = nextDepth - 1 === 1;
 


Test patch:
diff --git a/test/cases/nested-elements/src/components/footer.js b/test/cases/nested-elements/src/components/footer.js
index e058c3c..5174a69 100644
--- a/test/cases/nested-elements/src/components/footer.js
+++ b/test/cases/nested-elements/src/components/footer.js
@@ -19,4 +19,4 @@ class Footer extends HTMLElement {
 
 export default Footer;
 
-customElements.define('wcc-footer', Footer);
\ No newline at end of file
+customElements.define(`wcc-footer`, Footer); // eslint-disable-line quotes
\ No newline at end of file