b13-rocket 0.7.2 → 0.8.0

package/src/help.js

@@ -1,34 +1,24 @@
+import { Notification } from "./notification.js";
 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)')} }`;
+export async function help(sitesConfig, args) {
+	const siteOptions = `--site={ ${sitesConfig.availableSite.join(', ')} }`;
+	const modeOptions = `--mode={ '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.greenBright('rocket [command] <options>')}
+	${chalk.blueBright('build')} ..... build JS and CSS 
+		${siteOptions}
+		${modeOptions}
 
-    ${chalk.blueBright('hmr')} ....... start hot module replacment
-      ${siteOptions}
-      ${modeOptions}
+	${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('help')} ...... show help menu for a command
-    
-    ${chalk.blueBright('version')} ... show package version
+	${chalk.blueBright('version')} ... show package version
 `,
 	};
 

package/src/sites.js

@@ -1,53 +1,46 @@
-import fs from 'fs';
-import { Notification } from './notification';
+import { readdir } from 'node:fs/promises';
+import { Notification } from './notification.js';
+import path from 'node:path';
 
 class Config {
 	constructor(config = {}, filename = '') {
 		this.config = config;
+		this.config.input = path.resolve(process.env.INIT_CWD, this.config.input);
+		this.config.output = path.resolve(process.env.INIT_CWD, this.config.output);
+		this.config.root = path.resolve(process.env.INIT_CWD, this.config.root);
 		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();
+	let sharedConfig = {};
 	const sitesConfigPath = args.sitesConfigPath;
 
-	if (!sitesConfigPath || !fs.existsSync(sitesConfigPath)) {
+	if (!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}`);
+	try {
+		const files = await readdir(sitesConfigPath);
+		for (const file of files) {
+			if (file.match(/(site_|\.package)/)) {
+				const { config } = await import(`${sitesConfigPath}/${file}`);
+				sites.set(config.name, new Config(config, file));
+			}
+			if (file.match(/shared\.vite\.config/)) {
+				const { sharedViteConfig } = await import(`${sitesConfigPath}/${file}`);
+				sharedConfig = sharedViteConfig;
+			}
 		}
-		return sites.has(name);
+	} catch (err) {
+		console.error(err);
 	}
 
-	return { siteConfig: sites, hasSiteConfig };
+	return {
+		sites,
+		availableSite: [...sites.keys()],
+		sharedConfig,
+	};
 }

package/src/version.js

@@ -1,6 +1,9 @@
-import { Notification } from './notification';
+import { readFile } from 'node:fs/promises';
 
-export async function version() {
-	const packagejson = require('./../package.json');
-	Notification.log(packagejson.version);
-}
+const json = JSON.parse(
+	await readFile(
+		new URL('./../package.json', import.meta.url)
+	)
+);
+
+export const version = json.version;

package/src/vite/vite.config.js

@@ -0,0 +1,56 @@
+import { defineConfig } from 'vite';
+import autoprefixer from 'autoprefixer';
+import postcssSortMediaQueries from 'postcss-sort-media-queries';
+import nested from 'postcss-nested';
+import postcssPresetEnv from 'postcss-preset-env';
+import svgLoader from 'vite-svg-loader';
+import { ViteImageOptimizer } from 'vite-plugin-image-optimizer';
+import path from 'node:path';
+
+const mode = 'production';
+
+export const defaultViteConfig = defineConfig({
+	mode,
+	publicDir: false,
+	base: './',
+	build: {
+		manifest: true,
+		target: 'es2020',
+		rollupOptions: {
+			output: {
+				entryFileNames: '[name].js',
+				assetFileNames: '[name][extname]',
+				manualChunks: (chunkPath) => {
+					const fileName = path.basename(chunkPath);
+					// add extra chunck for all css files starting with 'external-'
+					if (fileName.startsWith('external-') && fileName.match(/\.(css|scss)$/)) {
+						return fileName;
+					}
+					return chunkPath.split('/').reverse()[chunkPath.split('/').reverse().indexOf('node_modules') - 1];
+				},
+			},
+		},
+	},
+	plugins: [
+		svgLoader({
+			defaultImport: 'url',
+		}),
+		ViteImageOptimizer(),
+	],
+	css: {
+		devSourcemap: true,
+		postcss: {
+			plugins: [
+				nested(),
+				postcssPresetEnv(),
+				postcssSortMediaQueries(),
+				autoprefixer({}),
+			],
+		},
+		preprocessorOptions: {
+			scss: {
+				additionalData: `$mode: ${mode};`,
+			},
+		},
+	},
+});

package/src/create.js

@@ -1,65 +0,0 @@
-import fs from 'fs';
-import { Notification } from './notification';
-import path from 'path';
-import readline from 'readline';
-
-// config file
-const CONFIG_TEMPLATE = (CONFIG_EXT_NAME = '', CONFIG_PKG_NAME = '') => `const relExtPath = '../../../web/typo3conf/ext/${CONFIG_EXT_NAME}';
-const relScssPath = \`\${relExtPath}/Resources/Private/Scss\`;
-const relCssPath = \`\${relExtPath}/Resources/Public/Css\`;
-
-module.exports = {
-	name: '${CONFIG_PKG_NAME}',
-	scss: {
-		path: {
-			source: relScssPath,
-			target: relCssPath
-		},
-		// target (CSS) : source (SCSS)
-		files: {
-			[\`\${relCssPath}/main.css\`]: \`\${relScssPath}/main.scss\`
-		}
-	},
-	js: {
-		path: {
-			source: \`\${relExtPath}/Resources/Private/JavaScript\`,
-			target: \`\${relExtPath}/Resources/Public/JavaScript\`,
-			public: '/typo3conf/ext/YOUR_EXT_NAME/Resources/Public/JavaScript/'
-		},
-		filename: {
-			main        : 'main',
-			commonVendor: 'common-vendor'
-		}
-	}
-};
-`;
-
-class Create {
-	static createConfigFile(sitesConfigPath = './', fileName = 'demo.package.js', extName = '', pkgName = '') {
-		const newConfigFile = path.resolve(sitesConfigPath, fileName);
-		fs.writeFile(newConfigFile, CONFIG_TEMPLATE(extName, pkgName), (error) => {
-			if (error) {
-				Notification.error(`Can't write file: ${newConfigFile} error: ${error}`);
-			}
-
-			Notification.success(` new ${newConfigFile} config created`);
-		});
-	}
-}
-
-export async function create(args) {
-
-	const rl = readline.createInterface({
-		input: process.stdin,
-		output: process.stdout,
-	});
-
-	Notification.taskInfo('Create new config file for your TYPO3 site extension');
-
-	rl.question('TYPO3 extension name (/typo3conf/ext/)? i.e. "site_demo": ', (extName) => {
-		rl.question('Package Name? i.e. "demo": ', (pkgName) => {
-			Create.createConfigFile(args.sitesConfigPath, `${pkgName}.package.js`, extName, pkgName);
-			rl.close();
-		});
-	});
-}

package/src/hmr.js

@@ -1,84 +0,0 @@
-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/scss/lessBuild.js

@@ -1,104 +0,0 @@
-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

@@ -1,186 +0,0 @@
-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/stylelint.js

@@ -1,33 +0,0 @@
-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);
-		}
-	}
-}