ko 5.2.2-alpha.3 → 5.3.1

package/lib/actions/build.js

@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const webpack_1 = __importDefault(require("webpack"));
+const esbuild_loader_1 = require("esbuild-loader");
 const creator_1 = require("./creator");
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 class Build extends creator_1.WebpackCreator {
@@ -11,11 +12,17 @@ class Build extends creator_1.WebpackCreator {
         super(opts);
     }
     config() {
+        const { esbuild } = this.opts;
         const conf = {
             optimization: {
                 minimizer: [
-                    new CssMinimizerPlugin()
-                ]
+                    !esbuild && new CssMinimizerPlugin(),
+                    esbuild &&
+                        new esbuild_loader_1.ESBuildMinifyPlugin({
+                            target: 'es2015',
+                            css: true,
+                        }),
+                ].filter(Boolean),
             },
             plugins: [
                 new webpack_1.default.optimize.SplitChunksPlugin({
@@ -44,18 +51,18 @@ class Build extends creator_1.WebpackCreator {
                             reuseExistingChunk: true,
                         },
                     },
-                })
-            ]
+                }),
+            ],
         };
         return this.mergeConfig([this.baseConfig, conf]);
     }
     action() {
         //TODO: redefine stats
-        webpack_1.default(this.config(), (error, stats) => {
+        (0, webpack_1.default)(this.config(), (error, stats) => {
             if (stats && stats.hasErrors()) {
                 throw stats.toString({
                     logging: 'warn',
-                    colors: true
+                    colors: true,
                 });
             }
             if (error) {

package/lib/actions/creator.js

@@ -17,16 +17,16 @@ class WebpackCreator extends Creator {
         this.baseConfig = this.initConfig(opts);
     }
     pluginsUnique(pluginNames) {
-        return webpack_merge_1.unique('plugins', pluginNames, (plugin) => plugin.constructor && plugin.constructor.name);
+        return (0, webpack_merge_1.unique)('plugins', pluginNames, (plugin) => plugin.constructor && plugin.constructor.name);
     }
     initConfig(opts) {
-        this.baseConfig = webpack_1.default(opts);
-        return webpack_merge_1.mergeWithCustomize({
+        this.baseConfig = (0, webpack_1.default)(opts);
+        return (0, webpack_merge_1.mergeWithCustomize)({
             customizeArray: this.pluginsUnique(['HtmlWebpackPlugin']),
         })(this.baseConfig, config_1.default.userConf);
     }
     mergeConfig(conf) {
-        return webpack_merge_1.merge(conf);
+        return (0, webpack_merge_1.merge)(conf);
     }
     successStdout(log) {
         console.log(chalk_1.default.green(log));

package/lib/actions/dev.js

@@ -20,29 +20,26 @@ class Dev extends creator_1.WebpackCreator {
         const defaultDevServerConfig = {
             port,
             host,
-            contentBase: config_1.default.defaultPaths.dist,
             historyApiFallback: true,
-            disableHostCheck: true,
-            compress: true,
-            clientLogLevel: 'none',
+            allowedHosts: 'all',
             hot: true,
-            inline: true,
-            publicPath: '/',
-            watchOptions: {
-                ignored: /node_modules/,
-                aggregateTimeout: 600,
+            static: {
+                directory: config_1.default.defaultPaths.dist,
+                publicPath: '/',
+                watch: true,
             },
-            open: true
+            client: {
+                overlay: false,
+            },
+            setupExitSignals: true,
+            open: true,
         };
         return { ...defaultDevServerConfig, ...userDefinedDevServerConfig };
     }
     config() {
         const conf = {
             devtool: 'cheap-module-source-map',
-            plugins: [
-                new webpack_1.default.HotModuleReplacementPlugin(),
-                this.opts.analyzer && new BundleAnalyzerPlugin()
-            ].filter(Boolean),
+            plugins: [this.opts.analyzer && new BundleAnalyzerPlugin()].filter(Boolean),
         };
         return this.mergeConfig([this.baseConfig, conf]);
     }
@@ -53,7 +50,7 @@ class Dev extends creator_1.WebpackCreator {
             message: `port: ${port} has been used，use new port ${newPort} instead?`,
             default: true,
         };
-        const answer = await inquirer_1.prompt([question]);
+        const answer = await (0, inquirer_1.prompt)([question]);
         if (answer.changePort) {
             return newPort;
         }
@@ -62,7 +59,7 @@ class Dev extends creator_1.WebpackCreator {
         }
     }
     async checkPort(port) {
-        const newPort = await detect_port_1.default(port);
+        const newPort = await (0, detect_port_1.default)(port);
         if (newPort === port) {
             return newPort;
         }
@@ -80,31 +77,10 @@ class Dev extends creator_1.WebpackCreator {
         const newPort = await this.checkPort(parseInt(port));
         if (!newPort)
             return;
-        webpack_dev_server_1.default.addDevServerEntrypoints(this.config(), this.devSerConf());
-        const compiler = webpack_1.default(this.config());
-        const devServer = new webpack_dev_server_1.default(compiler, this.devSerConf());
-        let isFirstCompile = true;
-        compiler.hooks.done.tap('done', (stats) => {
-            if (isFirstCompile) {
-                isFirstCompile = false;
-                this.successStdout('development server has been started');
-                console.log(`server starts at: ${this.linkStdout(this.getUrlHost(host) + ':' + port)}`);
-            }
-            if (stats.hasErrors()) {
-                console.log(stats.toString({
-                    colors: true
-                }));
-            }
-        });
-        compiler.hooks.invalid.tap('invalid', () => {
-            console.log('Compiling...');
-        });
-        devServer.listen(port, host, (err) => {
-            if (err) {
-                console.error(err);
-                process.exit(500);
-            }
-        });
+        const compiler = (0, webpack_1.default)(this.config());
+        const devServer = new webpack_dev_server_1.default(this.devSerConf(), compiler);
+        console.log(`dev server start at ${this.getUrlHost(host)}:${newPort}`);
+        await devServer.start();
     }
 }
 exports.default = Dev;

package/lib/cli.js

@@ -5,7 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const commander_1 = require("commander");
-const ko_lints_1 = __importDefault(require("ko-lints"));
 const build_1 = __importDefault(require("./actions/build"));
 const dev_1 = __importDefault(require("./actions/dev"));
 const program = new commander_1.Command();
@@ -19,6 +18,7 @@ program
     .description('build project')
     .option('--hash', 'output file name with hash')
     .option('-t,--ts,--typescript', 'support typescript')
+    .option('-e,--esbuild', 'enable esbuild')
     .action((opts) => {
     const buildInstance = new build_1.default(opts);
     buildInstance.action();
@@ -35,6 +35,4 @@ program
     const devInstance = new dev_1.default(opts);
     devInstance.action();
 });
-//attach lint features to program
-ko_lints_1.default(program);
 program.parse();

package/lib/utils/config.js

@@ -1,23 +1,30 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const path_1 = require("path");
+const fs_1 = require("fs");
 class Config {
     constructor() {
+        this.babelPlugins = [];
         this.cwd = process.cwd();
     }
     static getInstance() {
         if (!Config.instance) {
-            Config.instance = new Config();
+            Config.instance = Object.freeze(new Config());
         }
         return Config.instance;
     }
     getFileRealPath(path) {
-        return path_1.isAbsolute(path) ? path : path_1.resolve(this.cwd, path);
+        return (0, path_1.isAbsolute)(path) ? path : (0, path_1.resolve)(this.cwd, path);
     }
-    //TODO: define userConf
     get userConf() {
         const userConfPath = this.getFileRealPath('ko.config.js');
-        return userConfPath ? require(userConfPath) : {};
+        if ((0, fs_1.existsSync)(userConfPath)) {
+            const userConf = require(userConfPath);
+            return userConf;
+        }
+        else {
+            throw new Error('user config file not exist, please check it!');
+        }
     }
     get defaultPaths() {
         return {
@@ -25,7 +32,7 @@ class Config {
             dist: this.getFileRealPath('dist'),
             public: this.getFileRealPath('public'),
             html: this.getFileRealPath('public/index.html'),
-            tsconfig: this.getFileRealPath('tsconfig.json')
+            tsconfig: this.getFileRealPath('tsconfig.json'),
         };
     }
     get isProductionEnv() {

package/lib/utils/config.test.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const config_1 = __importDefault(require("./config"));
+console.log(typeof config_1.default.getFileRealPath);
+describe('config instance', () => {
+    it('getFileRealPath should return absolute path', () => {
+        const absolutePath = '/foo/bar';
+        expect(config_1.default.getFileRealPath(absolutePath)).toBe(absolutePath);
+        const relativePath = 'ko.config.js';
+        expect(config_1.default.getFileRealPath(relativePath)).toBe(process.cwd() + '/' + relativePath);
+    });
+    it('userConf should throw', () => {
+        expect(() => {
+            config_1.default.userConf;
+        }).toThrow();
+    });
+    it('defaultPaths should ', () => {
+        const cwd = process.cwd();
+        expect(config_1.default.defaultPaths).toEqual({
+            src: cwd + '/src',
+            dist: cwd + '/dist',
+            public: cwd + '/public',
+            html: cwd + '/public/index.html',
+            tsconfig: cwd + '/tsconfig.json',
+        });
+    });
+});

package/lib/webpack/index.js

@@ -20,7 +20,7 @@ const extensions = [
     '.html',
 ];
 function getWebpackBaseConf(opts) {
-    const { ts, hash } = opts;
+    const { ts = true, hash } = opts;
     const webpackBaseConf = {
         mode: config_1.default.isProductionEnv ? 'production' : 'development',
         target: 'web',
@@ -32,23 +32,24 @@ function getWebpackBaseConf(opts) {
             publicPath: '/',
         },
         module: {
-            rules: loaders_1.default(opts),
+            rules: loaders_1.default,
         },
-        plugins: plugins_1.default(opts),
+        plugins: (0, plugins_1.default)(),
         resolve: {
             extensions,
             plugins: [
-                ts && new tsconfig_paths_webpack_plugin_1.default({
-                    configFile: config_1.default.defaultPaths.tsconfig
-                })
-            ].filter(Boolean)
+                ts &&
+                    new tsconfig_paths_webpack_plugin_1.default({
+                        configFile: config_1.default.defaultPaths.tsconfig,
+                    }),
+            ].filter(Boolean),
         },
         performance: {
             hints: false,
         },
         cache: {
             type: 'filesystem',
-        }
+        },
     };
     return webpackBaseConf;
 }

package/lib/webpack/loaders/index.js

@@ -6,7 +6,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const style_1 = __importDefault(require("./style"));
 const asset_1 = __importDefault(require("./asset"));
 const script_1 = __importDefault(require("./script"));
-function getLoaders(opts) {
-    return [...style_1.default, ...asset_1.default, ...script_1.default(opts.ts)];
-}
-exports.default = getLoaders;
+const loaders = [...style_1.default, ...asset_1.default, ...script_1.default];
+exports.default = loaders;

package/lib/webpack/loaders/script.js

@@ -7,53 +7,44 @@ const getCacheIdentifier_1 = __importDefault(require("react-dev-utils/getCacheId
 const config_1 = __importDefault(require("../../utils/config"));
 const THREAD_LOADER = require.resolve('thread-loader');
 const BABEL_LOADER = require.resolve('babel-loader');
-function getScriptLoaders(supportTypescript) {
-    let scriptLoader = [
-        {
-            test: /\.jsx?$/,
-            include: config_1.default.defaultPaths.src,
-            use: [
-                THREAD_LOADER,
-                {
-                    loader: BABEL_LOADER,
-                    options: {
-                        presets: [
-                            [
-                                require.resolve('babel-preset-ko-app'),
-                                {
-                                    useAbsoluteRuntime: true,
-                                },
-                            ],
-                        ],
-                        babelrc: false,
-                        configFile: false,
-                        cacheIdentifier: getCacheIdentifier_1.default(config_1.default.isProductionEnv ? 'production' : '', ['babel-preset-ko-app', 'react-dev-utils', 'ko']),
-                        cacheDirectory: true,
-                        cacheCompression: false,
-                        compact: config_1.default.isProductionEnv,
-                    },
-                },
-            ],
+const scriptLoader = [
+    {
+        test: /\.worker.[jt]s$/,
+        loader: 'worker-loader',
+        options: {
+            inline: 'fallback',
         },
-    ];
-    if (supportTypescript) {
-        const TS_LOADER = require.resolve('ts-loader');
-        const typescriptLoader = {
-            test: /\.tsx?$/,
-            use: [
-                THREAD_LOADER,
-                {
-                    loader: TS_LOADER,
-                    options: {
-                        transpileOnly: true,
-                        happyPackMode: true,
-                        allowTsInNodeModules: true
-                    },
+    },
+    {
+        test: /\.(t|j)sx?$/,
+        exclude: {
+            and: [/node_modules/],
+            not: [/dt-common/],
+        },
+        use: [
+            THREAD_LOADER,
+            {
+                loader: BABEL_LOADER,
+                options: {
+                    presets: [
+                        [
+                            require.resolve('babel-preset-ko-app'),
+                            {
+                                useAbsoluteRuntime: true,
+                                customizePlugins: config_1.default.babelPlugins,
+                            },
+                        ],
+                    ],
+                    plugins: [require.resolve('react-refresh/babel')],
+                    babelrc: false,
+                    configFile: false,
+                    cacheIdentifier: (0, getCacheIdentifier_1.default)(config_1.default.isProductionEnv ? 'production' : '', ['babel-preset-ko-app', 'react-dev-utils', 'ko']),
+                    cacheDirectory: true,
+                    cacheCompression: false,
+                    compact: config_1.default.isProductionEnv,
                 },
-            ],
-        };
-        scriptLoader.push(typescriptLoader);
-    }
-    return scriptLoader;
-}
-exports.default = getScriptLoaders;
+            },
+        ],
+    },
+];
+exports.default = scriptLoader;

package/lib/webpack/loaders/style.js

@@ -10,7 +10,7 @@ const LESS_LOADER = require.resolve('less-loader');
 const SASS_LOADER = require.resolve('sass-loader');
 const POSTCSS_LOADER = require.resolve('postcss-loader');
 const styleLoader = {
-    loader: mini_css_extract_plugin_1.loader
+    loader: mini_css_extract_plugin_1.loader,
 };
 const cssLoader = {
     loader: CSS_LOADER,
@@ -24,18 +24,14 @@ const postcssLoader = {
     options: {
         sourceMap: true,
         postcssOptions: {
-            plugins: [autoprefixer_1.default()],
+            plugins: [(0, autoprefixer_1.default)()],
         },
     },
 };
 const styleLoaders = [
     {
         test: /\.css$/,
-        use: [
-            styleLoader,
-            cssLoader,
-            postcssLoader,
-        ],
+        use: [styleLoader, cssLoader, postcssLoader],
     },
     {
         test: /\.s[ac]ss$/,

package/lib/webpack/plugins.js

@@ -7,17 +7,19 @@ const webpack_1 = require("webpack");
 const case_sensitive_paths_webpack_plugin_1 = __importDefault(require("case-sensitive-paths-webpack-plugin"));
 const mini_css_extract_plugin_1 = __importDefault(require("mini-css-extract-plugin"));
 const html_webpack_plugin_1 = __importDefault(require("html-webpack-plugin"));
+const react_refresh_webpack_plugin_1 = __importDefault(require("@pmmmwh/react-refresh-webpack-plugin"));
+const webpackbar_1 = __importDefault(require("webpackbar"));
 const config_1 = __importDefault(require("../utils/config"));
-function getPlugins(opts) {
-    const { ts } = opts;
+function getPlugins() {
     const { userConf, defaultPaths } = config_1.default;
-    const publicPath = (userConf.output && userConf.output.publicPath) ? userConf.output.publicPath : '/';
+    const publicPath = userConf.output && userConf.output.publicPath
+        ? userConf.output.publicPath
+        : '/';
     let plugins = [
         new webpack_1.IgnorePlugin({
             resourceRegExp: /^\.\/locale$/,
             contextRegExp: /moment$/,
         }),
-        new webpack_1.ProgressPlugin(),
         //TODO: check if mini-css-extract-plugin should use base name if enable HMR
         new mini_css_extract_plugin_1.default({
             filename: 'css/[name].[contenthash].css',
@@ -28,23 +30,13 @@ function getPlugins(opts) {
             template: defaultPaths.html,
             title: 'Ko App',
             templateParameters: {
-                configPath: `${publicPath}config/config.js`
+                configPath: `${publicPath}config/config.js`,
             },
-            inject: 'body'
+            inject: 'body',
         }),
+        new react_refresh_webpack_plugin_1.default(),
+        new webpackbar_1.default(),
     ];
-    if (ts) {
-        const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
-        const typescriptPlugins = [
-            new ForkTsCheckerWebpackPlugin({
-                async: false,
-                typescript: {
-                    configFile: defaultPaths.tsconfig,
-                },
-            }),
-        ];
-        plugins = plugins.concat(typescriptPlugins);
-    }
     plugins = plugins.concat(userConf.plugins || []);
     if (config_1.default.isProductionEnv) {
         const { CleanWebpackPlugin } = require('clean-webpack-plugin');
@@ -52,7 +44,7 @@ function getPlugins(opts) {
             new CleanWebpackPlugin({
                 verbose: false,
                 dry: false,
-            })
+            }),
         ];
         plugins.concat(prodPlugins);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ko",
-  "version": "5.2.2-alpha.3",
+  "version": "5.3.1",
   "description": "build & lint library",
   "keywords": [
     "ko",
@@ -34,53 +34,58 @@
     "scripts/*",
     "lib/*"
   ],
-  "scripts": {
-    "prepublishOnly": "rm -rf lib && tsc",
-    "preinstall": "node scripts/preinstall.js",
-    "build": "tsc",
-    "debug": "tsc -w --sourceMap"
-  },
   "dependencies": {
-    "autoprefixer": "^10.2.6",
-    "babel-loader": "^8.2.2",
-    "babel-preset-ko-app": "^1.0.0-alpha.1",
+    "@babel/core": "^7.17.5",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.4",
+    "autoprefixer": "^10.4.2",
+    "babel-loader": "^8.2.3",
+    "babel-preset-ko-app": "^1.0.0",
     "case-sensitive-paths-webpack-plugin": "^2.4.0",
     "chalk": "^4.1.2",
-    "clean-webpack-plugin": "3.0.0",
-    "commander": "^8.1.0",
-    "css-loader": "^5.2.6",
-    "css-minimizer-webpack-plugin": "^3.0.1",
+    "clean-webpack-plugin": "4.0.0",
+    "commander": "^9.0.0",
+    "css-loader": "^6.6.0",
+    "css-minimizer-webpack-plugin": "^3.4.1",
     "detect-port": "^1.3.0",
-    "fork-ts-checker-webpack-plugin": "^6.2.10",
-    "html-webpack-plugin": "^5.3.1",
-    "inquirer": "^8.1.2",
-    "ko-lints": "^1.0.0-alpha.2",
+    "esbuild-loader": "^2.18.0",
+    "html-webpack-plugin": "^5.5.0",
+    "inquirer": "^8.2.0",
     "less": "^3.13.1",
-    "less-loader": "^9.0.0",
-    "mini-css-extract-plugin": "^1.6.0",
-    "postcss": "^8.3.0",
-    "postcss-loader": "^5.3.0",
-    "react-dev-utils": "^11.0.4",
-    "sass": "^1.34.0",
-    "sass-loader": "^11.1.1",
+    "less-loader": "^9.1.0",
+    "mini-css-extract-plugin": "^2.5.3",
+    "postcss": "^8.4.7",
+    "postcss-loader": "^6.2.1",
+    "react-dev-utils": "^12.0.0",
+    "react-refresh": "^0.11.0",
+    "sass": "^1.49.9",
+    "sass-loader": "^12.6.0",
     "thread-loader": "^3.0.4",
-    "ts-loader": "^9.2.2",
-    "tsconfig-paths-webpack-plugin": "^3.5.1",
-    "webpack": "^5.50.0",
-    "webpack-bundle-analyzer": "^4.4.2",
-    "webpack-dev-server": "^3.11.2",
-    "webpack-merge": "^5.8.0"
+    "tsconfig-paths-webpack-plugin": "^3.5.2",
+    "webpack": "^5.69.1",
+    "webpack-bundle-analyzer": "^4.5.0",
+    "webpack-dev-server": "^4.7.4",
+    "webpack-merge": "^5.8.0",
+    "webpackbar": "^5.0.2",
+    "worker-loader": "^3.0.8"
   },
   "devDependencies": {
     "@types/case-sensitive-paths-webpack-plugin": "^2.1.6",
-    "@types/detect-port": "^1.3.1",
-    "@types/inquirer": "^7.3.3",
-    "@types/mini-css-extract-plugin": "^2.2.0",
-    "@types/react-dev-utils": "^9.0.7",
-    "typescript": "^4.3.5"
+    "@types/detect-port": "^1.3.2",
+    "@types/inquirer": "^8.2.0",
+    "@types/jest": "^27.4.1",
+    "@types/react-dev-utils": "^9.0.10",
+    "jest": "^27.5.1",
+    "ts-jest": "^27.1.3",
+    "typescript": "^4.6.2"
   },
   "engines": {
     "node": ">=10.13.0"
   },
-  "gitHead": "bcc192273ff455b110d0804eb80b6a714122ff60"
-}
+  "scripts": {
+    "preinstall": "node scripts/preinstall.js",
+    "debug": "tsc -w --sourceMap",
+    "test": "jest",
+    "build": "tsc"
+  },
+  "readme": "# ko\n\nbuild & lint library\n"
+}

package/scripts/preinstall.js

@@ -16,7 +16,7 @@ if (LOCK_NODE_VERSION) {
    *  webpack minor support version
    *  @link https://webpack.js.org/migrate/5/#preparations
    */
-  const webpack5SupportLeastVersion = 10.13; 
+  const webpack5SupportLeastVersion = 10.13;
 
   if (majorAndMinorNodeVersion < webpack5SupportLeastVersion) {
     console.error(
@@ -49,4 +49,4 @@ if (FORCE_YARN_INSTALL) {
   }
 }
 
-err && process.exit(1);
+err && process.exit(1);