@design-systems/build/dist/index.js

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getBabelOptions = exports.getBabelConfig = exports.getPostCssConfigSync = exports.getPostCssConfig = void 0;
const tslib_1 = require("tslib");
const cli_utils_1 = require("@design-systems/cli-utils");
const tapable_1 = require("tapable");
const path_1 = tslib_1.__importDefault(require("path"));
const dedent_1 = tslib_1.__importDefault(require("dedent"));
const fs_extra_1 = tslib_1.__importDefault(require("fs-extra"));
const minimatch_1 = tslib_1.__importDefault(require("minimatch"));
const chokidar_1 = require("chokidar");
const fast_glob_1 = tslib_1.__importDefault(require("fast-glob"));
const pretty_bytes_1 = tslib_1.__importDefault(require("pretty-bytes"));
const pretty_ms_1 = tslib_1.__importDefault(require("pretty-ms"));
const clean_css_1 = tslib_1.__importDefault(require("clean-css"));
const utils_1 = require("./utils");
const babel_1 = tslib_1.__importStar(require("./babel"));
const postcss_1 = tslib_1.__importStar(require("./postcss"));
const command_1 = require("./command");
const typescript_1 = tslib_1.__importDefault(require("./typescript"));
const POSTCSS_CONFIG = path_1.default.join(__dirname, './configs/postcss.config.js');
/** Find all matching globs. */
function match(file, globs) {
    const resolved = path_1.default.resolve(file);
    const globArr = Array.isArray(globs) ? globs : [globs];
    return globArr.find(currGlob => minimatch_1.default(resolved, currGlob));
}
var postcss_2 = require("./postcss");
Object.defineProperty(exports, "getPostCssConfig", { enumerable: true, get: function () { return postcss_2.getPostCssConfig; } });
Object.defineProperty(exports, "getPostCssConfigSync", { enumerable: true, get: function () { return postcss_2.getPostCssConfigSync; } });
var babel_2 = require("./babel");
Object.defineProperty(exports, "getBabelConfig", { enumerable: true, get: function () { return babel_2.getBabelConfig; } });
Object.defineProperty(exports, "getBabelOptions", { enumerable: true, get: function () { return babel_2.getBabelOptions; } });
/**
 * Build looks for js and css files in src/ and outputs a CJS, ESM, and CSS builds to /dist.
 * By default the same folder structure is maintained.
 *
 * - css files are replaced with their js equivalent.
 * - ESM builds use the .mjs extension, CJS uses .js.
 */
