fix: Fixes TypeScript transpilation to ES5

flow-lit-template/src/main/java/com/vaadin/flow/component/littemplate/BundleLitParser.java

@@ -182,6 +182,11 @@ private static String getSourceFromObject(JsonObject module,
                 && validKey(module, SOURCE, STRING)) {
             String name = module.getString(NAME);
 
+            // If the found module is
+            if (name.endsWith("es5")) {
+                return source;
+            }
+
             String alternativeFileName = fileName
                     // Replace frontend part since webpack entry-point is
                     // already in the frontend folder

flow-lit-template/src/test/java/com/vaadin/flow/component/littemplate/internal/LitTemplateParserImplTest.java

@@ -265,6 +265,26 @@ public void severalJsModuleAnnotations_parserSelectsByName() {
                         "Tag name doesn't match the JS module name")));
     }
 
+    @Test
+    public void es5Andes6Sources_getsCorrectlyEs6Source() {
+
+        LitTemplateParser instance = LitTemplateParserImpl.getInstance();
+        LitTemplateParser.TemplateData templateContent = instance.getTemplateContent(
+                ImageCard.class, "image-card", service);
+
+        Assert.assertNotNull(
+                "ES5 was selected from which template content can not be parsed",
+                templateContent);
+        Assert.assertEquals("Parent element ID not the expected one.",
+                "image-card",
+                templateContent.getTemplateElement().parent().id());
+    }
+
+    @Tag("image-card")
+    @JsModule("./image-card.ts")
+    public class ImageCard extends LitTemplate {
+    }
+
     @Tag("my-element")
     @JsModule("./frontend/MyLitElement.js")
     public class MyLitElement extends LitTemplate {

flow-lit-template/src/test/resources/META-INF/VAADIN/config/stats.json

@@ -21,6 +21,14 @@
           "id": "./frontend/my-form.ts",
           "name": "./frontend/my-form.ts",
           "source": "import { html, LitElement } from 'lit-element';\r\n// @customElement(\"my-form\")\r\nexport class MyFormElement extends LitElement {\r\n    render() {\r\n        return html `\n      <h2>Hello</h2>\n      <vaadin-text-field id=\"nameField\"></vaadin-text-field>\n    `;\r\n    }\r\n}\r\ncustomElements.define(\"my-form\", MyFormElement);\r\n"
+        },
+        {
+          "name": "./image-card.ts?babel-target=es5",
+          "source": "import _taggedTemplateLiteral from \"@babel/runtime/helpers/taggedTemplateLiteral\";\nimport _classCallCheck from \"@babel/runtime/helpers/classCallCheck\";\nimport _createClass from \"@babel/runtime/helpers/createClass\";\nimport _inherits from \"@babel/runtime/helpers/inherits\";\nimport _possibleConstructorReturn from \"@babel/runtime/helpers/possibleConstructorReturn\";\nimport _getPrototypeOf from \"@babel/runtime/helpers/getPrototypeOf\";\nimport _typeof from \"@babel/runtime/helpers/typeof\";\n\nvar _templateObject;\n\nfunction _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }\n\nfunction _isNativeReflectConstruct() { if (typeof Reflect === \"undefined\" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === \"function\") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }\n\nvar __decorate = this && this.__decorate || function (decorators, target, key, desc) {\n  var c = arguments.length,\n      r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,\n      d;\n  if ((typeof Reflect === \"undefined\" ? \"undefined\" : _typeof(Reflect)) === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) {\n    if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n  }\n  return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\n\nimport { html, LitElement, customElement } from 'lit-element';\nimport '@vaadin/vaadin-ordered-layout/vaadin-horizontal-layout';\nimport '@vaadin/vaadin-ordered-layout/vaadin-vertical-layout';\nimport '@vaadin/vaadin-select';\n\nvar ImageCard = /*#__PURE__*/function (_LitElement) {\n  _inherits(ImageCard, _LitElement);\n\n  var _super = _createSuper(ImageCard);\n\n  function ImageCard() {\n    _classCallCheck(this, ImageCard);\n\n    return _super.apply(this, arguments);\n  }\n\n  _createClass(ImageCard, [{\n    key: \"createRenderRoot\",\n    value: function createRenderRoot() {\n      // Do not use a shadow root\n      return this;\n    }\n  }, {\n    key: \"render\",\n    value: function render() {\n      return html(_templateObject || (_templateObject = _taggedTemplateLiteral([\"<li class=\\\"bg-contrast-5 flex flex-col items-start p-m rounded-l\\\">\\n      <div\\n        class=\\\"bg-contrast flex items-center justify-center mb-m overflow-hidden rounded-m w-full\\\"\\n        style=\\\"height: 160px;\\\"\\n      >\\n        <img id=\\\"image\\\" class=\\\"w-full\\\" />\\n      </div>\\n      <span class=\\\"text-xl font-semibold\\\" id=\\\"header\\\"></span>\\n      <span class=\\\"text-s text-secondary\\\" id=\\\"subtitle\\\"></span>\\n      <p class=\\\"my-m\\\" id=\\\"text\\\"></p>\\n      <span theme=\\\"badge\\\" id=\\\"badge\\\"></span>\\n    </li> \"])));\n    }\n  }]);\n\n  return ImageCard;\n}(LitElement);\n\nImageCard = __decorate([customElement('image-card')], ImageCard);\nexport { ImageCard };"
+        },
+        {
+          "name": "./image-card.ts?babel-target=es6",
+          "source": "var __decorate = this && this.__decorate || function (decorators, target, key, desc) {\n  var c = arguments.length,\n      r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,\n      d;\n  if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) {\n    if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n  }\n  return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\n\nimport { html, LitElement, customElement } from 'lit-element';\nimport '@vaadin/vaadin-ordered-layout/vaadin-horizontal-layout';\nimport '@vaadin/vaadin-ordered-layout/vaadin-vertical-layout';\nimport '@vaadin/vaadin-select';\nvar ImageCard = class ImageCard extends LitElement {\n  createRenderRoot() {\n    // Do not use a shadow root\n    return this;\n  }\n\n  render() {\n    return html`<li class=\"bg-contrast-5 flex flex-col items-start p-m rounded-l\">\n      <div\n        class=\"bg-contrast flex items-center justify-center mb-m overflow-hidden rounded-m w-full\"\n        style=\"height: 160px;\"\n      >\n        <img id=\"image\" class=\"w-full\" />\n      </div>\n      <span class=\"text-xl font-semibold\" id=\"header\"></span>\n      <span class=\"text-s text-secondary\" id=\"subtitle\"></span>\n      <p class=\"my-m\" id=\"text\"></p>\n      <span theme=\"badge\" id=\"badge\"></span>\n    </li> `;\n  }\n\n};\nImageCard = __decorate([customElement('image-card')], ImageCard);\nexport { ImageCard };"
         }
       ]
       ,

