b13-rocket 0.5.0

package/src/help.js

@@ -0,0 +1,36 @@
+import chalk from 'chalk';
+import { Notification } from './notification';
+import { sites } from './sites';
+
+export async function help(args) {
+	const { siteConfig, hasSiteConfig } = await sites(args);
+	const siteOptions = `--site={ ${chalk.blackBright([...siteConfig.keys()].join(' | '))} }`;
+	const modeOptions = `--mode={ ${chalk.blackBright('development | production (default)')} }`;
+
+	const menus = {
+		main: `
+  ${chalk.greenBright('rocket [command] <options>')}
+    ${chalk.blueBright('build')} ..... build JS and CSS 
+      ${siteOptions}
+      ${modeOptions}
+      --target={ ${chalk.blackBright('js | scss | less')} }
+      --bundleAnalyzer=true ${chalk.blackBright('// start "webpack-bundle-analyzer"')}
+
+    ${chalk.blueBright('hmr')} ....... start hot module replacment
+      ${siteOptions}
+      ${modeOptions}
+
+    ${chalk.blueBright('create')} .... create new config file for your TYPO3 site extension
+    
+    ${chalk.blueBright('stylelint')} ... format SCSS via stylelint
+      ${siteOptions}
+      --fix={ false (default) | true }
+
+    ${chalk.blueBright('help')} ...... show help menu for a command
+    
+    ${chalk.blueBright('version')} ... show package version
+`,
+	};
+
+	Notification.log(menus.main);
+}

package/src/hmr.js

@@ -0,0 +1,84 @@
+import { sites } from './sites';
+import path from 'path';
+import webpack from 'webpack';
+import webpackDevServer from 'webpack-dev-server';
+import { default as webpackConfig } from './webpack/webpack.config.base';
+import { env } from './utility/env';
+import { VueLoaderPlugin } from 'vue-loader';
+import { Notification } from './notification';
+
+// on exit
+process.on('SIGINT', () => {
+	env.disableHMR();
+	Notification.log('🚀 hdgdl...');
+	process.exit();
+});
+
+export async function hmr(args) {
+	const { siteConfig, hasSiteConfig } = await sites(args);
+
+	if (!args.sitesConfigPath) {
+		console.log(error('missing site build config'));
+		return;
+	}
+
+	const sitesConfigPath = args.sitesConfigPath;
+
+	if (hasSiteConfig(args.site)) {
+		const site = siteConfig.get(args.site);
+		const isDdev = process.env.DDEV_PRIMARY_URL;
+		const primaryUrl = new URL(isDdev ? process.env.DDEV_PRIMARY_URL : 'https://127.0.0.1');
+		const port = isDdev ? 8088 : 8080;
+		const wpConfig = webpackConfig(site.config, sitesConfigPath, 'development');
+
+		let publicPath = `http://127.0.0.1:${port}/`;
+		if (site.config.js.path.public) {
+			publicPath = `https://${primaryUrl.hostname}:${port}${site.config.js.path.public}`;
+		}
+
+		wpConfig.output = {
+			filename: '[name]-hmr.js',
+			libraryTarget: 'umd',
+			library: site.config.js.filename.main,
+			umdNamedDefine: false,
+			path: path.resolve(__dirname, site.config.js.path.target),
+			publicPath,
+		};
+
+		wpConfig.plugins.push(
+			new VueLoaderPlugin(),
+			new webpack.DefinePlugin({
+				B13_HMR_ENABLED: JSON.stringify(true),
+			}),
+			{
+				apply: (compiler) => {
+					compiler.hooks.watchRun.tap('enableHMR', (compilation) => {
+						env.enableHMR();
+					});
+				},
+			},
+		);
+
+		const devServer = new webpackDevServer({
+			headers: { 'Access-Control-Allow-Origin': '*' },
+			historyApiFallback: true,
+			server: isDdev ? 'http' : 'https',
+			allowedHosts: 'all',
+			port,
+			hot: true,
+			client: {
+				webSocketURL: {
+					hostname: primaryUrl.hostname,
+					pathname: '/ws',
+					port,
+					protocol: 'wss',
+				},
+			},
+		}, webpack(wpConfig));
+
+		(async() => {
+			await devServer.start();
+			console.log(`Webpack Dev Server running at https://${primaryUrl.hostname}:${port}`);
+		})();
+	}
+}

package/src/notification.js

