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

package/dist/common/webpack/node-externals.js

@@ -35,7 +35,7 @@ function nodeExternals({ noExternal = [], module }) {
     const noExternals = Array().concat(webpackInternal).concat(noExternal);
     const nodeModules = readPackagesNames(paths_1.default.appNodeModules);
     return async (data) => {
-        const { request } = data;
+        const { request, dependencyType } = data;
         if (!request) {
             return undefined;
         }
@@ -46,14 +46,14 @@ function nodeExternals({ noExternal = [], module }) {
             return undefined;
         }
         if (!module) {
-            return `commonjs ${data.request}`;
+            return `commonjs ${request}`;
         }
-        if (data.dependencyType === 'commonjs' ||
+        if (dependencyType === 'commonjs' ||
             // lodash/something without extension can't be imported so always require it
             (moduleName === 'lodash' && request.match(/^lodash\/[\w_]+($|\/[\w_]+$)/))) {
-            return `node-commonjs ${data.request}`;
+            return `node-commonjs ${request}`;
         }
-        return `module-import ${data.request}`;
+        return `module-import ${request}`;
     };
 }
 function readPackagesNames(dirName) {

package/dist/common/webpack/progress-plugin.d.ts

@@ -1,13 +1,12 @@
-import * as webpack from 'webpack';
+import webpack from 'webpack';
+import type * as Webpack from 'webpack';
 import type { Logger } from '../logger';
 export declare class ProgressPlugin extends webpack.ProgressPlugin {
     private _logger;
-    private _bundler;
     private _state;
-    constructor({ logger, bundler }: {
+    constructor({ logger }: {
         logger: Logger;
-        bundler?: string;
     });
     handler: (percent: number, message: string, ...details: string[]) => void;
-    apply(compiler: webpack.Compiler): void;
+    apply(compiler: Webpack.Compiler): void;
 }

package/dist/common/webpack/progress-plugin.js

@@ -1,39 +1,17 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ProgressPlugin = void 0;
-const webpack = __importStar(require("webpack"));
+const webpack_1 = __importDefault(require("webpack"));
 const pretty_time_1 = require("../logger/pretty-time");
-class ProgressPlugin extends webpack.ProgressPlugin {
+class ProgressPlugin extends webpack_1.default.ProgressPlugin {
     _logger;
-    _bundler;
     _state = {};
-    constructor({ logger, bundler = 'webpack' }) {
+    constructor({ logger }) {
         super();
         this._logger = logger;
-        this._bundler = bundler;
     }
     handler = (percent, message, ...details) => {
         const progress = Math.floor(percent * 100);
@@ -43,12 +21,12 @@ class ProgressPlugin extends webpack.ProgressPlugin {
         super.apply(compiler);
         hook(compiler, 'compile', () => {
             this._logger.message('Start compilation');
-            // @ts-ignore
-            const compilerVersipn = this._bundler === 'webpack'
-                ? compiler.webpack.version
-                : // @ts-ignore
-                    compiler.webpack.rspackVersion;
-            this._logger.message(`${this._bundler} v${compilerVersipn}`);
+            if ('rspackVersion' in compiler.webpack) {
+                this._logger.message(`Rspack v${compiler.webpack.rspackVersion}`);
+            }
+            else {
+                this._logger.message(`Webpack v${compiler.webpack.version}`);
+            }
             this._state.start = process.hrtime.bigint();
         });
         hook(compiler, 'invalid', (fileName, changeTime) => {

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

@@ -0,0 +1,7 @@
+import { ManifestPluginOptions } from 'rspack-manifest-plugin';
+import type { RuleSetRule as WebpackRuleSetRule } from 'webpack';
+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 | '...')[];

package/dist/common/{rspack/utils.js → webpack/rspack.js}

@@ -26,9 +26,9 @@ 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.clearCacheDirectory = clearCacheDirectory;
-exports.rspackCompilerHandlerFactory = rspackCompilerHandlerFactory;
-const pretty_time_1 = require("../logger/pretty-time");
+exports.prepareRspackRules = prepareRspackRules;
 const fs = __importStar(require("node:fs"));
 const path = __importStar(require("node:path"));
 const paths_1 = __importDefault(require("../../common/paths"));
@@ -47,35 +47,65 @@ function clearCacheDirectory(config, logger) {
         logger.message(`Rspack cache ${cacheDirectory} successfully cleared`);
     }
 }
-function rspackCompilerHandlerFactory(logger, onCompilationEnd) {
-    return async (err, stats) => {
-        if (err) {
-            logger.panic(err.message, err);
+const generateAssetsManifest = (seed, files, entries) => {
+    const manifestFiles = files.reduce((manifest, file) => {
+        manifest[file.name] = file.path;
+        return manifest;
+    }, seed);
+    const entrypoints = Object.keys(entries).reduce((previous, name) => {
+        return {
+            ...previous,
+            [name]: {
+                assets: {
+                    js: entries[name].filter((file) => file.endsWith('.js')),
+                    css: entries[name].filter((file) => file.endsWith('.css')),
+                },
+            },
+        };
+    }, {});
+    return {
+        files: manifestFiles,
+        entrypoints,
+    };
+};
+exports.generateAssetsManifest = generateAssetsManifest;
+function prepareRspackUse(webpackUse) {
+    if (typeof webpackUse === 'string') {
+        if (webpackUse === 'swc-loader') {
+            return 'builtin:swc-loader';
         }
-        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);
+        return webpackUse;
+    }
+    if (Array.isArray(webpackUse)) {
+        for (const item of webpackUse) {
+            if (item) {
+                prepareRspackUse(item);
             }
         }
-        if (onCompilationEnd) {
-            await onCompilationEnd();
+    }
+    return webpackUse;
+}
+function prepareRspackRules(webpackRules) {
+    const rspackRules = [];
+    for (const webpackRule of webpackRules) {
+        if (!webpackRule) {
+            continue;
         }
-        const [clientStats] = stats?.stats ?? [];
-        if (clientStats) {
-            const time = (clientStats.endTime || 0) - (clientStats.startTime || 0);
-            logger.success(`Client was successfully compiled in ${(0, pretty_time_1.prettyTime)(BigInt(time) * BigInt(1_000_000))}`);
+        if (typeof webpackRule === 'string') {
+            rspackRules.push(webpackRule);
+            continue;
         }
-        if (!clientStats) {
-            logger.success(`Client was successfully compiled`);
+        const rspackRule = webpackRule;
+        if (webpackRule.oneOf) {
+            rspackRule.oneOf = prepareRspackRules(webpackRule.oneOf);
         }
-    };
+        if (webpackRule.rules) {
+            rspackRule.rules = prepareRspackRules(webpackRule.rules);
+        }
+        if (webpackRule.use) {
+            rspackRule.use = prepareRspackUse(webpackRule.use);
+        }
+        rspackRules.push(rspackRule);
+    }
+    return rspackRules;
 }

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

@@ -11,7 +11,7 @@ export declare function configureWebpackConfigForStorybook(mode: Mode, userConfi
     resolve: Webpack.ResolveOptions;
     plugins: (false | "" | 0 | ((this: Webpack.Compiler, compiler: Webpack.Compiler) => void) | Webpack.WebpackPluginInstance | null | undefined)[];
     optimization: {
-        minimizer: (false | "" | 0 | Webpack.WebpackPluginInstance | "..." | ((this: Webpack.Compiler, compiler: Webpack.Compiler) => void) | null | undefined)[] | undefined;
+        minimizer: (false | "" | 0 | "..." | Webpack.WebpackPluginInstance | ((this: Webpack.Compiler, compiler: Webpack.Compiler) => void) | null | undefined)[] | undefined;
     };
 }>;
 export {};

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

@@ -1,6 +1,6 @@
-import type webpack from 'webpack';
+import type * as Webpack from 'webpack';
 import type { Logger } from '../logger';
-export declare function webpackCompilerHandlerFactory(logger: Logger, onCompilationEnd?: () => void): (err?: Error | null, stats?: webpack.MultiStats) => Promise<void>;
+export declare function webpackCompilerHandlerFactory(logger: Logger, onCompilationEnd?: () => void): (err?: Error | null, stats?: Webpack.MultiStats) => Promise<void>;
 export declare function resolveTsConfigPathsToAlias(projectPath: string, filename?: string): {
     aliases?: undefined;
     modules?: undefined;

package/dist/common/webpack/utils.js

@@ -53,11 +53,13 @@ function webpackCompilerHandlerFactory(logger, onCompilationEnd) {
         }
         const [clientStats, ssrStats] = stats?.stats ?? [];
         if (clientStats) {
-            const time = clientStats.endTime - clientStats.startTime;
+            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 time = ssrStats.endTime - ssrStats.startTime;
+            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) {

package/dist/common/webpack/worker/worker-loader.d.ts

@@ -1,2 +1,2 @@
-import webpack from 'webpack';
-export declare const pitch: webpack.PitchLoaderDefinitionFunction;
+import type * as Webpack from 'webpack';
+export declare const pitch: Webpack.PitchLoaderDefinitionFunction;

package/dist/common/webpack/worker/worker-loader.js

@@ -28,11 +28,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.pitch = void 0;
 const path = __importStar(require("node:path"));
-const webpack_1 = __importDefault(require("webpack"));
-const NodeTargetPlugin_1 = __importDefault(require("webpack/lib/node/NodeTargetPlugin"));
-const WebWorkerTemplatePlugin_1 = __importDefault(require("webpack/lib/webworker/WebWorkerTemplatePlugin"));
-const FetchCompileWasmPlugin_1 = __importDefault(require("webpack/lib/web/FetchCompileWasmPlugin"));
-const FetchCompileAsyncWasmPlugin_1 = __importDefault(require("webpack/lib/web/FetchCompileAsyncWasmPlugin"));
 const paths_1 = __importDefault(require("../../paths"));
 const pluginId = 'APP_BUILDER_WORKER_LOADER';
 const publicPath = path.resolve(__dirname, 'public-path.worker.js');
@@ -41,7 +36,7 @@ const pitch = function (request) {
     if (!this._compiler || !this._compilation) {
         throw new Error('Something went wrong');
     }
-    const compilerOptions = this._compiler.options;
+    const { options: compilerOptions, webpack } = this._compiler;
     const logger = this.getLogger(pluginId);
     if (compilerOptions.output.globalObject === 'window') {
         logger.warn('Warning (app-builder-worker-loader): output.globalObject is set to "window". It should be set to "self" or "this" to support HMR in Workers.');
@@ -59,17 +54,22 @@ const pitch = function (request) {
         devtoolNamespace: path.resolve('/', path.relative(paths_1.default.app, this.resource)),
     };
     const workerCompiler = this._compilation.createChildCompiler(`worker ${request}`, workerOptions);
-    new WebWorkerTemplatePlugin_1.default().apply(workerCompiler);
+    const { EntryPlugin, node: { NodeTargetPlugin }, web: { FetchCompileWasmPlugin, FetchCompileAsyncWasmPlugin }, webworker: { WebWorkerTemplatePlugin }, } = webpack;
+    new WebWorkerTemplatePlugin().apply(workerCompiler);
     if (this.target !== 'webworker' && this.target !== 'web') {
-        new NodeTargetPlugin_1.default().apply(workerCompiler);
+        new NodeTargetPlugin().apply(workerCompiler);
+    }
+    if (FetchCompileWasmPlugin) {
+        new FetchCompileWasmPlugin({
+            mangleImports: this._compiler.options.optimization.mangleWasmImports,
+        }).apply(workerCompiler);
+    }
+    if (FetchCompileAsyncWasmPlugin) {
+        new FetchCompileAsyncWasmPlugin().apply(workerCompiler);
     }
-    new FetchCompileWasmPlugin_1.default({
-        mangleImports: this._compiler.options.optimization.mangleWasmImports,
-    }).apply(workerCompiler);
-    new FetchCompileAsyncWasmPlugin_1.default().apply(workerCompiler);
     const bundleName = path.parse(this.resourcePath).name;
-    new webpack_1.default.EntryPlugin(this.context, `!!${publicPath}`, bundleName).apply(workerCompiler);
-    new webpack_1.default.EntryPlugin(this.context, `!!${request}`, bundleName).apply(workerCompiler);
+    new EntryPlugin(this.context, `!!${publicPath}`, bundleName).apply(workerCompiler);
+    new EntryPlugin(this.context, `!!${request}`, bundleName).apply(workerCompiler);
     configureSourceMap(workerCompiler);
     const cb = this.async();
     workerCompiler.compile((err, compilation) => {
@@ -130,10 +130,10 @@ const pitch = function (request) {
                     if ([filename, mapFile, licenseFile].includes(assetName)) {
                         continue;
                     }
-                    if (parentCompilation.assetsInfo.has(assetName)) {
+                    if (parentCompilation.getAsset(assetName)) {
                         continue;
                     }
-                    parentCompilation.emitAsset(assetName, asset, compilation.assetsInfo.get(assetName));
+                    parentCompilation.emitAsset(assetName, asset, compilation.getAsset(assetName)?.info);
                 }
             }
             return cache.store(cacheIdent, cacheETag, { content, map: map?.toString() }, (storeCacheError) => {
@@ -163,7 +163,7 @@ function configureSourceMap(compiler) {
             const inline = devtool.includes('inline');
             const cheap = devtool.includes('cheap');
             const moduleMaps = devtool.includes('module');
-            new webpack_1.default.SourceMapDevToolPlugin({
+            new compiler.webpack.SourceMapDevToolPlugin({
                 filename: inline ? null : compiler.options.output.sourceMapFilename,
                 moduleFilenameTemplate: compiler.options.output.devtoolModuleFilenameTemplate,
                 fallbackModuleFilenameTemplate: compiler.options.output.devtoolFallbackModuleFilenameTemplate,

package/dist/create-cli.d.ts

@@ -5,8 +5,8 @@ export declare function createCli(argv: string[]): {
     cdn: string | undefined;
     env: string[] | undefined;
     target: "client" | "server" | undefined;
-    inspect: number | undefined;
     c: unknown;
+    inspect: number | undefined;
     inspectBrk: number | undefined;
     "inspect-brk": number | undefined;
     entryFilter: string[] | undefined;
@@ -33,8 +33,8 @@ export declare function createCli(argv: string[]): {
     cdn: string | undefined;
     env: string[] | undefined;
     target: "client" | "server" | undefined;
-    inspect: number | undefined;
     c: unknown;
+    inspect: number | undefined;
     inspectBrk: number | undefined;
     "inspect-brk": number | undefined;
     entryFilter: string[] | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/app-builder",
-  "version": "0.14.2-beta.0",
+  "version": "0.15.1-beta.1",
   "description": "Develop and build your React client-server projects, powered by typescript and webpack",
   "license": "MIT",
   "type": "commonjs",
@@ -98,7 +98,6 @@
     "fork-ts-checker-webpack-plugin": "^9.0.2",
     "fs-extra": "^11.2.0",
     "get-port": "^7.1.0",
-    "lodash": "^4.17.21",
     "mime-types": "^2.1.35",
     "mini-css-extract-plugin": "^2.9.1",
     "moment-timezone-data-webpack-plugin": "^1.5.1",
@@ -149,7 +148,6 @@
     "@types/common-tags": "^1.8.4",
     "@types/fs-extra": "^11.0.4",
     "@types/jest": "^29.5.2",
-    "@types/lodash": "^4.17.10",
     "@types/mime-types": "^2.1.4",
     "@types/node": "^18",
     "@types/nodemon": "^1.19.6",

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

@@ -1,2 +0,0 @@
-import type { NormalizedClientConfig } from '../models';
-export declare function rspackCompile(config: NormalizedClientConfig): Promise<void>;

package/dist/common/rspack/compile.js

@@ -1,27 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.rspackCompile = rspackCompile;
-const core_1 = require("@rspack/core");
-const logger_1 = require("../logger");
-const config_1 = require("./config");
-const utils_1 = require("./utils");
-async function rspackCompile(config) {
-    const logger = new logger_1.Logger('rspack', config.verbose);
-    const rspackConfigs = [await (0, config_1.rspackConfigFactory)("production" /* RspackMode.Prod */, config, { logger })];
-    logger.verbose('Config created');
-    return new Promise((resolve) => {
-        const compiler = (0, core_1.rspack)(rspackConfigs, (0, utils_1.rspackCompilerHandlerFactory)(logger, async () => {
-            resolve();
-        }));
-        process.on('SIGINT', async () => {
-            compiler?.close(() => {
-                process.exit(1);
-            });
-        });
-        process.on('SIGTERM', async () => {
-            compiler?.close(() => {
-                process.exit(1);
-            });
-        });
-    });
-}

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

@@ -1,24 +0,0 @@
-import { Configuration, ResolveOptions, RuleSetRule } from '@rspack/core';
-import { ManifestPluginOptions } from 'rspack-manifest-plugin';
-import type { NormalizedClientConfig } from '../models';
-import type { Logger } from '../logger';
-export declare const generateManifest: ManifestPluginOptions['generate'];
-export interface HelperOptions {
-    config: NormalizedClientConfig;
-    logger?: Logger;
-    isEnvDevelopment: boolean;
-    isEnvProduction: boolean;
-    configType: `${RspackMode}`;
-}
-export declare const enum RspackMode {
-    Prod = "production",
-    Dev = "development"
-}
-export declare function rspackConfigFactory(rspackMode: RspackMode, config: NormalizedClientConfig, { logger }?: {
-    logger?: Logger;
-}): Promise<Configuration>;
-export declare function configureModuleRules(helperOptions: HelperOptions, additionalRules?: NonNullable<RuleSetRule['oneOf']>): RuleSetRule[];
-export declare function configureResolve({ isEnvProduction, config }: HelperOptions): ResolveOptions;
-type Optimization = NonNullable<Configuration['optimization']>;
-export declare function configureOptimization({ config }: HelperOptions): Optimization;
-export {};