[JS compiler] remove registerDecorators for non-LightningElement classes

[nolanlawson]

Description

The @lwc/babel-plugin-component generates registerDecorators even for non-LightningElement classes.

Steps to Reproduce

https://webcomponents.dev/edit/MYuFA04EubKHITYFNgQm

Input:

class NotALightningElement {
  foo = 'foo'
}

Output:

class NotALightningElement {
  constructor() {
    this.foo = 'foo';
  }
}

registerDecorators(NotALightningElement, {
  fields: ["foo"]
});

Possible Solution

Potentially we can detect a class without an extends (superclass) and avoid doing registerDecorators on that class.

[uip-robot-zz]

This issue has been linked to a new work item: W-10736098

[nolanlawson]

While we're at it, registerComponent is called for any module that does export default.

[pmdartus]

While we're at it, registerComponent is called for any module that does export default.

This is by design. There is currently no strong signal in the JavaScript code indicating whether a given default export is an LWC component or not. This is the reason why the LWC compiler uses a conservative approach by wrapping all the export default.

Here are a couple of examples we currently support:

class Foo extends LightningElement {}
export Foo;

import BaseComponent from 'x/baseComponent`; // Note: BaseComponent is effectively a class extending from `LightningElement`.
export default class Foo extends BaseComponent {}

[nolanlawson]

I was thinking we could at least skip registerComponent for statically-analyzable obvious cases, like:

export default null

But agreed that we can't know at compile time whether a given export is a LightningElement or not.

Your first example should be export default Foo, right?

[pmdartus]

Your first example should be export default Foo, right?

No, the first example should also be wrapped with registerComponent.

[nolanlawson]

For a convoluted set of reasons, this bug is blocking downstream lightning-components tests from upgrading LWC.

Basically any JS file with a class gets an LWC import, so if you use Jest to mock that class then you'll bring along an entire mocked copy of the LWC engine, which conflicts with the real one and causes:

Unexpected tag name "lightning-datepicker". This name is a registered custom element, preventing LWC to upgrade the element.