@@ -0,0 +1,55 @@
+import chalk from 'chalk';
+
+const bold = chalk.bold;
+const success = chalk.bold.green;
+const warn = chalk.bold.yellow;
+const error = chalk.bold.red;
+const blue = chalk.bold.blue;
+
+export class Notification {
+
+	static log(msg = '') {
+		if (msg.length > 0) {
+			console.log(msg);
+		}
+	}
+
+	static bold(msg = '') {
+		if (msg.length > 0) {
+			console.log(bold(msg));
+		}
+	}
+
+	static warn(msg = '') {
+		if (msg.length > 0) {
+			console.warn(warn(`Warning: ${msg}`));
+		}
+	}
+
+	static success(msg = '') {
+		if (msg.length > 0) {
+			console.log(success(`Success: ${msg}`));
+		}
+	}
+
+	static error(msg = '', e) {
+		if (msg.length > 0) {
+			console.error(error(`Error: ${msg}`));
+		}
+		if (e) {
+			console.error(e);
+		}
+	}
+
+	static taskInfo(msg = '', siteName = '') {
+		if (msg.length > 0) {
+			let notification = `\n${msg}`;
+			if (siteName.length > 0) {
+				notification += ` // ${blue(siteName)}`;
+			}
+
+			console.log(notification);
+			console.log('------------');
+		}
+	}
+}

package/src/scss/lessBuild.js

@@ -0,0 +1,104 @@
+import chalk from 'chalk';
+import { Notification } from '../notification';
+import size from 'filesize';
+import path from 'path';
+import fs from 'fs';
+import less from 'less';
+
+const getDirName = path.dirname;
+const success = chalk.bold.green;
+
+const reflect = p => p.then(v => ({ v, status: 'fulfilled' }),
+	e => ({ e, status: 'rejected' }));
+
+/**
+ * LESS build
+ */
+export class LessBuild {
+
+	constructor(_config = {}, _sitesConfigPath = './') {
+		this.config = _config;
+		this.sitesConfigPath = _sitesConfigPath;
+	}
+
+	/**
+	 * build
+	 * process all LESS file
+	 * @returns {void}
+	 */
+	build() {
+		const fileProcessing = [];
+		for (const [dest, src] of Object.entries(this.config.less.files)) {
+			fileProcessing.push(this.processLessFile({
+				src: path.resolve(this.sitesConfigPath, src),
+				dest: path.resolve(this.sitesConfigPath, dest),
+			}));
+		}
+
+		// wait until all async processed less files are ready
+		Promise.all(fileProcessing.map(reflect)).then((results) => {
+			const success = results.filter(x => x.status === 'fulfilled');
+			Notification.taskInfo('Process LESS file(s)', this.config.name);
+			success.forEach(item => console.log(item.v));
+		});
+	}
+
+	/**
+	 * process less file
+	 * @param {Object} options to process less file
+	 * @returns {void}
+	 */
+	processLessFile(options = {}) {
+		return new Promise((resolve, reject) => {
+			const targetFileName = path.basename(options.dest);
+
+			// render the result
+			less.render(fs.readFileSync(options.src).toString(), {
+				filename: path.resolve(options.src),
+				compress: true,
+			}).then((result) => {
+				if (!fs.existsSync(getDirName(options.dest))) {
+					fs.mkdirSync(getDirName(options.dest));
+				}
+
+				// write the result to file
+				fs.writeFile(options.dest, result.css, (error) => {
+					if (error) {
+						Notification.error(`Can't write file: ${options.dest} error: ${error}`);
+					}
+					fs.stat(options.dest, (err, stats) => {
+						resolve(`${success(targetFileName)} ${size(stats.size)}`);
+					});
+				});
+			},
+			(err) => {
+				Notification.error('less build failed', err);
+				process.exit(1);
+			});
+		});
+	}
+
+	/**
+	 * make sure CSS public directory exists and is clean
+	 * @returns {void}
+	 */
+	clear() {
+		const cssPath = path.resolve(this.sitesConfigPath, this.config.less.path.target);
+		if (!fs.existsSync(cssPath)) {
+			fs.mkdirSync(cssPath);
+		}
+
+		fs.readdirSync(cssPath).forEach((file) => {
+
+			// don't remove critical css files
+			if (!file.match(/critical-/g)) {
+				fs.unlinkSync(path.resolve(this.sitesConfigPath, `${this.config.less.path.target}/${file}`), (err) => {
+					if (err) {
+						Notification.error(err);
+						throw err;
+					}
+				});
+			}
+		});
+	}
+}

package/src/scss/scssBuild.js

