Frontent dev env (#247)

* Added frontend development files/environment

* More items-categories related removals

* Improvements in pages templates (inc. static pages)

* Improvements in video player

* Added empty home page message + cta

* Updates in media, playlist and management pages

* Improvements in material icons font loading

* Replaced media & playlists links in frontend dev-env

* frontend package version update

* chnaged frontend dev url port

* static files update

* Changed default position of theme switcher

* enabled frontend docker container

frontend/packages/scripts/lib/.webpack/build.config.ts

@@ -0,0 +1,99 @@
+import { Configuration } from 'webpack';
+
+/*const chunksCacheGroups_0 = {
+    commons: {
+        test: /[\\/]src[\\/]/,
+        name: "_commons",
+        chunks: "all",
+        enforce: true,
+        reuseExistingChunk: true,
+    },
+};*/
+
+/*const chunksCacheGroups_1 = {
+    commons: {
+        test: /[\\/]src[\\/]/,
+        name: "_commons",
+        // priority: -10,
+        chunks: "all",
+        enforce: true,
+        reuseExistingChunk: true,
+    },
+    vendors: {
+        test: /[\\/]node_modules[\\/]/,
+        // test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
+        // test: /[\\/]node_modules[\\/](!MediaCmsPlayer)[\\/]/,
+        name: "_vendors",
+        // priority: -20,
+        chunks: "all",
+        enforce: true,
+        // reuseExistingChunk: true,
+    },
+};*/
+
+/*const chunksCacheGroups_2 = {
+    commons: {
+        minChunks: 2,
+        // maxInitialRequests: 8, // @note: Tested values from 0 to 10, and changes applied with values 0, 4, 5, 6, 7, 8.
+        // minSize: 0,
+        name: "_commons",
+        chunks: "all",
+        enforce: true,
+        reuseExistingChunk: true,
+    },
+};*/
+
+/*const chunksCacheGroups_3 = {
+    vendors: {
+        test: /[\\/]node_modules[\\/]/,
+        name: "_commons",
+        priority: 1,
+        chunks: "initial",
+    },
+};*/
+
+export const config: Configuration = {
+  mode: 'production',
+  devtool: 'source-map',
+  optimization: {
+    runtimeChunk: false,
+    /*splitChunks: {
+            // minSize: 1000000,
+            chunks: 'all',
+            automaticNameDelimiter: '-',
+        },*/
+    /*splitChunks: {
+            // minSize: 1000000,
+            chunks: 'all',
+            automaticNameDelimiter: '-',
+            cacheGroups: chunksCacheGroups_0,
+        },*/
+    /*splitChunks: {
+            chunks: 'all',
+            automaticNameDelimiter: '-',
+            cacheGroups: chunksCacheGroups_1,
+        },*/
+    /*splitChunks: {
+            chunks: 'all',
+            automaticNameDelimiter: '-',
+            cacheGroups: chunksCacheGroups_2,
+        },*/
+    /*splitChunks: {
+            chunks: 'all',
+            automaticNameDelimiter: '-',
+            cacheGroups: chunksCacheGroups_3,
+        },*/
+    splitChunks: {
+      chunks: 'all',
+      automaticNameDelimiter: '-',
+      cacheGroups: {
+        vendors: {
+          test: /[\\/]node_modules[\\/]/,
+          name: '_commons',
+          priority: 1,
+          chunks: 'initial',
+        },
+      },
+    },
+  },
+};

frontend/packages/scripts/lib/.webpack/dev-server.config.ts

@@ -0,0 +1,12 @@
+import { Configuration } from 'webpack-dev-server';
+
+export function configFunc(contentBase: string): Configuration {
+  return {
+    watchOptions: {
+      poll: true,
+    },
+    contentBase: contentBase,
+    compress: true,
+    hot: true,
+  };
+}

frontend/packages/scripts/lib/.webpack/dev.config.ts

@@ -0,0 +1,11 @@
+import { Configuration } from 'webpack';
+
+export const config: Configuration = {
+  mode: 'development',
+  // devtool: 'eval',
+  // devtool: 'source-map',
+  // devtool: 'eval-cheap-source-map',
+  optimization: {
+    minimize: false,
+  },
+};

frontend/packages/scripts/lib/.webpack/dist.config.ts

@@ -0,0 +1,73 @@
+import { Configuration } from 'webpack';
+
+/*const chunksCacheGroups_0 = {
+    commons: {
+        test: /[\\/]src[\\/]/,
+        name: "_commons",
+        chunks: "all",
+        enforce: true,
+        reuseExistingChunk: true,
+    },
+};
+
+const chunksCacheGroups_1 = {
+    commons: {
+        test: /[\\/]src[\\/]/,
+        name: "_commons",
+        // priority: -10,
+        chunks: "all",
+        enforce: true,
+        reuseExistingChunk: true,
+    },
+    vendors: {
+        test: /[\\/]node_modules[\\/]/,
+        // test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
+        // test: /[\\/]node_modules[\\/](!MediaCmsPlayer)[\\/]/,
+        name: "_vendors",
+        // priority: -20,
+        chunks: "all",
+        enforce: true,
+        // reuseExistingChunk: true,
+    },
+};
+
+const chunksCacheGroups_2 = {
+    commons: {
+        minChunks: 2,
+        // maxInitialRequests: 8, // @note: Tested values from 0 to 10, and changes applied with values 0, 4, 5, 6, 7, 8.
+        // minSize: 0,
+        name: "_commons",
+        chunks: "all",
+        enforce: true,
+        reuseExistingChunk: true,
+    },
+};
+
+const chunksCacheGroups_3 = {
+    vendors: {
+        test: /[\\/]node_modules[\\/]/,
+        name: "_commons",
+        priority: 1,
+        chunks: "initial",
+    },
+};*/
+
+export const config: Configuration = {
+  mode: 'production',
+  optimization: {
+    minimize: true,
+    runtimeChunk: false,
+    splitChunks: {
+      chunks: 'all',
+      automaticNameDelimiter: '-',
+      cacheGroups: {
+        vendors: {
+          test: /[\\/]node_modules[\\/]/,
+          name: '_commons',
+          priority: 1,
+          chunks: 'initial',
+        },
+      },
+    },
+  },
+};

frontend/packages/scripts/lib/config.ts

@@ -0,0 +1,114 @@
+function bodySnippet(id:string) {
+	return '<div id="' + id + '"></div>';
+}
+
+interface ConfigHtmlHead{
+	meta?: { [key: string]: string }[],
+	links?: { [key: string]: string }[],
+	scripts?: { [key: string]: string }[],
+}
+
+interface ConfigHtmlBody{
+	scripts: { [key: string]: string }[],
+	snippet: string,
+}
+
+export interface ConfigHtml{
+	head: ConfigHtmlHead,
+	body: ConfigHtmlBody,
+}
+
+export interface ConfigPages{
+	[key: string]: ConfigPage
+}
+
+export interface ConfigWindow{
+	[key: string ]: unknown 
+}
+
+export interface ConfigType {
+	src: string,
+	build: string,
+	html: ConfigHtml,
+	pages: ConfigPages,
+	window: ConfigWindow,
+	postcssConfigFile: string,
+}
+
+export interface ConfigPage{
+	staticPage: boolean,
+	buildExclude: boolean,
+	title: string,
+	filename: string,
+	html: ConfigHtml,
+	window: ConfigWindow,
+	render: string,
+}
+
+const homePage: ConfigPage = {
+	staticPage: true,
+	buildExclude: false,
+	title: 'Home',
+	filename: 'index.html',
+	html: {
+		head: {},
+		body: {
+			scripts: [],
+			snippet: bodySnippet('page-home'),
+		}
+	},
+	window: {},
+	render: 'import { renderPage } from \'./js/helpers\'; import { HomePage } from \'./js/pages/HomePage\'; renderPage( \'page-home\', HomePage );',
+};
+
+const errorPage: ConfigPage = {
+	staticPage: true,
+	buildExclude: false,
+	title: 'Error',
+	filename: 'error.html',
+	html: {
+		head: {},
+		body: {
+			scripts: [],
+			snippet: bodySnippet('page-error'),
+		}
+	},
+	window: {},
+	render: 'import { renderPage } from \'./js/helpers\'; import { ErrorPage } from \'./js/pages/ErrorPage\'; renderPage( \'page-error\', ErrorPage );',
+};
+
+const pages: { [key: string]: ConfigPage } = {
+	home: homePage,
+	error: errorPage,
+};
+
+const htmlHead: ConfigHtmlHead =  {
+	meta: [
+		{ charset: 'utf-8' },
+		{ content: 'ie=edge', 'http-equiv': 'x-ua-compatible' },
+		{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
+	],
+	links: [],
+	scripts: [],
+};
+
+const htmlBody: ConfigHtmlBody =  {
+	scripts: [],
+	snippet: '',
+};
+
+const html: ConfigHtml = {
+	head: htmlHead,
+	body: htmlBody,
+};
+
+export const config : ConfigType = {
+	src: '',
+	build: '',
+	pages,
+	html,
+	window: {},
+	postcssConfigFile: '',
+};
+
+export default config;

frontend/packages/scripts/lib/interfaces/OptionsTypes.ts

@@ -0,0 +1,21 @@
+import { ConfigType } from '../config';
+
+export interface DevOptionsType {
+	env: string,
+	host: string,
+	port: number,
+	config: ConfigType,
+}
+
+export interface BuildOptionsType {
+	env: string,
+	config: ConfigType,
+}
+
+export interface AnalyzerOptionsType {
+	env: string,
+	host: string,
+	port: number,
+	mode: string,
+	config: ConfigType,
+}

frontend/packages/scripts/lib/webpack-helpers/formatPagesConfig.ts

@@ -0,0 +1,69 @@
+const merge = require('lodash.merge');
+
+import { ConfigHtml, ConfigPages, ConfigWindow } from '../config';
+
+function validateBoolean(value?: boolean | 0 | 1, defaultValue = false): boolean {
+
+	if (true === value || false === value) {
+		return value;
+	}
+
+	if (0 === value || 1 === value) {
+		return !!value;
+	}
+
+	return defaultValue;
+}
+
+function validateString(value?: string, defaultValue = ''): string {
+	return value ? value : defaultValue;
+}
+
+function getArrayType(sourcesArr?: Array<{ [key: string]: string }>, pageArr: Array<{ [key: string]: string }> = []): Array<{ [key: string]: string }> {
+
+	if ((!sourcesArr || !sourcesArr.length) && (!pageArr || !pageArr.length)) {
+		return [];
+	}
+
+	if (sourcesArr && sourcesArr.length && pageArr && pageArr.length) {
+		return sourcesArr.concat(pageArr);
+	}
+
+	if (sourcesArr && sourcesArr.length) {
+		return sourcesArr;
+	}
+
+	return pageArr;
+}
+
+function formatPagesConfig(sources: { title: string, filename: string, render: string, html: ConfigHtml, window: ConfigWindow }, pages: ConfigPages): ConfigPages {
+
+	const ret: ConfigPages = {};
+
+	for (const pk in pages) {
+
+		ret[pk] = {
+			staticPage: validateBoolean(pages[pk].staticPage, false),
+			buildExclude: validateBoolean(pages[pk].buildExclude, false),
+			title: validateString(pages[pk].title, sources.title),
+			filename: validateString(pages[pk].filename, sources.filename),
+			html: {
+				head: {
+					meta: getArrayType(sources.html.head.meta, pages[pk].html.head.meta),
+					links: getArrayType(sources.html.head.links, pages[pk].html.head.links),
+					scripts: getArrayType(sources.html.head.scripts, pages[pk].html.head.scripts),
+				},
+				body: {
+					scripts: getArrayType(sources.html.body.scripts, pages[pk].html.body.scripts),
+					snippet: validateString(pages[pk].html.body.snippet, sources.html.body.snippet),
+				},
+			},
+			window: merge({}, sources.window, pages[pk].window),
+			render: validateString(sources.render, pages[pk].render),
+		};
+	}
+
+	return ret;
+}
+
+export default formatPagesConfig;

frontend/packages/scripts/lib/webpack-helpers/generateConfig.ts

@@ -0,0 +1,308 @@
+const path = require('path');
+const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
+
+// Webpack plugins.
+const { DefinePlugin } = require('webpack');
+const { LimitChunkCountPlugin } = require('webpack').optimize;
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const VirtualModulesPlugin = require('webpack-virtual-modules');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const ProgressBarPlugin = require('progress-bar-webpack-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+const CopyPlugin = require("copy-webpack-plugin");
+
+var dotenv = require('dotenv').config({ path: path.resolve(__dirname + '../../../../.env') });
+
+import MyHtmlBeautifyWebpackPlugin from '../webpack-plugins/MyHtmlBeautifyWebpackPlugin';
+
+import { ConfigType, ConfigPages } from '../config';
+
+import defaultPages from './pagesConfig';
+
+import formatPagesConfig from './formatPagesConfig';
+
+function webpackEntry(env: string, srcDir: string, pages: ConfigPages) {
+
+	const ret: { [key: string]: string } = {};
+
+	for (const p in pages) {
+
+		if ('development' === env || !pages[p].buildExclude) {
+			ret[p] = path.resolve(srcDir + '/' + p + '.js');
+		}
+	}
+
+	return ret;
+}
+
+function webpackOutput(env: string, destinationDir: string, buildDir?: string, chunkhash?: string, hash?: string) {
+
+	const ret = {
+		path: destinationDir,
+		filename: '',
+	};
+
+	const prefix = 'development' === env ? '' : buildDir;
+
+	let tmp;
+
+	if (undefined !== chunkhash) {
+
+		tmp = chunkhash.trim();
+
+		if ('' === tmp) {
+			throw Error('Invalid chunkhash argument value: ' + chunkhash);
+		}
+
+		ret.filename = (prefix || '') + '[name]-[chunkhash].js';
+	}
+	else if (undefined !== hash) {
+
+		tmp = hash.trim();
+
+		if ('' === tmp) {
+			throw Error('Invalid hash argument value: ' + hash);
+		}
+
+		ret.filename = (prefix || '') + '[name]-[hash].js';
+	}
+	else {
+		ret.filename = (prefix || '') + '[name].js';
+	}
+
+	return ret;
+}
+
+function webpackAlias() {
+
+	return {
+		// modernizr$: path.resolve(__dirname, "../../.modernizrrc"),   // TODO: Enable this?
+	};
+}
+
+function webpackRules(env: string, srcDir: string, postcssConfigFile: string): any[] {
+
+	return [{
+		test: /\.(jsx|js)?$/,
+		use: 'babel-loader'
+	},
+	{
+		test: /\.(tsx|ts)?$/,
+		use: 'ts-loader',
+		// exclude: /node_modules/,
+		// options: {
+		//   compilerOptions: {
+		// 	"sourceMap": !isProduction,
+		//   },
+		// },
+	},
+	{
+		test: /\.ejs$/,
+		use: {
+			loader: 'ejs-compiled-loader',
+			options: {
+				// beautify: true,
+				htmlmin: true,
+				// htmlminOptions: {
+				//     removeComments: true,
+				//     collapseWhitespace: true,
+				//     preserveLineBreaks: true
+				// }
+			}
+		}
+	},
+	{
+		test: /\.(sa|sc|c)ss$/,
+		use: [
+			{ loader: MiniCssExtractPlugin.loader },
+			// { loader: 'development' === env ? MiniCssExtractPlugin.loader : 'style-loader' },  // Use inline <style> tag.
+			{ loader: 'css-loader', options: { importLoaders: 1 } },
+			{ loader: 'postcss-loader', options: { postcssOptions: { config: postcssConfigFile } } },
+			{ loader: 'sass-loader' },
+		],
+	},
+	{
+		test: /\.module\.(sa|sc|c)ss$/,
+		use: [
+			{ loader: MiniCssExtractPlugin.loader },
+			// { loader: 'development' === env ? MiniCssExtractPlugin.loader : 'style-loader' },  // Use inline <style> tag.
+			{ loader: 'css-loader', options: { importLoaders: 1, modules: true, onlyLocals: false } },
+			{ loader: 'postcss-loader', options: { postcssOptions: { config: postcssConfigFile } } },
+			{ loader: 'sass-loader' },
+		]
+	},
+	{
+		test: /\.(png|jpe?g|gif)(\?\S*)?$/,
+		use: {
+			loader: 'url-loader',
+			options: {
+				limit: 1024,
+				fallback: 'file-loader',
+				name: (file: string) => {
+					return '.' + path.join(file.replace(srcDir, ''), '..').replace(/\\/g, '/') + '/[name].[ext]';
+				},
+			},
+		},
+	},
+	{
+		test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
+		/*issuer: {
+				test: /\.jsx?$/
+			},*/
+		use: ['babel-loader', '@svgr/webpack', 'url-loader']
+	},
+	{
+		test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
+		loader: 'url-loader'
+	},
+	{
+		test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
+		use: [{
+			loader: 'file-loader',
+			options: {
+				name: (file: string) => {
+					return '.' + path.join(file.replace(srcDir, ''), '..').replace(/\\/g, '/') + '/[name].[ext]';
+				},
+			}
+		}]
+	},
+	{
+		test: /\.modernizrrc.js$/,
+		use: 'modernizr-loader',
+	},
+	{
+		test: /\.modernizrrc(\.json)?$/,
+		use: ['modernizr-loader', 'json-loader'],
+	}
+	];
+}
+
+function webpackPlugins(env: string, srcDir: string, pages: ConfigPages, cssSrc: string) {
+
+	const ret = [
+		new DefinePlugin({ "process.env": JSON.stringify(dotenv.parsed) }),
+		new NodePolyfillPlugin(),
+		new MyHtmlBeautifyWebpackPlugin(),
+	];
+
+	if ('development' !== env) {
+		ret.push(
+			new CopyPlugin({
+				patterns: [
+					{
+						from: path.resolve(__dirname, '../../../src/static/lib'),
+						to: path.resolve(__dirname, '../../../' + env + '/static/lib'),
+					},
+					{
+						from: path.resolve(__dirname, '../../../src/static/images'),
+						to: path.resolve(__dirname, '../../../' + env + '/static/images'),
+					},
+					{
+						from: path.resolve(__dirname, '../../../src/static/favicons'),
+						to: path.resolve(__dirname, '../../../' + env + '/static/favicons'),
+					},
+					{
+						from: path.resolve(__dirname, '../../../src/static/css/_extra.css'),
+						to: path.resolve(__dirname, '../../../' + env + '/static/css/_extra.css'),
+					},
+				],
+			})
+		);
+	}
+
+	const virtualPages: { [key: string]: string } = {};
+
+	let file: string;
+
+	for (const k in pages) {
+
+		if ('production' !== env || !pages[k].buildExclude) {
+
+			file = path.resolve(srcDir + '/' + k + '.js');
+
+			if ((void 0 !== pages[k].staticPage && pages[k].staticPage) || void 0 === pages[k].render) {
+				virtualPages[file] = '';
+			} else {
+				virtualPages[file] = pages[k].render;
+			}
+		}
+
+		if ('development' === env) {
+			// Export pages HTML files.
+			ret.push(new HtmlWebpackPlugin({
+				template: path.resolve(__dirname, '../templates/index.ejs'),
+				hash: false,
+				chunks: [k],
+				...pages[k],
+			}));
+		}
+	}
+
+	ret.push(new VirtualModulesPlugin(virtualPages));
+
+	ret.push(new MiniCssExtractPlugin({
+		ignoreOrder: true,	// TODO: Remove it...
+		// filename: ! is_build ? '[name].css' : '[name].[hash].css',
+		// chunkFilename: ! is_build ? '[id].css' : '[id].[hash].css',
+		filename: cssSrc + '[name].css',
+		// chunkFilename: "../css/[id].css",
+	}));
+
+	if ('development' !== env) {
+		ret.push(new LimitChunkCountPlugin({ maxChunks: 1 }));
+		ret.push(
+			new ProgressBarPlugin({
+				clear: false,
+			})
+		);
+	}
+
+	if ('production' === env) {
+		ret.push(new CssMinimizerPlugin({
+			cache: true, // TODO: Ignore in Webpack 5. Use https://webpack.js.org/configuration/other-options/#cache.
+			minimizerOptions: {
+				preset: [
+					'default',
+					{
+						discardComments: { removeAll: true },
+					},
+				],
+			},
+		}));
+	}
+
+	return ret;
+}
+
+export default function generateConfig(env: string, config: ConfigType) {
+
+	const srcDir = config.src;
+	const buildDir = config.build + '/' + env + ('development' === env ? '' : '/static');
+
+	const cssbuild = './css/';
+	const jsbuild = './js/';
+
+	const configPages = config.pages;
+	const configPagesKeys = config.pages ? Object.keys(configPages) : [];
+	const defPages = defaultPages(configPagesKeys);
+
+	const pages = formatPagesConfig(
+		{ title: '', filename: '', render: '', html: config.html, window: config.window },
+		{ ...configPages, ...defPages }
+	);
+
+	const ret = {
+		entry: webpackEntry(env, srcDir, pages),
+		output: 'development' === env ? webpackOutput(env, srcDir, void 0, void 0, void 0) : webpackOutput(env, buildDir, jsbuild, void 0, void 0),
+		plugins: webpackPlugins(env, srcDir, pages, cssbuild),
+		module: {
+			rules: webpackRules(env, srcDir, config.postcssConfigFile),
+		},
+		resolve: {
+			alias: webpackAlias(),
+			extensions: ['.tsx', '.ts', '.jsx', '.js'],
+		},
+	};
+
+	return ret;
+}

frontend/packages/scripts/lib/webpack-helpers/pagesConfig.ts

@@ -0,0 +1,37 @@
+const fs = require('fs');
+const path = require('path');
+
+const ejs = require('ejs');
+
+const templatePath = path.join(__dirname, '../templates');
+const sitemapTemplatePath = path.join(templatePath, 'sitemap.ejs');
+
+const sitemapTemplate = ejs.compile(fs.readFileSync(sitemapTemplatePath, 'utf8'), { root: [templatePath], filename: sitemapTemplatePath, outputFunctionName: 'echo' });
+
+import { ConfigPages } from '../config';
+
+export default function pagesConfig(pagesKeys: string[]): ConfigPages {
+
+	const pages: ConfigPages = {};
+
+	if (-1 === pagesKeys.indexOf('sitemap')) {
+
+		pages.sitemap = {
+			staticPage: true,
+			buildExclude: true,
+			title: 'Sitemap',
+			filename: 'sitemap.html',
+			html: {
+				head: {},
+				body: {
+					scripts: [],
+					snippet: sitemapTemplate({ pages: [...pagesKeys, ...Object.keys(pages)] }),
+				},
+			},
+			window: {},
+			render: ''
+		};
+	}
+
+	return pages;
+}

frontend/packages/scripts/lib/webpack-plugins/MyHtmlBeautifyWebpackPlugin.ts

@@ -0,0 +1,74 @@
+/**
+ * @see {link: https://github.com/seeyoulater/html-beautify-webpack-plugin/blob/master/index.js}
+ */
+
+const prettify = require('html-prettify');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+const WebpackError =  require( 'webpack/lib/WebpackError.js' );
+
+import { Compiler, Compilation } from 'webpack';
+
+interface OptionsConfigHtml {
+	end_with_newline: boolean,
+	indent_inner_html: boolean,
+	preserve_newlines: boolean,
+	max_preserve_newlines: number,
+}
+
+interface OptionsConfig {
+	indent_size: number,
+	indent_with_tabs: boolean,
+	html: OptionsConfigHtml
+}
+
+interface Options{
+	config: OptionsConfig,
+	replace: Array<string|RegExp>
+}
+
+interface HtmlWebpackPluginArgs{
+	html: string,
+	plugin: typeof HtmlWebpackPlugin,
+	outputName: string
+}
+
+function htmlPluginDataFunction (pluginData: HtmlWebpackPluginArgs, options: Options, callback: (err:typeof WebpackError, arg1: HtmlWebpackPluginArgs) => void) {
+	
+	pluginData.html = prettify( 
+		options.replace.reduce( (res:string, item: string | RegExp) => res.replace( item instanceof RegExp ? new RegExp(item, 'gi') : item, '' ), pluginData.html )/*,
+		options.config*/
+	);
+
+	callback(null, pluginData);
+}
+
+export default class MyHtmlBeautifyWebpackPlugin {
+
+	apply(compiler: Compiler): void {
+	
+		const options: Options = {
+			config: {	// TODO: Remove it.
+				indent_size: 4,
+				indent_with_tabs: false,
+				html: {
+					end_with_newline: true,
+					indent_inner_html: true,
+					preserve_newlines: true,
+					max_preserve_newlines: 0,
+				}
+			},
+			replace: []
+		};
+
+		function tapAsyncCallback(pluginData: HtmlWebpackPluginArgs, callback: (err:typeof WebpackError, arg1: HtmlWebpackPluginArgs) => void ){
+			return htmlPluginDataFunction (pluginData, options, callback);
+		}
+
+		function tapHookCallback(compilation: Compilation){
+			return HtmlWebpackPlugin.getHooks(compilation).beforeEmit.tapAsync( 'MyHtmlBeautifyWebpackPlugin', tapAsyncCallback );
+		}
+
+		compiler.hooks.compilation.tap( 'MyHtmlBeautifyWebpackPlugin', tapHookCallback );
+	}
+}