@gravity-ui/app-builder 0.15.0 → 0.15.1-beta.2

package/dist/commands/dev/client.d.ts

@@ -1,3 +1,4 @@
 import WebpackDevServer from 'webpack-dev-server';
+import { RspackDevServer } from '@rspack/dev-server';
 import type { NormalizedServiceConfig } from '../../common/models';
-export declare function watchClientCompilation(config: NormalizedServiceConfig, onManifestReady: () => void): Promise<WebpackDevServer<import("express").Application, import("http").Server<typeof import("http").IncomingMessage, typeof import("http").ServerResponse>>>;
+export declare function watchClientCompilation(config: NormalizedServiceConfig, onManifestReady: () => void): Promise<WebpackDevServer<import("express").Application, import("http").Server<typeof import("http").IncomingMessage, typeof import("http").ServerResponse>> | RspackDevServer>;

package/dist/commands/dev/client.js

@@ -34,9 +34,13 @@ const webpack_dev_server_1 = __importDefault(require("webpack-dev-server"));
 const webpack_manifest_plugin_1 = require("webpack-manifest-plugin");
 const webpack_assets_manifest_1 = __importDefault(require("webpack-assets-manifest"));
 const utils_1 = require("../../common/utils");
+const rspack_manifest_plugin_1 = require("rspack-manifest-plugin");
+const core_1 = require("@rspack/core");
+const dev_server_1 = require("@rspack/dev-server");
 const paths_1 = __importDefault(require("../../common/paths"));
 const logger_1 = require("../../common/logger");
 const config_1 = require("../../common/webpack/config");
+const rspack_1 = require("../../common/webpack/rspack");
 async function watchClientCompilation(config, onManifestReady) {
     const clientCompilation = await buildDevServer(config);
     const compiler = clientCompilation.compiler;
@@ -44,19 +48,42 @@ async function watchClientCompilation(config, onManifestReady) {
     return clientCompilation;
 }
 async function buildDevServer(config) {
+    const bundler = config.client.bundler;
     const logger = new logger_1.Logger('client', 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 webpackConfigs = [
-        await (0, config_1.webpackConfigFactory)("development" /* WebpackMode.Dev */, normalizedConfig, { logger }),
-    ];
     const isSsr = Boolean(normalizedConfig.ssr);
-    if (isSsr) {
-        const ssrLogger = new logger_1.Logger('client(SSR)', config.verbose);
-        webpackConfigs.push(await (0, config_1.webpackConfigFactory)("development" /* WebpackMode.Dev */, normalizedConfig, {
-            logger: ssrLogger,
-            isSsr,
-        }));
+    let webpackConfigs = [];
+    let rspackConfigs = [];
+    if (bundler === 'webpack') {
+        webpackConfigs = [
+            await (0, config_1.webpackConfigFactory)({
+                webpackMode: "development" /* WebpackMode.Dev */,
+                config: normalizedConfig,
+                logger,
+            }),
+        ];
+        if (isSsr) {
+            const ssrLogger = new logger_1.Logger('webpack(SSR)', config.verbose);
+            webpackConfigs.push(await (0, config_1.webpackConfigFactory)({
+                webpackMode: "development" /* WebpackMode.Dev */,
+                config: normalizedConfig,
+                logger: ssrLogger,
+                isSsr,
+            }));
+        }
+    }
+    else {
+        if (isSsr) {
+            throw new Error(`SSR is not supported in ${bundler}`);
+        }
+        rspackConfigs = [
+            await (0, config_1.rspackConfigFactory)({
+                webpackMode: "development" /* WebpackMode.Dev */,
+                config: normalizedConfig,
+                logger,
+            }),
+        ];
     }
     const publicPath = path.normalize(config.client.publicPathPrefix + '/build/');
     const staticFolder = path.resolve(paths_1.default.appDist, 'public');
@@ -134,41 +161,60 @@ async function buildDevServer(config) {
         });
     }
     options.proxy = proxy;
-    const compiler = (0, webpack_1.default)(webpackConfigs);
-    const server = new webpack_dev_server_1.default(options, compiler);
+    let server;
+    if (bundler === 'rspack') {
+        // Rspack multicompiler dont work with lazy compilation
+        const compiler = (0, core_1.rspack)(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);
+    }
+    else {
+        const compiler = (0, webpack_1.default)(webpackConfigs);
+        server = new webpack_dev_server_1.default(options, compiler);
+    }
     try {
         await server.start();
     }
     catch (e) {
-        logger.logError('Cannot start webpack dev server', e);
+        logger.logError(`Cannot start ${bundler} dev server`, e);
     }
     if (options.ipc && typeof options.ipc === 'string') {
         fs.chmod(options.ipc, 0o666, (e) => logger.logError('', e));
     }
     return server;
 }
-function subscribeToManifestReadyEvent(webpackCompiler, onManifestReady) {
+function isRspackCompiler(compiler) {
+    return 'rspack' in compiler;
+}
+function subscribeToManifestReadyEvent(compiler, onManifestReady) {
     const promises = [];
-    const options = Array.isArray(webpackCompiler.options)
-        ? webpackCompiler.options
-        : [webpackCompiler.options];
-    const compilers = 'compilers' in webpackCompiler ? webpackCompiler.compilers : [webpackCompiler];
+    const options = Array.isArray(compiler.options) ? compiler.options : [compiler.options];
+    const compilers = 'compilers' in compiler ? compiler.compilers : [compiler];
     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);
+        if (!isRspackCompiler(compiler)) {
+            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);
+        if (isRspackCompiler(compiler)) {
+            const { afterEmit } = (0, rspack_manifest_plugin_1.getCompilerHooks)(compiler);
+            afterEmit.tap('app-builder', manifestReady.resolve);
+        }
+        else {
+            const { afterEmit } = (0, webpack_manifest_plugin_1.getCompilerHooks)(compiler);
+            afterEmit.tap('app-builder', manifestReady.resolve);
+        }
     }
     Promise.all(promises).then(() => onManifestReady());
 }

