@gravity-ui/app-builder 0.15.1-beta.1 → 0.15.1-beta.3

package/dist/commands/dev/client.js

@@ -74,9 +74,6 @@ async function buildDevServer(config) {
         }
     }
     else {
-        if (isSsr) {
-            throw new Error(`SSR is not supported in ${bundler}`);
-        }
         rspackConfigs = [
             await (0, config_1.rspackConfigFactory)({
                 webpackMode: "development" /* WebpackMode.Dev */,
@@ -84,6 +81,15 @@ async function buildDevServer(config) {
                 logger,
             }),
         ];
+        if (isSsr) {
+            const ssrLogger = new logger_1.Logger('rspack(SSR)', config.verbose);
+            rspackConfigs.push(await (0, config_1.rspackConfigFactory)({
+                webpackMode: "development" /* WebpackMode.Dev */,
+                config: normalizedConfig,
+                logger: ssrLogger,
+                isSsr,
+            }));
+        }
     }
     const publicPath = path.normalize(config.client.publicPathPrefix + '/build/');
     const staticFolder = path.resolve(paths_1.default.appDist, 'public');
@@ -163,8 +169,9 @@ async function buildDevServer(config) {
     options.proxy = proxy;
     let server;
     if (bundler === 'rspack') {
-        // Rspack multicompiler dont work with lazy compilation
-        const compiler = (0, core_1.rspack)(rspackConfigs[0]);
+        // Rspack multicompiler dont work with lazy compilation.
+        // Pass a single config to avoid multicompiler when SSR disabled.
+        const compiler = (0, core_1.rspack)(isSsr ? rspackConfigs : rspackConfigs[0]);
         server = new dev_server_1.RspackDevServer(options, compiler);
         // Need to clean cache before start. https://github.com/web-infra-dev/rspack/issues/9025
         (0, rspack_1.clearCacheDirectory)(rspackConfigs[0], logger);

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

@@ -128,7 +128,7 @@ export interface ClientConfig {
     svgr?: SvgrConfig;
     entryFilter?: string[];
     excludeFromClean?: string[];
-    analyzeBundle?: 'true' | 'statoscope';
+    analyzeBundle?: 'true' | 'statoscope' | 'rsdoctor';
     statoscopeConfig?: Partial<StatoscopeOptions>;
     reactProfiling?: boolean;
     /**

package/dist/common/webpack/compile.js

@@ -9,6 +9,7 @@ const core_1 = require("@rspack/core");
 const logger_1 = require("../logger");
 const config_1 = require("./config");
 const utils_1 = require("./utils");
+const rspack_1 = require("./rspack");
 async function clientCompile(config) {
     const logger = new logger_1.Logger('client', config.verbose);
     const webpackConfigs = [];
@@ -41,17 +42,19 @@ async function clientCompile(config) {
     logger.verbose('Config created');
     return new Promise((resolve) => {
         const compiler = config.bundler === 'rspack'
-            ? (0, core_1.rspack)(rspackConfigs) // TODO add compiler factory
+            ? (0, core_1.rspack)(rspackConfigs, (0, rspack_1.rspackCompilerHandlerFactory)(logger, async () => {
+                resolve();
+            }))
             : (0, webpack_1.default)(webpackConfigs, (0, utils_1.webpackCompilerHandlerFactory)(logger, async () => {
                 resolve();
             }));
         process.on('SIGINT', async () => {
-            compiler.close(() => {
+            compiler?.close(() => {
                 process.exit(1);
             });
         });
         process.on('SIGTERM', async () => {
-            compiler.close(() => {
+            compiler?.close(() => {
                 process.exit(1);
             });
         });

package/dist/common/webpack/config.js

@@ -74,10 +74,7 @@ function getHelperOptions({ webpackMode, config, logger, isSsr = false, }) {
         isSsr,
     };
 }
-async function webpackConfigFactory(options) {
-    const { config } = options;
-    const helperOptions = getHelperOptions(options);
-    const { isSsr, isEnvProduction } = helperOptions;
+function configureExternals({ config, isSsr }) {
     let externals = config.externals;
     if (isSsr) {
         externals =
@@ -88,6 +85,24 @@ async function webpackConfigFactory(options) {
                     module: config.ssr?.moduleType === 'esm',
                 });
     }
+    return externals;
+}
+function prepareRspackExternals(externals) {
+    if (Array.isArray(externals)) {
+        const rspackExternals = {};
+        for (const ext of externals) {
+            if (typeof ext === 'object' && ext !== null) {
+                Object.assign(rspackExternals, ext);
+            }
+        }
+        return rspackExternals;
+    }
+    return externals;
+}
+async function webpackConfigFactory(options) {
+    const { config } = options;
+    const helperOptions = getHelperOptions(options);
+    const { isSsr, isEnvProduction } = helperOptions;
     let webpackConfig = {
         mode: isEnvProduction ? 'production' : 'development',
         context: paths_1.default.app,
@@ -102,7 +117,7 @@ async function webpackConfigFactory(options) {
         },
         plugins: configureWebpackPlugins(helperOptions),
         optimization: configureOptimization(helperOptions),
-        externals,
+        externals: configureExternals(helperOptions),
         node: config.node,
         watchOptions: configureWatchOptions(helperOptions),
         ignoreWarnings: [/Failed to parse source map/],
@@ -147,7 +162,7 @@ async function rspackConfigFactory(options) {
         },
         plugins: configureRspackPlugins(helperOptions),
         optimization: configureRspackOptimization(helperOptions),
-        // TODO externals,
+        externals: prepareRspackExternals(configureExternals(helperOptions)),
         node: config.node,
         watchOptions: configureWatchOptions(helperOptions),
         ignoreWarnings: [/Failed to parse source map/],
@@ -774,7 +789,6 @@ function configureCommonPlugins(options) {
                 ...excludeFromClean,
             ],
         }),
-        ...(options.logger ? [new progress_plugin_1.ProgressPlugin({ logger: options.logger })] : []),
     ];
     if (config.detectCircularDependencies) {
         let circularPluginOptions = {
@@ -824,6 +838,7 @@ function configureWebpackPlugins(options) {
     const forkTsCheckerOptions = getForkTsCheckerOptions(options);
     const webpackPlugins = [
         ...configureCommonPlugins(options),
+        ...(options.logger ? [new progress_plugin_1.ProgressPlugin({ logger: options.logger })] : []),
         new webpack.DefinePlugin(getDefinitions(options)),
         new webpack_manifest_plugin_1.WebpackManifestPlugin({
             writeToFileEmit: true,
@@ -858,6 +873,12 @@ function configureWebpackPlugins(options) {
                 ...customStatoscopeConfig,
             }));
         }
+        if (config.analyzeBundle === 'rsdoctor') {
+            const { RsdoctorWebpackPlugin } = require('@rsdoctor/webpack-plugin');
+            webpackPlugins.push(new RsdoctorWebpackPlugin({
+                mode: 'brief',
+            }));
+        }
     }
     if (!isSsr) {
         const contextReplacements = getContextReplacements(options);
@@ -881,6 +902,7 @@ function configureRspackPlugins(options) {
     const forkTsCheckerOptions = getForkTsCheckerOptions(options);
     const rspackPlugins = [
         ...configureCommonPlugins(options),
+        ...(options.logger ? [new rspack_1.RspackProgressPlugin({ logger: options.logger })] : []),
         new core_1.rspack.DefinePlugin(getDefinitions(options)),
         new rspack_manifest_plugin_1.RspackManifestPlugin({
             fileName: isEnvProduction
@@ -896,7 +918,14 @@ function configureRspackPlugins(options) {
     if (isEnvProduction || isSsr || config.ssr) {
         rspackPlugins.push(new core_1.CssExtractRspackPlugin(getCssExtractPluginOptions(options)));
     }
-    // TODO add rsdoctor plugin
+    if (isEnvProduction) {
+        if (config.analyzeBundle === 'rsdoctor') {
+            const { RsdoctorRspackPlugin } = require('@rsdoctor/rspack-plugin');
+            rspackPlugins.push(new RsdoctorRspackPlugin({
+                mode: 'brief',
+            }));
+        }
+    }
     if (!isSsr) {
         const contextReplacements = getContextReplacements(options);
         contextReplacements.forEach(({ resourceRegExp, newResource }) => rspackPlugins.push(new core_1.rspack.ContextReplacementPlugin(resourceRegExp, newResource)));

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

@@ -1,7 +1,18 @@
 import { ManifestPluginOptions } from 'rspack-manifest-plugin';
 import type { RuleSetRule as WebpackRuleSetRule } from 'webpack';
+import { Compiler, MultiStats, rspack } from '@rspack/core';
 import type { Configuration, RuleSetRule as RspackRuleSetRule } from '@rspack/core';
 import type { Logger } from '../logger';
 export declare function clearCacheDirectory(config: Configuration, logger: Logger): void;
 export declare const generateAssetsManifest: ManifestPluginOptions['generate'];
 export declare function prepareRspackRules(webpackRules: (undefined | null | false | '' | 0 | WebpackRuleSetRule | '...')[]): (RspackRuleSetRule | '...')[];
+export declare class RspackProgressPlugin extends rspack.ProgressPlugin {
+    private _logger;
+    private _state;
+    constructor({ logger }: {
+        logger: Logger;
+    });
+    handler: (percent: number, message: string, ...details: string[]) => void;
+    apply(compiler: Compiler): void;
+}
+export declare function rspackCompilerHandlerFactory(logger: Logger, onCompilationEnd?: () => void): (err?: Error | null, stats?: MultiStats) => Promise<void>;

package/dist/common/webpack/rspack.js

@@ -26,11 +26,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.generateAssetsManifest = void 0;
+exports.RspackProgressPlugin = exports.generateAssetsManifest = void 0;
 exports.clearCacheDirectory = clearCacheDirectory;
 exports.prepareRspackRules = prepareRspackRules;
+exports.rspackCompilerHandlerFactory = rspackCompilerHandlerFactory;
+const core_1 = require("@rspack/core");
 const fs = __importStar(require("node:fs"));
 const path = __importStar(require("node:path"));
+const pretty_time_1 = require("../logger/pretty-time");
 const paths_1 = __importDefault(require("../../common/paths"));
 function clearCacheDirectory(config, logger) {
     if (!config.cache) {
@@ -64,7 +67,7 @@ const generateAssetsManifest = (seed, files, entries) => {
         };
     }, {});
     return {
-        files: manifestFiles,
+        ...manifestFiles,
         entrypoints,
     };
 };
@@ -109,3 +112,79 @@ function prepareRspackRules(webpackRules) {
     }
     return rspackRules;
 }
+class RspackProgressPlugin extends core_1.rspack.ProgressPlugin {
+    _logger;
+    _state = {};
+    constructor({ logger }) {
+        super();
+        this._logger = logger;
+    }
+    handler = (percent, message, ...details) => {
+        const progress = Math.floor(percent * 100);
+        this._logger.status(`${this._logger.colors.green(`${progress}%`)} - ${this._logger.colors.yellow(message)}${details.length > 0 ? `: ${this._logger.colors.dim(...details)}` : ''}`);
+    };
+    apply(compiler) {
+        super.apply(compiler);
+        hook(compiler, 'compile', () => {
+            this._logger.message('Start compilation');
+            this._logger.message(`rspack v${compiler.rspack.rspackVersion}`);
+            this._state.start = process.hrtime.bigint();
+        });
+        hook(compiler, 'invalid', (fileName, changeTime) => {
+            this._logger.verbose(`Invalidate file: ${fileName} at ${changeTime}`);
+        });
+        hook(compiler, 'done', (stats) => {
+            const time = this._state.start ? ' in ' + (0, pretty_time_1.elapsedTime)(this._state.start) : '';
+            const hasErrors = stats.hasErrors();
+            if (hasErrors) {
+                this._logger.error('Compiled with some errors' + time);
+            }
+            else {
+                this._logger.success('Compiled successfully' + time);
+            }
+        });
+    }
+}
+exports.RspackProgressPlugin = RspackProgressPlugin;
+function hook(compiler, hookName, callback) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    compiler.hooks[hookName].tap(`app-builder: ${hookName}`, callback);
+}
+function rspackCompilerHandlerFactory(logger, onCompilationEnd) {
+    return async (err, stats) => {
+        if (err) {
+            logger.panic(err.message, err);
+        }
+        if (stats) {
+            logger.message('Stats:\n' +
+                stats.toString({
+                    preset: 'errors-warnings',
+                    colors: process.stdout.isTTY,
+                    assets: logger.isVerbose,
+                    modules: logger.isVerbose,
+                    entrypoints: logger.isVerbose,
+                    timings: logger.isVerbose,
+                }));
+            if (stats.hasErrors()) {
+                process.exit(1);
+            }
+        }
+        if (onCompilationEnd) {
+            await onCompilationEnd();
+        }
+        const [clientStats, ssrStats] = stats?.stats ?? [];
+        if (clientStats) {
+            const { startTime = 0, endTime = 0 } = clientStats;
+            const time = endTime - startTime;
+            logger.success(`Client was successfully compiled in ${(0, pretty_time_1.prettyTime)(BigInt(time) * BigInt(1_000_000))}`);
+        }
+        if (ssrStats) {
+            const { startTime = 0, endTime = 0 } = ssrStats;
+            const time = endTime - startTime;
+            logger.success(`SSR: Client was successfully compiled in ${(0, pretty_time_1.prettyTime)(BigInt(time) * BigInt(1_000_000))}`);
+        }
+        if (!clientStats && !ssrStats) {
+            logger.success(`Client was successfully compiled`);
+        }
+    };
+}

package/dist/create-cli.d.ts

@@ -19,8 +19,8 @@ export declare function createCli(argv: string[]): {
     "lazy-compilation": boolean | undefined;
     reactProfiling: boolean | undefined;
     "react-profiling": boolean | undefined;
-    analyzeBundle: "true" | "statoscope" | undefined;
-    "analyze-bundle": "true" | "statoscope" | undefined;
+    analyzeBundle: "true" | "statoscope" | "rsdoctor" | undefined;
+    "analyze-bundle": "true" | "statoscope" | "rsdoctor" | undefined;
     disableSourceMapGeneration: boolean | undefined;
     "disable-source-map-generation": boolean | undefined;
     "debug-webpack": boolean | undefined;
@@ -47,8 +47,8 @@ export declare function createCli(argv: string[]): {
     "lazy-compilation": boolean | undefined;
     reactProfiling: boolean | undefined;
     "react-profiling": boolean | undefined;
-    analyzeBundle: "true" | "statoscope" | undefined;
-    "analyze-bundle": "true" | "statoscope" | undefined;
+    analyzeBundle: "true" | "statoscope" | "rsdoctor" | undefined;
+    "analyze-bundle": "true" | "statoscope" | "rsdoctor" | undefined;
     disableSourceMapGeneration: boolean | undefined;
     "disable-source-map-generation": boolean | undefined;
     "debug-webpack": boolean | undefined;

package/dist/create-cli.js

@@ -176,7 +176,7 @@ function createCli(argv) {
             .option('analyze-bundle', {
             group: 'Client',
             describe: 'Analyze bundle',
-            choices: ['true', 'statoscope'],
+            choices: ['true', 'statoscope', 'rsdoctor'],
         })
             .option('disable-fork-ts-checker', {
             group: 'Client',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/app-builder",
-  "version": "0.15.1-beta.1",
+  "version": "0.15.1-beta.3",
   "description": "Develop and build your React client-server projects, powered by typescript and webpack",
   "license": "MIT",
   "type": "commonjs",
@@ -70,6 +70,8 @@
     "@babel/runtime": "^7.26.0",
     "@okikio/sharedworker": "^1.0.7",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
+    "@rsdoctor/rspack-plugin": "^0.4.13",
+    "@rsdoctor/webpack-plugin": "^0.4.13",
     "@rspack/core": "^1.2.2",
     "@rspack/dev-server": "^1.0.10",
     "@rspack/plugin-react-refresh": "^1.0.0",