Automate component registration for JSX components

[eduardolundgren]

It is verbose and error-prone forcing the developer to call ComponentRegistry.register. Ideally, this should be automated by a transpilation step or a runtime operation.

With this change, the component definition will change from this

import {JSXComponent} from 'metal-jsx';
import {ComponentRegistry} from 'metal-component';

class Button extends JSXComponent {
}
ComponentRegistry.register(Button);

to this

import {JSXComponent} from 'metal-jsx';

class Button extends JSXComponent {
}

[yuchi]

I leave my 2¢ here too: component registration is leaky (there’s a single component registry) and should happen exclusively when the developer understands the implications.

[yuchi]

See errors such as:

customElements.define('x-x', class X extends HTMLElement {});
customElements.define('x-x', class X extends HTMLElement {});

Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry

[yuchi]

Hint: it will happen when multiple versions of the same component are loaded in the page.

[eduardolundgren]

@yuchi throw a runtime error if the component is already registered is a good suggestion to make the component registry less "leaky".

[yuchi]

Actually that's what happens already. AFAIK it's in the spec.

[eduardolundgren]

@yuchi I meant, throwing an error on Metal.js component registry, similar to what you described on custom elements. Wasn't that your suggestion?