ko 5.3.8 → 6.0.0

package/lib/webpack/index.js

@@ -3,67 +3,105 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const tsconfig_paths_webpack_plugin_1 = __importDefault(require("tsconfig-paths-webpack-plugin"));
-const config_1 = __importDefault(require("../utils/config"));
+const path_1 = require("path");
+const fs_1 = require("fs");
+const lodash_1 = require("lodash");
 const loaders_1 = __importDefault(require("./loaders"));
 const plugins_1 = __importDefault(require("./plugins"));
-const extensions = [
-    '.js',
-    '.jsx',
-    '.ts',
-    '.tsx',
-    '.css',
-    '.scss',
-    '.sass',
-    '.less',
-    '.json',
-    '.html',
-];
-function getWebpackBaseConf(opts) {
-    const { ts = true, hash } = opts;
-    const webpackBaseConf = {
-        mode: config_1.default.isProductionEnv ? 'production' : 'development',
-        target: 'web',
-        context: config_1.default.cwd,
-        entry: `src/index.${ts ? 'tsx' : 'js'}`,
-        output: {
-            path: config_1.default.defaultPaths.dist,
-            filename: hash ? '[name].[contenthash].js' : '[name].js',
-            publicPath: '/',
-        },
-        module: {
-            rules: loaders_1.default,
-        },
-        plugins: (0, plugins_1.default)(),
-        resolve: {
-            extensions,
-            plugins: [
-                ts &&
-                    new tsconfig_paths_webpack_plugin_1.default({
-                        configFile: config_1.default.defaultPaths.tsconfig,
-                    }),
-            ].filter(Boolean),
-            fallback: {
-                fs: false,
-                path: false,
-                events: false,
-                os: require.resolve('os-browserify/browser'),
-                crypto: require.resolve('crypto-browserify'),
-                stream: require.resolve('stream-browserify'),
-                buffer: require.resolve('buffer/'),
-                string_decoder: require.resolve('string_decoder/'),
+const utils_1 = require("../utils");
+class WebpackConfig {
+    constructor(service) {
+        this.extensions = [
+            '.ts',
+            '.tsx',
+            '.js',
+            '.jsx',
+            '.css',
+            '.scss',
+            '.sass',
+            '.less',
+            '.json',
+            '.html',
+        ];
+        this.opts = { ...service.config, ...service.cliOpts };
+        this.env =
+            process.env.NODE_ENV === 'production' ? 'production' : 'development';
+    }
+    merge(...opts) {
+        return (0, lodash_1.merge)(this.base, ...opts);
+    }
+    get cache() {
+        const { experiment } = this.opts;
+        const type = experiment?.speedUp
+            ? 'filesystem'
+            : this.isProd
+                ? 'filesystem'
+                : 'memory';
+        const cache = {
+            type,
+        };
+        if (type === 'filesystem') {
+            cache.version = this.projectVersion;
+        }
+        else {
+            cache.maxGenerations = 1;
+        }
+        return cache;
+    }
+    get projectVersion() {
+        const pkgPath = (0, path_1.join)(this.opts.cwd, 'package.json');
+        (0, utils_1.assert)((0, fs_1.existsSync)(pkgPath), 'project package.json file not found');
+        return require(pkgPath).version;
+    }
+    get base() {
+        const { cwd, publicPath, entry, outputPath, alias, hash, analyzer } = this.opts;
+        const webpackBaseConf = {
+            mode: this.env,
+            target: 'web',
+            context: cwd,
+            entry,
+            output: {
+                path: outputPath,
+                filename: `js/[name].${hash ? '[contenthash].' : ''}js`,
+                publicPath,
             },
-        },
-        performance: {
-            hints: false,
-        },
-        cache: {
-            type: config_1.default.isProductionEnv ? 'filesystem' : 'memory',
-        },
-        stats: {
-            cachedModules: false,
-        },
-    };
-    return webpackBaseConf;
+            module: {
+                rules: (0, loaders_1.default)({
+                    isProd: this.isProd,
+                    ...this.opts,
+                }),
+            },
+            plugins: (0, plugins_1.default)({
+                isProd: this.isProd,
+                analyzer,
+                ...this.opts,
+            }),
+            resolve: {
+                extensions: this.extensions,
+                alias,
+                fallback: {
+                    fs: false,
+                    path: false,
+                    events: false,
+                    os: require.resolve('os-browserify/browser'),
+                    crypto: require.resolve('crypto-browserify'),
+                    stream: require.resolve('stream-browserify'),
+                    buffer: require.resolve('buffer/'),
+                    string_decoder: require.resolve('string_decoder/'),
+                },
+            },
+            performance: {
+                hints: false,
+            },
+            cache: this.cache,
+            stats: {
+                cachedModules: false,
+            },
+        };
+        return webpackBaseConf;
+    }
+    get isProd() {
+        return this.env === 'production';
+    }
 }
-exports.default = getWebpackBaseConf;
+exports.default = WebpackConfig;

package/lib/webpack/loaders/babel/index.js

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const utils_1 = require("../../../utils");
+class BabelLoader {
+    constructor(opts) {
+        this.BABEL_LOADER = (0, utils_1.getResolvePath)('babel-loader');
+        this.opts = opts;
+    }
+    get config() {
+        return {
+            loader: this.BABEL_LOADER,
+            options: {
+                presets: [
+                    [
+                        (0, utils_1.getResolvePath)('babel-preset-ko-app'),
+                        {
+                            useAbsoluteRuntime: true,
+                        },
+                    ],
+                ],
+                plugins: this.plugins,
+                babelrc: false,
+                configFile: false,
+                cacheIdentifier: this.cacheIdentifier,
+                cacheDirectory: !this.speedUp,
+                cacheCompression: false,
+                compact: this.opts.isProd,
+            },
+        };
+    }
+    get treasurePluginConfig() {
+        const babelPluginTreasurePath = (0, utils_1.getResolvePath)('babel-plugin-treasure');
+        return [
+            [
+                babelPluginTreasurePath,
+                {
+                    libraryName: 'antd',
+                    libraryDirectory: 'lib',
+                    style: 'css',
+                },
+                'antd',
+            ],
+            [
+                babelPluginTreasurePath,
+                {
+                    libraryName: 'dt-react-component',
+                    libraryDirectory: '/src/components/',
+                    camel2DashComponentName: 'lower',
+                },
+                'drc',
+            ],
+            //TODO: check lodash tree shaking in webpack 5
+            // [
+            //   babelPluginTreasurePath,
+            //   {
+            //     libraryName: 'lodash',
+            //     libraryDirectory: '/',
+            //     camel2DashComponentName: false,
+            //   },
+            //   'lodash',
+            // ],
+        ];
+    }
+    get plugins() {
+        return [...this.treasurePluginConfig].filter(Boolean);
+    }
+    get cacheIdentifier() {
+        return (0, utils_1.getCacheIdentifier)(this.opts.isProd ? 'production' : '', [
+            'ko',
+            'babel-preset-ko-app',
+            'babel-plugin-treasure',
+        ]);
+    }
+}
+exports.default = BabelLoader;

package/lib/webpack/loaders/index.js

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

package/lib/webpack/loaders/script.js

@@ -3,64 +3,58 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const getCacheIdentifier_1 = __importDefault(require("react-dev-utils/getCacheIdentifier"));
-const config_1 = __importDefault(require("../../utils/config"));
-const THREAD_LOADER = require.resolve('thread-loader');
-const BABEL_LOADER = require.resolve('babel-loader');
-const WORKER_LOADER = require.resolve('worker-loader');
-const scriptLoader = [
-    {
-        test: /\.worker.[jt]s$/,
-        loader: WORKER_LOADER,
-        options: {
-            inline: 'fallback',
-        },
-    },
-    {
-        test: /\.(t|j)sx?$/,
-        include: (input) => {
-            // internal modules dt-common compatible
-            if (input.includes('node_modules/dt-common/src/')) {
-                return true;
-            }
-            else if (input.includes('node_modules')) {
-                return false;
-            }
-            else {
-                return true;
-            }
-        },
-        use: [
+const babel_1 = __importDefault(require("./babel"));
+class Script {
+    constructor(opts) {
+        this.THREAD_LOADER = require.resolve('thread-loader');
+        this.WORKER_LOADER = require.resolve('worker-loader');
+        this.ESBUILD_LOADER = require.resolve('esbuild-loader');
+        this.opts = opts;
+        this.BABEL_LOADER = new babel_1.default(opts);
+    }
+    get config() {
+        const scriptLoader = [
             {
-                loader: THREAD_LOADER,
+                test: /\.worker.[jt]s$/,
+                loader: this.WORKER_LOADER,
                 options: {
-                    workerNodeArgs: ['--max-old-space-size=4096'],
-                    name: 'ko-js-pool',
+                    inline: 'fallback',
                 },
             },
             {
-                loader: BABEL_LOADER,
-                options: {
-                    presets: [
-                        [
-                            require.resolve('babel-preset-ko-app'),
-                            {
-                                useAbsoluteRuntime: true,
-                            },
-                        ],
-                    ],
-                    plugins: config_1.default.isProductionEnv
-                        ? [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,
+                test: /\.(t|j)sx?$/,
+                include: (input) => {
+                    // internal modules dt-common compatible
+                    if (input.includes('node_modules/dt-common/src/')) {
+                        return true;
+                    }
+                    else if (input.includes('node_modules')) {
+                        return false;
+                    }
+                    else {
+                        return true;
+                    }
                 },
+                use: [
+                    {
+                        loader: this.THREAD_LOADER,
+                        options: {
+                            name: 'ko-js-pool',
+                        },
+                    },
+                    this.opts.experiment?.speedUp
+                        ? {
+                            loader: this.ESBUILD_LOADER,
+                            options: {
+                                loader: 'tsx',
+                                target: 'es2020',
+                            },
+                        }
+                        : this.BABEL_LOADER.config,
+                ].filter(Boolean),
             },
-        ],
-    },
-];
-exports.default = scriptLoader;
+        ];
+        return scriptLoader;
+    }
+}
+exports.default = Script;

package/lib/webpack/loaders/style.js

@@ -3,68 +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 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 [
+            {
+                test: /\.css$/,
+                use: [this.styleLoader, this.cssLoader, this.postCSSLoader],
+            },
             {
-                loader: SASS_LOADER,
-                options: {
-                    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$/,
-        exclude: [path_1.default.join(process.cwd(), 'node_modules/antd-v4')],
-        use: [
-            styleLoader,
-            cssLoader,
-            postcssLoader,
+            enableCssModule && this.sassCssModuleConfig,
             {
-                loader: LESS_LOADER,
-                options: {
-                    lessOptions: {
-                        javascriptEnabled: true,
+                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]',
+                        },
                     },
-                    sourceMap: 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;