webpack.config.js

'use strict';

const webpack                    = require('webpack');
const express                    = require('express');
const fs                         = require('fs');
const path                       = require('path');
const TerserPlugin               = require("terser-webpack-plugin");
const MiniCssExtractPlugin       = require('mini-css-extract-plugin');
const CssMinimizerPlugin         = require("css-minimizer-webpack-plugin");
const { CleanWebpackPlugin }     = require('clean-webpack-plugin');
const glob                       = require('glob');
const randomString               = require('random-string');
const IncludeFileWebpackPlugin   = require('include-file-webpack-plugin');
const moment                     = require('moment');
const json                       = JSON.parse(fs.readFileSync('./package.json'));
const webpackDevMiddleware       = require('webpack-dev-middleware');
const WebpackConcatPlugin        = require('webpack-concat-files-plugin');

// typescript cheker
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

const colors = {
    Reset: "\x1b[0m",
    Bright: "\x1b[1m",
    Dim: "\x1b[2m",
    Underscore: "\x1b[4m",
    Blink: "\x1b[5m",
    Reverse: "\x1b[7m",
    Hidden: "\x1b[8m",
    fg: {
        Black: "\x1b[30m",
        Red: "\x1b[31m",
        Green: "\x1b[32m",
        Yellow: "\x1b[33m",
        Blue: "\x1b[34m",
        Magenta: "\x1b[35m",
        Cyan: "\x1b[36m",
        White: "\x1b[37m",
        Crimson: "\x1b[38m" //القرمزي
    },
    bg: {
        Black: "\x1b[40m",
        Red: "\x1b[41m",
        Green: "\x1b[42m",
        Yellow: "\x1b[43m",
        Blue: "\x1b[44m",
        Magenta: "\x1b[45m",
        Cyan: "\x1b[46m",
        White: "\x1b[47m",
        Crimson: "\x1b[48m"
    }
};

let globs = {
	port                  : 8080,
	examples              : 'examples',
	build                 : 'src',
	dist                  : 'dist',
	pathCore              : './src/components',
	pathThirdPartyPlugins : './src/components/_third-party-plugins',
};


/*! 
 *************************************
 * Site Info
 *************************************
 */
const charset                  = 'utf-8';
const lang                     = 'en-US';
const dirLTR                   = 'ltr';
const dirRTL                   = 'rtl';
const customWebsiteVersion     = json.version,
	  customWebsiteAuthor      = ( Object.prototype.toString.call( json.author ) == '[object Object]' ) ? json.author.name : json.author,
	  customWebsiteTitle       = json.projectName,
	  customWebsiteDesc        = json.description,
	  customWebsiteGenerator   = 'Uix Kit',
	  customWebsiteHash        = randomString({length: 20}),
	  customWebsiteComment     = `
DO NOT OVERRIDE THIS FILE.
Generated with "npm run build"

## Project Name        :  ` + customWebsiteTitle + `
## Project Description :  ` + customWebsiteDesc + `
## Project URL         :  ` + json.projectURL + `
## Version             :  ` + customWebsiteVersion + `
## Based on            :  Uix Kit (` + json.homepage + `)
## Last Update         :  ` + moment().format( "MMMM D, YYYY" ) + `
## Created by          :  ` + json.createdInfo + ( json.email != '' ? ' (' + json.email + ')' : '' ) + `
## Released under the ` + json.license + ` license.
	`;


// Get all the HTML template files
const tempPagesES6 = glob.sync( globs.pathCore + '/**/*.html' );
const targetTempFilesName = [];
const targetAllTempFilesName = [];

const tempPagesArrays = [
  tempPagesES6
];
const tempAllPages = [].concat(...tempPagesArrays);


tempAllPages.map( ( event ) => {
	const filename = event.split( '/' ).pop();
	
	targetAllTempFilesName.push( [ event, event.split( '/' ).pop() ] );
	
	if ( filename.indexOf( 'include-' ) < 0 ) {
		targetTempFilesName.push( [ event, event.split( '/' ).pop() ] );
	}
	
});


// Return to the HTML template file that will be watched
const targetFilesNameArrays = [
  targetAllTempFilesName
];
const targetAllWatchFilesName = [].concat(...targetFilesNameArrays);