flow-server/src/main/java/com/vaadin/flow/server/frontend/NodeUpdater.java

@@ -308,10 +308,12 @@ static Map<String, String> getDefaultDevDependencies() {
         defaults.put("webpack", "4.42.0");
         defaults.put("webpack-cli", "3.3.11");
         defaults.put("webpack-dev-server", "3.11.0");
-        defaults.put("webpack-babel-multi-target-plugin", "2.3.3");
+        defaults.put("webpack-babel-multi-target-plugin", "2.5.0");
         // Defining loader until a resolution exists to issue
         // https://github.com/DanielSchaffer/webpack-babel-multi-target-plugin/issues/94
         defaults.put("babel-loader", "8.2.2");
+        // Defining html-webpack-plugin due to same issue as babel-loader
+        defaults.put("html-webpack-plugin", "4.5.2");
         defaults.put("copy-webpack-plugin", "5.1.2");
         defaults.put("compression-webpack-plugin", "4.0.1");
         defaults.put("extra-watch-webpack-plugin", "1.0.3");

flow-server/src/main/resources/webpack.generated.js

@@ -181,10 +181,15 @@ module.exports = {
 
   module: {
     rules: [
-      {
+      ...(transpile ? [
+        {
+        test: /\.tsx?$/,
+        use: [ BabelMultiTargetPlugin.loader(), 'ts-loader' ],
+      }
+      ] : [{
         test: /\.tsx?$/,
         use: ['ts-loader']
-      },
+      }]),
       ...(transpile ? [{ // Files that Babel has to transpile
         test: /\.js$/,
         use: [BabelMultiTargetPlugin.loader()]