gulpfile.js

// @ts-check
const fs = require('fs');
const path = require('path');
const gulp = require('gulp');
const minimist = require('minimist');
/**
 * @typedef {Object} BabelMismatch
 * @property {import('@babel/core').TransformOptions['filename']} patch
 * @property {NonNullable<Parameters<typeof import('gulp-babel')>[0]>['filename']} original
 */
/**
 * gulp-babel seems to be no longer supported, so I patch the type declaration here manually.
 * @type {(options?: import('@babel/core').TransformOptions) => NodeJS.ReadWriteStream}
 *
 * {@link BabelMismatch.patch} is not assignable to {@link BabelMismatch.original}.
 */
// @ts-expect-error: Types of property `filename` are incompatible. See the links above.
const babel = require('gulp-babel');
const rename = require('gulp-rename');
const uglify = require('gulp-uglify');
const browserSync = require('browser-sync').create();
/**
 * @typedef {Object} PrintMismatch
 * @property {NodeJS.ReadWriteStream} patch
 * @property {import('stream').Stream} original
 */
/**
 * gulp-print seems to be no longer supported, so I patch the type declaration here manually.
 * @type {(format?: import('gulp-print').FormatFunction) => NodeJS.ReadWriteStream}
 *
 * {@link PrintMismatch.patch} is not assignable to {@link PrintMismatch.original}.
 */
// @ts-expect-error: Type mismatch due to missing properties. See the links above.
const print = require('gulp-print').default;
/**
 * @typedef {<F extends () => NodeJS.ReadWriteStream, A extends Parameters<F>>(filter: F, args: A) => ReturnType<F>} Through
 */
/**
 * @type {(tapFunction: (file: import('vinyl'), t?: {through?: Through}) => void) => NodeJS.ReadWriteStream}
 */
const tap = require('gulp-tap');
const gulpIgnore = require('gulp-ignore');
const postcss = require('gulp-postcss');
const mergeStream = require('merge-stream');
/**
 * The signature should be `createResolver(config, options).resolve(key, ...)`.
 * @type {(...args: Parameters<typeof import('resolve-options')>) => {resolve: (key: string, ...args: any[]) => number | string | boolean | Date | undefined | null}}
 */
const createResolver = require('resolve-options');
const webpackStream = require('webpack-stream');
const webpack = require('webpack');
const flatmap = require('gulp-flatmap');
const ts = require('gulp-typescript');
const concat = require('gulp-concat');
const vinylMap = require('vinyl-map');

const knownOptions = {
	string: ['src', 'dest'],
	number: ['port'],
	boolean: ['force', 'devMode'],
	default: {
		src: 'zul/src/main/resources/web/js',
		dest: 'zul/build/resources/main/web/js',
		force: false,
		port: 8080,
		devMode: false,
		subprojectPaths: 'zk,zul,../zkcml/zkex,../zkcml/zkmax,../zkcml/client-bind',
	}
};
const options = minimist(process.argv.slice(3), knownOptions);
/**
 * `options.subprojectPaths` is set from "build.gradle" in "zktest" and "zephyr-test".
 * In any case, duplicated paths should be pruned.
 */
options.subprojectPaths = [...new Set(
	/** @type {string} */(options.subprojectPaths).split(',')
)];

/**
 * Workaround for maven frontend-maven-plugin passing quoted strings
 * @param {string} txt
 */
function stripQuotes(txt) {
	if (txt.startsWith('"') && txt.endsWith('"')) {
		return txt.substring(1, txt.length - 1);
	}
	return txt;
}

function watch_job(glob, job) {
	const watcher = gulp.watch(glob, { ignoreInitial: false }, job);
	watcher.on('change', function (path) {
		console.log('Detect file change: ' + path + '...');
	});
	return watcher;
}

const config = {
	cwd: {
		type: 'string',
		default: process.cwd,
	}
};

/**
 * @param {string} destDir - Output directory
 * @param {boolean} [force] - Force keep
 */