class BuildPlugin {
    constructor() {
        this.hooks = {
            processCSSFiles: new tapable_1.SyncBailHook(['cssFiles'])
        };
        this.logger = cli_utils_1.createLogger({ scope: 'build' });
        this.cssFiles = new Map();
        this.buildArgs = command_1.defaults;
        /** Minify and combine all the css */
        this.generateCSS = async () => {
            if (this.cssFiles.size === 0) {
                return;
            }
            this.logger.trace('Generating merged css...');
            const outFile = path_1.default.join(this.buildArgs.outputDirectory, this.buildArgs.cssMain);
            const clean = new clean_css_1.default({
                sourceMap: true,
                sourceMapInlineSources: true,
                level: 2,
                rebase: false,
                rebaseTo: this.buildArgs.outputDirectory
            });
            const cssToMinify = Array.from(this.cssFiles.entries()).map(([file, { css, map }]) => ({
                [file]: {
                    styles: css,
                    sourceMap: map
                        .toString()
                        .replace(/<input css (\d+)>/g, '../src/<input css $1>')
                }
            }));
            const minified = clean.minify(this.hooks.processCSSFiles.call(cssToMinify) || cssToMinify);
            if (minified.errors.length > 0) {
                this.logger.debug('Errors\n\n', minified.errors.join('\n '), '\n');
            }
            if (minified.warnings.length > 0) {
                this.logger.debug('Warnings\n\n', minified.warnings.join('\n '), '\n');
            }
            const duration = pretty_ms_1.default(minified.stats.timeSpent);
            const efficiency = minified.stats.efficiency.toPrecision(2);
            const difference = pretty_bytes_1.default(minified.stats.originalSize - minified.stats.minifiedSize);
            this.logger.debug(dedent_1.default `
      CSS minification results:

      Original: ${pretty_bytes_1.default(minified.stats.originalSize)}
      Minified: ${pretty_bytes_1.default(minified.stats.minifiedSize)}

      ${difference} -${efficiency}% ${duration}\n
    `);
            await fs_extra_1.default.outputFile(`${outFile}.map`, minified.sourceMap);
            await fs_extra_1.default.outputFile(outFile, `${minified.styles}\n/*# sourceMappingURL=${this.buildArgs.cssMain}.map */`);
            this.logger.complete('Generated merged css');
        };
        /** Getall all files in the input directory */
        this.getFileList = async () => fast_glob_1.default(`${this.buildArgs.inputDirectory}/**/*.*`);
        /** Run relevant transforms on a file */
        this.transformFile = async (file) => {
            const { inputDirectory, outputDirectory } = this.buildArgs;
            if (this.isIgnored(file)) {
                return;
            }
            switch (path_1.default.extname(file)) {
                case '.css':
                    this.logger.pending(`CSS -> ${file}`);
                    return (postcss_1.default({
                        inFile: file,
                        inDir: inputDirectory,
                        outDir: outputDirectory,
                        configFile: POSTCSS_CONFIG,
                        watch: this.buildArgs.watch
                    })
                        // Save the CSS output for merging later
                        .then(css => css && this.cssFiles.set(path_1.default.resolve(file), css)));
                case '.js':
                case '.jsx':
                case '.ts':
                case '.tsx':
                    this.logger.pending(`transpiling -> ${file}`);
                    return babel_1.default(file, inputDirectory, outputDirectory, babel_1.BABEL_CONFIG);
                default:
                    this.logger.pending(`copy -> ${file}`);
                    await fs_extra_1.default.copy(file, path_1.default.join(utils_1.getOutPath(inputDirectory, file, path_1.default.join(outputDirectory, 'cjs')), path_1.default.basename(file)));
                    await fs_extra_1.default.copy(file, path_1.default.join(utils_1.getOutPath(inputDirectory, file, path_1.default.join(outputDirectory, 'esm')), path_1.default.basename(file)));
                    break;
            }
        };
        /** Logic on what to do when a file changes */
        this.onAddOrChanged = async (file) => {
            this.logger.info(`File changed: ${file}`);
            const extname = path_1.default.extname(file);
            try {
                const result = await this.transformFile(file);
                if (result &&
                    'success' in result &&
                    result.success &&
                    (extname === '.ts' || extname === '.tsx')) {
                    await this.typescriptCompiler.buildTypes(true);
                }
            }
            catch (error) {
                this.logger.trace(error);
            }
            if (file.includes('theme.')) {
                await Promise.all([...this.cssFiles.keys()].map(async (cssFile) => this.transformFile(cssFile)));
            }
            if (extname === '.css' || file.includes('theme.')) {
                await this.generateCSS();
                await this.typescriptCompiler.buildTypes(true);
            }
            if (file.includes('tsconfig.json')) {
                await this.typescriptCompiler.buildTypes(true);
            }
            this.logger.watch('Watching for changes');
        };
        /** Logic on what to do when a file is deleted */
        this.onDelete = async (file) => {
            const { inputDirectory, outputDirectory } = this.buildArgs;
            this.logger.info(`File deleted: ${file}`);
            switch (path_1.default.extname(file)) {
                case '.css': {
                    const fName = path_1.default.resolve(file);
                    if (this.cssFiles.has(fName)) {
                        this.cssFiles.delete(fName);
                    }
                    const cssPath = postcss_1.getCSSPath(file, inputDirectory, outputDirectory);
                    await Promise.all([
                        this.generateCSS(),
                        fs_extra_1.default.remove(cssPath),
                        fs_extra_1.default.remove(`${cssPath}.json`)
                    ]);
                    return;
                }
                case '.js':
                case '.jsx':
                case '.ts':
                case '.tsx': {
                    const { cjsFile, mjsFile } = babel_1.getJSOutputFiles(file, inputDirectory, outputDirectory);
                    await Promise.all([fs_extra_1.default.remove(cjsFile), fs_extra_1.default.remove(mjsFile)]);
                    return;
                }
                default:
                    await fs_extra_1.default.remove(path_1.default.join(utils_1.getOutPath(inputDirectory, file, outputDirectory), path_1.default.basename(file)));
            }
        };
        /** Check if a file is ignored */
        this.isIgnored = (filename) => match(filename, this.buildArgs.ignore);
        /** Run the build in watch mode */
        this.watch = async () => {
            const watcher = chokidar_1.watch([this.buildArgs.inputDirectory, 'tsconfig.json'], {
                awaitWriteFinish: true,
                ignoreInitial: false
            });
            /** Only run a function for non-ignored files. */
            const withIgnore = (fn) => (file) => {
                if (this.isIgnored(file)) {
                    return;
                }
                fn(file);
            };
            return new Promise((resolve, reject) => {
                watcher.on('error', reject);
                watcher.on('ready', () => {
                    this.logger.watch('Watching for changes');
                    watcher.on('add', withIgnore(this.onAddOrChanged));
                    watcher.on('change', withIgnore(this.onAddOrChanged));
                    watcher.on('unlink', withIgnore(this.onDelete));
                });
            });
        };
    }
    /** Run the plugin */
    async run(args) {
        this.buildArgs = Object.assign(Object.assign({}, this.buildArgs), args);
        this.typescriptCompiler = new typescript_1.default(this.buildArgs);
        const startTime = Date.now();
        const { watch, outputDirectory } = this.buildArgs;
        // Since watching happens across everything in parallel,
        // leave any old build there for now
        if (!watch && !fs_extra_1.default.existsSync(outputDirectory)) {
            await fs_extra_1.default.remove('tsconfig.tsbuildinfo');
        }
        const files = await this.getFileList();
        // Kick off all of the transforms in parallel
        const transformed = files
            .map(nextFile => !this.isIgnored(nextFile) && this.transformFile(nextFile))
            .filter((i) => typeof i !== 'boolean');
        // We need to wait until all the CSS is done before merging them
        const results = await Promise.all(transformed);
        await this.generateCSS();
        const hasTSFiles = files.some(file => path_1.default.extname(file).startsWith('.ts'));
        if (hasTSFiles) {
            if (results.find(result => result && result.success !== undefined && !result.success)) {
                this.logger.info('Skipping type build. Build errors found.');
            }
            else {
                await this.typescriptCompiler.buildTypes(watch);
            }
        }
        else {
            this.logger.info('Skipping type build. No .ts(x) files found.');
        }
        const runtime = pretty_ms_1.default(Date.now() - startTime);
        this.logger.done(`Transformed ${transformed.length} files in ${runtime} seconds`);
        if (watch) {
            return this.watch();
        }
    }
}
exports.default = BuildPlugin;
//# sourceMappingURL=index.js.map