b13-rocket 0.5.0

package/.yarnrc.yml

@@ -0,0 +1,5 @@
+plugins:
+  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
+    spec: "@yarnpkg/plugin-interactive-tools"
+
+yarnPath: .yarn/releases/yarn-3.2.3.cjs

package/README.md

@@ -0,0 +1,98 @@
+# 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)
+
+
+## Init
+
+`yarn install`
+
+
+## Build JS and CSS
+
+`yarn rocket build`
+
+## CLI Options
+
+`yarn rocket help`
+
+---
+
+## Caches
+
+`webpack` and `babel-loader` build caches are stored in `node_modules/.cache/`
+
+---
+
+## TYPO3 Setup
+
+Site Extension JS include setup: 
+
+### 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}
+}
+```
+
+---
+
+## Update to Yarn v3
+
+```
+// switch to latest yarn version
+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"
+```
+
+Update .gitignore
+```
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+```
+
+Update package.json script call: (use 'yarn node' instead of 'node') 
+```
+....
+"scripts": {
+    "rocket": "yarn node ./node_modules/b13-build-cli/index.js",
+}
+...
+```
+
+## Use hmr inside ddev container
+
+1. Copy files from `files` directory to your `.ddev` directory.
+2. Restart ddev (`ddev restart`)
+3. Start rocket via ddev command: `ddev rocket`, `ddev rocket hmr --site=....` etc.

package/eslintrc.json

@@ -0,0 +1,207 @@
+{
+	"parserOptions": {
+		"ecmaVersion": "latest",
+		"sourceType": "module"
+	},
+	"extends": [
+		"eslint:recommended"
+	],
+	"globals": {
+		"B13_HMR_ENABLED": "readable"
+	},
+	"rules": {
+		"array-bracket-spacing": ["error", "never"],
+		"array-callback-return": "error",
+		"arrow-body-style": ["error", "as-needed"],
+		"arrow-spacing": "error",
+		"indent": ["warn", "tab", { "SwitchCase": 1 }],
+		"brace-style": ["error", "1tbs", { "allowSingleLine": true }],
+		"camelcase": "error",
+		"callback-return": ["error", ["cb", "callback", "next"]],
+		"class-methods-use-this": "error",
+		"comma-dangle": ["error", "always-multiline"],
+		"comma-spacing": "error",
+		"comma-style": ["error", "last"],
+		"computed-property-spacing": "error",
+		"consistent-return": "warn",
+		"curly": ["error", "all"],
+		"default-case": "warn",
+		"dot-location": ["error", "property"],
+		"dot-notation": ["error", { "allowKeywords": true }],
+		"eol-last": "error",
+		"eqeqeq": "error",
+		"func-call-spacing": ["warn", "never"],
+		"func-style": ["error", "declaration"],
+		"function-paren-newline": ["error", "consistent"],
+		"generator-star-spacing": "error",
+		"guard-for-in": "error",
+		"handle-callback-err": ["error", "err"],
+		"key-spacing": ["error", { "mode": "strict" }],
+		"keyword-spacing": "error",
+		"lines-around-comment": ["error", {
+			"beforeBlockComment": true,
+			"afterBlockComment": false,
+			"beforeLineComment": true,
+			"afterLineComment": false
+		}],
+		"max-len": ["error", 160, {
+			"ignoreComments": true,
+			"ignoreUrls": true,
+			"ignoreStrings": true,
+			"ignoreTemplateLiterals": true,
+			"ignoreRegExpLiterals": true
+		}],
+
+		"max-statements-per-line": "error",
+		"new-cap": "error",
+		"new-parens": "error",
+		"no-alert": "error",
+		"no-array-constructor": "error",
+		"no-buffer-constructor": "error",
+		"no-caller": "error",
+		"no-confusing-arrow": "error",
+		"no-console": ["warn", { "allow": ["warn", "error", "log"] }],
+		"no-delete-var": "error",
+		"no-else-return": "error",
+		"no-eval": "error",
+		"no-extend-native": "error",
+		"no-extra-bind": "error",
+		"no-fallthrough": "error",
+		"no-floating-decimal": "error",
+		"no-global-assign": "error",
+		"no-implied-eval": "error",
+		"no-invalid-this": "off",
+		"no-iterator": "error",
+		"no-label-var": "error",
+		"no-labels": "error",
+		"no-lone-blocks": "error",
+		"no-loop-func": "error",
+		"no-mixed-spaces-and-tabs": ["warn", false],
+		"no-multi-spaces": "error",
+		"no-multi-str": "error",
+		"no-multiple-empty-lines": ["error", {"max": 2, "maxBOF": 0, "maxEOF": 0}],
+		"no-nested-ternary": "error",
+		"no-octal": "error",
+		"no-octal-escape": "error",
+		"no-param-reassign": "error",
+		"no-path-concat": "error",
+		"no-process-exit": "error",
+		"no-proto": "error",
+		"no-redeclare": "error",
+		"no-restricted-properties": [
+			"error",
+			{
+				"property": "substring",
+				"message": "Use .slice instead of .substring."
+			},
+			{
+				"property": "substr",
+				"message": "Use .slice instead of .substr."
+			},
+			{
+				"object": "assert",
+				"property": "equal",
+				"message": "Use assert.strictEqual instead of assert.equal."
+			},
+			{
+				"object": "assert",
+				"property": "notEqual",
+				"message": "Use assert.notStrictEqual instead of assert.notEqual."
+			},
+			{
+				"object": "assert",
+				"property": "deepEqual",
+				"message": "Use assert.deepStrictEqual instead of assert.deepEqual."
+			},
+			{
+				"object": "assert",
+				"property": "notDeepEqual",
+				"message": "Use assert.notDeepStrictEqual instead of assert.notDeepEqual."
+			}
+		],
+		"no-return-assign": "error",
+		"no-script-url": "error",
+		"no-self-assign": "error",
+		"no-self-compare": "error",
+		"no-sequences": "error",
+		"no-shadow": ["off", { "builtinGlobals": true, "hoist": "never", "allow": [] }],
+		"no-throw-literal": "error",
+		"no-trailing-spaces": "warn",
+		"no-undef": ["error", {"typeof": true}],
+		"no-undef-init": "error",
+		"no-undefined": "error",
+		"no-underscore-dangle": ["error", {"allowAfterThis": true}],
+		"no-unmodified-loop-condition": "error",
+		"no-unneeded-ternary": "error",
+		"no-unused-expressions": "error",
+		"no-unused-vars": ["error", {"vars": "all", "args": "after-used"}],
+		"no-use-before-define": "off",
+		"no-useless-call": "error",
+		"no-useless-computed-key": "error",
+		"no-useless-concat": "error",
+		"no-useless-constructor": "error",
+		"no-useless-escape": "error",
+		"no-useless-rename": "error",
+		"no-useless-return": "error",
+		"no-whitespace-before-property": "error",
+		"no-var": "error",
+		"object-curly-newline": ["error", { "consistent": true, "multiline": true }],
+		"object-curly-spacing": ["error", "always"],
+		"object-property-newline": ["error",
+			{
+				"allowAllPropertiesOnSameLine": true
+			}
+		],
+		"object-shorthand": "error",
+		"one-var-declaration-per-line": "error",
+		"operator-assignment": "error",
+		"operator-linebreak": ["error", "after"],
+		"padding-line-between-statements": [
+			"off",
+			{
+				"blankLine": "always",
+				"prev": ["const", "let", "var"],
+				"next": "*"
+			},
+			{
+				"blankLine": "any",
+				"prev": ["const", "let", "var"],
+				"next": ["const", "let", "var"]
+			}
+		],
+		"prefer-arrow-callback": "warn",
+		"prefer-const": "warn",
+		"prefer-numeric-literals": "error",
+		"prefer-promise-reject-errors": "error",
+		"prefer-rest-params": "error",
+		"prefer-spread": "error",
+		"prefer-template": "warn",
+		"quotes": ["error", "single"],
+		"quote-props": ["error", "as-needed"],
+		"radix": "error",
+		"rest-spread-spacing": "error",
+		"semi": ["error", "always"],
+		"semi-spacing": ["error", {"before": false, "after": true}],
+		"semi-style": "error",
+		"space-before-blocks": "error",
+		"space-before-function-paren": ["error", "never"],
+		"space-in-parens": "error",
+		"space-infix-ops": "error",
+		"space-unary-ops": ["error", {"words": true, "nonwords": false}],
+		"spaced-comment": ["error", "always", { "exceptions": ["-"]}],
+		"strict": ["error", "global"],
+		"switch-colon-spacing": "error",
+		"symbol-description": "error",
+		"template-curly-spacing": ["error", "never"],
+		"template-tag-spacing": "error",
+		"unicode-bom": "error",
+		"wrap-iife": ["error", "any"],
+		"yield-star-spacing": "error",
+		"yoda": ["error", "never"]
+	},
+	"env": {
+		"amd": true,
+		"es2021": true,
+		"node": true
+	}
+}

package/files/.ddev/commands/web/rocket.sh

@@ -0,0 +1,10 @@
+#!/bin/bash
+
+## Description: Run HMR inside the container
+## Usage: rocket
+## Example: "ddev rocket"
+
+if [[ "$@" == *"hmr"* ]]; then
+    ${PWD}/vendor/bin/typo3 cache:flush
+fi
+cd ${PWD}/src/webpack && yarn rocket $@

package/files/.ddev/docker-compose.webpack.yaml

@@ -0,0 +1,9 @@
+version: "3.6"
+
+services:
+  web:
+    expose:
+      - 8088
+    environment:
+      - HTTP_EXPOSE=${DDEV_ROUTER_HTTP_PORT}:80,${DDEV_MAILHOG_PORT}:8025,8087:8088
+      - HTTPS_EXPOSE=${DDEV_ROUTER_HTTPS_PORT}:80,${DDEV_MAILHOG_HTTPS_PORT}:8025,8088:8088

package/index.js

@@ -0,0 +1,4 @@
+#!/usr/bin/env node
+
+require = require('esm')(module);
+require('./src/cli').cli(process.argv);

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "b13-rocket",
+  "description": "FE CLI build tool",
+  "version": "0.5.0",
+  "engines": {
+    "node": ">=v16.13.0",
+    "npm": ">=6.4.1",
+    "yarn": "^1.12.3"
+  },
+  "author": {
+    "name": "b13 GmbH",
+    "email": "info@b13.com",
+    "url": "https://b13.com/"
+  },
+  "scripts": {
+    "rocket": "node ./index.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"
+  },
+  "packageManager": "yarn@3.2.3",
+  "dependenciesMeta": {
+    "b13-eslint-config@0.2.3": {
+      "unplugged": true
+    },
+    "eslint@8.34.0": {
+      "unplugged": true
+    }
+  }
+}

package/src/build.js

@@ -0,0 +1,158 @@
+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);
+		}
+
+		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);
+
+		compiler.hooks.beforeRun.tap('b13-rocket-cli', (context, entry) => {
+			this.clear();
+			if (this.config.sw) {
+				this.updateServiceWorkerBuildTimestamp();
+			}
+		});
+
+		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);
+				}
+				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');
+					},
+				);
+			},
+		);
+	}
+}
+
+
+export async function build(args) {
+	const { siteConfig } = await sites(args);
+
+	if (!args.sitesConfigPath) {
+		Notification.error('missing site build config');
+		return;
+	}
+
+	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 (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;
+		}
+	}
+}

package/src/cli.js

@@ -0,0 +1,57 @@
+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';
+	}
+
+	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!`);
+			break;
+	}
+}

package/src/create.js

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