es5 transpiling for component library

[lsimone]

We are trying to build a component library with es5 as target transpilation and we like a lot haunted/lit-html approach.

If I do not transpile haunted, it will not work for older browsers. While if I do it through babel/webpack (@babel/preset-env preset), haunted will throw at the beginning the error in the screenshot that I tried to solve through babel-plugin-transform-custom-element-classes without luck. I also tried other approaches but maybe I am missing the point or it's just not feasible.

Is there a way to bundle haunted together with components and authoring such a library? Do you have any suggestion?

EDIT: I start from the scratch and made a PoC project to find the issue. It's currently transpiling in ES5 (and working in Chrome) but (even with Proxy polyfill) I cannot make it run. In the same project there is also a PoC with lit-element, actually working on IE11.

Any idea?

[glomotion]

I too would love to see an es5 compiled build of this. Trying to debug a super strange error coming out Angular-CLI's prod build system right now:

Uncaught ReferenceError: scheduler_BaseScheduler is not defined at ReJ2.render (component.js.pre-build-optimizer.js:4) at Object.ReJ2 (lit-haunted.js.pre-build-optimizer.js:4) at __webpack_require__ (bootstrap:84) at Module.zUnb (main.f48b3f2….js:12869) at __webpack_require__ (bootstrap:84) at Object.0 (main.f48b3f2….js:215) at __webpack_require__ (bootstrap:84) at checkDeferredModules (bootstrap:45) at Array.webpackJsonpCallback [as push] (bootstrap:32) at main.f48b3f2….js:1

So far, I suspect this is because of the es6 imports/exports not being picked up.

[glomotion]

atm im working around it, simply by pre-compiling up haunted before my project's main build step... eg: "compile-haunted": "babel ./node_modules/haunted/lib/*.js --out-dir ./node_modules/haunted/compiled --presets=@babel/preset-env"

[lsimone]

atm im working around it, simply by pre-compiling up haunted before my project's main build step... eg: "compile-haunted": "babel ./node_modules/haunted/lib/*.js --out-dir ./node_modules/haunted/compiled --presets=@babel/preset-env"

so @glomotion you basically import your es5-compiled hauted lib and everything works as expected or you encountered other issues?

import { html, component } from 'haunted/compiled'

[glomotion]

@Isimone correct! I suspect it’s because the webpack terser plug-in doesnt like module code. Atleast that’s my working theory so far.

[lsimone]

I'll give it a try. Thank you for sharing!