function ignoreSameFile(destDir, force) {
	return gulpIgnore.exclude(function (file) {
		if (force) return false;
		// simulate gulp.dest() to find a output path
		const optResolver = createResolver(config, {});
		const cwd = path.resolve(/** @type {string} */(optResolver.resolve('cwd', file)));
		const basePath = path.resolve(cwd, destDir);
		const writePath = path.resolve(basePath, file.relative);
		if (fs.existsSync(writePath)) {
			const srcStat = fs.statSync(file.path);
			const outStat = fs.statSync(writePath);
			if (srcStat.mtime <= outStat.mtime) {
				return true;
			}
		}
		return false;
	});
}

/**
 * Used by gradle task `compileTypeScript`
 */
function typescript_build_single() {
	const sources = stripQuotes(options.src);
	const destDir = stripQuotes(options.dest);
	const force = options.force;
	return typescript_build(sources, destDir, force);
}

/**
 * See {@link typescript_build_single}
 * @param {string} src - Directory containing JS/TS sources
 * @param {string} dest - Output directory
 * @param {boolean} [force] - Force keep. See {@link ignoreSameFile}
 * @param {number | Date} [since] - Only find files that have been modified since the time specified
 */
function typescript_build(src, dest, force, since) {
	const webpackConfig = require('./webpack.config.js');
	/** @type {import('vinyl-fs').SrcOptions} */
	const defaultSrcOptions = {
		root: src,
		since,
	};
	const tsBundledEntries = gulp.src('/**/index.ts', defaultSrcOptions);

	// Streams are not sequenced. If one uses `ignoreSameFile` on stream 1, but stream 4
	// executes first, then `*.ts` will be excluded from compilation because stream 4 would
	// have already copied the same `*.ts` into `dest`. Thus, I don't rely on ignoreSameFile.
	// Fortunately, stream 1 and stream 2 both produces only `*.js` which stream 4 will not
	// overwrite (stream 4 explicitly ignores `*.js` in `gulp.src()`).
	return mergeStream(
		// Transpile single files with babel which are not siblings of some `index.ts`
		// Only for JS files, because *.ts will be included by `index.ts`
		gulp.src('/**/@(*.js)', { // stream 1
			...defaultSrcOptions,
			ignore: ['/**/*.d.ts'],
		})
			.pipe(gulpIgnore.exclude(
				file => fs.existsSync(path.join(path.dirname(file.path), 'index.ts'))
			))
			.pipe(ignoreSameFile(dest))
			.pipe(babel({
				root: __dirname
			}))
			.pipe(rename({ suffix: '.src' }))
			.pipe(gulp.dest(dest))
			.pipe(uglify())
			.pipe(rename(function (path) {
				path.basename = path.basename.replace(/\.src/, '');
			}))
			.pipe(gulp.dest(dest))
			.pipe(print()),
		// Bundle `index.ts` with webpack as `index.js` with source map
		bundleWithWebpack( // stream 2
			tsBundledEntries, {
				...webpackConfig,
				mode: 'production',
				devtool: 'source-map',
			},
			'js',
		),
		options.devMode ? gulp.src('.') :
		// Bundle `index.ts` with webpack as `index.src.js` without source map
		bundleWithWebpack( // stream 3
			tsBundledEntries, {
				...webpackConfig,
				mode: 'development',
				optimization: {
					minimize: false,
				},
				devtool: false,
			},
			'src.js',
		),
		// fix copy resource in zipjs folder
		gulp.src('/**/!(*.less|*.js|*.d.ts)', { // stream 4
			...defaultSrcOptions,
			nodir: true,
		})
			.pipe(ignoreSameFile(dest))
			.pipe(gulp.dest(dest))
			.pipe(print())
	);

	/**
	 * @param {NodeJS.ReadWriteStream} bundleEntries
	 * @param {webpack.Configuration} webpackConfig
	 * @param {string} fileExtension - `js`, `src.js`, etc.
	 * @returns {NodeJS.ReadWriteStream}
	 */
	function bundleWithWebpack(bundleEntries, webpackConfig, fileExtension) {
		return bundleEntries
			// There is no official way to specify the "library" property in a
			// webpack "entry" from webpack-stream, so we manipulate the stream
			// manually; note that specifying the "library" property in "output"
			// doesn't work. However, webpack-stream doesn't implement _readableState
			// which gulp-tap reqires. Thus, we use gulp-flatmap.
			.pipe(flatmap(function (stream, file) {
				const entryName = path.join(
					path.dirname(file.relative),
					path.basename(file.path, path.extname(file.path))
				);
				webpackConfig.entry = {
					[entryName]: {
						import: file.path,
						library: {
							type: 'window',
							export: 'default',
						},
					},
				};
				webpackConfig.output = {
					filename: `[name].${fileExtension}`,
					path: process.cwd(),
				};
				return webpackStream(webpackConfig, webpack);
			}))
			.pipe(gulp.dest(dest))
			.pipe(print());
	}
}

