handle usage of unregistered custom elements

[thescientist13]

Type of Change

• Enhancement

Summary

Given this custom element definition, where <wcc-navigiation><wcc-navigiation> is used but not included via import

const template = document.createElement('template');

template.innerHTML = `
  <header>
    <h1>Welcome to my website</h1>
    <wcc-navigation></wcc-navigation>
  </header>
`;

class Header extends HTMLElement {
  connectedCallback() {
    if (!this.shadowRoot) {
      this.attachShadow({ mode: 'open' });
      this.shadowRoot.appendChild(template.content.cloneNode(true));
    }
  }
}

export { Header };

customElements.define('wcc-header', Header);

wcc will throw this error

yarn build
yarn run v1.22.17
$ node ./build.js
file:///Users/owenbuckley/Workspace/github/wcc/src/wcc.js:16
      const { moduleURL } = definitions[tagName];
              ^

TypeError: Cannot destructure property 'moduleURL' of 'definitions[tagName]' as it is undefined.
    at renderComponentRoots (file:///Users/owenbuckley/Workspace/github/wcc/src/wcc.js:16:15)
    at async renderComponentRoots (file:///Users/owenbuckley/Workspace/github/wcc/src/wcc.js:26:7)
    at async renderComponentRoots (file:///Users/owenbuckley/Workspace/github/wcc/src/wcc.js:26:7)
    at async renderComponentRoots (file:///Users/owenbuckley/Workspace/github/wcc/src/wcc.js:26:7)
    at async renderToString (file:///Users/owenbuckley/Workspace/github/wcc/src/wcc.js:102:21)
    at async init (file:///Users/owenbuckley/Workspace/github/wcc/build.js:15:20)
error Command failed with exit code 1.

Details

It would be nice for wcc to try and handle this more gracefully, such as:
a) failing with a more friendly error, and produce the tag name, since we at least know that
b) "skipping" over it and showing a warning message in the console

I think b) (or a combination of a + b) is the way to go, and if so, perhaps this information that could also be updated in definitions as part of the returned metadata?

---

As a nice to have, where we are setting new custom elements in definitions, e.g.

definitions[tagName] = ...

We may want to check first ahead of running whatever logic got to that line, as a minimal optimization.