// String replacement for page templates
class ReplacePlaceholderForFile {
	constructor( options ) {
		this.options = options;
	}
	apply( compiler ) {
		compiler.hooks.done.tap('ReplacePlaceholderForFile', ( stats ) => {
			
			const filepath = this.options.filepath;
			
			// When the Node module is running, this plugin may be executed 
			// at the same time, which will result in incomplete content reading.
			/*
			@Other method:
			
			try {  
				let data = fs.readFileSync('file.html', 'utf8');
				console.log(data);    
			} catch(e) {
				console.log('Error:', e.stack);
			}
			*/
			fs.readFile( filepath, 'utf8', function(err, data ){

				if ( err ) {
					console.log(colors.fg.Red, err, colors.Reset);
				} else {
					
					
					if ( data.length > 0 && data.indexOf( '</html>' ) >= 0 ) {
						data = data.replace(/\@\@\{website_title\}/g, customWebsiteTitle )
									.replace(/\@\@\{website_desc\}/g, customWebsiteDesc )
									.replace(/\@\@\{website_author\}/g, customWebsiteAuthor )
									.replace(/\@\@\{website_generator\}/g, customWebsiteGenerator )
									.replace(/\@\@\{website_version\}/g, customWebsiteVersion )
									.replace(/\@\@\{website_comment\}/g, customWebsiteComment )
									.replace(/\@\@\{website_hash\}/g, customWebsiteHash )
									.replace(/\@\@\{website_charset\}/g, charset )
									.replace(/\@\@\{website_lang\}/g, lang )
									.replace(/\@\@\{website_dirLTR\}/g, dirLTR )
									.replace(/\@\@\{website_dirRTL\}/g, dirRTL );

						fs.writeFile( filepath, data, (err) => {
							if ( err ) {
								console.log(colors.fg.Red, err, colors.Reset);
								return;
							}
							//file written successfully
							//console.log(colors.fg.Green, `${filepath} written successfully!`, colors.Reset);

						});		
					}


				}


			}); //end fs.readFile

		});
	}
}



/*! 
 *************************************
 *  Run command after webpack build
 *************************************
 */
	
 class MyPluginCompiledFunction {
	// Define `apply` as its prototype method which is supplied with compiler as its argument
	apply(compiler) {
		// Specify the event hook to attach to
		compiler.hooks.done.tap('MyPluginCompiledFunction', (compilation) => {

			const coreJSsFile = globs.pathCore + '/_app-load.ts';
			if ( fs.existsSync( coreJSsFile ) ) {
				fs.readFile( coreJSsFile, 'utf8', function( err, content ) {
					if ( err ) throw err;
			
					//---
					console.log(colors.fg.Yellow, `----------------------------------------------`, colors.Reset);
			
					const targetJSFile = './'+globs.dist+'/js/uix-kit.js';
		
					//
					const tocBuildedFiles = [
						'./'+globs.dist+'/css/uix-kit.css', 
						'./'+globs.dist+'/css/uix-kit-rtl.css', 
						targetJSFile 
					];

					const tocBuildedTotal = tocBuildedFiles.length;
					let tocBuildedIndex = 1;
					
					// Read all core css and js files and build a table of contents
					//---------------------------------------------------------------------
					// Build a table of contents (TOC)
					tocBuildedFiles.forEach( ( filepath ) => {
		
						if ( fs.existsSync( filepath ) ) {
		
							fs.readFile( filepath, 'utf8', function( err, content ) {
		
								if ( err ) throw err;
		
								
								const curCon  = content.toString(),
										newtext = curCon.match(/<\!\-\-.*?(?:>|\-\-\/>)/gi );
		
								
		
								//is the matched group if found
								if ( newtext && newtext.length > 0 ) {  
		
									let curToc = '';
		
									for ( let p = 0; p < newtext.length; p++ ) {
		
										let curIndex = p + 1,
											newStr   = newtext[ p ].replace( '<!--', '' ).replace( '-->', '' ).replace(/^\s+|\s+$/g, '' );
		
										if ( p > 0 ) {
											curToc += '    ' + curIndex + '.' + newStr + '\n';
										} else {
											curToc +=  curIndex + '.' + newStr + '\n';
										}
		
									}
		
									//Replace a string in a file with nodejs
									const resultData = curCon.replace(/\$\{\{TOC\}\}/gi, curToc );
		
									fs.writeFile( filepath, resultData, 'utf8', function (err) {
		
										if ( err ) {
											console.log(colors.fg.Red, err, colors.Reset);
											return;
										}
										//file written successfully	
										console.log(colors.fg.Green, `${filepath}'s table of contents generated successfully! (${tocBuildedIndex}/${tocBuildedTotal})`, colors.Reset);
		
										tocBuildedIndex++;
		
		
									});
		
		
								}
		
		
							});// fs.readFile( filepath ...
		
		
						}//endif fs.existsSync( filepath ) 
		
		
					});	//.map( ( filepath )...
					
					
				});
			
			}

			
		});
	}
}
  