function browsersync_init(done) {
	browserSync.init({
		proxy: `localhost:${options.port}`,
		startPath: options.startPath,
	});
	done();
}

/**
 * @param {string} src - Directory containing JS/TS sources
 * @param {string} dest - Output directory
 * @param {number | Date} [since] - Only find files that have been modified since the time specified
 * @returns {NodeJS.WritableStream}
 */
function typescript_dev(src, dest, since) {
	// WARNING: Don't pass `since`, as the cache liveliness detection is faulty.
	// Only pass `since` if the corretness can be verified in future versions.
	return typescript_build(src, dest)
		.pipe(browserSync.stream());
}

/**
 * @param {string} subprojectPath - E.g., "zul", "../zkcml/client-bind"
 * @param {number | Date} [since] - Only find files that have been modified since the time specified
 */
function typescript_dev_subproject(subprojectPath, since) {
	return typescript_dev(
		path.join(subprojectPath, 'src/main/resources'),
		path.join(subprojectPath, 'build/resources/main'),
		since, // gulp.lastRun(typescript_dev_zk)
		// TODO: `gulp.lastRun` is currently ignored in the downstream due to it being
		// unreliable. Hence, it is safe to ignore it here. See the warning in
		// `typescript_dev`. Read more docs and do more experiments to see how
		// we can make it work.
	);
}