@@ -0,0 +1,186 @@
+import chalk from 'chalk';
+import { Notification } from '../notification';
+import size from 'filesize';
+import postcss from 'postcss';
+import path from 'path';
+import fs from 'fs';
+import sass from 'sass';
+import stylelint from 'stylelint';
+import stylelintConfig from 'b13-stylelint-config';
+
+const getDirName = path.dirname;
+const success = chalk.bold.green;
+const bold = chalk.bold;
+
+const reflect = p => p.then(v => ({ v, status: 'fulfilled' }),
+	e => ({ e, status: 'rejected' }));
+
+/**
+ * SCSS build
+ */
+export class ScssBuild {
+
+	constructor(_config = {}, _sitesConfigPath = './') {
+		this.config = _config;
+		this.sitesConfigPath = _sitesConfigPath;
+	}
+
+	/**
+	 * build
+	 * process all SCSS file
+	 * @returns {void}
+	 */
+	build() {
+		const fileProcessing = [];
+		for (const [dest, src] of Object.entries(this.config.scss.files)) {
+			fileProcessing.push(this.processScssFile({
+				src: path.resolve(this.sitesConfigPath, src),
+				dest: path.resolve(this.sitesConfigPath, dest),
+			}));
+		}
+
+		// wait until all async processed scss files are ready
+		Promise.all(fileProcessing.map(reflect)).then((results) => {
+			const success = results.filter(x => x.status === 'fulfilled');
+			Notification.taskInfo('Process SCSS file(s)', this.config.name);
+			success.forEach(item => console.log(item.v));
+		});
+	}
+
+	/**
+	 * stylelint fixer
+	 */
+	stylelintFixer(fix = false) {
+		const files = new Set();
+		Object.entries(this.config.scss.files).forEach((filePath) => {
+			const b = filePath[1].replace(path.basename(filePath[1]), '**/*.scss');
+			const c = path.resolve(this.sitesConfigPath, b);
+			files.add(c);
+		});
+
+		Notification.log(`\n${bold(this.config.name)} scss file path(s):`);
+		[...files].forEach(file => Notification.log(`- ${file}`));
+
+		stylelint.lint({
+			files: [...files],
+			config: stylelintConfig,
+			fix,
+		})
+			.then((data) => {
+
+				if (data.errored) {
+					const resultsWithErrors = data.results.filter(item => item.errored);
+					Notification.log('\n');
+					Notification.error(`Found ${resultsWithErrors.length} stylelint errors!`);
+					resultsWithErrors.forEach(result => {
+						Notification.log('\n');
+						Notification.log(result.source);
+						result.warnings.forEach(warning => {
+							Notification.error(`- ${warning.text} at line: ${warning.line}`);
+						});
+					});
+
+					process.exitCode = 1;
+					Notification.log('\n');
+					Notification.error('stylelint failed');
+				} else {
+					Notification.log('\n');
+					Notification.success('stylelint successfull');
+				}
+			})
+			.catch((err) => {
+				process.exitCode = 1;
+				Notification.log('\n');
+				Notification.error(`stylelint failed: ${err}`);
+			});
+	}
+
+	/**
+	 * process scss file
+	 * @param {Object} options to process scss file
+	 * @returns {void}
+	 */
+	processScssFile(options = {}) {
+		return new Promise((resolve, reject) => {
+			const targetFileName = path.basename(options.dest);
+
+			// render the result
+			let result;
+			try {
+				result = sass.renderSync({
+					file: options.src,
+					outputStyle: options.style,
+					style: 'compressed',
+				});
+			} catch (e) {
+				Notification.error('scss build failed', e);
+				process.exit(1);
+			}
+
+			const postcssPlugins = [
+				require('autoprefixer')(),
+			];
+
+			// group media queries
+			if (this.config.scss.groupMediaQueries) {
+				postcssPlugins.push(require('css-mqpacker')());
+			}
+
+			// group media queries
+			if (this.config.scss.sortMediaQueries) {
+				postcssPlugins.push(require('postcss-sort-media-queries')());
+			}
+
+			postcssPlugins.push(
+				require('cssnano')({ preset: 'default' }),
+			);
+
+			// post process the css files
+			// see plugins and options: https://github.com/postcss/postcss
+			postcss(postcssPlugins).process(
+				result.css.toString(),
+				{ from: undefined },
+			).then(result => {
+
+				if (!fs.existsSync(getDirName(options.dest))) {
+					fs.mkdirSync(getDirName(options.dest), { recursive: true });
+				}
+
+				// write the result to file
+				fs.writeFile(options.dest, result.css, (error) => {
+					if (error) {
+						Notification.error(`Can't write file: ${options.dest} error: ${error}`);
+					}
+
+					fs.stat(options.dest, (err, stats) => {
+						resolve(`${success(targetFileName)} ${size(stats.size)}`);
+					});
+				});
+			});
+		});
+	}
+
+	/**
+	 * make sure CSS public directory exists and is clean
+	 * @returns {void}
+	 */
+	clear() {
+		const cssPath = path.resolve(this.sitesConfigPath, this.config.scss.path.target);
+		if (!fs.existsSync(cssPath)) {
+			fs.mkdirSync(cssPath, { recursive: true });
+		}
+
+		fs.readdirSync(cssPath).forEach((file) => {
+
+			// don't remove critical css files
+			if (!file.match(/critical-/g)) {
+				fs.unlinkSync(path.resolve(this.sitesConfigPath, `${this.config.scss.path.target}/${file}`), (err) => {
+					if (err) {
+						Notification.error(err);
+						throw err;
+					}
+				});
+			}
+		});
+	}
+}

