b13-rocket 0.7.2 → 0.8.0

package/README.md

@@ -1,77 +1,125 @@
 # Rocket FE build setup
 
-## Requirements
-
-* node = 16.13.0 (https://nodejs.org/en/download/)
-* npm = 6.4.1 (https://www.npmjs.com/get-npm)
-* yarn = 1.12.3 (https://yarnpkg.com/en/docs/install)
+This Node CLI tool helps developers quickly create multiple frontend builds for site packages using **Vite 5**. 
 
+## Requirements
 
-## Init
+* node >= 20.18.0 (https://nodejs.org/en/download/)
+* npm >= 18.17.0 (https://www.npmjs.com/get-npm)
+* yarn >= 3.0.0 (https://yarnpkg.com/en/docs/install)
+
+<!--
+## Vite Plugins:
+- Babel: https://github.com/owlsdepartment/vite-plugin-babel
+- dynamic import: https://github.com/vite-plugin/vite-plugin-dynamic-import
+- babel-compiler: https://github.com/yzydeveloper/vite-plugin-babel-compiler
+- Critical CSS: https://github.com/nystudio107/rollup-plugin-critical
+- Vite dts: https://github.com/qmhc/vite-plugin-dts
+- Compression: https://github.com/nonzzz/vite-plugin-compression
+- Chunk split: https://github.com/sanyuan0704/vite-plugin-chunk-split
+- static copy: https://github.com/sapphi-red/vite-plugin-static-copy
+- build progress: https://github.com/jeddygong/vite-plugin-progress
+- image Optimizer: https://github.com/FatehAK/vite-plugin-image-optimizer
+- externals plugin: https://github.com/crcong/vite-plugin-externals
+- auto-import: https://github.com/antfu/unplugin-auto-import
+- vitest: https://github.com/vitest-dev/vitest
+
+## Post CSS plugins:
+- https://preset-env.cssdb.org/
+- https://www.npmjs.com/package/postcss-nested
+
+-->
 
-`yarn install`
+---
 
+## CLI Commands
 
-## Build JS and CSS
+To see available commands, run:
 
-`yarn rocket build`
+```bash
+$ yarn rocket help
+````
 
-## CLI Options
+For example, to start a new build, you can run:
 
-`yarn rocket help`
+```bash
+$ yarn rocket build --site=my-site
+```
 
 ---
 
-## Caches
+## Config setup
 
-`webpack` and `babel-loader` build caches are stored in `node_modules/.cache/`
+### Shared Vite Config (`config/shared.vite.config.js`)
 
----
+This file contains shared Vite configuration that applies to all packages. You can extend it as needed.
 
-## TYPO3 Setup
+```js
+import { defineConfig } from 'vite';
 
-Site Extension JS include setup: 
+export const sharedViteConfig = defineConfig({
+	resolve: {
+		alias: {
+			// ...
+		},
+	},
+});
 
-### constants.typoscript
-```
-# enable hot module replacement (hmr)
-enableHMR = 0
-enableHMR := getEnv(TYPO3_TS_ENABLE_HMR)
 ```
 
-### setup.typoscript
-```
-page.includeJSFooter {
-    vendor = EXT:YOUR_EXT_NAME/Resources/Public/JavaScript/common-vendor.js
-    vendor.if.isFalse = {$enableHMR}
-    vendor.type = module
-    main = EXT:YOUR_EXT_NAME/Resources/Public/JavaScript/main.js
-    main.if.isFalse = {$enableHMR}
-    main.type = module
-
-    # if hot module replacement is enabled
-    vendor-hmr = https://DOMAIN:8088/typo3conf/ext/YOUR_EXT_NAME/Resources/Public/JavaScript/common-vendor-hmr.js
-    vendor-hmr.if.isTrue = {$enableHMR}
-    main-hmr = https://DOMAIN:8088/typo3conf/ext/YOUR_EXT_NAME/Resources/Public/JavaScript/main-hmr.js
-    main-hmr.if.isTrue = {$enableHMR}
-}
+### Package-specific Config (config/XXX.package.js)
+
+For each package, you can override certain configurations using this setup:
+
+```js
+import { definePackageConfig } from 'b13-build-cli';
+
+export const config = definePackageConfig({
+	name: '',   // package name
+	input: '',  // entry js file
+	output: '', // output directory
+	root: '',   // project root
+	viteConfig: {
+		// Override Vite config for this package
+		resolve: {
+			alias: {
+				// Define package-specific aliases here
+			},
+		},
+	},
+});
+
 ```
 
 ---
 
-## Update to Yarn v3
+## Extract CSS
 
-```
+To extract CSS from the Vite build, add the `external-` prefix to the CSS filename.
+
+Example:
+
+```js
+import 'external-rte.css';
+````
+
+---
+
+## Update
+
+### Update Yarn version and switch to vite
+
+```bash
 // switch to latest yarn version
-yarn set version berry
+$ yarn set version berry
 
 // update node dependencies 
-yarn install
-yarn remove b13-build-cli
-yarn add "b13-build-cli@ssh://git@code.b13.com/infrastructure/rocket-cli.git#^0.3.0"
+$ yarn install
+$ yarn remove b13-build-cli
+$ yarn add "b13-build-cli@ssh://git@code.b13.com/public-projects/rocket-cli.git#vite5.2"
 ```
 
-Update .gitignore
+### Update .gitignore
 ```
 .pnp.*
 .yarn/*
@@ -82,7 +130,10 @@ Update .gitignore
 !.yarn/versions
 ```
 
-Update package.json script call: (use 'yarn node' instead of 'node') 
+### Remove package.json 'rocket' script call 
+
+If your package.json still contains a rocket script, remove it to avoid conflicts with the new CLI version.
+
 ```
 ....
 "scripts": {
@@ -91,7 +142,7 @@ Update package.json script call: (use 'yarn node' instead of 'node')
 ...
 ```
 
-## Use hmr inside ddev container
+### Use hmr inside ddev container
 
 1. Copy files from `files` directory to your `.ddev` directory.
 2. Restart ddev (`ddev restart`)

package/index.js

@@ -1,4 +1,10 @@
-#!/usr/bin/env node
+export function definePackageConfig({ name = '', input = '', output = '', root = '', viteConfig = {}}) {
 
-require = require('esm')(module);
-require('./src/cli').cli(process.argv);
+	return {
+		name,
+		input,
+		output,
+		root,
+		viteConfig,
+	};
+}

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "b13-rocket",
   "description": "FE CLI build tool",
-  "version": "0.7.2",
+  "version": "0.8.0",
+  "type": "module",
   "engines": {
     "node": ">=v16.13.0",
     "npm": ">=6.4.1",
@@ -12,55 +13,27 @@
     "email": "info@b13.com",
     "url": "https://b13.com/"
   },
-  "scripts": {
-    "rocket": "node ./index.js"
-  },
   "bin": {
-    "rocket": "./index.js"
+    "rocket": "src/cli.js"
   },
   "main": "index.js",
   "dependencies": {
-    "@babel/core": "7",
-    "@babel/plugin-transform-runtime": "7",
-    "@babel/preset-env": "7",
-    "@babel/preset-typescript": "7",
-    "@babel/runtime": "7",
-    "autoprefixer": "^10.4.13",
-    "b13-eslint-config": "https://code.b13.com/public-projects/es-lint-config.git",
-    "b13-stylelint-config": "https://code.b13.com/public-projects/stylelint-config.git#0.1.0",
-    "babel-loader": "^8.2.5",
-    "chalk": "^4.1.2",
-    "child_process": "^1.0.2",
-    "compression-webpack-plugin": "^7.1.2",
-    "css-loader": "^5.2.7",
-    "cssnano": "^5.1.14",
-    "eslint": "^8",
-    "eslint-plugin-vue": "^9.9.0",
-    "esm": "^3.2.25",
-    "expose-loader": "^2.0.0",
-    "file-loader": "^6.2.0",
-    "filesize": "^6.4.0",
-    "html-loader": "^2.1.2",
-    "less": "^4.1.3",
-    "path": "^0.12.7",
-    "postcss": "^8.4.16",
-    "postcss-sort-media-queries": "^4.3.0",
-    "readline": "^1.3.0",
-    "sass": "^1.56.1",
-    "sass-loader": "^11.1.1",
-    "stylelint": "^14.16.1",
-    "vue": "^2.7.0",
-    "vue-loader": "^15.10.1",
-    "vue-svg-inline-loader": "^2.1.5",
-    "vue-template-compiler": "^2.7.10",
-    "webpack": "^5.75.0",
-    "webpack-cli": "^5.0.0",
-    "webpack-dev-server": "^4.11.1",
-    "webpack-merge": "^5.8.0",
-    "workbox-webpack-plugin": "^6.5.4"
-  },
-  "devDependencies": {
-    "webpack-bundle-analyzer": "^4.7.0"
+    "autoprefixer": "^10.4.19",
+    "chalk": "^5.3.0",
+    "cssnano": "^6.1.2",
+    "minimist": "^1.2.8",
+    "postcss": "^8.4.38",
+    "postcss-nested": "^6.0.1",
+    "postcss-preset-env": "^9.5.6",
+    "postcss-sort-media-queries": "^5.2.0",
+    "sass": "^1.75.0",
+    "sharp": "^0.32.6",
+    "svgo": "^3.2.0",
+    "tsconfig": "^7.0.0",
+    "vite": "^5.2.9",
+    "vite-plugin-image-optimizer": "^1.1.7",
+    "vite-plugin-require-support": "^1.6.1",
+    "vite-svg-loader": "^4.0.0"
   },
   "packageManager": "yarn@3.2.3",
   "dependenciesMeta": {

package/src/build.js

@@ -1,158 +1,104 @@
-import { sites } from './sites';
-import path from 'path';
-import fs from 'fs';
-import { ScssBuild } from './scss/scssBuild';
-import { LessBuild } from './scss/lessBuild';
-import webpack from 'webpack';
-import { default as webpackConfig } from './webpack/webpack.config';
-import chalk from 'chalk';
-import { Notification } from './notification';
-
-
-class Build {
-	constructor(config = {}, sitesConfigPath = '', mode = 'production') {
-		this.sitesConfigPath = sitesConfigPath;
-		this.config = config;
-		this.mode = mode;
-	}
-
-	// make sure JS public directory exists and is clean
-	clear() {
-		const jsPath = path.resolve(this.sitesConfigPath, this.config.js.path.target);
-		if (!fs.existsSync(jsPath)) {
-			fs.mkdirSync(jsPath);
+import { build as viteBuild, defineConfig, mergeConfig , createServer, loadEnv} from 'vite';
+import { defaultViteConfig } from './vite/vite.config.js';
+import fs from 'node:fs';
+
+// post process manifest json
+// remove all css files starting with 'external-' from manifest.json entry file
+const postProcessManifest = (manifestPath = '') => {
+	fs.readFile(manifestPath, 'utf8', (err, data) => {
+		if (err) {
+			console.error('Error reading file:', err);
+			return;
 		}
 
-		fs.readdirSync(jsPath, { withFileTypes: true }).forEach((file) => {
-
-			// only remove file
-			// skip directories
-			if (file.isFile()) {
-				fs.unlinkSync(path.resolve(this.sitesConfigPath, `${this.config.js.path.target}/${file.name}`), (err) => {
-					if (err) {
-						throw err;
-					}
-				});
-			}
-		});
-	}
-
-	build() {
-		const wpConfig = webpackConfig(this.config, this.sitesConfigPath, this.mode);
-		const compiler = webpack(wpConfig);
+		let manifest;
+		try {
+			manifest = JSON.parse(data);
+		} catch (parseError) {
+			console.error('Error parsing JSON data:', parseError);
+			return;
+		}
 
-		compiler.hooks.beforeRun.tap('b13-rocket-cli', (context, entry) => {
-			this.clear();
-			if (this.config.sw) {
-				this.updateServiceWorkerBuildTimestamp();
+		for (const entry in manifest) {
+			if (manifest[entry].isEntry && manifest[entry].css) {
+				manifest[entry].css = manifest[entry].css.filter(cssFile => !cssFile.startsWith('external-'));
 			}
-		});
-
-		compiler.run((err, stats) => {
-
-			Notification.taskInfo('Process JavaScript file(s)');
+		}
 
-			if (err) {
-				Notification.error('JS build failed', err.stack || err);
-				if (err.details) {
-					Notification.error('JS build failed', err.details);
-				}
+		fs.writeFile(manifestPath, JSON.stringify(manifest, null, 2), 'utf8', writeErr => {
+			if (writeErr) {
+				console.error('Error writing file:', writeErr);
 				return;
 			}
-
-			if (stats.hasErrors()) {
-				Notification.error('JS build failed', stats.toString({
-					chunks: false,
-					colors: true,
-				}));
-				process.exit(1);
-			}
-
-			const info = stats.toJson();
-			if (stats.hasWarnings()) {
-				Notification.warn(info.warnings);
-			}
-
-			Notification.log(stats.toString({
-				chunks: false,
-				colors: true,
-			}));
-
-			compiler.close((closeErr) => {
-
-				// ...
-			});
 		});
-	}
+	});
+}
 
-	// update service worker build timestamp to purge service worker cache
-	updateServiceWorkerBuildTimestamp() {
-		fs.readFile(
-			path.resolve(this.sitesConfigPath, `${this.config.sw.path.source}/${this.config.sw.filename.main}.js`),
-			'utf8',
-			(err, data) => {
-				if (err) {throw err;}
-				const timestamp = (Date.now() / 1000 | 0).toString();
-				const result = data.replace(/const\sbuildTimestamp\s=\s\'\d{0,10}\'\;/g, `const buildTimestamp = '${timestamp}';`);
-				fs.writeFile(
-					path.resolve(this.sitesConfigPath, `${this.config.sw.path.source}/${this.config.sw.filename.main}.js`),
-					result,
-					'utf8',
-					(err) => {
-						if (err) {throw err;}
-						console.log('Updated service worker build timestamp');
-					},
-				);
+async function vite(config = {}, sharedViteConfig = {}, enableServer = false) {
+
+	let viteConfig = mergeConfig(
+		defaultViteConfig,
+		{
+			root : config.root,
+			build: {
+				rollupOptions: {
+					input: config.input,
+				},
+				outDir: config.output,
 			},
+		},
+		false,
+	);
+
+	// merge shared vite config
+	if (Object.keys(sharedViteConfig).length > 0) {
+		viteConfig = mergeConfig(
+			viteConfig,
+			sharedViteConfig,
+			false,
 		);
 	}
-}
-
 
-export async function build(args) {
-	const { siteConfig } = await sites(args);
-
-	if (!args.sitesConfigPath) {
-		Notification.error('missing site build config');
-		return;
+	// marge site package specific vite config
+	if (config?.viteConfig && Object.keys(config.viteConfig).length > 0) {
+		viteConfig = mergeConfig(
+			viteConfig,
+			config.viteConfig,
+			false,
+		);
 	}
 
-	const sitesConfigPath = args.sitesConfigPath;
-	const mode = args.mode ? args.mode : 'production';
-	const target = args.target ? args.target : 'all';
-
-	for (const [key, site] of siteConfig) {
-		if (args.site && key !== args.site) {
-
-			// skip other sites
-			continue;
-		}
-
-		if (args.bundleAnalyzer) {
-			site.config.bundleAnalyzer = true;
-		}
-
-		if (site.hasScss() && ['all', 'scss'].includes(target)) {
-			const scss = new ScssBuild(site.config, sitesConfigPath);
-			scss.clear();
-			scss.build();
-		}
-
-		if (site.hasLess() && ['all', 'less'].includes(target)) {
-			const less = new LessBuild(site.config, sitesConfigPath);
-			less.clear();
-			less.build();
+	if (enableServer) {
+		const vitePort = process.env.VITE_HMR_PORT || 5173;
+		viteConfig.mode = 'development';
+
+		if (process.env.DDEV_PRIMARY_URL !== undefined) {
+			const server = await createServer({
+				...viteConfig,
+				configFile: false,
+				server: {
+					host: true,
+					origin: `${process.env.DDEV_PRIMARY_URL}:${vitePort}`
+				},
+			})
+			await server.listen();
+			console.log(`${config.name} HMR is ready 🚀`);
+		} else {
+			console.log('⚠️  ERROR: DDEV_PRIMARY_URL missing');
 		}
+	} else {
+		await viteBuild(viteConfig);
+		const manifestPath = config.output + '/.vite/manifest.json';
+		postProcessManifest(manifestPath);
+	}
+}
 
-		if (site.hasJs() && ['all', 'js'].includes(target)) {
-			const wpBuild = new Build(site.config, sitesConfigPath, mode);
-			wpBuild.build();
-		}
-
-		if (args.site && key === args.site) {
-
-			// required site build is done
-			break;
+export async function build(sitesConfig = {}, args = '',  enableServer = false) {
+	if (args.site && sitesConfig.sites.get(args.site)) {
+		vite(sitesConfig.sites.get(args.site).config, sitesConfig.sharedConfig, enableServer);
+	} else {
+		for (const [key, site] of sitesConfig.sites) {
+			vite(site.config, sitesConfig.sharedConfig);
 		}
 	}
 }

package/src/cli.js

@@ -1,57 +1,40 @@
-import minimist from 'minimist';
-import { help } from './help';
-import { build } from './build';
-import { hmr } from './hmr';
-import { version } from './version';
-import { stylelint } from './stylelint';
-import { create } from './create';
-import path from 'path';
-
-export async function cli(argsArray) {
-	const args = minimist(argsArray.slice(2));
-	let cmd = args._[0] || 'help';
-
-	// add default site config path
-	if (!args.sitesConfigPath) {
-		args.sitesConfigPath = './config';
-	}
-	args.sitesConfigPath = path.resolve(process.env.INIT_CWD, args.sitesConfigPath);
-
-	if (args.version || args.v) {
-		cmd = 'version';
-	}
-
-	if (args.help || args.h) {
-		cmd = 'help';
-	}
+#!/usr/bin/env node
 
-	switch (cmd) {
-		case 'version':
-			version(args);
-			break;
-
-		case 'help':
-			help(args);
-			break;
-
-		case 'build':
-			build(args);
-			break;
-
-		case 'hmr':
-			hmr(args);
-			break;
-
-		case 'stylelint':
-			stylelint(args);
-			break;
-
-		case 'create':
-			create(args);
-			break;
-
-		default:
-			console.error(`"${cmd}" is not a valid command!`);
+import path from 'node:path';
+import minimist from 'minimist';
+import { build } from './build.js';
+import { sites } from './sites.js';
+import { help } from './help.js';
+import { version } from './version.js';
+import { Notification } from "./notification.js";
+
+const args = minimist(process.argv.slice(2));
+const cmd = args._[0] || 'help';
+
+// add default site config path
+if (!args.sitesConfigPath) {
+	args.sitesConfigPath = './config';
+}
+args.sitesConfigPath = path.resolve(process.env.INIT_CWD, args.sitesConfigPath);
+const sitesConfig = await sites(args);
+
+switch (cmd) {
+	case 'version':
+		Notification.log(version)
+		break;
+	case 'build':
+		build(sitesConfig, args);
+		break;
+	case 'hmr':
+		if (!args.site) {
+			Notification.error('missing --site= name');
 			break;
-	}
+		}
+		build(sitesConfig, args,  true);
+		break;
+	case 'help':
+		help(sitesConfig, args);
+		break;
+	default:
+		Notification.error(`'${cmd}' command doesn't exist.`);
 }