package/dist/common/config.js

@@ -197,9 +197,11 @@ async function normalizeClientConfig(client, mode) {
         svgr: client.svgr ?? {},
         entryFilter: client.entryFilter && splitPaths(client.entryFilter),
         webpack: typeof client.webpack === 'function' ? client.webpack : (config) => config,
+        rspack: typeof client.rspack === 'function' ? client.rspack : (config) => config,
         babel: typeof client.babel === 'function' ? client.babel : (config) => config,
         devServer: undefined,
         lazyCompilation: undefined,
+        bundler: client.bundler || 'webpack',
     };
     if (mode === 'dev') {
         if (client.lazyCompilation) {

package/dist/common/library/index.js

@@ -129,6 +129,7 @@ function compileStyles(inputDir, outputDir, onFinish, additionalGlobs = []) {
                 const sassTransformed = sass_1.default.compile(scssFile, {
                     sourceMap: true,
                     sourceMapIncludeSources: true,
+                    silenceDeprecations: ['legacy-js-api'],
                     importers: [
                         {
                             findFileUrl(url) {

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

@@ -3,6 +3,7 @@ import type { EditorFeature } from 'monaco-editor-webpack-plugin/out/features';
 import type { IFeatureDefinition } from 'monaco-editor-webpack-plugin/out/types';
 import type { Options as MomentTzOptions } from 'moment-timezone-data-webpack-plugin';
 import type { Configuration, DefinePlugin, FileCacheOptions, MemoryCacheOptions, ResolveOptions } from 'webpack';
+import type { Configuration as RspackConfiguration } from '@rspack/core';
 import type * as Babel from '@babel/core';
 import type { ServerConfiguration } from 'webpack-dev-server';
 import type { Options as CircularDependenciesOptions } from 'circular-dependency-plugin';
@@ -14,6 +15,7 @@ import type { WebpackMode } from '../webpack/config';
 import type { UploadOptions } from '../s3-upload/upload';
 import type { TerserOptions } from 'terser-webpack-plugin';
 import type { ReactRefreshPluginOptions } from '@pmmmwh/react-refresh-webpack-plugin/types/lib/types';
+type Bundler = 'webpack' | 'rspack';
 export interface Entities<T> {
     data: Record<string, T>;
     keys: string[];
@@ -126,7 +128,7 @@ export interface ClientConfig {
     svgr?: SvgrConfig;
     entryFilter?: string[];
     excludeFromClean?: string[];
-    analyzeBundle?: 'true' | 'statoscope';
+    analyzeBundle?: 'true' | 'statoscope' | 'rsdoctor';
     statoscopeConfig?: Partial<StatoscopeOptions>;
     reactProfiling?: boolean;
     /**
@@ -182,6 +184,13 @@ export interface ClientConfig {
         configType: `${WebpackMode}`;
         isSsr?: boolean;
     }) => Configuration | Promise<Configuration>;
+    /**
+     * Modify or return a custom Rspack config.
+     */
+    rspack?: (config: RspackConfiguration, options: {
+        configType: `${WebpackMode}`;
+        isSsr?: boolean;
+    }) => RspackConfiguration | Promise<RspackConfiguration>;
     /**
      * Modify or return a custom Babel config.
      */
@@ -197,6 +206,7 @@ export interface ClientConfig {
         noExternal?: string | RegExp | (string | RegExp)[] | true;
         moduleType?: 'commonjs' | 'esm';
     };
+    bundler?: Bundler;
 }
 export interface CdnUploadConfig {
     bucket: string;
@@ -225,6 +235,7 @@ export interface ServiceConfig {
     verbose?: boolean;
 }
 export type NormalizedClientConfig = Omit<ClientConfig, 'publicPathPrefix' | 'hiddenSourceMap' | 'svgr' | 'lazyCompilation' | 'devServer' | 'disableForkTsChecker' | 'disableReactRefresh'> & {
+    bundler: Bundler;
     publicPathPrefix: string;
     hiddenSourceMap: boolean;
     svgr: NonNullable<ClientConfig['svgr']>;
@@ -238,6 +249,9 @@ export type NormalizedClientConfig = Omit<ClientConfig, 'publicPathPrefix' | 'hi
         configType: `${WebpackMode}`;
         isSsr: boolean;
     }) => Configuration | Promise<Configuration>;
+    rspack: (config: RspackConfiguration, options: {
+        configType: `${WebpackMode}`;
+    }) => RspackConfiguration | Promise<RspackConfiguration>;
     debugWebpack?: boolean;
     babel: (config: Babel.TransformOptions, options: {
         configType: `${WebpackMode}`;

package/dist/common/s3-upload/create-plugin.d.ts

@@ -0,0 +1,3 @@
+import { NormalizedClientConfig } from '../models';
+import type { Logger } from '../logger';
+export declare function createS3UploadPlugins(config: NormalizedClientConfig, logger?: Logger): (false | "" | 0 | ((this: import("webpack").Compiler, compiler: import("webpack").Compiler) => void) | import("webpack").WebpackPluginInstance | null)[];

package/dist/common/s3-upload/create-plugin.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createS3UploadPlugins = createS3UploadPlugins;
+const webpack_plugin_1 = require("./webpack-plugin");
+function createS3UploadPlugins(config, logger) {
+    const plugins = [];
+    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,
+        };
+    }
+    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 webpack_plugin_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,
+        }));
+    }
+    return plugins;
+}

package/dist/common/s3-upload/index.d.ts

@@ -1,3 +1,4 @@
 export { S3UploadPlugin } from './webpack-plugin';
 export { uploadFiles } from './upload';
+export { createS3UploadPlugins } from './create-plugin';
 export type { UploadFilesOptions } from './upload';

package/dist/common/s3-upload/index.js

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.uploadFiles = exports.S3UploadPlugin = void 0;
+exports.createS3UploadPlugins = exports.uploadFiles = exports.S3UploadPlugin = void 0;
 var webpack_plugin_1 = require("./webpack-plugin");
 Object.defineProperty(exports, "S3UploadPlugin", { enumerable: true, get: function () { return webpack_plugin_1.S3UploadPlugin; } });
 var upload_1 = require("./upload");
 Object.defineProperty(exports, "uploadFiles", { enumerable: true, get: function () { return upload_1.uploadFiles; } });
+var create_plugin_1 = require("./create-plugin");
+Object.defineProperty(exports, "createS3UploadPlugins", { enumerable: true, get: function () { return create_plugin_1.createS3UploadPlugins; } });

package/dist/common/webpack/compile.js

@@ -5,29 +5,56 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.clientCompile = clientCompile;
 const webpack_1 = __importDefault(require("webpack"));
+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 = [await (0, config_1.webpackConfigFactory)("production" /* WebpackMode.Prod */, config, { logger })];
+    const webpackConfigs = [];
+    const rspackConfigs = [];
     const isSsr = Boolean(config.ssr);
-    if (isSsr) {
-        const ssrLogger = new logger_1.Logger('client(SSR)', config.verbose);
-        webpackConfigs.push(await (0, config_1.webpackConfigFactory)("production" /* WebpackMode.Prod */, config, { logger: ssrLogger, isSsr }));
+    if (config.bundler === 'rspack') {
+        rspackConfigs.push(await (0, config_1.rspackConfigFactory)({ webpackMode: "production" /* WebpackMode.Prod */, config, logger }));
+        if (isSsr) {
+            const ssrLogger = new logger_1.Logger('client(SSR)', config.verbose);
+            rspackConfigs.push(await (0, config_1.rspackConfigFactory)({
+                webpackMode: "production" /* WebpackMode.Prod */,
+                config,
+                logger: ssrLogger,
+                isSsr,
+            }));
+        }
+    }
+    else {
+        webpackConfigs.push(await (0, config_1.webpackConfigFactory)({ webpackMode: "production" /* WebpackMode.Prod */, config, logger }));
+        if (isSsr) {
+            const ssrLogger = new logger_1.Logger('client(SSR)', config.verbose);
+            webpackConfigs.push(await (0, config_1.webpackConfigFactory)({
+                webpackMode: "production" /* WebpackMode.Prod */,
+                config,
+                logger: ssrLogger,
+                isSsr,
+            }));
+        }
     }
     logger.verbose('Config created');
     return new Promise((resolve) => {
-        const compiler = (0, webpack_1.default)(webpackConfigs, (0, utils_1.webpackCompilerHandlerFactory)(logger, async () => {
-            resolve();
-        }));
+        const compiler = config.bundler === 'rspack'
+            ? (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.d.ts

@@ -1,4 +1,5 @@
 import * as webpack from 'webpack';
+import { Configuration as RspackConfiguration } from '@rspack/core';
 import type { NormalizedClientConfig } from '../models';
 import type { Logger } from '../logger';
 export interface HelperOptions {
@@ -15,12 +16,16 @@ export declare const enum WebpackMode {
     Prod = "production",
     Dev = "development"
 }
-export declare function webpackConfigFactory(webpackMode: WebpackMode, config: NormalizedClientConfig, { logger, isSsr }?: {
+type ClientFactoryOptions = {
+    webpackMode: WebpackMode;
+    config: NormalizedClientConfig;
     logger?: Logger;
     isSsr?: boolean;
-}): Promise<webpack.Configuration>;
+};
+export declare function webpackConfigFactory(options: ClientFactoryOptions): Promise<webpack.Configuration>;
+export declare function rspackConfigFactory(options: ClientFactoryOptions): Promise<RspackConfiguration>;
 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, isSsr }: HelperOptions): Optimization;
+export declare function configureOptimization(helperOptions: HelperOptions): Optimization;
 export {};