exports['build:minify-css'] = function () {
	const sources = stripQuotes(options.src);
	const destDir = stripQuotes(options.dest);
	const force = options.force;
	if (!fs.existsSync(sources)) {
		return gulp.src('.');// ignore
	}
	return gulp.src(sources + '/**/**')
		.pipe(ignoreSameFile(destDir, force))
		.pipe(tap(function (file) {
			if (file.path.endsWith('.css.dsp')) {
				// ignore DSP syntax
				file.contents = Buffer.from(/** @type {NonNullable<typeof file.contents>} */(file.contents).toString('utf-8')
					.replace(/<%/g, '/*!<%')
					.replace(/\${([^}]*)}/g, (match, g1) => `\\9${g1}\\0`)
					.replace(/<c:/g, '<%c--')
					.replace(/%>/g, '%>*/')
					.replace(/\/>/g, '--c%>'), 'utf-8');
			}
		}))
		.pipe(tap(function (file, t) {
			if (file.path.endsWith('.css.dsp')) {
				return /** @type {Required<NonNullable<typeof t>>} */(t).through(postcss, [[require('cssnano')]]);
			} else {
				console.log('copy...', file.path);
			}
		}))
		.pipe(tap(function (file) {
			if (file.path.endsWith('.css.dsp')) {
				// revert DSP syntax
				file.contents = Buffer.from(/** @type {NonNullable<typeof file.contents>} */(file.contents).toString('utf-8')
					.replace(/\/\*!<%/g, '<%')
					.replace(/\\9([^\\0]*)\\0/g, (match, g1) => `\${${g1}}`)
					.replace(/<%c--/g, '<c:')
					.replace(/--c%>/g, '/>')
					.replace(/%>\*\//g, '%>'), 'utf-8');
			}
		}))
		.pipe(gulp.dest(destDir))
		.pipe(print());
};

const dtsEntry = 'index.d.ts';

exports['build:dts'] = function () {
	const { declarationDir } = require('./tsconfig.dts.json').compilerOptions;

	const zkDTS = ts.createProject('./tsconfig.dts.json');
	const zkcmlDTS = ts.createProject('../zkcml/tsconfig.dts.json');
	const zkProjectDirs = require('./tsconfig.json').include;
	const zkcmlProjectDirs = require('../zkcml/tsconfig.json').include.map(dir => path.join('../zkcml', dir));

	return mergeStream(
		zkDTS.src()
			.pipe(zkDTS())
			.dts
			.pipe(gulp.dest(declarationDir)),
		zkcmlDTS.src()
			.pipe(zkcmlDTS())
			.dts
			.pipe(gulp.dest(declarationDir)),
		gulp.src(zkProjectDirs.map(dir => dir + '/**/*.d.ts'), { base: '.' })
			.pipe(gulp.dest(declarationDir))
			.pipe(print()),
		gulp.src(zkcmlProjectDirs.map(dir => dir + '/**/*.d.ts'), { base: '../zkcml' })
			.pipe(gulp.dest(declarationDir))
			.pipe(print()),
		gulp.src(['./*/package.json', '../zkcml/*/package.json'])
			.pipe(print())
			.pipe(vinylMap((contents, filename) => {
				const { types } = JSON.parse(contents.toString());
				if (!types) {
					return '';
				}
				const dir = path.basename(path.dirname(filename));
				return `/// <reference path="./${path.join(dir, types)}" />`;
			}))
			.pipe(concat(dtsEntry))
			.pipe(gulp.dest(declarationDir))
			.pipe(print()),
	);
};
/**
 * Requires the command line argument `--zk-version <VERSION>`
 */
exports['publish:dts'] = function (done) {
	// Don't name the CLI argument as `version` as, `gulp` will interpret it as
	// `gulp --version` regardless of argument position.
	const { 'zk-version': version } = options;
	if (!version || typeof version !== 'string') {
		console.log('Requires a version string: --zk-version <semVer>');
		console.log('For example: npm run publish:dts -- --zk-version <semVer>');
		return;
	}
	console.log(`version: ${version}`);

	const dtsPackage = {
		name: 'zk-types',
		version,
		license: require('./package.json').license,
		types: dtsEntry,
		dependencies: {
			...require('./package.json').dependencies,
			...require('../zkcml/package.json').dependencies,
		}
	};
	console.log(JSON.stringify(dtsPackage));
	fs.writeFileSync('./build/dts/package.json', JSON.stringify(dtsPackage));
	return done();
};

class Subproject {
	/**
	 * @param {string} subprojectPath - E.g., "zul", "../zkcml/client-bind". With or without
	 * a trailing slash ('/') doesn't matter, as we meticulously use `path.join`.
	 */
	constructor(subprojectPath) {
		this.subprojectPath = subprojectPath;
	}
	get watcher() {
		return () => watch_job(
			path.join(this.subprojectPath, '**/*.ts'),
			this.builder,
		);
	}
	get builder() {
		return () => typescript_dev_subproject(this.subprojectPath);
	}
}

const subprojects = /** @type {string[]} */(options.subprojectPaths)
	.map(subprojectPath => new Subproject(subprojectPath));

exports['build:single'] = typescript_build_single;
exports.watch = gulp.series(
	browsersync_init,
	gulp.parallel(...subprojects.map(subproject => subproject.watcher)),
);
exports.build = gulp.parallel(...subprojects.map(subproject => subproject.builder));
exports.default = exports.build;