From e17f3e7494a3a2ac8c773b2c07e2722de23ad7a3 Mon Sep 17 00:00:00 2001 From: Andrii V Date: Fri, 14 Nov 2025 12:56:54 +0100 Subject: [PATCH] Migrated 3 components, set Lit version 2 for babel 6 compatibility, added regenerator-runtime for reverse compatibility --- .babelrc | 3 +- grunt_config.json | 2 - package-lock.json | 170 +++++++- package.json | 6 + rhodecode/public/js/src/components/index.js | 1 + .../rhodecode-favicon/rhodecode-favicon.js | 53 ++- .../rhodecode-toast/rhodecode-toast.js | 412 +++++++++--------- .../rhodecode-unsafe-html.js | 44 +- webpack.config.js | 12 +- 9 files changed, 436 insertions(+), 267 deletions(-) diff --git a/.babelrc b/.babelrc index 016c1bf2..3867b0cb 100644 --- a/.babelrc +++ b/.babelrc @@ -7,7 +7,8 @@ "browsers": [ "last 2 versions" ] - } + }, + "exclude": ["transform-es2015-classes"] } ] ], diff --git a/grunt_config.json b/grunt_config.json index 77f19187..36b4eae7 100644 --- a/grunt_config.json +++ b/grunt_config.json @@ -156,7 +156,6 @@ "tasks": [ "less:development", "less:components", - "concat:polymercss", "webpack", "concat:dist" ] @@ -169,7 +168,6 @@ ], "tasks": [ "less:components", - "concat:polymercss", "webpack", "concat:dist" ] diff --git a/package-lock.json b/package-lock.json index f0d9d3d8..58902820 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,10 @@ "name": "rhodecode-enterprise", "version": "5.1.0", "license": "SEE LICENSE IN LICENSE.txt", + "dependencies": { + "lit": "^2.8.0", + "regenerator-runtime": "^0.13.9" + }, "devDependencies": { "@polymer/iron-a11y-keys": "^3.0.0", "@polymer/iron-ajax": "^3.0.0", @@ -21,6 +25,8 @@ "@webcomponents/webcomponentsjs": "^2.0.0", "babel-core": "^6.26.3", "babel-loader": "^7.1.2", + "babel-plugin-syntax-class-properties": "^6.13.0", + "babel-plugin-transform-class-properties": "^6.24.1", "babel-plugin-transform-object-rest-spread": "^6.26.0", "babel-preset-env": "^1.6.0", "clipboard": "^2.0.1", @@ -58,6 +64,21 @@ "webpack-uglify-js-plugin": "^1.1.9" } }, + "node_modules/@lit-labs/ssr-dom-shim": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.4.0.tgz", + "integrity": "sha512-ficsEARKnmmW5njugNYKipTm4SFnbik7CXtoencDZzmzo/dQ+2Q0bgkzJuoJP20Aj0F+izzJjOqsnkd6F/o1bw==", + "license": "BSD-3-Clause" + }, + "node_modules/@lit/reactive-element": { + "version": "1.6.3", + "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.6.3.tgz", + "integrity": "sha512-QuTgnG52Poic7uM1AN5yJ09QMe0O28e10XzSvWDz02TJiiKee4stsiownEIadWm8nYzyDAyT+gKzUoZmiWQtsQ==", + "license": "BSD-3-Clause", + "dependencies": { + "@lit-labs/ssr-dom-shim": "^1.0.0" + } + }, "node_modules/@polymer/font-roboto": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/@polymer/font-roboto/-/font-roboto-3.0.2.tgz", @@ -320,6 +341,12 @@ "@types/node": "*" } }, + "node_modules/@types/trusted-types": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz", + "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==", + "license": "MIT" + }, "node_modules/@webassemblyjs/ast": { "version": "1.7.10", "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.7.10.tgz", @@ -1225,6 +1252,13 @@ "integrity": "sha512-4Zp4unmHgw30A1eWI5EpACji2qMocisdXhAftfhXoSV9j0Tvj6nRFE3tOmRY912E0FMRm/L5xWE7MGVT2FoLnw==", "dev": true }, + "node_modules/babel-plugin-syntax-class-properties": { + "version": "6.13.0", + "resolved": "https://registry.npmjs.org/babel-plugin-syntax-class-properties/-/babel-plugin-syntax-class-properties-6.13.0.tgz", + "integrity": "sha512-chI3Rt9T1AbrQD1s+vxw3KcwC9yHtF621/MacuItITfZX344uhQoANjpoSJZleAmW2tjlolqB/f+h7jIqXa7pA==", + "dev": true, + "license": "MIT" + }, "node_modules/babel-plugin-syntax-exponentiation-operator": { "version": "6.13.0", "resolved": "https://registry.npmjs.org/babel-plugin-syntax-exponentiation-operator/-/babel-plugin-syntax-exponentiation-operator-6.13.0.tgz", @@ -1254,6 +1288,19 @@ "babel-runtime": "^6.22.0" } }, + "node_modules/babel-plugin-transform-class-properties": { + "version": "6.24.1", + "resolved": "https://registry.npmjs.org/babel-plugin-transform-class-properties/-/babel-plugin-transform-class-properties-6.24.1.tgz", + "integrity": "sha512-n4jtBA3OYBdvG5PRMKsMXJXHfLYw/ZOmtxCLOOwz6Ro5XlrColkStLnz1AS1L2yfPA9BKJ1ZNlmVCLjAL9DSIg==", + "dev": true, + "license": "MIT", + "dependencies": { + "babel-helper-function-name": "^6.24.1", + "babel-plugin-syntax-class-properties": "^6.8.0", + "babel-runtime": "^6.22.0", + "babel-template": "^6.24.1" + } + }, "node_modules/babel-plugin-transform-es2015-arrow-functions": { "version": "6.22.0", "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-arrow-functions/-/babel-plugin-transform-es2015-arrow-functions-6.22.0.tgz", @@ -1591,6 +1638,12 @@ "regenerator-runtime": "^0.11.0" } }, + "node_modules/babel-runtime/node_modules/regenerator-runtime": { + "version": "0.11.1", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz", + "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==", + "dev": true + }, "node_modules/babel-template": { "version": "6.26.0", "resolved": "https://registry.npmjs.org/babel-template/-/babel-template-6.26.0.tgz", @@ -6708,6 +6761,37 @@ "node": ">=8.0" } }, + "node_modules/lit": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/lit/-/lit-2.8.0.tgz", + "integrity": "sha512-4Sc3OFX9QHOJaHbmTMk28SYgVxLN3ePDjg7hofEft2zWlehFL3LiAuapWc4U/kYwMYJSh2hTCPZ6/LIC7ii0MA==", + "license": "BSD-3-Clause", + "dependencies": { + "@lit/reactive-element": "^1.6.0", + "lit-element": "^3.3.0", + "lit-html": "^2.8.0" + } + }, + "node_modules/lit-element": { + "version": "3.3.3", + "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.3.3.tgz", + "integrity": "sha512-XbeRxmTHubXENkV4h8RIPyr8lXc+Ff28rkcQzw3G6up2xg5E8Zu1IgOWIwBLEQsu3cOVFqdYwiVi0hv0SlpqUA==", + "license": "BSD-3-Clause", + "dependencies": { + "@lit-labs/ssr-dom-shim": "^1.1.0", + "@lit/reactive-element": "^1.3.0", + "lit-html": "^2.8.0" + } + }, + "node_modules/lit-html": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.8.0.tgz", + "integrity": "sha512-o9t+MQM3P4y7M7yNzqAyjp7z+mQGa4NS4CxiyLqFPyFWyc4O+nodLrkrxSaCTrla6M5YOLaT3RpbbqjszB5g3Q==", + "license": "BSD-3-Clause", + "dependencies": { + "@types/trusted-types": "^2.0.2" + } + }, "node_modules/loader-runner": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-2.4.0.tgz", @@ -8992,10 +9076,9 @@ "dev": true }, "node_modules/regenerator-runtime": { - "version": "0.11.1", - "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz", - "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==", - "dev": true + "version": "0.13.11", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz", + "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==" }, "node_modules/regenerator-transform": { "version": "0.10.1", @@ -11925,6 +12008,19 @@ } }, "dependencies": { + "@lit-labs/ssr-dom-shim": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.4.0.tgz", + "integrity": "sha512-ficsEARKnmmW5njugNYKipTm4SFnbik7CXtoencDZzmzo/dQ+2Q0bgkzJuoJP20Aj0F+izzJjOqsnkd6F/o1bw==" + }, + "@lit/reactive-element": { + "version": "1.6.3", + "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.6.3.tgz", + "integrity": "sha512-QuTgnG52Poic7uM1AN5yJ09QMe0O28e10XzSvWDz02TJiiKee4stsiownEIadWm8nYzyDAyT+gKzUoZmiWQtsQ==", + "requires": { + "@lit-labs/ssr-dom-shim": "^1.0.0" + } + }, "@polymer/font-roboto": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/@polymer/font-roboto/-/font-roboto-3.0.2.tgz", @@ -12187,6 +12283,11 @@ "@types/node": "*" } }, + "@types/trusted-types": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz", + "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==" + }, "@webassemblyjs/ast": { "version": "1.7.10", "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.7.10.tgz", @@ -12984,6 +13085,12 @@ "integrity": "sha512-4Zp4unmHgw30A1eWI5EpACji2qMocisdXhAftfhXoSV9j0Tvj6nRFE3tOmRY912E0FMRm/L5xWE7MGVT2FoLnw==", "dev": true }, + "babel-plugin-syntax-class-properties": { + "version": "6.13.0", + "resolved": "https://registry.npmjs.org/babel-plugin-syntax-class-properties/-/babel-plugin-syntax-class-properties-6.13.0.tgz", + "integrity": "sha512-chI3Rt9T1AbrQD1s+vxw3KcwC9yHtF621/MacuItITfZX344uhQoANjpoSJZleAmW2tjlolqB/f+h7jIqXa7pA==", + "dev": true + }, "babel-plugin-syntax-exponentiation-operator": { "version": "6.13.0", "resolved": "https://registry.npmjs.org/babel-plugin-syntax-exponentiation-operator/-/babel-plugin-syntax-exponentiation-operator-6.13.0.tgz", @@ -13013,6 +13120,18 @@ "babel-runtime": "^6.22.0" } }, + "babel-plugin-transform-class-properties": { + "version": "6.24.1", + "resolved": "https://registry.npmjs.org/babel-plugin-transform-class-properties/-/babel-plugin-transform-class-properties-6.24.1.tgz", + "integrity": "sha512-n4jtBA3OYBdvG5PRMKsMXJXHfLYw/ZOmtxCLOOwz6Ro5XlrColkStLnz1AS1L2yfPA9BKJ1ZNlmVCLjAL9DSIg==", + "dev": true, + "requires": { + "babel-helper-function-name": "^6.24.1", + "babel-plugin-syntax-class-properties": "^6.8.0", + "babel-runtime": "^6.22.0", + "babel-template": "^6.24.1" + } + }, "babel-plugin-transform-es2015-arrow-functions": { "version": "6.22.0", "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-arrow-functions/-/babel-plugin-transform-es2015-arrow-functions-6.22.0.tgz", @@ -13348,6 +13467,14 @@ "requires": { "core-js": "^2.4.0", "regenerator-runtime": "^0.11.0" + }, + "dependencies": { + "regenerator-runtime": { + "version": "0.11.1", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz", + "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==", + "dev": true + } } }, "babel-template": { @@ -17482,6 +17609,34 @@ } } }, + "lit": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/lit/-/lit-2.8.0.tgz", + "integrity": "sha512-4Sc3OFX9QHOJaHbmTMk28SYgVxLN3ePDjg7hofEft2zWlehFL3LiAuapWc4U/kYwMYJSh2hTCPZ6/LIC7ii0MA==", + "requires": { + "@lit/reactive-element": "^1.6.0", + "lit-element": "^3.3.0", + "lit-html": "^2.8.0" + } + }, + "lit-element": { + "version": "3.3.3", + "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.3.3.tgz", + "integrity": "sha512-XbeRxmTHubXENkV4h8RIPyr8lXc+Ff28rkcQzw3G6up2xg5E8Zu1IgOWIwBLEQsu3cOVFqdYwiVi0hv0SlpqUA==", + "requires": { + "@lit-labs/ssr-dom-shim": "^1.1.0", + "@lit/reactive-element": "^1.3.0", + "lit-html": "^2.8.0" + } + }, + "lit-html": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.8.0.tgz", + "integrity": "sha512-o9t+MQM3P4y7M7yNzqAyjp7z+mQGa4NS4CxiyLqFPyFWyc4O+nodLrkrxSaCTrla6M5YOLaT3RpbbqjszB5g3Q==", + "requires": { + "@types/trusted-types": "^2.0.2" + } + }, "loader-runner": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-2.4.0.tgz", @@ -19443,10 +19598,9 @@ "dev": true }, "regenerator-runtime": { - "version": "0.11.1", - "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz", - "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==", - "dev": true + "version": "0.13.11", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz", + "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==" }, "regenerator-transform": { "version": "0.10.1", diff --git a/package.json b/package.json index a909f18b..658fb2ae 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,8 @@ "@webcomponents/webcomponentsjs": "^2.0.0", "babel-core": "^6.26.3", "babel-loader": "^7.1.2", + "babel-plugin-syntax-class-properties": "^6.13.0", + "babel-plugin-transform-class-properties": "^6.24.1", "babel-plugin-transform-object-rest-spread": "^6.26.0", "babel-preset-env": "^1.6.0", "clipboard": "^2.0.1", @@ -56,5 +58,9 @@ "webpack": "4.23.1", "webpack-cli": "3.1.2", "webpack-uglify-js-plugin": "^1.1.9" + }, + "dependencies": { + "lit": "^2.8.0", + "regenerator-runtime": "^0.13.9" } } diff --git a/rhodecode/public/js/src/components/index.js b/rhodecode/public/js/src/components/index.js index a6d479d0..10de7d48 100644 --- a/rhodecode/public/js/src/components/index.js +++ b/rhodecode/public/js/src/components/index.js @@ -1,3 +1,4 @@ +import 'regenerator-runtime/runtime.js'; import '@polymer/iron-ajax/iron-ajax.js'; import './shared-styles.js'; import './channelstream-connection/channelstream-connection.js'; diff --git a/rhodecode/public/js/src/components/rhodecode-favicon/rhodecode-favicon.js b/rhodecode/public/js/src/components/rhodecode-favicon/rhodecode-favicon.js index b78d6226..1763a89e 100644 --- a/rhodecode/public/js/src/components/rhodecode-favicon/rhodecode-favicon.js +++ b/rhodecode/public/js/src/components/rhodecode-favicon/rhodecode-favicon.js @@ -1,33 +1,30 @@ -import {PolymerElement, html} from '@polymer/polymer/polymer-element.js'; +import {LitElement} from 'lit'; -export class RhodecodeFavicon extends PolymerElement { +export class RhodecodeFavicon extends LitElement { + static properties = { + favicon: {type: Object}, + counter: {type: Number} + }; - static get is() { - return 'rhodecode-favicon'; + constructor() { + super(); + this.favicon = null; + this.counter = 0; + } + + connectedCallback() { + super.connectedCallback(); + this.favicon = new Favico({ + type: 'rectangle', + animation: 'none' + }); + } + + updated(changedProperties) { + if (changedProperties.has('counter') && this.favicon) { + this.favicon.badge(this.counter); } - - static get properties() { - return { - favicon: Object, - counter: { - type: Number, - observer: '_handleCounter' - } - } - } - - connectedCallback() { - super.connectedCallback(); - this.favicon = new Favico({ - type: 'rectangle', - animation: 'none' - }); - } - - _handleCounter(newVal, oldVal) { - this.favicon.badge(this.counter); - } - + } } -customElements.define(RhodecodeFavicon.is, RhodecodeFavicon); +customElements.define('rhodecode-favicon', RhodecodeFavicon); diff --git a/rhodecode/public/js/src/components/rhodecode-toast/rhodecode-toast.js b/rhodecode/public/js/src/components/rhodecode-toast/rhodecode-toast.js index 379adeac..53c4ff8c 100644 --- a/rhodecode/public/js/src/components/rhodecode-toast/rhodecode-toast.js +++ b/rhodecode/public/js/src/components/rhodecode-toast/rhodecode-toast.js @@ -1,231 +1,241 @@ -import {PolymerElement, html} from '@polymer/polymer/polymer-element.js'; -import '@polymer/paper-toggle-button/paper-toggle-button.js'; -import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js'; -import {IronA11yKeysBehavior} from '@polymer/iron-a11y-keys-behavior/iron-a11y-keys-behavior.js'; +import {LitElement, html, css} from 'lit'; +import {classMap} from 'lit/directives/class-map.js'; import '../rhodecode-unsafe-html/rhodecode-unsafe-html.js'; -export class RhodecodeToast extends mixinBehaviors([IronA11yKeysBehavior], PolymerElement) { - - static get is() { - return 'rhodecode-toast'; +export class RhodecodeToast extends LitElement { + static styles = css` + .absolute-center { + margin: auto; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; } - static get template(){ - return html` - + .alert-info { + border-color: #84a5d2; + background-color: #e6edf6; + } - - ` + + + `)} + + `; + } + + _handleKeyup(event) { + if (event.key === 'Escape') { + this.dismissNotifications(); } + } - static get properties() { - return { - toasts: { - type: Array, - value() { - return [] - } - }, - isFixed: { - type: Boolean, - value: false - }, - hasToasts: { - type: Boolean, - computed: '_computeHasToasts(toasts.*)' - }, - keyEventTarget: { - type: Object, - value() { - return document.body; - } - } - } + _debouncedCalc() { + if (this._debounceTimeout) { + clearTimeout(this._debounceTimeout); } + this._debounceTimeout = setTimeout(() => { + this.toastInWindow(); + }, 25); + } - get keyBindings() { - return { - 'esc:keyup': '_hideOnEsc' - } + toastInWindow() { + if (!this._headerNode) { + return true; } + const headerHeight = this._headerNode.offsetHeight; + const scrollPosition = window.scrollY; - static get observers() { - return [ - '_changedToasts(toasts.splices)' - ] + if (this.isFixed) { + this.isFixed = 1 <= scrollPosition; + } else { + this.isFixed = headerHeight <= scrollPosition; } + } - _hideOnEsc(event) { - return this.dismissNotifications(); - } - - _computeHasToasts() { - return this.toasts.length > 0; - } - - _debouncedCalc() { - // calculate once in a while - this.debounce('debouncedCalc', this.toastInWindow, 25); - } - - conditionalClass() { - return this.isFixed ? 'fixed' : ''; - } - - toastInWindow() { - if (!this._headerNode) { - return true - } - var headerHeight = this._headerNode.offsetHeight; - var scrollPosition = window.scrollY; - - if (this.isFixed) { - this.isFixed = 1 <= scrollPosition; - } - else { - this.isFixed = headerHeight <= scrollPosition; - } - } - - connectedCallback() { - super.connectedCallback(); - this._headerNode = document.querySelector('.header', document); - this.listen(window, 'scroll', '_debouncedCalc'); - this.listen(window, 'resize', '_debouncedCalc'); - this._debouncedCalc(); - } - - _changedToasts(newValue, oldValue) { - $.Topic('/favicon/update').publish({count: this.toasts.length}); - } - - dismissNotification(e) { - $.Topic('/favicon/update').publish({count: this.toasts.length - 1}); - var idx = e.target.parentNode.indexPos - this.splice('toasts', idx, 1); - - } - - dismissNotifications() { - $.Topic('/favicon/update').publish({count: 0}); - this.splice('toasts', 0); - } - - handleNotification(data) { - if (!templateContext.rhodecode_user.notification_status && !data.message.force) { - // do not act if notifications are disabled - return - } - this.push('toasts', { - level: data.message.level, - message: data.message.message - }); - } - - _gettext(x){ - return _gettext(x) + dismissNotification(index) { + $.Topic('/favicon/update').publish({count: this.toasts.length - 1}); + this.toasts = [ + ...this.toasts.slice(0, index), + ...this.toasts.slice(index + 1) + ]; + } + + dismissNotifications() { + $.Topic('/favicon/update').publish({count: 0}); + this.toasts = []; + } + + handleNotification(data) { + if (!templateContext.rhodecode_user.notification_status && !data.message.force) { + return; } + this.toasts = [...this.toasts, { + level: data.message.level, + message: data.message.message + }]; + } + _gettext(x) { + return _gettext(x); + } } -customElements.define(RhodecodeToast.is, RhodecodeToast); +customElements.define('rhodecode-toast', RhodecodeToast); diff --git a/rhodecode/public/js/src/components/rhodecode-unsafe-html/rhodecode-unsafe-html.js b/rhodecode/public/js/src/components/rhodecode-unsafe-html/rhodecode-unsafe-html.js index 7290a207..72223043 100644 --- a/rhodecode/public/js/src/components/rhodecode-unsafe-html/rhodecode-unsafe-html.js +++ b/rhodecode/public/js/src/components/rhodecode-unsafe-html/rhodecode-unsafe-html.js @@ -1,30 +1,24 @@ -import {PolymerElement, html} from '@polymer/polymer/polymer-element.js'; +import {LitElement, html} from 'lit'; -export class RhodecodeUnsafeHtml extends PolymerElement { +export class RhodecodeUnsafeHtml extends LitElement { + static properties = { + text: {type: String} + }; - static get is() { - return 'rhodecode-unsafe-html'; - } - - static get template() { - return html` - - - `; - } - - static get properties() { - return { - text: { - type: String, - observer: '_handleText' - } - } - } - - _handleText(newVal, oldVal) { - this.innerHTML = this.text; + constructor() { + super(); + this.text = ''; + } + + render() { + return html``; + } + + updated(changedProperties) { + if (changedProperties.has('text')) { + this.innerHTML = this.text; } + } } -customElements.define(RhodecodeUnsafeHtml.is, RhodecodeUnsafeHtml); +customElements.define('rhodecode-unsafe-html', RhodecodeUnsafeHtml); diff --git a/webpack.config.js b/webpack.config.js index bc868e78..d879dd10 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -16,10 +16,18 @@ let babelRCOptions = { ["env", { "targets": { "browsers": ["last 2 versions"] - } + }, + "exclude": [ + "transform-es2015-classes", + "transform-regenerator", + "transform-async-to-generator" + ] }] ], - "plugins": ["transform-object-rest-spread"] + "plugins": [ + ["babel-plugin-transform-class-properties", { "loose": true }], + "babel-plugin-transform-object-rest-spread" + ] }; module.exports = {