/*! 
 *************************************
 *  Main configuration
 *************************************
 */
const devMode = process.env.NODE_ENV !== 'production';
const webpackConfig = {
	devtool: devMode ? 'source-map' : false,
    performance: {
        hints: !devMode ? "warning" : false
    },
    watch: true,
    mode: 'production',
    resolve: {
		fallback: {
			fs: false
		},
        extensions: ['.js', '.jsx', '.ts', '.tsx', '.scss', '.sass'],
		alias: {
			
			// specific mappings.
			// Supports directories and custom aliases for specific files when the express server is running, 
			// you need to configure the following files at the same time:
			// 1) `babel.config.js`    --> "plugins": [["module-resolver", {"alias": {...}} ]]
			//  2) `tsconfig.json`      --> "compilerOptions": { "paths": {...} }
			//  3) `package.json`       --> "jest": { "moduleNameMapper": {...} }
			
			'@uixkit/core': path.resolve(__dirname, globs.pathCore ),
			'@uixkit/plugins': path.resolve(__dirname, globs.pathThirdPartyPlugins ),
		}
    },
	
    //Exclude react from bundle
    externals: {
        'react': 'React',
        'react-dom': 'ReactDOM',
        'prefixfree': 'StyleFix',
        'modernizr': 'Modernizr',
        'jquery': 'jQuery',
        'axios': 'axios',
        'jquery.waitforimages': 'waitForImages',
        'video.js': 'videojs',
        'gsap': 'gsap',
        'pixi.js': 'PIXI',
        'three': 'THREE',
        'animejs': 'anime',
        'hammerjs': 'Hammer'
    },
    entry: {
        'uix-kit': './' + globs.build + '/index.ts',
        'uix-kit.min': './' + globs.build + '/index.ts',
        'uix-kit-rtl': './' + globs.build + '/index-rtl.ts',
        'uix-kit-rtl.min': './' + globs.build + '/index-rtl.ts',
    },
    output: {
        path: path.resolve(__dirname, './' + globs.dist + '/js' ),
        filename: '[name].js'
    },

	optimization: {
		minimize: true,
	    minimizer: [

			new TerserPlugin({
				test: /\.min\.js$/i
			}),
			
			new MiniCssExtractPlugin({
				// Options similar to the same options in webpackOptions.output
				// both options are optional
				filename: '../css/[name].css'
			}),

            new CssMinimizerPlugin({
                test: /\.min\.css$/i,
                parallel: true,
                minimizerOptions: {
                    preset: [
                        "default",
                        {
                            discardComments: { removeAll: true },
                        },
                    ],
                },
            }),
	
	
		],
		
	},
    module: {
        rules: [
            {
                test: /\.(glsl|vs|fs|vert|frag)$/,
                exclude: path.resolve(__dirname, './node_modules'),
                use: [
                    'raw-loader',
                    'glslify-loader'
                ]
            },
			{
                test: /\.json$/,
                exclude: path.resolve(__dirname, './node_modules'),
                loader: "json-loader"       
            },

            {
				test: /\.(js|jsx|ts|tsx)$/,
                loader: 'babel-loader',
                exclude: path.resolve(__dirname, './node_modules' ),
                options: {  
				  'presets': [
					  '@babel/preset-env',
					  '@babel/preset-react',
					  '@babel/preset-typescript',
					  {
						plugins: [
						  '@babel/plugin-proposal-class-properties'
						]
					  }	
				  ]
                }
			},
			{
				
				test: /\.(sa|sc|c)ss$/,
				include: path.resolve( __dirname, './' + globs.build ),
				use: [
					/**
					 * Note:
					 * You can use `style-loader` to inject CSS into the DOM to generate a final js file
                     * 
                     * 	1) "file-loader" Compatible with node-sass(4+) and sass-loader(7+)
                     *  2) The versions of node-sass (7+) and sass-loader (12+) are matched to extract files without `file-loader`
					 */
					{
						loader: MiniCssExtractPlugin.loader, //Extracts CSS into separate files  ( Step 3 )
						options: {
							// you can specify a publicPath here
							// by default it use publicPath in webpackOptions.output
							publicPath: `../../${globs.dist}/js/`

						}
					},

					{
						loader: "css-loader",  // interprets @import and url() and will resolve them. ( Step 2 )
						options: {
							sourceMap: true
						}
					},
					{
                        loader: 'sass-loader', // compiles Sass to CSS ( Step 1 )
                        options: {
                            implementation: require("sass"),
                            sourceMap: true,
                            /* (nested | expanded | compact | compressed) */
                            sassOptions: {
                                outputStyle: 'expanded',
                            },

                        }

					},
				]
			},
			
			{
				test: /\.html$/,
				use: [ 
					{
						loader: 'html-loader',
						options: {
							minimize: false,
							removeComments: false,
							collapseWhitespace: false
						}
					}
				]
			},
			
			// Compatible with webpack 5.76.0+
			{
				test: /\.(png|jpe?g|gif|ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
			   loader: 'file-loader', 
			   options: {
				 esModule: false, //change the css path via output
				 outputPath: (url, resourcePath, context) => { //the files from `./src/...` will copy to `./dist/`
					 
					//original name: path.basename(resourcePath)
					
					//fonts
					if ( resourcePath.indexOf( 'webfonts/' ) >= 0 || resourcePath.indexOf( 'fonts/' ) >= 0 ) {
						return '../fonts/' + url;
					}
					 
					//imags
					if ( resourcePath.indexOf( 'images/' ) >= 0 || resourcePath.indexOf( 'img/' ) >= 0 ) {
						return '../images/' + url;
					} 
					 
						
					return '../misc/' + url;
				   
				 },
				 publicPath: (url, resourcePath, context) => { //the css path of output 

					// If the file is in the root directory, you can leave it empty. If in another directory, 
					// you can write: "/blog". (but no trailing slash)
					const websiteRootDir = '';
					
					//fonts
					if ( resourcePath.indexOf( 'webfonts/' ) >= 0 || resourcePath.indexOf( 'fonts/' ) >= 0 ) {
						return `${websiteRootDir}/${globs.dist}/fonts/${url}`;
					}
				   
					//imags
					if ( resourcePath.indexOf( 'images/' ) >= 0 || resourcePath.indexOf( 'img/' ) >= 0 ) {
						return `${websiteRootDir}/${globs.dist}/images/${url}`;
					} 
					 
						
					return `${websiteRootDir}/${globs.dist}/misc/${url}`;
					 
				   
				 }
			   }
		   }


			/*
			{
				test: /\.scss$/,
				loader: 'prettier-loader',
				// force this loader to run first if it's not first in loaders list
				enforce: 'pre',
				// avoid running prettier on all the files!
				// use it only on your source code and not on dependencies!
				options: {
					'parser': 'postcss',
					// additional prettier options assigned to options in
					// - .prettierrc,
					// - prettier.config.js,
					// - "prettier" property in package.json
					'printWidth': 120,    
					'tabWidth': 4,
					'semi': true,           
					'singleQuote': true,   
					'trailingComma': 'none', 
					'bracketSpacing': true,
					'jsxBracketSameLine': false, 
					'arrowParens': 'avoid', 
					'requirePragma': false, 
					'proseWrap': 'preserve' 
					
				},
			},	
			*/
			
	
			
        ],
		
		

    },
	plugins: [
		new MyPluginCompiledFunction()
	]
	
	
};

// Remove include files and extra CSS files
webpackConfig.plugins.push(
    new CleanWebpackPlugin({
        // Removes files after every build (including watch mode) that match this pattern.
        cleanAfterEveryBuildPatterns: [
            globs.build + '/**/*.css',
            globs.examples + '/*.html',
        ],
    })
);

// Adds a banner to the top of each generated chunk.
webpackConfig.plugins.push(
    new webpack.BannerPlugin( customWebsiteComment )
);


// Batch processing HTML template files
targetTempFilesName.map( ( event ) => {
	
	webpackConfig.plugins.push(
		new IncludeFileWebpackPlugin({
			directory: '',
			input: `${event[0]}`,
			output: `./${globs.examples}/${event[1]}`,
			processIncludeContents: function(html) {
				return html;
			}
		})
	);
});

// String replacement for page templates
targetTempFilesName.map( ( event ) => {
	
	webpackConfig.plugins.push(
		new ReplacePlaceholderForFile({
			filepath: `./${globs.examples}/${event[1]}`
		})
	);

});



// Add .min.css files souce map
webpackConfig.plugins.push(
	new webpack.SourceMapDevToolPlugin({
		filename: '../js/[file].map'
	})
);


// typescript checker
webpackConfig.plugins.push(
	new ForkTsCheckerWebpackPlugin()
);







// Create vendor.js from all third-party generic script library

// webpackConfig.plugins.push(

// 	new WebpackConcatPlugin({
// 		bundles: [
// 			{
// 				dest: './' + globs.dist + '/js/vendor.js',
// 				src: [
// 					'./vendor/files/axios.min.js',
// 					'./vendor/files/jquery.waitforimages.min.js',
// 					'./vendor/files/video.min.js',
// 					'./vendor/files/TweenMax.min.js',
// 					'./vendor/files/pixi.min.js',
// 					'./vendor/files/three.min.js',
// 					'./vendor/files/anime.min.js',
// 					'./vendor/files/hammer.min.js',
// 				],
// 			},
// 		],
// 	})
// );



/*! 
 *************************************
 * Hook our plugins to fix webpack dev server is 
 * not serving the latest compiled code
 *************************************
 */
const compiler = webpack( webpackConfig, () => {});
//
const app = express();
const instance = webpackDevMiddleware( compiler );
app.use( instance );
app.use(express.static( './' ));



//Watch for Files Changes in Node.js
require('log-timestamp');

targetAllWatchFilesName.map( ( event ) => {
	
	let curFile = `${event[0]}`;

	fs.watchFile( curFile, (curr, prev) => {
		
		console.log(colors.fg.Yellow, `${curFile} file Changed`, colors.Reset);
		
		// After a short delay the configuration is changed and a banner plugin is added
		// to the config
        new CleanWebpackPlugin({
            // Removes files after every build (including watch mode) that match this pattern.
            cleanAfterEveryBuildPatterns: [
                globs.build + '/**/*.css'
            ],
        }).apply(compiler);

	
		targetTempFilesName.map( ( event ) => {

			new IncludeFileWebpackPlugin({
				directory: '',
				input: `${event[0]}`,
				output: `./${globs.examples}/${event[1]}`,
				processIncludeContents: function(html) {
					return html;
				}
			}).apply(compiler);

			new ReplacePlaceholderForFile({
				filepath: `./${globs.examples}/${event[1]}`
			}).apply(compiler);

		});

		// Recompile the bundle with plugins:
		instance.invalidate();	
	});
	
});

/*! 
 *************************************
 *  Listen the server
 *************************************
 */

app.listen(globs.port, () => console.log(`Frontend service listening on port: ${globs.port}, access http://localhost:${globs.port} in the web browser`));


/*
const WebpackDevServer = require('webpack-dev-server');
const server = new WebpackDevServer( compiler, {
					contentBase: [
						path.resolve(__dirname, './' )
					],
	                hot: true,
					watchContentBase: true,
				});

server.listen( globs.port, "localhost", function (err, result) {
	if (err) {
	    return console.log(colors.fg.Red, err, colors.Reset);
	}
	console.log(colors.fg.Yellow, 'Listening at http://localhost:' + globs.port, colors.Reset);
});
*/


						
/*! 
 *************************************
 *  Exporting webpack module
 *************************************
 */
module.exports = webpackConfig;