Skip to content

Commit 65b334d

Browse files
sohrabtaeesohrabtaee
committed
Added build process for demos.
1 parent ac5d27a commit 65b334d

File tree

5 files changed

+160
-12
lines changed

5 files changed

+160
-12
lines changed

‎.gitignore

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
/node_modules/
2-
package-lock.json
2+
dist
3+
package-lock.json

‎demo/demo.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
// import '@webcomponents/webcomponentsjs/webcomponents-bundle';
2+
import '@polymer/iron-demo-helpers/demo-pages-shared-styles';
3+
import '@polymer/iron-demo-helpers/demo-snippet';
4+
import '../theme/lumo/vcf-avatar-item.js';
5+
window.addEventListener('WebComponentsReady', () => document.querySelector('main').classList.remove('hidden'));

‎demo/index.html

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,7 @@
55
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes" />
66
<title>vcf-avatar-item demo</title>
77
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
8-
<script type="module">
9-
import '@polymer/iron-demo-helpers/demo-pages-shared-styles';
10-
import '@polymer/iron-demo-helpers/demo-snippet';
11-
import '../theme/lumo/vcf-avatar-item.js';
12-
</script>
8+
<script src="demo.js" type="module"></script>
139
<custom-style>
1410
<style is="custom-style" include="demo-pages-shared-styles"></style>
1511
</custom-style>

‎package.json

