From 5a314821ad228433788d7dbd5bd6ddbdd950ad80 Mon Sep 17 00:00:00 2001 From: caalador Date: Thu, 9 Sep 2021 16:13:16 +0300 Subject: [PATCH] fix: Fixes TypeScript transpilation to ES5 (#11792) Fix the transpilation of TypeScript files to ES5 for use with IE11 Part of #11713 --- .../littemplate/BundleLitParser.java | 7 +++++++ .../internal/LitTemplateParserImplTest.java | 20 +++++++++++++++++++ .../META-INF/VAADIN/config/stats.json | 8 ++++++++ .../flow/server/frontend/NodeUpdater.java | 4 +++- .../src/main/resources/webpack.generated.js | 9 +++++++-- 5 files changed, 45 insertions(+), 3 deletions(-) diff --git a/flow-lit-template/src/main/java/com/vaadin/flow/component/littemplate/BundleLitParser.java b/flow-lit-template/src/main/java/com/vaadin/flow/component/littemplate/BundleLitParser.java index 2c706c28c7c..5866ab8608e 100644 --- a/flow-lit-template/src/main/java/com/vaadin/flow/component/littemplate/BundleLitParser.java +++ b/flow-lit-template/src/main/java/com/vaadin/flow/component/littemplate/BundleLitParser.java @@ -182,6 +182,13 @@ private static String getSourceFromObject(JsonObject module, && validKey(module, SOURCE, STRING)) { String name = module.getString(NAME); + // If the found module is es5 target (e.g. ?babel-target=es6) + // then return the null source so that we continue the + // recursive search through the modules/chunks + if (name.endsWith("es5")) { + return source; + } + String alternativeFileName = fileName // Replace frontend part since webpack entry-point is // already in the frontend folder diff --git a/flow-lit-template/src/test/java/com/vaadin/flow/component/littemplate/internal/LitTemplateParserImplTest.java b/flow-lit-template/src/test/java/com/vaadin/flow/component/littemplate/internal/LitTemplateParserImplTest.java index 691de252910..13061a579ac 100644 --- a/flow-lit-template/src/test/java/com/vaadin/flow/component/littemplate/internal/LitTemplateParserImplTest.java +++ b/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 { diff --git a/flow-lit-template/src/test/resources/META-INF/VAADIN/config/stats.json b/flow-lit-template/src/test/resources/META-INF/VAADIN/config/stats.json index f230f658b30..532181ad07d 100644 --- a/flow-lit-template/src/test/resources/META-INF/VAADIN/config/stats.json +++ b/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

Hello

\n \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([\"
  • \\n \\n \\n \\n \\n \\n

    \\n \\n
    • \"])));\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`
  • \n \n \n \n \n \n

    \n \n
    • `;\n }\n\n};\nImageCard = __decorate([customElement('image-card')], ImageCard);\nexport { ImageCard };" } ] , diff --git a/flow-server/src/main/java/com/vaadin/flow/server/frontend/NodeUpdater.java b/flow-server/src/main/java/com/vaadin/flow/server/frontend/NodeUpdater.java index a13f5aa1d7a..12908ed12dd 100644 --- a/flow-server/src/main/java/com/vaadin/flow/server/frontend/NodeUpdater.java +++ b/flow-server/src/main/java/com/vaadin/flow/server/frontend/NodeUpdater.java @@ -308,10 +308,12 @@ static Map 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"); diff --git a/flow-server/src/main/resources/webpack.generated.js b/flow-server/src/main/resources/webpack.generated.js index ae52db09be2..7da3497e778 100644 --- a/flow-server/src/main/resources/webpack.generated.js +++ b/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()]