@gravity-ui/app-builder 0.13.0 → 0.14.0-beta.0

package/dist/commands/dev/client.js

@@ -40,9 +40,6 @@ const config_1 = require("../../common/webpack/config");
 async function watchClientCompilation(config, onManifestReady) {
     const clientCompilation = await buildWebpackServer(config);
     const compiler = clientCompilation.compiler;
-    if ('compilers' in compiler) {
-        throw new Error('Unexpected multi compiler');
-    }
     subscribeToManifestReadyEvent(compiler, onManifestReady);
     return clientCompilation;
 }
@@ -50,7 +47,14 @@ async function buildWebpackServer(config) {
     const logger = new logger_1.Logger('webpack', config.verbose);
     const { webSocketPath = path.normalize(`/${config.client.publicPathPrefix}/build/sockjs-node`), writeToDisk, ...devServer } = config.client.devServer || {};
     const normalizedConfig = { ...config.client, devServer: { ...devServer, webSocketPath } };
-    const webpackConfig = await (0, config_1.webpackConfigFactory)("development" /* WebpackMode.Dev */, normalizedConfig, { logger });
+    const webpackConfigs = [
+        await (0, config_1.webpackConfigFactory)("development" /* WebpackMode.Dev */, normalizedConfig, { logger }),
+    ];
+    const isSsr = Boolean(normalizedConfig.ssr);
+    if (isSsr) {
+        const logger = new logger_1.Logger('webpack(SSR)', config.verbose);
+        webpackConfigs.push(await (0, config_1.webpackConfigFactory)("development" /* WebpackMode.Dev */, normalizedConfig, { logger, isSsr }));
+    }
     const publicPath = path.normalize(config.client.publicPathPrefix + '/build/');
     const staticFolder = path.resolve(paths_1.default.appDist, 'public');
     const options = {
@@ -58,7 +62,18 @@ async function buildWebpackServer(config) {
         devMiddleware: {
             publicPath,
             stats: 'errors-warnings',
-            writeToDisk,
+            writeToDisk: (target) => {
+                if (writeToDisk === true) {
+                    return true;
+                }
+                if (isSsr && target.startsWith(paths_1.default.appSsrBuild)) {
+                    return true;
+                }
+                if (typeof writeToDisk === 'function') {
+                    return writeToDisk(target);
+                }
+                return false;
+            },
         },
         liveReload: false,
         hot: true,
@@ -116,7 +131,7 @@ async function buildWebpackServer(config) {
         });
     }
     options.proxy = proxy;
-    const compiler = (0, webpack_1.default)(webpackConfig);
+    const compiler = (0, webpack_1.default)(webpackConfigs);
     const server = new webpack_dev_server_1.default(options, compiler);
     try {
         await server.start();
@@ -129,17 +144,28 @@ async function buildWebpackServer(config) {
     }
     return server;
 }
-function subscribeToManifestReadyEvent(compiler, onManifestReady) {
+function subscribeToManifestReadyEvent(webpackCompiler, onManifestReady) {
     const promises = [];
-    const assetsManifestPlugin = compiler.options.plugins.find((plugin) => plugin instanceof webpack_assets_manifest_1.default);
-    if (assetsManifestPlugin) {
-        const assetsManifestReady = (0, utils_1.deferredPromise)();
-        promises.push(assetsManifestReady.promise);
-        assetsManifestPlugin.hooks.done.tap('app-builder', assetsManifestReady.resolve);
+    const options = Array.isArray(webpackCompiler.options)
+        ? webpackCompiler.options
+        : [webpackCompiler.options];
+    const compilers = 'compilers' in webpackCompiler ? webpackCompiler.compilers : [webpackCompiler];
+    for (let i = 0; i < options.length; i++) {
+        const config = options[i];
+        const compiler = compilers[i];
+        if (!config || !compiler) {
+            throw new Error('Something goes wrong!');
+        }
+        const assetsManifestPlugin = config.plugins.find((plugin) => plugin instanceof webpack_assets_manifest_1.default);
+        if (assetsManifestPlugin) {
+            const assetsManifestReady = (0, utils_1.deferredPromise)();
+            promises.push(assetsManifestReady.promise);
+            assetsManifestPlugin.hooks.done.tap('app-builder', assetsManifestReady.resolve);
+        }
+        const manifestReady = (0, utils_1.deferredPromise)();
+        promises.push(manifestReady.promise);
+        const { afterEmit } = (0, webpack_manifest_plugin_1.getCompilerHooks)(compiler);
+        afterEmit.tap('app-builder', manifestReady.resolve);
     }
-    const manifestReady = (0, utils_1.deferredPromise)();
-    promises.push(manifestReady.promise);
-    const { afterEmit } = (0, webpack_manifest_plugin_1.getCompilerHooks)(compiler);
-    afterEmit.tap('app-builder', manifestReady.resolve);
     Promise.all(promises).then(() => onManifestReady());
 }

package/dist/commands/dev/index.js

@@ -56,7 +56,7 @@ async function default_1(config) {
                 script: `${serverPath}/index.js`,
                 args: ['--dev', config.server.port ? `--port=${config.server.port}` : ''],
                 env: {
-                    ...(config.server.port ? { APP_PORT: config.server.port } : undefined),
+                    ...(config.server.port ? { APP_PORT: `${config.server.port}` } : undefined),
                 },
                 nodeArgs: inspect || inspectBrk
                     ? [`--${inspect ? 'inspect' : 'inspect-brk'}=:::${inspect || inspectBrk}`]

package/dist/common/models/index.d.ts

@@ -191,6 +191,10 @@ export interface ClientConfig {
      * Modify or return a custom [Terser options](https://github.com/terser/terser#minify-options).
      */
     terser?: (options: TerserOptions) => TerserOptions;
+    ssr?: {
+        noExternal?: string | RegExp | (string | RegExp)[] | true;
+        moduleType?: 'commonjs' | 'esm';
+    };
 }
 export interface CdnUploadConfig {
     bucket: string;

package/dist/common/paths.d.ts

@@ -7,6 +7,8 @@ declare const _default: {
     appDist: string;
     appRun: string;
     appBuild: string;
+    appSsrEntry: string;
+    appSsrBuild: string;
     src: string;
     libBuild: string;
     libBuildEsm: string;

package/dist/common/paths.js

@@ -36,6 +36,8 @@ exports.default = {
     appDist: resolveApp('dist'),
     appRun: resolveApp('dist/run'),
     appBuild: resolveApp('dist/public/build'),
+    appSsrEntry: resolveApp('src/ui/ssr'),
+    appSsrBuild: resolveApp('dist/ssr'),
     src: resolveApp('src'),
     libBuild: resolveApp('build'),
     libBuildEsm: resolveApp('build/esm'),

package/dist/common/webpack/compile.js

@@ -10,10 +10,15 @@ const config_1 = require("./config");
 const utils_1 = require("./utils");
 async function webpackCompile(config) {
     const logger = new logger_1.Logger('webpack', config.verbose);
-    const webpackConfig = await (0, config_1.webpackConfigFactory)("production" /* WebpackMode.Prod */, config, { logger });
+    const webpackConfigs = [await (0, config_1.webpackConfigFactory)("production" /* WebpackMode.Prod */, config, { logger })];
+    const isSsr = Boolean(config.ssr);
+    if (isSsr) {
+        const logger = new logger_1.Logger('webpack(SSR)', config.verbose);
+        webpackConfigs.push(await (0, config_1.webpackConfigFactory)("production" /* WebpackMode.Prod */, config, { logger, isSsr }));
+    }
     logger.verbose('Config created');
     return new Promise((resolve) => {
-        const compiler = (0, webpack_1.default)(webpackConfig, (0, utils_1.webpackCompilerHandlerFactory)(logger, async () => {
+        const compiler = (0, webpack_1.default)(webpackConfigs, (0, utils_1.webpackCompilerHandlerFactory)(logger, async () => {
             resolve();
         }));
         process.on('SIGINT', async () => {

package/dist/common/webpack/config.d.ts

@@ -7,16 +7,20 @@ export interface HelperOptions {
     isEnvDevelopment: boolean;
     isEnvProduction: boolean;
     configType: `${WebpackMode}`;
+    buildDirectory: string;
+    entriesDirectory: string;
+    isSsr: boolean;
 }
 export declare const enum WebpackMode {
     Prod = "production",
     Dev = "development"
 }
-export declare function webpackConfigFactory(webpackMode: WebpackMode, config: NormalizedClientConfig, { logger }?: {
+export declare function webpackConfigFactory(webpackMode: WebpackMode, config: NormalizedClientConfig, { logger, isSsr }?: {
     logger?: Logger;
+    isSsr?: boolean;
 }): Promise<webpack.Configuration>;
 export declare function configureModuleRules(helperOptions: HelperOptions, additionalRules?: NonNullable<webpack.RuleSetRule['oneOf']>): webpack.RuleSetRule[];
 export declare function configureResolve({ isEnvProduction, config }: HelperOptions): webpack.ResolveOptions;
 type Optimization = NonNullable<webpack.Configuration['optimization']>;
-export declare function configureOptimization({ config }: HelperOptions): Optimization;
+export declare function configureOptimization({ config, isSsr }: HelperOptions): Optimization;
 export {};

package/dist/common/webpack/config.js

@@ -44,6 +44,7 @@ const react_refresh_webpack_plugin_1 = __importDefault(require("@pmmmwh/react-re
 const moment_timezone_data_webpack_plugin_1 = __importDefault(require("moment-timezone-data-webpack-plugin"));
 const webpack_plugin_1 = __importDefault(require("@statoscope/webpack-plugin"));
 const circular_dependency_plugin_1 = __importDefault(require("circular-dependency-plugin"));
+const webpack_node_externals_1 = __importDefault(require("webpack-node-externals"));
 const paths_1 = __importDefault(require("../paths"));
 const babel_1 = require("../babel");
 const progress_plugin_1 = require("./progress-plugin");
@@ -53,7 +54,7 @@ const log_config_1 = require("../logger/log-config");
 const utils_2 = require("../typescript/utils");
 const imagesSizeLimit = 2048;
 const fontSizeLimit = 8192;
-async function webpackConfigFactory(webpackMode, config, { logger } = {}) {
+async function webpackConfigFactory(webpackMode, config, { logger, isSsr = false } = {}) {
     const isEnvDevelopment = webpackMode === "development" /* WebpackMode.Dev */;
     const isEnvProduction = webpackMode === "production" /* WebpackMode.Prod */;
     const helperOptions = {
@@ -62,11 +63,25 @@ async function webpackConfigFactory(webpackMode, config, { logger } = {}) {
         isEnvDevelopment,
         isEnvProduction,
         configType: webpackMode,
+        buildDirectory: isSsr ? paths_1.default.appSsrBuild : paths_1.default.appBuild,
+        entriesDirectory: isSsr ? paths_1.default.appSsrEntry : paths_1.default.appEntry,
+        isSsr,
     };
+    let externals = config.externals;
+    if (isSsr) {
+        externals =
+            config.ssr?.noExternal === true
+                ? undefined
+                : (0, webpack_node_externals_1.default)({
+                    allowlist: config.ssr?.noExternal,
+                    importType: config.ssr?.moduleType === 'esm' ? 'module' : 'commonjs',
+                });
+    }
     let webpackConfig = {
         mode: webpackMode,
         context: paths_1.default.app,
         bail: isEnvProduction,
+        target: isSsr ? 'node' : undefined,
         devtool: configureDevTool(helperOptions),
         entry: configureEntry(helperOptions),
         output: configureOutput(helperOptions),
@@ -76,7 +91,7 @@ async function webpackConfigFactory(webpackMode, config, { logger } = {}) {
         },
         plugins: configurePlugins(helperOptions),
         optimization: configureOptimization(helperOptions),
-        externals: config.externals,
+        externals,
         node: config.node,
         watchOptions: configureWatchOptions(helperOptions),
         ignoreWarnings: [/Failed to parse source map/],
@@ -135,7 +150,10 @@ function configureWatchOptions({ config }) {
     delete watchOptions.watchPackages;
     return watchOptions;
 }
-function configureExperiments({ config, isEnvProduction, }) {
+function configureExperiments({ config, isEnvProduction, isSsr, }) {
+    if (isSsr) {
+        return config.ssr?.moduleType === 'esm' ? { outputModule: true } : undefined;
+    }
     if (isEnvProduction) {
         return undefined;
     }
@@ -190,56 +208,69 @@ function createEntryArray(entry) {
     return [require.resolve('./public-path'), entry];
 }
 function addEntry(entry, file) {
-    const newEntry = path.resolve(paths_1.default.appEntry, file);
     return {
         ...entry,
-        [path.parse(file).name]: createEntryArray(newEntry),
+        [path.parse(file).name]: createEntryArray(file),
     };
 }
-function configureEntry({ config }) {
-    let entries = fs.readdirSync(paths_1.default.appEntry).filter((file) => /\.[jt]sx?$/.test(file));
+function configureEntry({ config, entriesDirectory }) {
+    let entries = fs.readdirSync(entriesDirectory).filter((file) => /\.[jt]sx?$/.test(file));
     if (Array.isArray(config.entryFilter) && config.entryFilter.length) {
         entries = entries.filter((entry) => config.entryFilter?.includes(entry.split('.')[0] ?? ''));
     }
     if (!entries.length) {
-        throw new Error('No entries were found after applying UI_CORE_ENTRY_FILTER');
+        throw new Error('No entries were found after applying entry filter');
     }
-    return entries.reduce((entry, file) => addEntry(entry, file), {});
+    return entries.reduce((entry, file) => addEntry(entry, path.resolve(entriesDirectory, file)), {});
 }
-function getFileNames({ isEnvProduction }) {
+function getFileNames({ isEnvProduction, isSsr, config }) {
+    let ext = 'js';
+    if (isSsr) {
+        ext = config.ssr?.moduleType === 'esm' ? 'mjs' : 'cjs';
+    }
     return {
-        filename: isEnvProduction ? 'js/[name].[contenthash:8].js' : 'js/[name].js',
+        filename: isEnvProduction ? `js/[name].[contenthash:8].${ext}` : `js/[name].${ext}`,
         chunkFilename: isEnvProduction
             ? 'js/[name].[contenthash:8].chunk.js'
             : 'js/[name].chunk.js',
     };
 }
-function configureOutput({ isEnvDevelopment, ...rest }) {
+function configureOutput(options) {
+    let ssrOptions;
+    if (options.isSsr) {
+        ssrOptions = {
+            library: { type: options.config.ssr?.moduleType === 'esm' ? 'module' : 'commonjs2' },
+            chunkFormat: false,
+        };
+    }
     return {
-        ...getFileNames({ isEnvDevelopment, ...rest }),
-        path: paths_1.default.appBuild,
-        pathinfo: isEnvDevelopment,
+        ...getFileNames(options),
+        path: options.buildDirectory,
+        pathinfo: options.isEnvDevelopment,
+        ...ssrOptions,
     };
 }
-function createJavaScriptLoader({ isEnvProduction, isEnvDevelopment, configType, config, }) {
+function createJavaScriptLoader({ isEnvProduction, isEnvDevelopment, configType, config, isSsr, }) {
     const plugins = [];
-    if (isEnvDevelopment && config.reactRefresh !== false) {
-        plugins.push([
-            require.resolve('react-refresh/babel'),
-            config.devServer?.webSocketPath
-                ? {
-                    overlay: {
-                        sockPath: config.devServer.webSocketPath,
-                    },
-                }
-                : undefined,
-        ]);
-    }
-    if (isEnvProduction) {
-        plugins.push([
-            require.resolve('babel-plugin-import'),
-            { libraryName: 'lodash', libraryDirectory: '', camel2DashComponentName: false },
-        ]);
+    if (!isSsr) {
+        if (isEnvDevelopment && config.reactRefresh !== false) {
+            plugins.push([
+                require.resolve('react-refresh/babel'),
+                config.devServer?.webSocketPath
+                    ? {
+                        overlay: {
+                            sockPath: config.devServer.webSocketPath,
+                        },
+                    }
+                    : undefined,
+            ]);
+        }
+        if (isEnvProduction) {
+            plugins.push([
+                require.resolve('babel-plugin-import'),
+                { libraryName: 'lodash', libraryDirectory: '', camel2DashComponentName: false },
+            ]);
+        }
     }
     const transformOptions = config.babel({
         presets: [(0, babel_1.babelPreset)(config)],
@@ -308,22 +339,23 @@ function createWorkerRule(options) {
     };
 }
 function createSassStylesRule(options) {
-    const loaders = getCssLoaders(options);
-    loaders.push({
-        loader: require.resolve('resolve-url-loader'),
-        options: {
-            sourceMap: !options.config.disableSourceMapGeneration,
+    const loaders = getCssLoaders(options, [
+        {
+            loader: require.resolve('resolve-url-loader'),
+            options: {
+                sourceMap: !options.config.disableSourceMapGeneration,
+            },
         },
-    });
-    loaders.push({
-        loader: require.resolve('sass-loader'),
-        options: {
-            sourceMap: true, // must be always true for work with resolve-url-loader
-            sassOptions: {
-                loadPaths: [paths_1.default.appClient],
+        {
+            loader: require.resolve('sass-loader'),
+            options: {
+                sourceMap: true, // must be always true for work with resolve-url-loader
+                sassOptions: {
+                    loadPaths: [paths_1.default.appClient],
+                },
             },
         },
-    });
+    ]);
     return {
         test: /\.scss$/,
         sideEffects: options.isEnvProduction ? true : undefined,
@@ -338,29 +370,8 @@ function createStylesRule(options) {
         use: loaders,
     };
 }
-function getCssLoaders({ isEnvDevelopment, isEnvProduction, config }) {
+function getCssLoaders({ isEnvDevelopment, isEnvProduction, config, isSsr }, additionalRules) {
     const loaders = [];
-    if (isEnvProduction) {
-        loaders.push(mini_css_extract_plugin_1.default.loader);
-    }
-    if (isEnvDevelopment) {
-        loaders.push({
-            loader: require.resolve('style-loader'),
-        });
-    }
-    loaders.push({
-        loader: require.resolve('css-loader'),
-        options: {
-            esModule: false,
-            sourceMap: !config.disableSourceMapGeneration,
-            importLoaders: 2,
-            modules: {
-                auto: true,
-                localIdentName: '[name]__[local]--[hash:base64:5]',
-                exportLocalsConvention: 'camelCase',
-            },
-        },
-    });
     if (!config.transformCssWithLightningCss) {
         loaders.push({
             loader: require.resolve('postcss-loader'),
@@ -375,9 +386,39 @@ function getCssLoaders({ isEnvDevelopment, isEnvProduction, config }) {
             },
         });
     }
+    if (Array.isArray(additionalRules) && additionalRules.length > 0) {
+        loaders.push(...additionalRules);
+    }
+    const importLoaders = loaders.length;
+    loaders.unshift({
+        loader: require.resolve('css-loader'),
+        options: {
+            sourceMap: !config.disableSourceMapGeneration,
+            importLoaders,
+            modules: {
+                auto: true,
+                localIdentName: '[name]__[local]--[hash:base64:5]',
+                exportLocalsConvention: 'camelCase',
+                exportOnlyLocals: isSsr,
+            },
+        },
+    });
+    if (isEnvProduction) {
+        loaders.unshift({ loader: mini_css_extract_plugin_1.default.loader, options: { emit: !isSsr } });
+    }
+    if (isEnvDevelopment) {
+        if (isSsr) {
+            loaders.unshift({ loader: mini_css_extract_plugin_1.default.loader, options: { emit: false } });
+        }
+        else {
+            loaders.unshift({
+                loader: require.resolve('style-loader'),
+            });
+        }
+    }
     return loaders;
 }
-function createIconsRule({ isEnvProduction, config }, jsLoader) {
+function createIconsRule({ isEnvProduction, config, isSsr }, jsLoader) {
     const iconIncludes = config.icons || [];
     return {
         // eslint-disable-next-line security/detect-unsafe-regex
@@ -414,11 +455,12 @@ function createIconsRule({ isEnvProduction, config }, jsLoader) {
                 generator: {
                     filename: 'assets/images/[name].[contenthash:8][ext]',
                     publicPath: isEnvProduction ? '../' : undefined,
+                    emit: !isSsr,
                 },
             }),
     };
 }
-function createAssetsRules({ isEnvProduction, config }) {
+function createAssetsRules({ isEnvProduction, config, isSsr }) {
     const imagesRule = {
         test: /\.(ico|bmp|gif|jpe?g|png|svg)$/,
         include: [paths_1.default.appClient, ...(config.images || [])],
@@ -430,6 +472,7 @@ function createAssetsRules({ isEnvProduction, config }) {
         },
         generator: {
             filename: 'assets/images/[name].[contenthash:8][ext]',
+            emit: !isSsr,
         },
     };
     const fontsRule = {
@@ -443,6 +486,7 @@ function createAssetsRules({ isEnvProduction, config }) {
         },
         generator: {
             filename: 'assets/fonts/[name].[contenthash:8][ext]',
+            emit: !isSsr,
         },
     };
     const rules = [imagesRule, fontsRule];
@@ -462,6 +506,7 @@ function createAssetsRules({ isEnvProduction, config }) {
             generator: {
                 filename: 'assets/images/[name].[contenthash:8][ext]',
                 publicPath: '../',
+                emit: !isSsr,
             },
         }, {
             test: /\.(ttf|eot|woff2?)$/,
@@ -476,17 +521,19 @@ function createAssetsRules({ isEnvProduction, config }) {
             generator: {
                 filename: 'assets/fonts/[name].[contenthash:8][ext]',
                 publicPath: '../',
+                emit: !isSsr,
             },
         });
     }
     return rules;
 }
-function createFallbackRules({ isEnvProduction }) {
+function createFallbackRules({ isEnvProduction, isSsr }) {
     const rules = [
         {
             type: 'asset/resource',
             generator: {
                 filename: 'assets/[name].[contenthash:8][ext]',
+                emit: !isSsr,
             },
             exclude: [/\.[jt]sx?$/, /\.json$/, /\.[cm]js$/, /\.ejs$/],
         },
@@ -501,6 +548,7 @@ function createFallbackRules({ isEnvProduction }) {
             generator: {
                 filename: 'assets/[name].[contenthash:8][ext]',
                 publicPath: '../',
+                emit: !isSsr,
             },
         });
     }
@@ -515,7 +563,7 @@ function createMomentTimezoneDataPlugin(options = {}) {
     return new moment_timezone_data_webpack_plugin_1.default({ ...options, startYear, endYear });
 }
 function configurePlugins(options) {
-    const { isEnvDevelopment, isEnvProduction, config } = options;
+    const { isEnvDevelopment, isEnvProduction, config, isSsr } = options;
     const excludeFromClean = config.excludeFromClean || [];
     const manifestFile = 'assets-manifest.json';
     const plugins = [
@@ -539,9 +587,8 @@ function configurePlugins(options) {
             : {
                 entrypoints: true,
                 writeToDisk: true,
-                output: path.resolve(paths_1.default.appBuild, manifestFile),
+                output: path.resolve(options.buildDirectory, manifestFile),
             }),
-        createMomentTimezoneDataPlugin(config.momentTz),
         new webpack.DefinePlugin({
             'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
             ...config.definitions,
@@ -553,51 +600,12 @@ function configurePlugins(options) {
     if (process.env.WEBPACK_PROFILE === 'true') {
         plugins.push(new webpack.debug.ProfilingPlugin());
     }
-    const contextReplacement = config.contextReplacement || {};
-    plugins.push(new webpack.ContextReplacementPlugin(/moment[\\/]locale$/, 
-    // eslint-disable-next-line security/detect-non-literal-regexp
-    new RegExp(`^\\./(${(contextReplacement.locale || ['ru']).join('|')})$`)));
-    plugins.push(new webpack.ContextReplacementPlugin(/dayjs[\\/]locale$/, 
-    // eslint-disable-next-line security/detect-non-literal-regexp
-    new RegExp(`^\\./(${(contextReplacement.locale || ['ru']).join('|')})\\.js$`)));
-    if (contextReplacement['highlight.js']) {
-        plugins.push(new webpack.ContextReplacementPlugin(/highlight\.js[\\/]lib[\\/]languages$/, 
-        // eslint-disable-next-line security/detect-non-literal-regexp
-        new RegExp(`^\\./(${contextReplacement['highlight.js'].join('|')})$`)));
-    }
-    if (config.monaco) {
-        const MonacoEditorWebpackPlugin = require('monaco-editor-webpack-plugin');
-        plugins.push(new MonacoEditorWebpackPlugin({
-            filename: isEnvProduction ? '[name].[hash:8].worker.js' : undefined,
-            ...config.monaco,
-            // currently, workers located on cdn are not working properly, so we are enforcing loading workers from
-            // service instead
-            publicPath: path.normalize(config.publicPathPrefix + '/build/'),
-        }));
-    }
-    if (isEnvDevelopment && config.reactRefresh !== false) {
-        const { webSocketPath = path.normalize(`/${config.publicPathPrefix}/build/sockjs-node`) } = config.devServer || {};
-        plugins.push(new react_refresh_webpack_plugin_1.default(config.reactRefresh({
-            overlay: { sockPath: webSocketPath },
-            exclude: [/node_modules/, /\.worker\.[jt]sx?$/],
-        })));
-    }
-    if (config.detectCircularDependencies) {
-        let circularPluginOptions = {
-            exclude: /node_modules/,
-            allowAsyncCycles: true,
-        };
-        if (typeof config.detectCircularDependencies === 'object') {
-            circularPluginOptions = config.detectCircularDependencies;
-        }
-        plugins.push(new circular_dependency_plugin_1.default(circularPluginOptions));
-    }
     if (config.forkTsChecker !== false) {
         plugins.push(new fork_ts_checker_webpack_plugin_1.default({
             ...config.forkTsChecker,
             typescript: {
                 typescriptPath: (0, utils_2.resolveTypescript)(),
-                configFile: path.resolve(paths_1.default.app, 'src/ui/tsconfig.json'),
+                configFile: path.resolve(paths_1.default.appClient, 'tsconfig.json'),
                 diagnosticOptions: {
                     syntactic: true,
                 },
@@ -606,19 +614,17 @@ function configurePlugins(options) {
             },
         }));
     }
-    if (config.polyfill?.process) {
-        plugins.push(new webpack.ProvidePlugin({ process: 'process/browser.js' }));
+    if (config.detectCircularDependencies) {
+        let circularPluginOptions = {
+            exclude: /node_modules/,
+            allowAsyncCycles: true,
+        };
+        if (typeof config.detectCircularDependencies === 'object') {
+            circularPluginOptions = config.detectCircularDependencies;
+        }
+        plugins.push(new circular_dependency_plugin_1.default(circularPluginOptions));
     }
     if (isEnvProduction) {
-        plugins.push(new mini_css_extract_plugin_1.default({
-            filename: 'css/[name].[contenthash:8].css',
-            chunkFilename: 'css/[name].[contenthash:8].chunk.css',
-            ignoreOrder: true,
-        }));
-        if (config.sentryConfig) {
-            const sentryPlugin = require('@sentry/webpack-plugin').sentryWebpackPlugin;
-            plugins.push(sentryPlugin({ ...config.sentryConfig }));
-        }
         if (config.analyzeBundle === 'true') {
             plugins.push(new webpack_bundle_analyzer_1.BundleAnalyzerPlugin({
                 openAnalyzer: false,
@@ -629,8 +635,8 @@ function configurePlugins(options) {
         if (config.analyzeBundle === 'statoscope') {
             const customStatoscopeConfig = config.statoscopeConfig || {};
             plugins.push(new webpack_plugin_1.default({
-                saveReportTo: path.resolve(paths_1.default.appBuild, 'report.html'),
-                saveStatsTo: path.resolve(paths_1.default.appBuild, 'stats.json'),
+                saveReportTo: path.resolve(options.buildDirectory, 'report.html'),
+                saveStatsTo: path.resolve(options.buildDirectory, 'stats.json'),
                 open: false,
                 statsOptions: {
                     all: true,
@@ -639,50 +645,102 @@ function configurePlugins(options) {
             }));
         }
     }
-    if (config.cdn) {
-        let credentialsGlobal;
-        if (process.env.FRONTEND_S3_ACCESS_KEY_ID && process.env.FRONTEND_S3_SECRET_ACCESS_KEY) {
-            credentialsGlobal = {
-                accessKeyId: process.env.FRONTEND_S3_ACCESS_KEY_ID,
-                secretAccessKey: process.env.FRONTEND_S3_SECRET_ACCESS_KEY,
-            };
+    if (isEnvProduction || isSsr) {
+        plugins.push(new mini_css_extract_plugin_1.default({
+            filename: 'css/[name].[contenthash:8].css',
+            chunkFilename: 'css/[name].[contenthash:8].chunk.css',
+            ignoreOrder: true,
+        }));
+    }
+    if (config.monaco) {
+        const MonacoEditorWebpackPlugin = require('monaco-editor-webpack-plugin');
+        plugins.push(new MonacoEditorWebpackPlugin({
+            filename: isEnvProduction ? '[name].[hash:8].worker.js' : undefined,
+            ...config.monaco,
+            // currently, workers located on cdn are not working properly, so we are enforcing loading workers from
+            // service instead
+            publicPath: path.normalize(config.publicPathPrefix + '/build/'),
+        }));
+    }
+    if (!isSsr) {
+        const contextReplacement = config.contextReplacement || {};
+        plugins.push(createMomentTimezoneDataPlugin(config.momentTz));
+        plugins.push(new webpack.ContextReplacementPlugin(/moment[\\/]locale$/, 
+        // eslint-disable-next-line security/detect-non-literal-regexp
+        new RegExp(`^\\./(${(contextReplacement.locale || ['ru']).join('|')})$`)));
+        plugins.push(new webpack.ContextReplacementPlugin(/dayjs[\\/]locale$/, 
+        // eslint-disable-next-line security/detect-non-literal-regexp
+        new RegExp(`^\\./(${(contextReplacement.locale || ['ru']).join('|')})\\.js$`)));
+        if (contextReplacement['highlight.js']) {
+            plugins.push(new webpack.ContextReplacementPlugin(/highlight\.js[\\/]lib[\\/]languages$/, 
+            // eslint-disable-next-line security/detect-non-literal-regexp
+            new RegExp(`^\\./(${contextReplacement['highlight.js'].join('|')})$`)));
         }
-        const cdns = Array.isArray(config.cdn) ? config.cdn : [config.cdn];
-        for (let index = 0; index < cdns.length; index++) {
-            const cdn = cdns[index];
-            if (!cdn) {
-                continue;
+        if (isEnvDevelopment && config.reactRefresh !== false) {
+            const { webSocketPath = path.normalize(`/${config.publicPathPrefix}/build/sockjs-node`), } = config.devServer || {};
+            plugins.push(new react_refresh_webpack_plugin_1.default(config.reactRefresh({
+                overlay: { sockPath: webSocketPath },
+                exclude: [/node_modules/, /\.worker\.[jt]sx?$/],
+            })));
+        }
+        if (config.polyfill?.process) {
+            plugins.push(new webpack.ProvidePlugin({ process: 'process/browser.js' }));
+        }
+        if (isEnvProduction) {
+            if (config.sentryConfig) {
+                const sentryPlugin = require('@sentry/webpack-plugin').sentryWebpackPlugin;
+                plugins.push(sentryPlugin({ ...config.sentryConfig }));
             }
-            let credentials = credentialsGlobal;
-            const accessKeyId = process.env[`FRONTEND_S3_ACCESS_KEY_ID_${index}`];
-            const secretAccessKey = process.env[`FRONTEND_S3_SECRET_ACCESS_KEY_${index}`];
-            if (accessKeyId && secretAccessKey) {
-                credentials = {
-                    accessKeyId,
-                    secretAccessKey,
+        }
+        if (config.cdn) {
+            let credentialsGlobal;
+            if (process.env.FRONTEND_S3_ACCESS_KEY_ID &&
+                process.env.FRONTEND_S3_SECRET_ACCESS_KEY) {
+                credentialsGlobal = {
+                    accessKeyId: process.env.FRONTEND_S3_ACCESS_KEY_ID,
+                    secretAccessKey: process.env.FRONTEND_S3_SECRET_ACCESS_KEY,
                 };
             }
-            plugins.push(new s3_upload_1.S3UploadPlugin({
-                exclude: config.hiddenSourceMap ? /\.map$/ : undefined,
-                compress: cdn.compress,
-                s3ClientOptions: {
-                    region: cdn.region,
-                    endpoint: cdn.endpoint,
-                    credentials,
-                },
-                s3UploadOptions: {
-                    bucket: cdn.bucket,
-                    targetPath: cdn.prefix,
-                    cacheControl: cdn.cacheControl,
-                },
-                additionalPattern: cdn.additionalPattern,
-                logger: options.logger,
-            }));
+            const cdns = Array.isArray(config.cdn) ? config.cdn : [config.cdn];
+            for (let index = 0; index < cdns.length; index++) {
+                const cdn = cdns[index];
+                if (!cdn) {
+                    continue;
+                }
+                let credentials = credentialsGlobal;
+                const accessKeyId = process.env[`FRONTEND_S3_ACCESS_KEY_ID_${index}`];
+                const secretAccessKey = process.env[`FRONTEND_S3_SECRET_ACCESS_KEY_${index}`];
+                if (accessKeyId && secretAccessKey) {
+                    credentials = {
+                        accessKeyId,
+                        secretAccessKey,
+                    };
+                }
+                plugins.push(new s3_upload_1.S3UploadPlugin({
+                    exclude: config.hiddenSourceMap ? /\.map$/ : undefined,
+                    compress: cdn.compress,
+                    s3ClientOptions: {
+                        region: cdn.region,
+                        endpoint: cdn.endpoint,
+                        credentials,
+                    },
+                    s3UploadOptions: {
+                        bucket: cdn.bucket,
+                        targetPath: cdn.prefix,
+                        cacheControl: cdn.cacheControl,
+                    },
+                    additionalPattern: cdn.additionalPattern,
+                    logger: options.logger,
+                }));
+            }
         }
     }
     return plugins;
 }
-function configureOptimization({ config }) {
+function configureOptimization({ config, isSsr }) {
+    if (isSsr) {
+        return {};
+    }
     const configVendors = config.vendors ?? [];
     let vendorsList = [
         'react',

package/dist/common/webpack/public-path.js

@@ -1,3 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-__webpack_public_path__ = window.__PUBLIC_PATH__ ?? '/build/';
+// @ts-expect-error
+__webpack_public_path__ = globalThis.__PUBLIC_PATH__ ?? '/build/';

package/dist/common/webpack/storybook.js

@@ -35,6 +35,7 @@ const css_minimizer_webpack_plugin_1 = __importDefault(require("css-minimizer-we
 const config_1 = require("./config");
 const config_2 = require("../config");
 const models_1 = require("../models");
+const paths_1 = __importDefault(require("../paths"));
 async function configureServiceWebpackConfig(mode, storybookConfig) {
     const serviceConfig = await (0, config_2.getProjectConfig)(mode === "production" /* WebpackMode.Prod */ ? 'build' : 'dev', {
         storybook: true,
@@ -104,6 +105,9 @@ async function configureWebpackConfigForStorybook(mode, userConfig = {}, storybo
         isEnvProduction,
         config: config.client,
         configType: mode,
+        buildDirectory: paths_1.default.appBuild,
+        entriesDirectory: paths_1.default.appEntry,
+        isSsr: false,
     };
     return {
         module: {

package/dist/common/webpack/utils.d.ts

@@ -1,6 +1,6 @@
 import type webpack from 'webpack';
 import type { Logger } from '../logger';
-export declare function webpackCompilerHandlerFactory(logger: Logger, onCompilationEnd?: () => void): (err?: Error | null, stats?: webpack.Stats) => Promise<void>;
+export declare function webpackCompilerHandlerFactory(logger: Logger, onCompilationEnd?: () => void): (err?: Error | null, stats?: webpack.MultiStats) => Promise<void>;
 export declare function resolveTsconfigPathsToAlias(tsConfigPath: string): {
     aliases: Record<string, string[]>;
     modules: string[];

package/dist/common/webpack/utils.js

@@ -50,13 +50,21 @@ function webpackCompilerHandlerFactory(logger, onCompilationEnd) {
         if (onCompilationEnd) {
             await onCompilationEnd();
         }
-        if (stats) {
-            const time = stats.endTime - stats.startTime;
+        const [clientStats, ssrStats] = stats?.stats ?? [];
+        if (clientStats) {
+            const time = clientStats.endTime - clientStats.startTime;
             logger.success(`Client was successfully compiled in ${(0, pretty_time_1.prettyTime)(BigInt(time) * BigInt(1_000_000))}`);
         }
         else {
             logger.success(`Client was successfully compiled`);
         }
+        if (ssrStats) {
+            const time = ssrStats.endTime - ssrStats.startTime;
+            logger.success(`SSR: Client was successfully compiled in ${(0, pretty_time_1.prettyTime)(BigInt(time) * BigInt(1_000_000))}`);
+        }
+        else {
+            logger.success(`SSR: Client was successfully compiled`);
+        }
     };
 }
 const endStarRe = /\/?\*$/;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/app-builder",
-  "version": "0.13.0",
+  "version": "0.14.0-beta.0",
   "description": "Develop and build your React client-server projects, powered by typescript and webpack",
   "license": "MIT",
   "type": "commonjs",
@@ -129,6 +129,7 @@
     "webpack-bundle-analyzer": "^4.10.2",
     "webpack-dev-server": "^5.1.0",
     "webpack-manifest-plugin": "^5.0.0",
+    "webpack-node-externals": "^3.0.0",
     "worker-loader": "^3.0.8",
     "yargs": "^17.7.2"
   },
@@ -152,6 +153,7 @@
     "@types/webpack-assets-manifest": "^5.1.4",
     "@types/webpack-bundle-analyzer": "^4.7.0",
     "@types/webpack-manifest-plugin": "^3.0.8",
+    "@types/webpack-node-externals": "^3.0.4",
     "@types/yargs": "17.0.11",
     "babel-plugin-tester": "^11.0.4",
     "eslint": "^8.57.0",