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

Add code splitting; split main and demo bundle

parent 93068476
Branches
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 171 additions and 194 deletions
packages/data-table-view/assets/index.html
+ 1
− 1
View file @ 13c95f41
......@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="module" id="vpu-data-table-view-src" src="vpu-data-table-view.js"></script>
<script type="module" id="vpu-data-table-view-src" src="vpu-data-table-view-demo.js"></script>
</head>
<body>
......
packages/data-table-view/package.json
+ 1
− 1
View file @ 13c95f41
{
"name": "vpu-data-table-view",
"version": "1.0.0",
"main": "src/index.js",
"main": "src/vpu-data-table-view.js",
"devDependencies": {
"karma": "^4.2.0",
"karma-chai": "^0.1.0",
......
packages/data-table-view/rollup.config.js
+ 4
− 27
View file @ 13c95f41
......@@ -11,41 +11,19 @@ import url from "rollup-plugin-url";
import consts from 'rollup-plugin-consts';
import del from 'rollup-plugin-delete'
const pkg = require('./package.json');
const build = (typeof process.env.BUILD !== 'undefined') ? process.env.BUILD : 'local';
console.log("build: " + build);
let manualChunks = Object.keys(pkg.dependencies).reduce(function (acc, item) { acc[item] = [item]; return acc;}, {});
manualChunks = Object.keys(pkg.devDependencies).reduce(function (acc, item) { if (item.startsWith('vpu-')) acc[item] = [item]; return acc;}, manualChunks);
function getBuildInfo() {
const child_process = require('child_process');
const url = require('url');
let remote = child_process.execSync('git config --get remote.origin.url').toString().trim();
let commit = child_process.execSync('git rev-parse --short HEAD').toString().trim();
let parsed = url.parse(remote);
let newPath = parsed.path.slice(0, parsed.path.lastIndexOf('.'))
let newUrl = parsed.protocol + '//' + parsed.host + newPath + '/commit/' + commit;
return {
info: commit,
url: newUrl,
env: build
}
}
export default {
input: (build !== 'test') ? 'src/demo.js' : 'test/**/*.js',
input: (build != 'test') ? ['src/vpu-data-table-view.js', 'src/vpu-data-table-view-demo.js'] : 'test/**/*.js',
output: {
dir: 'dist',
entryFileNames: pkg.name + '.js',
entryFileNames: '[name].js',
chunkFileNames: 'shared/[name].[hash].[format].js',
format: 'esm'
format: 'esm',
sourcemap: true
},
manualChunks: manualChunks,
onwarn: function (warning, warn) {
// ignore "suggestions" warning re "use strict"
if (warning.code === 'MODULE_LEVEL_DIRECTIVE') {
......@@ -63,7 +41,6 @@ export default {
(build == 'test') ? multiEntry() : false,
consts({
environment: build,
buildinfo: getBuildInfo(),
}),
resolve({
customResolveOptions: {
......
packages/data-table-view/src/demo.js
+ 1
− 164
View file @ 13c95f41
import 'vpu-auth';
import './data-table-view.js';
import {setting,} from './utils.js';
import {i18n} from './i18n';
import {html, LitElement} from 'lit-element';
import * as commonUtils from 'vpu-common/utils';
import bulmaCSSPath from "bulma/css/bulma.min.css";
class DataTableViewDemo extends LitElement {
constructor() {
super();
this.lang = 'de';
this.noAuth = false;
}
static get properties() {
return {
lang: { type: String },
noAuth: { type: Boolean, attribute: 'no-auth' },
};
}
connectedCallback() {
super.connectedCallback();
const that = this;
this.updateComplete.then(()=> {
/*
First Table: with data
*/
const vdtv1 = that.shadowRoot.querySelector('#vdtv1');
if (vdtv1 !== null) {
const vdtv1_columnDefs = [
{ targets: [3], visible: false },
{ targets: [2], orderData: [3] },
{ targets: [3, 4], searchable: false },
{ targets: [4], sortable: false }
];
const tbl = [];
for (let i = 0; i<25; ++i) {
tbl.push(this.vdtv_create_row());
}
vdtv1.set_columns([{title:'Bezeichnung'}, {title:'Nummer'}, {title:'Datum'}, null, null])
.set_columnDefs(vdtv1_columnDefs)
.set_datatable(tbl);
}
/*
Second Table: no data definition only
*/
const vdtv2 = that.shadowRoot.querySelector('#vdtv2');
if (vdtv2 !== null) {
const vdtv2_columnDefs = [
{ targets: [3], visible: false },
{ targets: [2], orderData: [3] },
{ targets: [3, 4], searchable: false },
{ targets: [4], sortable: false }
];
vdtv2.set_columns([{title:'Bezeichnung'}, {title:'Nummer'}, {title:'Datum'}, null, null])
.set_columnDefs(vdtv2_columnDefs)
.set_datatable([]);
}
});
}
update(changedProperties) {
changedProperties.forEach((oldValue, propName) => {
if (propName === "lang") {
i18n.changeLanguage(this.lang);
}
});
super.update(changedProperties);
}
vdtv_create_row() {
const str = Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 5);
const day = Math.floor(Math.random()*(31-1) + 1);
const month = Math.floor(Math.random()*(12-1) + 1);
const year = Math.floor(Math.random()*(2019-2016) + 2016);
return [
str,
Math.floor(1000 * Math.random()),
'' + day + '.' + month + '.' + year,
'' + year + '-' + month + '-' + day,
'<button onclick="alert(\'' + str + ' clicked\');">OK</button>'
];
}
vdtv2_add_rows() {
console.log('vdtv2_add_rows() clicked');
const vdtv2 = this.shadowRoot.querySelector('#vdtv2');
if (vdtv2 !== null) {
const row = this.vdtv_create_row();
vdtv2.add_row(row).draw();
}
}
getAuthComponentHtml() {
return this.noAuth ? html`` : html`
<div class="content">
<vpu-auth lang="${this.lang}" client-id="${setting('keyCloakClientId')}" load-person force-login></vpu-auth>
</div>
`;
}
render() {
commonUtils.initAssetBaseURL('vpu-data-table-view-src');
const bulmaCSS = commonUtils.getAssetURL(bulmaCSSPath);
return html`
<link rel="stylesheet" href="${bulmaCSS}">
<style>
.box {
margin: 10px;
padding: 10px;
border: 1px solid orange;
}
</style>
<section class="section">
<div class="content">
<h1 class="title">DataTableView-Demo</h1>
</div>
${this.getAuthComponentHtml()}
<div class="content">
<h4>DataTable: with data, paging and searching</h4>
<div class="box">
<vpu-data-table-view lang="${this.lang}" paging searching id="vdtv1"></vpu-data-table-view>
</div>
<h4>DataTable: no data, no paging, no searching</h4>
<div class="box">
<button @click="${this.vdtv2_add_rows}">noch etwas...</button>
<vpu-data-table-view lang="${this.lang}" id="vdtv2"></vpu-data-table-view>
</div>
</div>
<div class="content">
<h4>Common Table</h4>
<div class="box">
<!-- <vpu-data-table-view lang="${this.lang}" paging searching> -->
<table class="display">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<td>abc</td>
<td>123</td>
<td>a-2-4-g</td>
</tr>
</tbody>
</table>
<!-- </vpu-data-table-view> -->
</div>
</div>
</section>
`;
}
}
commonUtils.defineCustomElement('vpu-data-table-view-demo', DataTableViewDemo);
import './vpu-data-table-view-demo.js';
\ No newline at end of file
packages/data-table-view/src/index.js deleted 100644 → 0
+ 0
− 1
View file @ 93068476
import './data-table-view.js';
\ No newline at end of file
packages/data-table-view/src/vpu-data-table-view-demo.js 0 → 100644
+ 164
− 0
View file @ 13c95f41
import 'vpu-auth';
import './vpu-data-table-view.js';
import {setting,} from './utils.js';
import {i18n} from './i18n';
import {html, LitElement} from 'lit-element';
import * as commonUtils from 'vpu-common/utils';
import bulmaCSSPath from "bulma/css/bulma.min.css";
class DataTableViewDemo extends LitElement {
constructor() {
super();
this.lang = 'de';
this.noAuth = false;
}
static get properties() {
return {
lang: { type: String },
noAuth: { type: Boolean, attribute: 'no-auth' },
};
}
connectedCallback() {
super.connectedCallback();
const that = this;
this.updateComplete.then(()=> {
/*
First Table: with data
*/
const vdtv1 = that.shadowRoot.querySelector('#vdtv1');
if (vdtv1 !== null) {
const vdtv1_columnDefs = [
{ targets: [3], visible: false },
{ targets: [2], orderData: [3] },
{ targets: [3, 4], searchable: false },
{ targets: [4], sortable: false }
];
const tbl = [];
for (let i = 0; i<25; ++i) {
tbl.push(this.vdtv_create_row());
}
vdtv1.set_columns([{title:'Bezeichnung'}, {title:'Nummer'}, {title:'Datum'}, null, null])
.set_columnDefs(vdtv1_columnDefs)
.set_datatable(tbl);
}
/*
Second Table: no data definition only
*/
const vdtv2 = that.shadowRoot.querySelector('#vdtv2');
if (vdtv2 !== null) {
const vdtv2_columnDefs = [
{ targets: [3], visible: false },
{ targets: [2], orderData: [3] },
{ targets: [3, 4], searchable: false },
{ targets: [4], sortable: false }
];
vdtv2.set_columns([{title:'Bezeichnung'}, {title:'Nummer'}, {title:'Datum'}, null, null])
.set_columnDefs(vdtv2_columnDefs)
.set_datatable([]);
}
});
}
update(changedProperties) {
changedProperties.forEach((oldValue, propName) => {
if (propName === "lang") {
i18n.changeLanguage(this.lang);
}
});
super.update(changedProperties);
}
vdtv_create_row() {
const str = Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 5);
const day = Math.floor(Math.random()*(31-1) + 1);
const month = Math.floor(Math.random()*(12-1) + 1);
const year = Math.floor(Math.random()*(2019-2016) + 2016);
return [
str,
Math.floor(1000 * Math.random()),
'' + day + '.' + month + '.' + year,
'' + year + '-' + month + '-' + day,
'<button onclick="alert(\'' + str + ' clicked\');">OK</button>'
];
}
vdtv2_add_rows() {
console.log('vdtv2_add_rows() clicked');
const vdtv2 = this.shadowRoot.querySelector('#vdtv2');
if (vdtv2 !== null) {
const row = this.vdtv_create_row();
vdtv2.add_row(row).draw();
}
}
getAuthComponentHtml() {
return this.noAuth ? html`` : html`
<div class="content">
<vpu-auth lang="${this.lang}" client-id="${setting('keyCloakClientId')}" load-person force-login></vpu-auth>
</div>
`;
}
render() {
commonUtils.initAssetBaseURL('vpu-data-table-view-src');
const bulmaCSS = commonUtils.getAssetURL(bulmaCSSPath);
return html`
<link rel="stylesheet" href="${bulmaCSS}">
<style>
.box {
margin: 10px;
padding: 10px;
border: 1px solid orange;
}
</style>
<section class="section">
<div class="content">
<h1 class="title">DataTableView-Demo</h1>
</div>
${this.getAuthComponentHtml()}
<div class="content">
<h4>DataTable: with data, paging and searching</h4>
<div class="box">
<vpu-data-table-view lang="${this.lang}" paging searching id="vdtv1"></vpu-data-table-view>
</div>
<h4>DataTable: no data, no paging, no searching</h4>
<div class="box">
<button @click="${this.vdtv2_add_rows}">noch etwas...</button>
<vpu-data-table-view lang="${this.lang}" id="vdtv2"></vpu-data-table-view>
</div>
</div>
<div class="content">
<h4>Common Table</h4>
<div class="box">
<!-- <vpu-data-table-view lang="${this.lang}" paging searching> -->
<table class="display">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<td>abc</td>
<td>123</td>
<td>a-2-4-g</td>
</tr>
</tbody>
</table>
<!-- </vpu-data-table-view> -->
</div>
</div>
</section>
`;
}
}
commonUtils.defineCustomElement('vpu-data-table-view-demo', DataTableViewDemo);
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment