From c20699060c2e174ba6c2422767bdb8674852247b Mon Sep 17 00:00:00 2001
From: Christoph Reiter <reiter.christoph@gmail.com>
Date: Mon, 20 Apr 2020 12:30:23 +0200
Subject: [PATCH] Start porting to scoped elements
---
packages/app-shell/package.json | 1 +
packages/app-shell/src/build-info.js | 7 ++----
packages/app-shell/src/index.js | 22 ++++++++++++++-----
packages/app-shell/src/tugraz-logo.js | 7 ++----
.../src/vpu-app-shell-user-profile.js | 10 +++++++--
.../app-shell/src/vpu-app-shell-welcome.js | 3 ++-
packages/app-shell/vendor/language-select | 2 +-
7 files changed, 33 insertions(+), 19 deletions(-)
diff --git a/packages/app-shell/package.json b/packages/app-shell/package.json
index 34f23d2f..764e4055 100644
--- a/packages/app-shell/package.json
+++ b/packages/app-shell/package.json
@@ -29,6 +29,7 @@
"vpu-person-profile": "file:./vendor/person-profile"
},
"dependencies": {
+ "@open-wc/scoped-elements": "^1.0.8",
"i18next": "^19.4.1",
"lit-element": "^2.2.1",
"lit-html": "^1.1.2",
diff --git a/packages/app-shell/src/build-info.js b/packages/app-shell/src/build-info.js
index 6be385b6..faac3a38 100644
--- a/packages/app-shell/src/build-info.js
+++ b/packages/app-shell/src/build-info.js
@@ -1,9 +1,8 @@
import {html, LitElement, css} from 'lit-element';
-import * as commonUtils from 'vpu-common/utils';
import * as commonStyles from 'vpu-common/styles';
import buildinfo from 'consts:buildinfo';
-class VPUBuildInfo extends LitElement {
+export class BuildInfo extends LitElement {
constructor() {
super();
@@ -33,6 +32,4 @@ class VPUBuildInfo extends LitElement {
</a>
`;
}
-}
-
-commonUtils.defineCustomElement('vpu-build-info', VPUBuildInfo);
+}
\ No newline at end of file
diff --git a/packages/app-shell/src/index.js b/packages/app-shell/src/index.js
index 93857258..7fda786e 100644
--- a/packages/app-shell/src/index.js
+++ b/packages/app-shell/src/index.js
@@ -1,6 +1,7 @@
import {createI18nInstance} from './i18n.js';
import {html, css, LitElement} from 'lit-element';
-import 'vpu-language-select';
+import {ScopedElementsMixin} from '@open-wc/scoped-elements';
+import {LanguageSelect} from 'vpu-language-select';
import 'vpu-common/vpu-button.js';
import 'vpu-auth';
import 'vpu-notification';
@@ -10,8 +11,8 @@ import buildinfo from 'consts:buildinfo';
import {classMap} from 'lit-html/directives/class-map.js';
import {Router} from './router.js';
import * as events from 'vpu-common/events.js';
-import './build-info.js';
-import './tugraz-logo.js';
+import {BuildInfo} from './build-info.js';
+import {TUGrazLogo} from './tugraz-logo.js';
import {send as notify} from 'vpu-notification';
import {userProfileMeta} from './vpu-app-shell-user-profile.js';
import {appWelcomeMeta} from './vpu-app-shell-welcome.js';
@@ -41,8 +42,7 @@ const importNotify = async (promise) => {
}
};
-
-class VPUApp extends LitElement {
+class VPUApp extends ScopedElementsMixin(LitElement) {
constructor() {
super();
this.lang = i18n.language;
@@ -62,6 +62,18 @@ class VPUApp extends LitElement {
this._attrObserver = new MutationObserver(this.onAttributeObserved);
}
+ static get scopedElements() {
+ return {
+ 'vpu-language-select': LanguageSelect,
+ 'vpu-tugraz-logo': TUGrazLogo,
+ 'vpu-build-info': BuildInfo,
+ // https://github.com/open-wc/open-wc/issues/1541
+ 'vpu-auth': customElements.get('vpu-auth'),
+ 'vpu-notification': customElements.get('vpu-notification'),
+ 'vpu-icon': customElements.get('vpu-icon'),
+ };
+ }
+
onAttributeObserved(mutationsList, observer) {
for(let mutation of mutationsList) {
if (mutation.type === 'attributes') {
diff --git a/packages/app-shell/src/tugraz-logo.js b/packages/app-shell/src/tugraz-logo.js
index 51b654cd..a77614c3 100644
--- a/packages/app-shell/src/tugraz-logo.js
+++ b/packages/app-shell/src/tugraz-logo.js
@@ -1,11 +1,10 @@
import {html, LitElement, css} from 'lit-element';
-import * as commonUtils from 'vpu-common/utils';
import * as commonStyles from 'vpu-common/styles';
import {createI18nInstance} from './i18n.js';
const i18n = createI18nInstance();
-class VPUTUGrazLogo extends LitElement {
+export class TUGrazLogo extends LitElement {
constructor() {
super();
@@ -77,6 +76,4 @@ class VPUTUGrazLogo extends LitElement {
</a>
`;
}
-}
-
-commonUtils.defineCustomElement('vpu-tugraz-logo', VPUTUGrazLogo);
+}
\ No newline at end of file
diff --git a/packages/app-shell/src/vpu-app-shell-user-profile.js b/packages/app-shell/src/vpu-app-shell-user-profile.js
index 480d8b8e..9809a332 100644
--- a/packages/app-shell/src/vpu-app-shell-user-profile.js
+++ b/packages/app-shell/src/vpu-app-shell-user-profile.js
@@ -2,20 +2,26 @@ import {createI18nInstance} from './i18n.js';
import {css, html, LitElement} from 'lit-element';
import * as commonUtils from 'vpu-common/utils';
import * as commonStyles from 'vpu-common/styles';
+import {ScopedElementsMixin} from '@open-wc/scoped-elements';
import 'vpu-person-profile';
const i18n = createI18nInstance();
-class AppShellUserProfile extends LitElement {
+class AppShellUserProfile extends ScopedElementsMixin(LitElement) {
constructor() {
super();
this.lang = i18n.language;
this._personId = window.VPUPersonId;
this.entryPointUrl = commonUtils.getAPiUrl();
-
}
+ static get scopedElements() {
+ return {
+ 'vpu-person-profile': customElements.get('vpu-person-profile'),
+ };
+ }
+
static get properties() {
return {
lang: { type: String },
diff --git a/packages/app-shell/src/vpu-app-shell-welcome.js b/packages/app-shell/src/vpu-app-shell-welcome.js
index cdceed44..9641222b 100644
--- a/packages/app-shell/src/vpu-app-shell-welcome.js
+++ b/packages/app-shell/src/vpu-app-shell-welcome.js
@@ -1,11 +1,12 @@
import {createI18nInstance} from './i18n.js';
import {css, html, LitElement} from 'lit-element';
+import {ScopedElementsMixin} from '@open-wc/scoped-elements';
import * as commonUtils from 'vpu-common/utils';
import * as commonStyles from 'vpu-common/styles';
const i18n = createI18nInstance();
-class AppShellWelcome extends LitElement {
+class AppShellWelcome extends ScopedElementsMixin(LitElement) {
constructor() {
super();
diff --git a/packages/app-shell/vendor/language-select b/packages/app-shell/vendor/language-select
index 9a3c9052..f6797279 160000
--- a/packages/app-shell/vendor/language-select
+++ b/packages/app-shell/vendor/language-select
@@ -1 +1 @@
-Subproject commit 9a3c9052ed1809b302d2738e6aa3da7e4d29b819
+Subproject commit f6797279a5f00dfe4db52e44f1e016aedeec6a6d
--
GitLab