Lines changed: 27 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,8 @@
2121
"scripts": {
2222
"test": "wct",
2323
"lint": "eslint src/*.js",
24-
"start": "polymer serve -o"
24+
"start": "polymer serve -o",
25+
"build:demo": "webpack"
2526
},
2627
"husky": {
2728
"hooks": {
@@ -42,20 +43,40 @@
4243
"@vaadin/vaadin-themable-mixin": "^1.4.4"
4344
},
4445
"devDependencies": {
46+
"@babel/core": "^7.5.5",
47+
"@babel/plugin-proposal-class-properties": "^7.3.4",
48+
"@babel/preset-env": "^7.5.5",
4549
"@polymer/iron-demo-helpers": "^3.0.0-pre.19",
4650
"@polymer/test-fixture": "^4.0.2",
51+
"@types/vis": "^4.21.16",
4752
"@webcomponents/webcomponentsjs": "^2.0.0",
48-
"babel-eslint": "^10.0.1",
49-
"chai": "^4.2.0",
53+
"babel-eslint": "^10.0.2",
54+
"babel-loader": "^8.0.6",
55+
"babel-plugin-template-html-minifier": "^3.1.0",
56+
"babel-plugin-transform-custom-element-classes": "^0.1.0",
57+
"babel-preset-minify": "^0.5.1",
58+
"brotli-webpack-plugin": "^1.1.0",
59+
"clean-webpack-plugin": "^3.0.0",
60+
"compression-webpack-plugin": "^3.0.0",
61+
"copy-webpack-plugin": "^5.0.4",
5062
"eslint": "^5.16.0",
51-
"eslint-config-prettier": "^4.3.0",
52-
"eslint-config-vaadin": "latest",
63+
"eslint-config-prettier": "^6.0.0",
64+
"eslint-config-vaadin": "^0.2.7",
65+
"eslint-plugin-html": "^6.0.0",
5366
"husky": "^2.3.0",
5467
"lint-staged": "^8.1.7",
5568
"mocha": "^5.2.0",
5669
"polymer-cli": "^1.9.10",
5770
"prettier": "^1.17.1",
58-
"wct-mocha": "^1.0.0"
71+
"uglify-es": "^3.3.9",
72+
"uglify-template-string-loader": "^1.1.1",
73+
"terser-webpack-plugin": "^1.4.1",
74+
"wct-mocha": "^1.0.0",
75+
"webpack": "^4.39.2",
76+
"webpack-babel-multi-target-plugin": "^2.3.0",
77+
"webpack-cli": "^3.3.7",
78+
"webpack-dev-server": "^3.8.0",
79+
"webpack-merge": "^4.2.1"
5980
},
6081
"bugs": {
6182
"url": "https://github.com/vaadin-component-factory/vcf-avatar-item/issues"

‎webpack.config.js

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
'use strict';
2+
3+
const { resolve, join } = require('path');
4+
const merge = require('webpack-merge');
5+
const { BabelMultiTargetPlugin } = require('webpack-babel-multi-target-plugin');
6+
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
7+
const CopyWebpackPlugin = require('copy-webpack-plugin');
8+
const HtmlWebpackPlugin = require('html-webpack-plugin');
9+
const CompressionPlugin = require('compression-webpack-plugin');
10+
const TerserWebpackPlugin = require('terser-webpack-plugin');
11+
const BrotliPlugin = require('brotli-webpack-plugin');
12+
13+
const OUTPUT_PATH = resolve('dist');
14+
const INDEX_TEMPLATE = resolve('./demo/index.html');
15+
16+
const webcomponentsjs = './node_modules/@webcomponents/webcomponentsjs';
17+
18+
const polyfills = [
19+
{
20+
from: resolve(`${webcomponentsjs}/webcomponents-*.{js,map}`),
21+
to: join(OUTPUT_PATH, 'vendor'),
22+
flatten: true
23+
},
24+
{
25+
from: resolve(`${webcomponentsjs}/bundles/*.{js,map}`),
26+
to: join(OUTPUT_PATH, 'vendor', 'bundles'),
27+
flatten: true
28+
}
29+
];
30+
31+
const commonConfig = merge([
32+
{
33+
entry: './demo/demo.js',
34+
output: {
35+
path: OUTPUT_PATH,
36+
filename: '[name].[chunkhash:8].js'
37+
},
38+
module: {
39+
rules: [
40+
{
41+
test: /\.js$/,
42+
use: [BabelMultiTargetPlugin.loader(), 'uglify-template-string-loader']
43+
}
44+
]
45+
},
46+
plugins: [
47+
new BabelMultiTargetPlugin({
48+
babel: {
49+
plugins: [
50+
[
51+
require('babel-plugin-template-html-minifier'),
52+
{
53+
modules: {
54+
'@polymer/polymer/lib/utils/html-tag.js': ['html']
55+
},
56+
htmlMinifier: {
57+
collapseWhitespace: true,
58+
minifyCSS: true,
59+
removeComments: true
60+
}
61+
}
62+
]
63+
],
64+
presetOptions: { useBuiltIns: false }
65+
},
66+
safari10NoModuleFix: 'inline-data-base64',
67+
targets: {
68+
es6: {
69+
browsers: [
70+
'last 2 Chrome major versions',
71+
'last 2 ChromeAndroid major versions',
72+
'last 2 Edge major versions',
73+
'last 2 Firefox major versions'
74+
],
75+
tagAssetsWithKey: false,
76+
esModule: true
77+
},
78+
es5: {
79+
browsers: ['ie 11'],
80+
tagAssetsWithKey: true,
81+
noModule: true
82+
}
83+
}
84+
})
85+
]
86+
}
87+
]);
88+
89+
const productionConfig = merge([
90+
{
91+
devtool: 'nosources-source-map',
92+
optimization: {
93+
minimizer: [
94+
new TerserWebpackPlugin({
95+
terserOptions: {
96+
output: {
97+
comments: false
98+
}
99+
},
100+
sourceMap: true,
101+
parallel: true
102+
})
103+
]
104+
},
105+
plugins: [
106+
new CleanWebpackPlugin(),
107+
new CopyWebpackPlugin([...polyfills]),
108+
new HtmlWebpackPlugin({
109+
template: INDEX_TEMPLATE
110+
}),
111+
new CompressionPlugin({ test: /\.js(\.map)?$/i }),
112+
new BrotliPlugin({
113+
asset: '[path].br[query]',
114+
test: /\.js(\.map)?$/i,
115+
threshold: 20,
116+
minRatio: 0.8,
117+
mode: 1
118+
})
119+
]
120+
}
121+
]);
122+
123+
module.exports = mode => {
124+
return merge(commonConfig, productionConfig, { mode });
125+
};

0 commit comments

Comments
 (0)