ko 5.3.9 → 6.0.1

package/lib/webpack/loaders/style.js

@@ -3,95 +3,176 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const path_1 = __importDefault(require("path"));
+const path_1 = require("path");
 const fs_1 = require("fs");
 const mini_css_extract_plugin_1 = require("mini-css-extract-plugin");
 const autoprefixer_1 = __importDefault(require("autoprefixer"));
-const CSS_LOADER = require.resolve('css-loader');
-const LESS_LOADER = require.resolve('less-loader');
-const SASS_LOADER = require.resolve('sass-loader');
-const POSTCSS_LOADER = require.resolve('postcss-loader');
-const antdV4Path = path_1.default.join(process.cwd(), 'node_modules/antd-v4');
-const antdV4RealPath = (0, fs_1.realpathSync)(antdV4Path);
-const styleLoader = {
-    loader: mini_css_extract_plugin_1.loader,
-};
-const cssLoader = {
-    loader: CSS_LOADER,
-    options: {
-        sourceMap: true,
-    },
-};
-//TODO: check postcss-loader should use sourceMap option
-const postcssLoader = {
-    loader: POSTCSS_LOADER,
-    options: {
-        sourceMap: true,
-        postcssOptions: {
-            plugins: [(0, autoprefixer_1.default)()],
-        },
-    },
-};
-const styleLoaders = [
-    {
-        test: /\.css$/,
-        use: [styleLoader, cssLoader, postcssLoader],
-    },
-    {
-        test: /\.s[ac]ss$/,
-        use: [
-            styleLoader,
-            cssLoader,
-            postcssLoader,
+const postCssUrl = require('postcss-url');
+const utils_1 = require("../../utils");
+class Style {
+    constructor(opts) {
+        this.CSS_LOADER = (0, utils_1.getResolvePath)('css-loader');
+        this.SASS_LOADER = (0, utils_1.getResolvePath)('sass-loader');
+        this.LESS_LOADER = (0, utils_1.getResolvePath)('less-loader');
+        this.POSTCSS_LOADER = (0, utils_1.getResolvePath)('postcss-loader');
+        this.CSS_MODULE_FILE_SUFFIX_REGEX = /\.module.s[ac]ss$/;
+        this.opts = opts;
+    }
+    get config() {
+        const enableCssModule = this.opts?.experiment?.enableCssModule;
+        return [
             {
-                loader: SASS_LOADER,
-                options: {
-                    sourceMap: true,
-                },
+                test: /\.css$/,
+                use: [this.styleLoader, this.cssLoader, this.postCSSLoader],
             },
-        ],
-    },
-    {
-        test: /\.less$/,
-        exclude: [antdV4RealPath],
-        use: [
-            styleLoader,
-            cssLoader,
-            postcssLoader,
             {
-                loader: LESS_LOADER,
-                options: {
-                    lessOptions: {
-                        javascriptEnabled: true,
-                    },
-                    sourceMap: true,
+                test: /\.s[ac]ss$/,
+                exclude: (input) => {
+                    if (enableCssModule) {
+                        return this.CSS_MODULE_FILE_SUFFIX_REGEX.test(input);
+                    }
+                    else {
+                        return false;
+                    }
                 },
+                use: [
+                    this.styleLoader,
+                    this.cssLoader,
+                    this.postCSSLoader,
+                    this.sassLoader,
+                ],
             },
-        ],
-    },
-    {
-        test: /\.less$/,
-        include: [antdV4RealPath],
-        use: [
-            styleLoader,
-            cssLoader,
-            postcssLoader,
+            enableCssModule && this.sassCssModuleConfig,
             {
-                loader: LESS_LOADER,
-                options: {
-                    sourceMap: true,
-                    lessOptions: {
-                        modifyVars: {
-                            '@ant-prefix': 'ant-v4',
-                            '@font-size-base': '12px',
-                            '@border-color-base': '#ddd',
-                            '@font-family': "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
+                test: /\.less$/,
+                exclude: [this.realAntdV4Path],
+                use: [
+                    this.styleLoader,
+                    this.cssLoader,
+                    this.postCSSLoader,
+                    this.lessLoader,
+                ],
+            },
+            {
+                test: /\.less$/,
+                include: [this.realAntdV4Path],
+                use: [
+                    this.styleLoader,
+                    this.cssLoader,
+                    this.postCSSLoader,
+                    this.antdV4LessLoader,
+                ],
+            },
+        ];
+    }
+    get sassCssModuleConfig() {
+        return {
+            test: /\.module.s[ac]ss$/,
+            use: [
+                this.styleLoader,
+                {
+                    loader: this.CSS_LOADER,
+                    options: {
+                        esModule: true,
+                        modules: {
+                            namedExport: true,
+                            localIdentName: this.opts.isProd
+                                ? '[path][name]__[local]'
+                                : '[local]_[hash:base64]',
                         },
-                        javascriptEnabled: true,
                     },
                 },
+                this.postCSSLoader,
+                this.sassLoader,
+            ],
+        };
+    }
+    //TODO: remove when upgrade to antd v4
+    get realAntdV4Path() {
+        const antdV4Path = (0, path_1.join)(this.opts.cwd, 'node_modules/antd-v4');
+        const ret = (0, fs_1.existsSync)(antdV4Path) ? (0, fs_1.realpathSync)(antdV4Path) : antdV4Path;
+        return ret;
+    }
+    get styleLoader() {
+        return {
+            loader: mini_css_extract_plugin_1.loader,
+        };
+    }
+    get cssLoader() {
+        return {
+            loader: this.CSS_LOADER,
+            options: {
+                sourceMap: true,
+            },
+        };
+    }
+    get sassLoader() {
+        return {
+            loader: this.SASS_LOADER,
+            options: {
+                sourceMap: true,
             },
-        ],
-    },
-];
-exports.default = styleLoaders;
+        };
+    }
+    get lessLoader() {
+        const { lessOptions = {} } = this.opts;
+        return {
+            loader: this.LESS_LOADER,
+            options: {
+                sourceMap: true,
+                lessOptions,
+            },
+        };
+    }
+    get antdV4LessLoader() {
+        const { antdV4LessOptions = {} } = this.opts;
+        return {
+            loader: this.LESS_LOADER,
+            options: {
+                sourceMap: true,
+                lessOptions: antdV4LessOptions,
+            },
+        };
+    }
+    get postCSSLoader() {
+        return {
+            loader: this.POSTCSS_LOADER,
+            options: {
+                sourceMap: true,
+                postcssOptions: {
+                    plugins: this.postCSSPlugins,
+                },
+            },
+        };
+    }
+    get postCSSPlugins() {
+        const extraPostCSSPlugins = this.opts.extraPostCSSPlugins || [];
+        return [
+            (0, autoprefixer_1.default)(),
+            postCssUrl([
+                {
+                    filter: '**/src/public/img/**/*',
+                    url: (args) => {
+                        const originUrl = args?.originUrl;
+                        return originUrl
+                            ? (0, path_1.join)(this.opts.cwd, originUrl)
+                            : args.absolutePath;
+                    },
+                    basePath: '/',
+                },
+                {
+                    filter: '**/src/public/font/**/*',
+                    url: (args) => {
+                        const originUrl = args?.originUrl;
+                        return originUrl
+                            ? (0, path_1.join)(this.opts.cwd, originUrl)
+                            : args.absolutePath;
+                    },
+                    basePath: '/',
+                },
+            ]),
+            ...extraPostCSSPlugins,
+        ].filter(Boolean);
+    }
+}
+exports.default = Style;

package/lib/webpack/plugins.js

@@ -4,38 +4,79 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 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 case_sensitive_paths_webpack_plugin_1 = __importDefault(require("case-sensitive-paths-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() {
-    const { userConf } = config_1.default;
-    let plugins = [
+const clean_webpack_plugin_1 = require("clean-webpack-plugin");
+const copy_webpack_plugin_1 = __importDefault(require("copy-webpack-plugin"));
+const html_webpack_plugin_1 = __importDefault(require("html-webpack-plugin"));
+const webpack_bundle_analyzer_1 = require("webpack-bundle-analyzer");
+function getPlugins(opts) {
+    const { isProd, htmlTemplate, copy, analyzer } = opts;
+    return [
         new webpack_1.IgnorePlugin({
             resourceRegExp: /^\.\/locale$/,
             contextRegExp: /moment$/,
         }),
-        //TODO: check if mini-css-extract-plugin should use base name if enable HMR
+        isProd &&
+            new webpack_1.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,
+                    },
+                },
+            }),
         new mini_css_extract_plugin_1.default({
-            filename: 'css/[name].[contenthash].css',
-            chunkFilename: 'css/[id].[contenthash].css',
+            filename: isProd ? 'css/[name].[contenthash].css' : 'css/[name].css',
+            chunkFilename: isProd ? 'css/[id].[contenthash].css' : 'css/[id].css',
         }),
         new case_sensitive_paths_webpack_plugin_1.default(),
-        new react_refresh_webpack_plugin_1.default(),
-        new webpackbar_1.default(),
-    ];
-    plugins = plugins.concat(userConf.plugins || []);
-    if (config_1.default.isProductionEnv) {
-        const { CleanWebpackPlugin } = require('clean-webpack-plugin');
-        const prodPlugins = [
-            new CleanWebpackPlugin({
-                verbose: false,
-                dry: false,
+        new html_webpack_plugin_1.default({
+            template: htmlTemplate,
+        }),
+        copy &&
+            new copy_webpack_plugin_1.default({
+                patterns: copy,
             }),
-        ];
-        plugins.concat(prodPlugins);
-    }
-    return plugins;
+        new webpackbar_1.default(),
+        new clean_webpack_plugin_1.CleanWebpackPlugin({
+            verbose: false,
+            dry: false,
+        }),
+        new react_refresh_webpack_plugin_1.default({
+            overlay: false,
+        }),
+        analyzer && new webpack_bundle_analyzer_1.BundleAnalyzerPlugin(),
+    ].filter(Boolean);
 }
 exports.default = getPlugins;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ko",
-  "version": "5.3.9",
+  "version": "6.0.1",
   "description": "build & lint library",
   "keywords": [
     "ko",
@@ -31,64 +31,65 @@
     "ko": "./lib/cli.js"
   },
   "files": [
-    "scripts/*",
     "lib/*"
   ],
   "dependencies": {
-    "@babel/core": "^7.17.5",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.4",
-    "autoprefixer": "^10.4.2",
-    "babel-loader": "^8.2.3",
+    "@babel/core": "^7.18.0",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
+    "autoprefixer": "^10.4.7",
+    "babel-loader": "^8.2.5",
+    "babel-plugin-treasure": "^0.9.0",
     "babel-preset-ko-app": "^1.0.0",
     "buffer": "^6.0.3",
     "case-sensitive-paths-webpack-plugin": "^2.4.0",
     "chalk": "^4.1.2",
-    "clean-webpack-plugin": "4.0.0",
-    "commander": "^9.0.0",
+    "clean-webpack-plugin": "^4.0.0",
+    "commander": "^9.2.0",
+    "copy-webpack-plugin": "^11.0.0",
     "crypto-browserify": "^3.12.0",
-    "css-loader": "^6.6.0",
-    "css-minimizer-webpack-plugin": "^3.4.1",
-    "detect-port": "^1.3.0",
-    "esbuild-loader": "^2.18.0",
-    "inquirer": "^8.2.0",
+    "css-loader": "^6.7.1",
+    "css-minimizer-webpack-plugin": "^4.0.0",
+    "esbuild-loader": "^2.19.0",
+    "html-webpack-plugin": "^5.5.0",
     "less": "^3.13.1",
     "less-loader": "^9.1.0",
-    "mini-css-extract-plugin": "^2.5.3",
+    "lodash": "^4.17.21",
+    "mini-css-extract-plugin": "^2.6.0",
     "os-browserify": "^0.3.0",
-    "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",
+    "postcss": "^8.4.14",
+    "postcss-loader": "^7.0.0",
+    "postcss-url": "^10.1.3",
+    "ko-lints": "^3.0.0",
+    "react-refresh": "^0.13.0",
+    "sass": "^1.52.1",
+    "sass-loader": "^13.0.0",
     "stream-browserify": "^3.0.0",
     "string_decoder": "^1.3.0",
+    "style-loader": "^3.3.1",
+    "tapable": "^2.2.1",
     "thread-loader": "^3.0.4",
-    "tsconfig-paths-webpack-plugin": "^3.5.2",
-    "webpack": "^5.69.1",
+    "webpack": "^5.72.1",
     "webpack-bundle-analyzer": "^4.5.0",
-    "webpack-dev-server": "3.11.3",
-    "webpack-merge": "^5.8.0",
+    "webpack-dev-server": "4.9.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.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"
+    "@types/jest": "^27.5.1",
+    "@types/lodash": "^4.14.182",
+    "@types/webpack-bundle-analyzer": "^4.4.1",
+    "jest": "^28.1.0",
+    "ts-jest": "^28.0.3",
+    "typescript": "^4.6.4"
   },
   "engines": {
-    "node": ">=10.13.0"
+    "node": ">=14"
   },
   "scripts": {
     "debug": "tsc -w --sourceMap",
     "test": "jest",
     "build": "tsc"
   },
-  "readme": "# ko\n\nbuild & lint library\n"
+  "readme": "# ko\n\n## Simple, yet powerful, tool for managing your react applications. \n\n<a href=\"https://www.npmjs.com/package/ko\"><img alt=\"NPM Status\" src=\"https://img.shields.io/npm/v/ko.svg?style=flat\"></a>\n\n## Features\n\n* Support building applications on top of **webpack v5** and **esbuild**\n* Customize ko to work exactly the way you need it for your applications \n* Built-in popular linting tools to lint your source code\n* Built-in support typescript\n\n## Installation\n\nYou can install ko using npm, yarn or pnpm:\n``` bash\nnpm install ko --save-dev\n# or\nyarn add ko --dev\n# or \npnpm add ko --save-dev\n```\n\n## Documents\n* [Introduction](https://dtstack.github.io/ko/docs/introduction)\n* [Getting Started](https://dtstack.github.io/ko/docs/getting-started)\n* [FAQ](https://dtstack.github.io/ko/docs/FAQ)\n\n## Contributing\n\nWe'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.\n\n## License\n\nCopyright © DTStack. All rights reserved.\n\nLicensed under the MIT license.\n"
 }

package/lib/actions/creator.js

@@ -1,42 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.WebpackCreator = void 0;
-const chalk_1 = __importDefault(require("chalk"));
-const webpack_merge_1 = require("webpack-merge");
-const webpack_1 = __importDefault(require("../webpack"));
-const config_1 = __importDefault(require("../utils/config"));
-class Creator {
-}
-class WebpackCreator extends Creator {
-    constructor(opts) {
-        super();
-        this.opts = opts;
-        this.baseConfig = this.initConfig(opts);
-    }
-    pluginsUnique(pluginNames) {
-        return (0, webpack_merge_1.unique)('plugins', pluginNames, (plugin) => plugin.constructor && plugin.constructor.name);
-    }
-    initConfig(opts) {
-        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 (0, webpack_merge_1.merge)(conf);
-    }
-    successStdout(log) {
-        console.log(chalk_1.default.green(log));
-    }
-    linkStdout(link) {
-        console.log(chalk_1.default.underline(link));
-    }
-    errorStdout(log) {
-        console.log(chalk_1.default.red(log));
-    }
-}
-exports.WebpackCreator = WebpackCreator;
-exports.default = Creator;

package/lib/interfaces.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/lib/utils/config.js

@@ -1,43 +0,0 @@
-"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 = Object.freeze(new Config());
-        }
-        return Config.instance;
-    }
-    getFileRealPath(path) {
-        return (0, path_1.isAbsolute)(path) ? path : (0, path_1.resolve)(this.cwd, path);
-    }
-    get userConf() {
-        const userConfPath = this.getFileRealPath('ko.config.js');
-        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 {
-            src: this.getFileRealPath('src'),
-            dist: this.getFileRealPath('dist'),
-            public: this.getFileRealPath('public'),
-            html: this.getFileRealPath('public/index.html'),
-            tsconfig: this.getFileRealPath('tsconfig.json'),
-        };
-    }
-    get isProductionEnv() {
-        const PROD = 'production';
-        return process.env.NODE_ENV === PROD;
-    }
-}
-exports.default = Config.getInstance();