ko 5.3.10 → 6.1.0

package/README.md

@@ -1,3 +1,38 @@
 # ko
 
-build & lint library
+## Simple, yet powerful, tool for managing your react applications. 
+
+<a href="https://www.npmjs.com/package/ko"><img alt="NPM Status" src="https://img.shields.io/npm/v/ko.svg?style=flat"></a>
+
+## Features
+
+* Support building applications on top of **webpack v5** and **esbuild**
+* Customize ko to work exactly the way you need it for your applications 
+* Built-in popular linting tools to lint your source code
+* Built-in support typescript
+
+## Installation
+
+You can install ko using npm, yarn or pnpm:
+``` bash
+npm install ko --save-dev
+# or
+yarn add ko --dev
+# or 
+pnpm add ko --save-dev
+```
+
+## Documents
+* [Introduction](https://dtstack.github.io/ko/docs/introduction)
+* [Getting Started](https://dtstack.github.io/ko/docs/getting-started)
+* [FAQ](https://dtstack.github.io/ko/docs/FAQ)
+
+## Contributing
+
+We'd love to have your helping hand on `ko`! See [CONTRIBUTING](https://dtstack.github.io/ko/docs/contributing/) for more information on how to get started.
+
+## License
+
+Copyright © DTStack. All rights reserved.
+
+Licensed under the MIT license.

package/lib/actions/build.js

@@ -4,66 +4,60 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const webpack_1 = __importDefault(require("webpack"));
-const creator_1 = require("./creator");
-const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
-class Build extends creator_1.WebpackCreator {
-    constructor(opts) {
-        super(opts);
+const webpack_2 = __importDefault(require("../webpack"));
+const factory_1 = require("./factory");
+const css_minimizer_webpack_plugin_1 = __importDefault(require("css-minimizer-webpack-plugin"));
+const esbuild_loader_1 = require("esbuild-loader");
+class Build extends factory_1.ActionFactory {
+    constructor(service) {
+        super(service);
     }
-    config() {
-        // const { esbuild } = this.opts;
-        const conf = {
+    async generateConfig() {
+        this.webpackConfig = new webpack_2.default(this.service);
+        const extraConfig = {
             optimization: {
                 minimize: true,
-                minimizer: ['...', new CssMinimizerPlugin()],
+                minimizer: this.service.config.experiment?.minimizer
+                    ? [
+                        new esbuild_loader_1.ESBuildMinifyPlugin({
+                            target: 'es2015',
+                            css: true,
+                        }),
+                    ]
+                    : ['...', css_minimizer_webpack_plugin_1.default.parcelCssMinify],
             },
-            plugins: [
-                new webpack_1.default.optimize.SplitChunksPlugin({
-                    chunks: 'all',
-                    minSize: 30000,
-                    maxSize: 600000,
-                    minChunks: 1,
-                    automaticNameDelimiter: '_',
-                    cacheGroups: {
-                        baseCommon: {
-                            test: new RegExp(`[\\/]node_modules[\\/](${[
-                                'react',
-                                'react-router',
-                                'react-dom',
-                                'react-redux',
-                                'redux',
-                                'react-router-redux',
-                            ].join('|')})`),
-                            priority: 1,
-                        },
-                        antd: {
-                            name: 'antd',
-                            test: /[\\/]node_modules[\\/]antd[\\/]/,
-                            chunks: 'initial',
-                        },
-                        lodash: {
-                            name: 'lodash',
-                            test: /[\\/]node_modules[\\/]lodash[\\/]/,
-                            chunks: 'initial',
-                            priority: -10,
-                        },
-                        default: {
-                            minChunks: 2,
-                            priority: -20,
-                            reuseExistingChunk: true,
-                        },
-                    },
-                }),
-            ],
         };
-        return this.mergeConfig([this.baseConfig, conf]);
+        const ret = this.webpackConfig.merge(extraConfig);
+        const plugins = await this.service.apply({
+            key: this.service.hookKeySet.WEBPACK_PLUGIN,
+            context: ret.plugins,
+        });
+        ret.plugins = plugins;
+        return ret;
+    }
+    registerCommand() {
+        const cmdName = 'build';
+        this.service.commander.registerCommand({
+            name: cmdName,
+            description: 'build project',
+            options: [
+                {
+                    flags: '--hash',
+                    description: 'output file name with hash',
+                },
+            ],
+        });
+        this.service.commander.bindAction(cmdName, this.action.bind(this));
     }
-    action() {
-        //TODO: redefine stats
-        (0, webpack_1.default)(this.config(), (error, stats) => {
+    async action(cliOpts) {
+        process.title = 'ko-build';
+        process.env.NODE_ENV = 'production';
+        this.service.freezeCliOptsWith(cliOpts);
+        const config = await this.generateConfig();
+        (0, webpack_1.default)(config, (error, stats) => {
             if (stats && stats.hasErrors()) {
                 throw stats.toString({
-                    logging: 'warn',
+                    logging: 'error',
                     colors: true,
                 });
             }

package/lib/actions/dev.js

@@ -5,103 +5,95 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const webpack_1 = __importDefault(require("webpack"));
 const webpack_dev_server_1 = __importDefault(require("webpack-dev-server"));
-const detect_port_1 = __importDefault(require("detect-port"));
-const inquirer_1 = require("inquirer");
-const config_1 = __importDefault(require("../utils/config"));
-const creator_1 = require("./creator");
-const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
-class Dev extends creator_1.WebpackCreator {
-    constructor(opts) {
-        super(opts);
-        const { port, host } = this.opts;
-        const userDefinedDevServerConfig = config_1.default.userConf.devServer || {};
-        this.devServerConf = {
+const webpack_2 = __importDefault(require("../webpack"));
+const factory_1 = __importDefault(require("./factory"));
+class Dev extends factory_1.default {
+    constructor(service) {
+        super(service);
+    }
+    get devServerConfig() {
+        const { serve, publicPath } = this.service.config;
+        const { host, port, proxy, staticPath } = serve;
+        return {
             port,
             host,
-            contentBase: config_1.default.defaultPaths.dist,
-            historyApiFallback: true,
-            disableHostCheck: true,
-            compress: true,
-            clientLogLevel: 'none',
             hot: true,
-            inline: true,
-            publicPath: '/',
-            watchOptions: {
-                ignored: /node_modules/,
-                aggregateTimeout: 600,
+            proxy,
+            static: {
+                directory: staticPath,
+                watch: true,
+                publicPath,
             },
-            ...userDefinedDevServerConfig,
-        };
-    }
-    config() {
-        const conf = {
-            devtool: 'cheap-module-source-map',
-            plugins: [this.opts.analyzer && new BundleAnalyzerPlugin()].filter(Boolean),
-            optimization: {
-                splitChunks: {
-                    chunks: 'all',
-                },
+            setupExitSignals: false,
+            allowedHosts: 'all',
+            client: {
+                overlay: false,
+                logging: 'none',
             },
         };
-        return this.mergeConfig([this.baseConfig, conf]);
     }
-    async changePort(newPort, port) {
-        const question = {
-            type: 'confirm',
-            name: 'changePort',
-            message: `port: ${port} has been used，use new port ${newPort} instead?`,
-            default: true,
+    async generateConfig() {
+        this.webpackConfig = new webpack_2.default(this.service);
+        const extraConfig = {
+            devtool: 'cheap-module-source-map',
+            mode: 'development',
         };
-        const answer = await (0, inquirer_1.prompt)([question]);
-        if (answer.changePort) {
-            return newPort;
-        }
-        else {
-            return null;
-        }
-    }
-    async checkPort(port) {
-        const newPort = await (0, detect_port_1.default)(port);
-        if (newPort === port) {
-            return newPort;
-        }
-        const isInteractive = process.stdout.isTTY;
-        if (isInteractive) {
-            return this.changePort(newPort, port);
+        const ret = this.webpackConfig.merge(extraConfig, {
+            devServer: this.devServerConfig,
+        });
+        if (ret.plugins) {
+            const plugins = await this.service.apply({
+                key: this.service.hookKeySet.WEBPACK_PLUGIN,
+                context: ret.plugins,
+            });
+            ret.plugins = plugins;
         }
+        ret.experiments = {
+            lazyCompilation: this.service.config?.experiment?.speedUp,
+        };
+        return ret;
     }
-    threadLoaderWarmUp() {
-        const threadLoader = require('thread-loader');
-        threadLoader.warmup({}, [require.resolve('babel-loader')]);
+    registerCommand() {
+        const cmdName = 'dev';
+        this.service.commander.registerCommand({
+            name: cmdName,
+            description: 'start devServer',
+            options: [
+                {
+                    flags: '--hash',
+                    description: 'output file name with hash',
+                },
+                {
+                    flags: '--analyzer',
+                    description: 'support building analyzer',
+                },
+            ],
+        });
+        this.service.commander.bindAction(cmdName, this.action.bind(this));
     }
-    async action() {
-        const { port } = this.devServerConf;
-        const newPort = await this.checkPort(port);
-        if (!newPort) {
+    async action(cliOpts) {
+        process.title = 'ko-dev';
+        process.env.NODE_ENV = 'development';
+        this.service.freezeCliOptsWith(cliOpts);
+        const config = await this.generateConfig();
+        const compiler = (0, webpack_1.default)(config);
+        const devServer = new webpack_dev_server_1.default(config.devServer, compiler);
+        await devServer.start();
+        const exitProcess = (callback) => () => {
+            callback && callback();
             process.exit(0);
-        }
-        this.devServerConf.port = newPort;
-        webpack_dev_server_1.default.addDevServerEntrypoints(this.config(), this.devServerConf);
-        this.threadLoaderWarmUp();
-        const compiler = (0, webpack_1.default)(this.config());
-        const devServer = new webpack_dev_server_1.default(compiler, this.devServerConf);
-        let isFirstCompile = true;
-        compiler.hooks.done.tap('done', stats => {
-            if (isFirstCompile) {
-                isFirstCompile = false;
-                this.successStdout('development server has been started');
-            }
-            if (stats.hasErrors()) {
-                console.log(stats.toString({
-                    colors: true,
-                }));
-            }
+        };
+        process.stdin.on('end', () => {
+            devServer.stopCallback(() => {
+                exitProcess(() => this.successStdout('webpack devServer process exit successfully'));
+            });
+            process.stdin.resume();
         });
-        devServer.listen(this.devServerConf.port, this.devServerConf.host, err => {
-            if (err) {
-                console.error(err);
-                process.exit(1);
-            }
+        ['SIGINT', 'SIGTERM'].forEach(signal => {
+            process.on(signal, exitProcess(() => {
+                console.log('\n');
+                this.warningStdout('stop webpack devServer process via command signal:', signal);
+            }));
         });
     }
 }

package/lib/actions/factory.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActionFactory = void 0;
+const chalk_1 = __importDefault(require("chalk"));
+class ActionFactory {
+    constructor(service) {
+        this.service = service;
+    }
+    successStdout(...logs) {
+        console.log(...logs.map(log => chalk_1.default.green(log)));
+    }
+    warningStdout(...logs) {
+        console.log(...logs.map(log => chalk_1.default.green(log)));
+    }
+    errorStdout(...logs) {
+        console.log(...logs.map(log => chalk_1.default.green(log)));
+    }
+}
+exports.ActionFactory = ActionFactory;
+exports.default = ActionFactory;

package/lib/actions/lints.js

@@ -0,0 +1,76 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const factory_1 = require("./factory");
+const ko_lints_1 = __importDefault(require("ko-lints"));
+const utils_1 = require("../utils");
+class LintFactory extends factory_1.ActionFactory {
+    constructor(service, name) {
+        super(service);
+        this.name = name;
+        this.generateConfig();
+    }
+    generateConfig() {
+        const opts = this.service.config?.lints?.[this.name];
+        return opts || {};
+    }
+    registerCommand() {
+        const name = this.name;
+        this.service.commander.registerCommand({
+            name,
+            description: `lint your codes via ${name}`,
+            args: [
+                {
+                    flags: '<patterns>',
+                    description: ` Specify ${name} lint patterns(via glob)`,
+                },
+            ],
+            options: [
+                {
+                    flags: '-w, --write',
+                    description: 'try to fix problems automatically',
+                },
+                {
+                    flags: '-c, --configPath <configPath>',
+                    description: `Specify ${name} config path`,
+                },
+                {
+                    flags: '--concurrency',
+                    description: 'Enable concurrency mode',
+                },
+                {
+                    flags: '--concurrentNumber <number>',
+                    description: 'Specify max worker count',
+                },
+            ],
+        });
+        this.service.commander.bindAction(name, this.action.bind(this));
+    }
+    async action(patterns, cliOpts) {
+        const config = this.generateConfig();
+        const finalOpts = Object.freeze({
+            name: this.name,
+            ...config,
+            ...cliOpts,
+            patterns: Array.isArray(patterns) ? patterns : [patterns],
+        });
+        const { name, ...opts } = finalOpts;
+        (0, utils_1.assert)(opts.patterns, `patterns config of ${name} should be specified(via glob)`);
+        process.title = finalOpts.name;
+        const lintRunner = new ko_lints_1.default(opts);
+        const result = (await lintRunner.run(name)).filter(Boolean);
+        if (result.length === 0) {
+            this.successStdout('[success]', `lint via ${name}`);
+        }
+        else {
+            this.warningStdout(`lint via ${name} failed:`);
+            result.forEach(str => {
+                str && this.warningStdout('[failed]', str);
+            });
+        }
+        process.exit(0);
+    }
+}
+exports.default = LintFactory;

package/lib/cli.js

@@ -4,37 +4,21 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const commander_1 = require("commander");
-const build_1 = __importDefault(require("./actions/build"));
+const service_1 = __importDefault(require("./core/service"));
 const dev_1 = __importDefault(require("./actions/dev"));
-const program = new commander_1.Command();
-const pkg = require('../package.json');
-program
-    .description('Project toolkit base on webpack,babel,eslint and prettier.')
-    .version(pkg.version, '-v, --version')
-    .usage('<command> [options]');
-program
-    .command('build')
-    .description('build project')
-    .option('--hash', 'output file name with hash')
-    .option('-t,--ts,--typescript', 'support typescript')
-    .option('-e,--esbuild', 'enable esbuild')
-    .action((opts) => {
-    process.env.NODE_ENV = 'production';
-    const buildInstance = new build_1.default(opts);
-    buildInstance.action();
-});
-program
-    .command('dev')
-    .description('start devServer')
-    .option('-p, --port <port>', 'server start on which port', parseInt)
-    .option('--host <host>', 'specify a host to use')
-    .option('-t, --ts', 'support typescript')
-    .option('-h, --hash', 'output file name with hash')
-    .option('-a,--analyzer', 'support building analyzer')
-    .action((opts) => {
-    process.env.NODE_ENV = 'development';
-    const devInstance = new dev_1.default(opts);
-    devInstance.action();
-});
-program.parse();
+const build_1 = __importDefault(require("./actions/build"));
+const lints_1 = __importDefault(require("./actions/lints"));
+function exec() {
+    const service = new service_1.default();
+    // register commands
+    const dev = new dev_1.default(service);
+    dev.registerCommand();
+    const build = new build_1.default(service);
+    build.registerCommand();
+    ['eslint', 'prettier', 'stylelint'].forEach(name => {
+        const runner = new lints_1.default(service, name);
+        runner.registerCommand();
+    });
+    service.run();
+}
+exec();

package/lib/core/commander.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const commander_1 = require("commander");
+const utils_1 = require("../utils");
+var STATE;
+(function (STATE) {
+    STATE[STATE["INIT"] = 0] = "INIT";
+    STATE[STATE["PARSE"] = 1] = "PARSE";
+    STATE[STATE["DONE"] = 2] = "DONE";
+})(STATE || (STATE = {}));
+class Commander {
+    constructor() {
+        this.program = commander_1.program;
+        this.STATE = STATE.INIT;
+        this.cmdSet = {};
+        this.pkg = require('../../package.json');
+    }
+    registerCommand({ name, description, args, options, }) {
+        (0, utils_1.assert)(this.STATE === STATE.INIT, `register command should be called in INIT state`);
+        (0, utils_1.assert)(!this.cmdSet[name], `command ${name} has been registered`);
+        (0, utils_1.assert)(description, `command ${name} must have a description`);
+        this.cmdSet[name] = {
+            description,
+            options,
+            args,
+        };
+    }
+    bindAction(name, fn) {
+        (0, utils_1.assert)(this.STATE === STATE.INIT, `bind command action should be called in INIT state`);
+        (0, utils_1.assert)(this.cmdSet[name], `command ${name} hasn't been registered`);
+        (0, utils_1.assert)(!this.cmdSet[name].action, `command ${name} action has been registered`);
+        this.cmdSet[name].action = fn;
+    }
+    parse() {
+        this.STATE = STATE.PARSE;
+        this.program
+            .description('Project Toolkit for React Applications')
+            .version(this.pkg.version, '-v, --version')
+            .usage('<command> [options]');
+        Object.keys(this.cmdSet).forEach(name => {
+            const cmd = this.cmdSet[name];
+            const command = this.program.command(name);
+            command.description(cmd.description);
+            if (cmd.args) {
+                cmd.args.forEach(argv => {
+                    command.argument(argv.flags, argv.description);
+                });
+            }
+            if (cmd.options) {
+                cmd.options.forEach(option => {
+                    command.option(option.flags, option.description, option.defaultValue);
+                });
+            }
+            if (cmd.action) {
+                command.action(cmd.action);
+            }
+            else {
+                throw new Error(`command ${name} action hasn't been bind`);
+            }
+        });
+        this.program.parse();
+        this.STATE = STATE.DONE;
+    }
+}
+exports.default = Commander;

package/lib/core/config.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const path_1 = require("path");
+const fs_1 = require("fs");
+const lodash_1 = require("lodash");
+const utils_1 = require("../utils");
+class Config {
+    constructor() {
+        this.cwd = process.cwd();
+        this.path = this.getConfigPath('ko.config.js');
+        this.generate();
+    }
+    get isDevOrBuildCommand() {
+        const flag = process.argv.find(arg => arg === 'dev' || arg === 'build');
+        return !!flag;
+    }
+    getConfigPath(path) {
+        const absolutePath = (0, path_1.join)(process.cwd(), path);
+        this.isDevOrBuildCommand &&
+            (0, utils_1.assert)((0, fs_1.existsSync)(absolutePath), 'ko.config.js file not exist, please check if it exist');
+        return absolutePath;
+    }
+    generate() {
+        this.origin = {};
+        if (this.isDevOrBuildCommand) {
+            this.origin = require(this.path);
+        }
+        this.current = (0, lodash_1.merge)(this.default, (0, lodash_1.cloneDeep)(this.origin));
+        return Object.freeze(this.current);
+    }
+    freezeWithOpts(cliOpts) {
+        this.cliOpts = cliOpts;
+        return Object.freeze((0, lodash_1.merge)(this.current, this.cliOpts));
+    }
+    get default() {
+        return {
+            cwd: this.cwd,
+            serve: {
+                host: '127.0.0.1',
+                port: 8080,
+            },
+            hash: true,
+            analyzer: false,
+            lessOptions: {
+                javascriptEnabled: true,
+            },
+            publicPath: '/',
+            experiment: {
+                speedUp: true,
+                minimizer: true,
+                enableCssModule: true,
+            },
+        };
+    }
+}
+exports.default = Config;

package/lib/core/hooks.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tapable_1 = require("tapable");
+const types_1 = require("../types");
+var HOOK_KEY_SET;
+(function (HOOK_KEY_SET) {
+    HOOK_KEY_SET["WEBPACK_PLUGIN"] = "WebpackPlugin";
+})(HOOK_KEY_SET || (HOOK_KEY_SET = {}));
+class Hooks {
+    constructor() {
+        this.hookKeySet = HOOK_KEY_SET;
+        this.hooks = {};
+    }
+    register({ key, action, opts }) {
+        var _a;
+        (_a = this.hooks)[key] || (_a[key] = {
+            [types_1.ACTION.ADD]: [],
+            [types_1.ACTION.UPDATE]: [],
+        });
+        this.hooks[key][action].push(opts);
+    }
+    apply(opts) {
+        const hooks = this.hooks[opts.key];
+        const tapInstance = new tapable_1.AsyncSeriesWaterfallHook(['ctx']);
+        hooks[types_1.ACTION.ADD].forEach(hook => {
+            tapInstance.tapPromise({ name: hook.name, stage: hook.stage, before: hook.before }, async (ctx) => {
+                const result = await hook.fn(ctx);
+                return ctx.concat(result);
+            });
+        });
+        hooks[types_1.ACTION.UPDATE].forEach(hook => {
+            tapInstance.tapPromise({ name: hook.name, stage: hook.stage, before: hook.before }, async (ctx) => {
+                const result = await hook.fn(ctx);
+                return result;
+            });
+        });
+        return tapInstance.promise(opts.context);
+    }
+}
+exports.default = Hooks;