package/src/sites.js

@@ -0,0 +1,53 @@
+import fs from 'fs';
+import { Notification } from './notification';
+
+class Config {
+	constructor(config = {}, filename = '') {
+		this.config = config;
+		this.filename = filename;
+	}
+
+	hasJs() {
+		return this.config.js && Object.keys(this.config.js).length > 0;
+	}
+
+	hasScss() {
+		return this.config.scss && Object.keys(this.config.scss).length > 0;
+	}
+
+	hasLess() {
+		return this.config.less && Object.keys(this.config.less).length > 0;
+	}
+}
+
+
+export async function sites(args) {
+	const sites = new Map();
+	const sitesConfigPath = args.sitesConfigPath;
+
+	if (!sitesConfigPath || !fs.existsSync(sitesConfigPath)) {
+		Notification.error('missing site build config');
+		return sites;
+	}
+
+	fs.readdirSync(
+		sitesConfigPath,
+		{ withFileTypes: true },
+	).forEach((file) => {
+		if (file.name.match(/(site_|\.package)/)) {
+			const config = require(`${sitesConfigPath}/${file.name}`);
+			sites.set(config.name, new Config(config, file.name));
+		}
+	});
+
+	const hasSiteConfig = (name = '') => {
+		if (!sites.has(name)) {
+			Notification.error(`Site ${name} not found`);
+			const availableSitesOptions = Array.from(sites.keys()).join(', ');
+			Notification.bold(`Available options: ${availableSitesOptions}`);
+		}
+		return sites.has(name);
+	}
+
+	return { siteConfig: sites, hasSiteConfig };
+}

package/src/stylelint.js

@@ -0,0 +1,33 @@
+import { sites } from './sites';
+import { ScssBuild } from './scss/scssBuild';
+import { Notification } from './notification';
+
+export async function stylelint(args) {
+	const { siteConfig, hasSiteConfig } = await sites(args);
+
+	if (!args.sitesConfigPath) {
+		Notification.error('missing site build config');
+		return;
+	}
+
+	const sitesConfigPath = args.sitesConfigPath;
+	const fix = args.fix === 'true';
+
+	Notification.taskInfo('Run Stylelint fixer');
+
+	if (args.site && siteConfig.has(args.site)) {
+
+		// cleanup single site
+		const site = siteConfig.get(args.site);
+		const scss = new ScssBuild(site.config, sitesConfigPath);
+		scss.stylelintFixer(fix);
+
+	} else {
+
+		// cleanup all sites
+		for (const [key, value] of siteConfig.entries()) {
+			const scss = new ScssBuild(value.config, sitesConfigPath);
+			scss.stylelintFixer(fix);
+		}
+	}
+}

package/src/utility/env.js

@@ -0,0 +1,49 @@
+import fs from 'fs';
+import { Notification } from './../notification';
+import path from 'path';
+
+const ENV_FILE_PATH = path.resolve(__dirname, './../../../../../../.env');
+const ENV_HRM_VAR_NAME = 'TYPO3_TS_ENABLE_HMR';
+const ENV_HRM_VAR_NAME_REGEX = new RegExp(/TYPO3_TS_ENABLE_HMR="[0,1]"/, 'g');
+
+class ENV {
+
+	constructor() {
+		this.hasEnv = fs.existsSync(ENV_FILE_PATH);
+		if (!this.hasEnv) {
+			Notification.warn(`No .env file found at: ${ENV_FILE_PATH}`);
+		}
+	}
+
+	enableHMR() {
+		if (this.hasEnv) {
+			let content = this.getContent();
+			if (!content.match(ENV_HRM_VAR_NAME_REGEX)) {
+				content += `
+${ENV_HRM_VAR_NAME}="1"
+`;
+			}
+			this.updateFile(content.replace(ENV_HRM_VAR_NAME_REGEX, `${ENV_HRM_VAR_NAME}="1"`));
+		}
+	}
+
+	disableHMR() {
+		if (this.hasEnv) {
+			const content = this.getContent();
+			this.updateFile(content.replace(ENV_HRM_VAR_NAME_REGEX, `${ENV_HRM_VAR_NAME}="0"`));
+		}
+	}
+
+	updateFile(content = '') {
+		if (content.length > 0) {
+			fs.writeFileSync(ENV_FILE_PATH, content);
+		}
+	}
+
+	getContent() {
+		return fs.readFileSync(ENV_FILE_PATH, 'utf8');
+	}
+}
+
+const env = new ENV();
+export { env };

package/src/version.js

@@ -0,0 +1,6 @@
+import { Notification } from './notification';
+
+export async function version() {
+	const packagejson = require('./../package.json');
+	Notification.log(packagejson.version);
+}