ES classes in dependencies aren't transpiled

[nlundquist]

Reproducible: Always

Description: When using native classes from an NPM dependency (e.g CanJS 6) they're not transpiled even though app modules are transpiled. This is an issue when the app modules include classes that extend the classes from an NPM dependency, e.g:

import ObservableObject from 'can-observable-object';
class Todo extends ObservableObject {
    ...
}
const todo = new Todo();

This will result in an error along the lines of: Uncaught TypeError: Class constructor Child cannot be invoked without 'new'

This is because the ObservableObject class is not transpiled, but the Todo class is transpiled and transpiled classes cannot extend native classes since transpiled classes try to call their base class like a function rather than invoking with new.

It's unclear what the correct solution to this problem is. Depending on the supported browsers for your app one solution may be to prevent class transpilation inside app modules. The other option would be to apply transpilations to NPM dependencies so all classes are transpiled. Both have downsides. Stopping transpilation limits browser support, increasing transpilation increases bundle size and increases dev mode transpilation delays.

[matthewp]

I think the bug here is the way ES classes are transpiled to constructor functions. They are not compatible with ES base classes.

[matthewp]

Otherwise #1276 is needed.

[justinbmeyer]

Could we just avoid classes in our code?

[matthewp]

That wouldn't solve this steal issue, no.

[frank-dspeed]

i have a way to handle that but i need some extra info is Steal's output formart still Systemjs loader compatible or lets say SystemJS compatible when systemjs gets loaded as Steal? @matthewp

[matthewp]

@frank-dspeed Sorry, I don't understand your question. can you rephrase?

[frank-dspeed]

Conclusion

as maybe some people know i am working on stuff like typescript rollup vscode.

• Class should not get automaticly transpiled. Or Needs to get Always Transpiled and WebComponents Polyfill loaded

As WebComponents Pollyfill is big and hugh It is more clever to transpil WebComponents into a other Formart like canjs-view-parser :D

The CanJS way is the most efficent and compatible that still exists. It is a WebComponents Pollyfill it self,