From 48a198cd9bc6e5bc8b04b85582b9cb10f60aeb5c Mon Sep 17 00:00:00 2001
From: Christoph Reiter <reiter.christoph@gmail.com>
Date: Mon, 20 Apr 2020 11:03:52 +0200
Subject: [PATCH] Port to scoped elements
The demo now registers our web components lazily with a unique name
so that two different apps using the same underlying web compontens
don't clash.
This also disables auto registering and leaves that to the user.
---
packages/language-select/package.json | 3 ++-
packages/language-select/src/index.js | 3 +++
.../src/vpu-language-select-demo.js | 17 ++++++++++++-----
.../language-select/src/vpu-language-select.js | 7 ++-----
packages/language-select/test/unit.js | 6 +++++-
packages/language-select/vendor/common | 2 +-
6 files changed, 25 insertions(+), 13 deletions(-)
create mode 100644 packages/language-select/src/index.js
diff --git a/packages/language-select/package.json b/packages/language-select/package.json
index 44d2844a..15894f26 100644
--- a/packages/language-select/package.json
+++ b/packages/language-select/package.json
@@ -1,7 +1,7 @@
{
"name": "vpu-language-select",
"version": "1.0.0",
- "main": "src/vpu-language-select.js",
+ "main": "src/index.js",
"devDependencies": {
"karma": "^5.0.1",
"karma-chai": "^0.1.0",
@@ -24,6 +24,7 @@
"vpu-common": "file:./vendor/common"
},
"dependencies": {
+ "@open-wc/scoped-elements": "^1.0.8",
"lit-element": "^2.2.1"
},
"scripts": {
diff --git a/packages/language-select/src/index.js b/packages/language-select/src/index.js
new file mode 100644
index 00000000..e1285c70
--- /dev/null
+++ b/packages/language-select/src/index.js
@@ -0,0 +1,3 @@
+import {LanguageSelect} from './vpu-language-select.js';
+
+export {LanguageSelect};
\ No newline at end of file
diff --git a/packages/language-select/src/vpu-language-select-demo.js b/packages/language-select/src/vpu-language-select-demo.js
index 6d690c5d..6c3dde30 100644
--- a/packages/language-select/src/vpu-language-select-demo.js
+++ b/packages/language-select/src/vpu-language-select-demo.js
@@ -1,6 +1,8 @@
-import {html, LitElement, css} from 'lit-element';
-import './vpu-language-select.js';
+import {html, LitElement} from 'lit-element';
+import {LanguageSelect} from './vpu-language-select.js';
import * as commonUtils from 'vpu-common/utils';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+
class LanguageSelectDisplay extends LitElement {
@@ -35,14 +37,19 @@ class LanguageSelectDisplay extends LitElement {
}
}
-commonUtils.defineCustomElement('vpu-language-select-display', LanguageSelectDisplay);
-
-class LanguageSelectDemo extends LitElement {
+class LanguageSelectDemo extends ScopedElementsMixin(LitElement) {
constructor() {
super();
}
+ static get scopedElements() {
+ return {
+ 'vpu-language-select': LanguageSelect,
+ 'vpu-language-select-display': LanguageSelectDisplay,
+ };
+ }
+
render() {
return html`
Select 1: <vpu-language-select></vpu-language-select>
diff --git a/packages/language-select/src/vpu-language-select.js b/packages/language-select/src/vpu-language-select.js
index bc9e6091..27cd64e1 100644
--- a/packages/language-select/src/vpu-language-select.js
+++ b/packages/language-select/src/vpu-language-select.js
@@ -1,12 +1,11 @@
import {html, css, LitElement} from 'lit-element';
import {i18n} from './i18n.js';
-import * as commonUtils from 'vpu-common/utils';
import * as commonStyles from 'vpu-common/styles';
/**
* Emits a vpu-language-changed event where event.detail.lang is the new selected language
*/
-class LanguageSelect extends LitElement {
+export class LanguageSelect extends LitElement {
constructor() {
super();
@@ -131,6 +130,4 @@ class LanguageSelect extends LitElement {
<a href="#" title="${linkTitle}" @click=${this.onClick}>${this.next.toUpperCase()}</a>
`;
}
-}
-
-commonUtils.defineCustomElement('vpu-language-select', LanguageSelect);
+}
\ No newline at end of file
diff --git a/packages/language-select/test/unit.js b/packages/language-select/test/unit.js
index b79ca875..92e51f10 100644
--- a/packages/language-select/test/unit.js
+++ b/packages/language-select/test/unit.js
@@ -1,6 +1,10 @@
-import '../src/vpu-language-select.js';
+import {LanguageSelect} from '../src/vpu-language-select.js';
+import * as commonUtils from 'vpu-common/utils';
import '../src/demo.js';
+
+commonUtils.defineCustomElement('vpu-language-select', LanguageSelect);
+
describe('vpu-language-select basics', () => {
let node;
let events = [];
diff --git a/packages/language-select/vendor/common b/packages/language-select/vendor/common
index 894bf3f1..0f626c7a 160000
--- a/packages/language-select/vendor/common
+++ b/packages/language-select/vendor/common
@@ -1 +1 @@
-Subproject commit 894bf3f1f7d8d2d2746c98bc24ff6a3fb82618b8
+Subproject commit 0f626c7a2051ec37606242d46f42d9790b6f0bcc
--
GitLab