Skip to content
Snippets Groups Projects
Commit d3476fe5 authored by Reiter, Christoph's avatar Reiter, Christoph :snake:
Browse files

Add code splitting; Split main and demo bundle

parent b6294a39
No related branches found
No related tags found
No related merge requests found
......@@ -2,7 +2,7 @@
<html>
<head>
<meta charset="UTF-8">
<script type="module" id="vpu-knowledge-base-web-page-element-view-src" src="bundle.js"></script>
<script type="module" id="vpu-knowledge-base-web-page-element-view-src" src="vpu-knowledge-base-web-page-element-view-demo.js"></script>
</head>
<style>
vpu-knowledge-base-web-page-element-view-demo {
......
{
"name": "vpu-knowledge-base-web-page-element-view",
"version": "1.0.0",
"main": "src/index.js",
"main": "src/vpu-knowledge-base-web-page-element-view.js",
"devDependencies": {
"chai": "^4.2.0",
"i18next-scanner": "^2.10.2",
......
......@@ -14,16 +14,19 @@ const build = (typeof process.env.BUILD !== 'undefined') ? process.env.BUILD : '
console.log("build: " + build);
export default {
input: (build != 'test') ? 'src/demo.js' : 'test/**/*.js',
input: (build != 'test') ? ['src/vpu-knowledge-base-web-page-element-view.js', 'src/vpu-knowledge-base-web-page-element-view-demo.js'] : 'test/**/*.js',
output: {
file: 'dist/bundle.js',
format: 'esm'
dir: 'dist',
entryFileNames: '[name].js',
chunkFileNames: 'shared/[name].[hash].[format].js',
format: 'esm',
sourcemap: true
},
plugins: [
del({
targets: 'dist/*'
}),
multiEntry(),
(build == 'test') ? multiEntry() : false,
consts({
environment: build,
}),
......
import {i18n} from './i18n';
import {css, html, LitElement} from 'lit-element';
import 'vpu-auth';
import './vpu-kb-wpe-view';
import * as commonUtils from 'vpu-common/utils';
import bulmaCSSPath from "bulma/css/bulma.min.css";
class KnowledgeBaseWebPageElementViewDemo extends LitElement {
constructor() {
super();
this.lang = 'de';
this.noAuth = false;
}
static get properties() {
return {
lang: { type: String },
noAuth: { type: Boolean, attribute: 'no-auth' },
};
}
update(changedProperties) {
changedProperties.forEach((oldValue, propName) => {
if (propName === "lang") {
i18n.changeLanguage(this.lang);
}
});
super.update(changedProperties);
}
static get styles() {
// language=css
return css`
h1.title {margin-bottom: 1em;}
div.container {margin-bottom: 1.5em;}
`;
}
getAuthComponentHtml() {
return this.noAuth ? html`` : html`
<div class="content">
<vpu-auth lang="${this.lang}" client-id="${commonUtils.setting('keyCloakClientId')}" load-person remember-login></vpu-auth>
</div>
`;
}
render() {
commonUtils.initAssetBaseURL('vpu-knowledge-base-web-page-element-view-src');
const bulmaCSS = commonUtils.getAssetURL(bulmaCSSPath);
return html`
<link rel="stylesheet" href="${bulmaCSS}">
<style>
vpu-knowledge-base-web-page-element-view.clean {
--KBBorder: initial;
--KBBorderRadius: initial;
--KBMargin: initial;
--KBPadding: initial;
}
vpu-knowledge-base-web-page-element-view.opt {
--KBBorder: 2px solid blue;
}
</style>
<section class="section">
<div class="container">
<h1 class="title">KnowledgeBaseWebPageElementView-Demo</h1>
</div>
${this.getAuthComponentHtml()}
<div class="container">
<h2 class="subtitle">Deutsch</h2>
<p>Ein erster Schritt</p>
<vpu-knowledge-base-web-page-element-view lang="de" entry-point-url="${commonUtils.getAPiUrl()}" value="bedienstete/bibliothek/buch-ausleihen" text="Ein Buch ausleihen"></vpu-knowledge-base-web-page-element-view>
</div>
<div class="container">
<h2 class="subtitle">Englisch</h2>
<p>A first step</p>
<vpu-knowledge-base-web-page-element-view lang="en" entry-point-url="${commonUtils.getAPiUrl()}" value="bedienstete/bibliothek/buch-ausleihen" text="Borrow a book"></vpu-knowledge-base-web-page-element-view>
</div>
<hr>
<div class="container">
<p>mit Text in der WebComponent:</p>
<vpu-knowledge-base-web-page-element-view lang="${this.lang}" value="abc/def/xyz" text="FAQ"></vpu-knowledge-base-web-page-element-view>
</div>
<hr>
<div class="container">
<p>ohne Text in der WebComponent:</p>
Kontaktieren Sie uns unter...
<vpu-knowledge-base-web-page-element-view class="opt" lang="${this.lang}" value="abc/def/klm"></vpu-knowledge-base-web-page-element-view>
</div>
</section>
`;
}
}
commonUtils.defineCustomElement('vpu-knowledge-base-web-page-element-view-demo', KnowledgeBaseWebPageElementViewDemo);
import './vpu-knowledge-base-web-page-element-view-demo.js';
\ No newline at end of file
import './vpu-kb-wpe-view';
import {i18n} from './i18n';
import {css, html, LitElement} from 'lit-element';
import 'vpu-auth';
import './vpu-knowledge-base-web-page-element-view.js';
import * as commonUtils from 'vpu-common/utils';
import bulmaCSSPath from "bulma/css/bulma.min.css";
class KnowledgeBaseWebPageElementViewDemo extends LitElement {
constructor() {
super();
this.lang = 'de';
this.noAuth = false;
}
static get properties() {
return {
lang: { type: String },
noAuth: { type: Boolean, attribute: 'no-auth' },
};
}
update(changedProperties) {
changedProperties.forEach((oldValue, propName) => {
if (propName === "lang") {
i18n.changeLanguage(this.lang);
}
});
super.update(changedProperties);
}
static get styles() {
// language=css
return css`
h1.title {margin-bottom: 1em;}
div.container {margin-bottom: 1.5em;}
`;
}
getAuthComponentHtml() {
return this.noAuth ? html`` : html`
<div class="content">
<vpu-auth lang="${this.lang}" client-id="${commonUtils.setting('keyCloakClientId')}" load-person remember-login></vpu-auth>
</div>
`;
}
render() {
commonUtils.initAssetBaseURL('vpu-knowledge-base-web-page-element-view-src');
const bulmaCSS = commonUtils.getAssetURL(bulmaCSSPath);
return html`
<link rel="stylesheet" href="${bulmaCSS}">
<style>
vpu-knowledge-base-web-page-element-view.clean {
--KBBorder: initial;
--KBBorderRadius: initial;
--KBMargin: initial;
--KBPadding: initial;
}
vpu-knowledge-base-web-page-element-view.opt {
--KBBorder: 2px solid blue;
}
</style>
<section class="section">
<div class="container">
<h1 class="title">KnowledgeBaseWebPageElementView-Demo</h1>
</div>
${this.getAuthComponentHtml()}
<div class="container">
<h2 class="subtitle">Deutsch</h2>
<p>Ein erster Schritt</p>
<vpu-knowledge-base-web-page-element-view lang="de" entry-point-url="${commonUtils.getAPiUrl()}" value="bedienstete/bibliothek/buch-ausleihen" text="Ein Buch ausleihen"></vpu-knowledge-base-web-page-element-view>
</div>
<div class="container">
<h2 class="subtitle">Englisch</h2>
<p>A first step</p>
<vpu-knowledge-base-web-page-element-view lang="en" entry-point-url="${commonUtils.getAPiUrl()}" value="bedienstete/bibliothek/buch-ausleihen" text="Borrow a book"></vpu-knowledge-base-web-page-element-view>
</div>
<hr>
<div class="container">
<p>mit Text in der WebComponent:</p>
<vpu-knowledge-base-web-page-element-view lang="${this.lang}" value="abc/def/xyz" text="FAQ"></vpu-knowledge-base-web-page-element-view>
</div>
<hr>
<div class="container">
<p>ohne Text in der WebComponent:</p>
Kontaktieren Sie uns unter...
<vpu-knowledge-base-web-page-element-view class="opt" lang="${this.lang}" value="abc/def/klm"></vpu-knowledge-base-web-page-element-view>
</div>
</section>
`;
}
}
commonUtils.defineCustomElement('vpu-knowledge-base-web-page-element-view-demo', KnowledgeBaseWebPageElementViewDemo);
import '../src/vpu-kb-wpe-view';
import '../src/demo';
import '../src/vpu-knowledge-base-web-page-element-view.js';
import '../src/demo.js';
describe('vpu-knowledge-base-web-page-element-view basics', () => {
let node;
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment