@foxpage/foxpage-component-storybook-preset/lib/webpack.js

foxpage storybook preset

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.configManager = exports.configWebpack = void 0;
const webpack_1 = require("webpack");
const path_1 = __importDefault(require("path"));
const lodash_1 = require("lodash");
const foxpage_component_webpack_1 = require("@foxpage/foxpage-component-webpack");
const webpack_merge_1 = require("webpack-merge");
const fs_1 = __importDefault(require("fs"));
const foxpage_component_shared_1 = require("@foxpage/foxpage-component-shared");
function _fixEditorStyle(rule) {
    const isEditor = /packages?[/\\\\][^/\\\\]+[/\\\\]editor[/\\\\]/;
    const normalRule = Object.assign(Object.assign({}, (0, lodash_1.cloneDeep)(rule)), { exclude: isEditor });
    const editorRule = Object.assign(Object.assign({}, (0, lodash_1.cloneDeep)(rule)), { include: isEditor });
    const editorStyleLoaderRule = {
        loader: require.resolve('style-loader'),
        options: {
            insert: function (style) {
                const doc = window.parent.document;
                const head = (doc.querySelector('head') || doc.getElementsByTagName('head')[0]);
                head.appendChild(style);
            },
        },
    };
    const editorStyleUseRules = editorRule.loaders || editorRule.use;
    if (Array.isArray(editorStyleUseRules)) {
        const firstRule = editorStyleUseRules[0];
        const loaderName = typeof firstRule === 'object' ? firstRule.loader : typeof firstRule === 'string' ? firstRule : null;
        if (loaderName && loaderName.includes('style-loader')) {
            editorStyleUseRules.shift();
        }
        editorStyleUseRules.unshift(editorStyleLoaderRule);
    }
    const fixRule = {
        test: rule.test,
        oneOf: [normalRule, editorRule],
    };
    return fixRule;
}
const generateFoxpageAlias = () => {
    const list = [
        '@foxpage/foxpage-component-context',
        '@foxpage/foxpage-component-editor-context',
        '@foxpage/foxpage-component-storybook-addon',
    ];
    const foxpageAlias = {};
    list.forEach((pkg) => {
        const absPath = path_1.default.dirname(require.resolve(`${pkg}/package.json`));
        if (absPath) {
            foxpageAlias[pkg] = absPath;
        }
    });
    return foxpageAlias;
};
const getSharedConfig = (babelConfigPath) => {
    var _a;
    if (!fs_1.default.existsSync(babelConfigPath)) {
        foxpage_component_shared_1.logger.error(`The path of babel config is error: ${babelConfigPath}! please check it!!!`);
        (_a = process === null || process === void 0 ? void 0 : process.exit) === null || _a === void 0 ? void 0 : _a.call(process, 1);
    }
    return {
        module: {
            rules: [
                {
                    test: /.js$/,
                    use: {
                        loader: 'babel-loader',
                        options: {
                            configFile: babelConfigPath,
                        },
                    },
                    include: [
                        path_1.default.resolve(process.cwd(), 'node_modules', '@foxpage', 'foxpage-rich-text-editor'),
                        path_1.default.resolve(process.cwd(), 'node_modules', '@monaco-editor', 'loader'),
                        path_1.default.resolve(process.cwd(), 'node_modules', 'monaco-editor'),
                    ],
                    type: 'javascript/auto',
                },
                {
                    test: /.mjs$/,
                    use: 'babel-loader',
                    include: [
                        path_1.default.resolve(process.cwd(), 'node_modules', '@foxpage', 'foxpage-rich-text-editor'),
                        path_1.default.resolve(process.cwd(), 'node_modules', '@monaco-editor', 'react'),
                        path_1.default.resolve(process.cwd(), 'node_modules', 'monaco-editor'),
                    ],
                    type: 'javascript/auto',
                },
            ],
        },
        plugins: [],
    };
};
const configWebpack = ({ config, fixEditorStyle = true, babelConfigPath = path_1.default.join(process.cwd(), './babel.config.js'), }) => {
    var _a;
    const styleLoaderOpt = {
        sourceMap: true,
        styleLoader: true,
        extract: false,
    };
    const baseExtensions = (config.resolve && config.resolve.extensions) || [];
    const baseModuleRules = (config.module && config.module.rules) || [];
    const foxpageAlias = generateFoxpageAlias();
    config.resolve = Object.assign(Object.assign({}, (config.resolve || {})), { alias: Object.assign(Object.assign({}, (((_a = config.resolve) === null || _a === void 0 ? void 0 : _a.alias) || {})), foxpageAlias), extensions: [...baseExtensions, '.ts', '.tsx'] });
    config.externals = {
        react: 'var React',
        'react-dom': 'var ReactDOM',
    };
    if (config.module) {
        const cssRuleIndex = baseModuleRules.findIndex(rule => !!(rule.test && rule.test.toString().includes('css')));
        const jsRuleIndex = baseModuleRules.findIndex(rule => !!(rule.test && rule.test.toString().includes('js')));
        if (jsRuleIndex > -1) {
            baseModuleRules[jsRuleIndex] = (0, foxpage_component_webpack_1.getScriptLoaderRule)({ babelConfigPath });
        }
        if (cssRuleIndex > -1) {
            baseModuleRules.splice(cssRuleIndex, 1);
        }
        const styleRules = ['css', 'less', 'sass'].map(styleType => {
            const baseRule = (0, foxpage_component_webpack_1.getStyleLoaderRule)(styleType, styleLoaderOpt);
            return fixEditorStyle ? _fixEditorStyle(baseRule) : baseRule;
        });
        config.module.rules = [...baseModuleRules, ...styleRules];
    }
    config.plugins = config.plugins || [];
    config.plugins.push(new webpack_1.DefinePlugin({
        __DEV__: JSON.stringify(true),
        'process.env.NODE_ENV': JSON.stringify('development'),
        NODE_ENV: JSON.stringify('development'),
    }));
    return (0, webpack_merge_1.merge)(config, getSharedConfig(babelConfigPath));
};
exports.configWebpack = configWebpack;
const configManager = ({ config, babelConfigPath = path_1.default.join(process.cwd(), './babel.config.js'), }) => {
    return (0, webpack_merge_1.merge)(config, {
        module: {
            rules: [
                {
                    test: require.resolve('react'),
                    loader: 'expose-loader',
                    options: {
                        exposes: ['React'],
                    },
                },
                {
                    test: require.resolve('react-dom'),
                    loader: 'expose-loader',
                    options: {
                        exposes: ['ReactDOM'],
                    },
                },
            ],
        },
    }, getSharedConfig(babelConfigPath));
};
exports.configManager = configManager;