@gravity-ui/app-builder 0.7.0 → 0.8.0

package/README.md

@@ -192,6 +192,8 @@ With this `{rootDir}/src/ui/tsconfig.json`:
 - `forkTsCheker` (`false | ForkTsCheckerWebpackPluginOptions`) - config for ForkTsCheckerWebpackPlugin [more](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin#options). If `false`, ForkTsCheckerWebpackPlugin will be disabled.
 - `cache` (`boolean | FileCacheOptions | MemoryCacheOptions`) — Cache the generated webpack modules and chunks to improve build speed. [more](https://webpack.js.org/configuration/cache/)
 - `babelCacheDirectory` (`boolean | string`) — Set directory for babel-loader cache (`default: node_modules/.cache/babel-loader``)
+- `babel` (`(config: babel.TransformOptions, options: {configType: 'development' | 'production'}) => babel.TransformOptions | Promise<babel.TransformOptions>`) - Allow override the default babel transform options.
+- `webpack` (`(config: webpack.Configuration, options: {configType: 'development' | 'production'}) => webpack.Configuration | Promise<webpack.Configuration>`) - Allow override the default configuration.
 
 ##### Dev build
 

package/dist/commands/dev/client.js

@@ -46,7 +46,7 @@ async function buildWebpackServer(config) {
     const logger = new logger_1.Logger('webpack', config.verbose);
     const { webSocketPath = path.normalize(`/${config.client.publicPathPrefix}/build/sockjs-node`), ...devServer } = config.client.devServer || {};
     const normalizedConfig = { ...config.client, devServer: { ...devServer, webSocketPath } };
-    const webpackConfig = (0, config_1.webpackConfigFactory)("development" /* WebpackMode.Dev */, normalizedConfig, { logger });
+    const webpackConfig = await (0, config_1.webpackConfigFactory)("development" /* WebpackMode.Dev */, normalizedConfig, { logger });
     const options = {
         static: path.resolve(paths_1.default.appDist, 'public'),
         devMiddleware: {

package/dist/common/babel/ui-preset.js

@@ -16,6 +16,17 @@ module.exports = function (_context, options = {}) {
     const isTypeScriptEnabled = getOption(options.typescript, false);
     const reactOptions = getOption(options.react, {});
     const presets = [
+        [
+            () => ({
+                /**
+                 * Safari 15 has a buggy implementation of class properties,
+                 * but @babel/compat-data marks it as stable.
+                 * Can be removed once the issue is fixed and released.
+                 * @see https://github.com/babel/babel/issues/14289
+                 */
+                plugins: [require.resolve('@babel/plugin-transform-class-properties')],
+            }),
+        ],
         // Latest stable ECMAScript features
         (isEnvDevelopment || isEnvProduction) && [require.resolve('@babel/preset-env'), envOptions],
         // ES features necessary for current Node version
@@ -46,13 +57,6 @@ module.exports = function (_context, options = {}) {
     const plugins = [
         // Polyfills the runtime needed for async/await and generators
         [require.resolve('@babel/plugin-transform-runtime'), runtimeOptions],
-        /**
-         * Safari 15 has a buggy implementation of class properties,
-         * but @babel/compat-data marks it as stable.
-         * Can be removed once the issue is fixed and released.
-         * @see https://github.com/babel/babel/issues/14289
-         */
-        [require.resolve('@babel/plugin-transform-class-properties')],
         isEnvProduction && [
             require.resolve('babel-plugin-transform-react-remove-prop-types'),
             {

package/dist/common/config.js

@@ -129,6 +129,7 @@ async function getProjectConfig(command, { env, storybook, ...argv }) {
             ...config.client,
             ...omitUndefined(client),
             ...(argv.cdn === 'false' ? { cdn: undefined } : undefined),
+            ...(argv.debugWebpack ? { debugWebpack: argv.debugWebpack } : undefined),
         },
         server: {
             ...config.server,
@@ -168,6 +169,8 @@ async function normalizeClientConfig(client, mode) {
     client.hiddenSourceMap = client.hiddenSourceMap ?? true;
     client.svgr = client.svgr ?? {};
     client.entryFilter = client.entryFilter && splitPaths(client.entryFilter);
+    client.webpack = typeof client.webpack === 'function' ? client.webpack : (config) => config;
+    client.babel = typeof client.babel === 'function' ? client.babel : (config) => config;
     if (mode === 'dev') {
         if (client.lazyCompilation) {
             if (client.lazyCompilation === true) {

package/dist/common/library/index.js

@@ -75,6 +75,7 @@ function compileToCjs(code, file, inputSourceMap, sourceDir = paths_1.default.sr
     fs.mkdirSync(compiledCjsDir, { recursive: true });
     babel.transform(code, {
         babelrc: false,
+        configFile: false,
         filename: sourceFile,
         plugins: [
             require.resolve('@babel/plugin-transform-modules-commonjs'),
@@ -194,6 +195,7 @@ function buildLibrary(config) {
         fs.mkdirSync(compiledDir, { recursive: true });
         babel.transform(source, {
             babelrc: false,
+            configFile: false,
             filename: sourceFile,
             presets: [(0, babel_1.babelPreset)(config.lib)],
             plugins: [
@@ -287,6 +289,7 @@ function buildLibrary(config) {
                 });
                 babel.transform(component, {
                     babelrc: false,
+                    configFile: false,
                     filename: iconFile,
                     presets: [(0, babel_1.babelPreset)(config.lib)],
                     sourceMaps: true,

package/dist/common/logger/log-config.d.ts

@@ -0,0 +1 @@
+export declare function logConfig(caption: string, config: unknown): void;

package/dist/common/logger/log-config.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.logConfig = void 0;
+const colors_1 = require("./colors");
+function logConfig(caption, config) {
+    console.log(colors_1.colors.cyan(caption));
+    console.dir(config, { depth: Infinity });
+}
+exports.logConfig = logConfig;

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

@@ -3,12 +3,14 @@ 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 * as Babel from '@babel/core';
 import type { ServerConfiguration } from 'webpack-dev-server';
 import type { Options as CircularDependenciesOptions } from 'circular-dependency-plugin';
 import type { Config as SvgrConfig } from '@svgr/core';
 import type { ForkTsCheckerWebpackPluginOptions } from 'fork-ts-checker-webpack-plugin/lib/plugin-options';
 import type { Options as StatoscopeOptions } from '@statoscope/webpack-plugin';
 import type { SentryWebpackPluginOptions } from '@sentry/webpack-plugin';
+import type { WebpackMode } from '../webpack/config';
 export interface Entities<T> {
     data: Record<string, T>;
     keys: string[];
@@ -171,6 +173,18 @@ export interface ClientConfig {
     /** Use [Lighting CSS](https://lightningcss.dev) to transform and minimize css instead of PostCSS and cssnano*/
     transformCssWithLightningCss?: boolean;
     sentryConfig?: SentryWebpackPluginOptions;
+    /**
+     * Modify or return a custom Webpack config.
+     */
+    webpack?: (config: Configuration, options: {
+        configType: `${WebpackMode}`;
+    }) => Configuration | Promise<Configuration>;
+    /**
+     * Modify or return a custom Babel config.
+     */
+    babel?: (config: Babel.TransformOptions, options: {
+        configType: `${WebpackMode}`;
+    }) => Babel.TransformOptions | Promise<Babel.TransformOptions>;
 }
 interface CdnUploadConfig {
     bucket: string;
@@ -207,6 +221,13 @@ export type NormalizedClientConfig = Omit<ClientConfig, 'publicPathPrefix' | 'hi
         server: ServerConfiguration;
     };
     verbose?: boolean;
+    webpack: (config: Configuration, options: {
+        configType: `${WebpackMode}`;
+    }) => Configuration | Promise<Configuration>;
+    debugWebpack?: boolean;
+    babel: (config: Babel.TransformOptions, options: {
+        configType: `${WebpackMode}`;
+    }) => Babel.TransformOptions | Promise<Babel.TransformOptions>;
 };
 export type NormalizedServerConfig = Omit<ServerConfig, 'serverPort'> & {
     serverPort?: number;

package/dist/common/webpack/compile.js

@@ -8,11 +8,11 @@ const webpack_1 = __importDefault(require("webpack"));
 const logger_1 = require("../logger");
 const config_1 = require("./config");
 const utils_1 = require("./utils");
-function webpackCompile(config) {
+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 });
+    logger.verbose('Config created');
     return new Promise((resolve) => {
-        const webpackConfig = (0, config_1.webpackConfigFactory)("production" /* WebpackMode.Prod */, config, { logger });
-        logger.verbose('Config created');
         const compiler = (0, webpack_1.default)(webpackConfig, (0, utils_1.webpackCompilerHandlerFactory)(logger, async () => {
             resolve();
         }));

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

@@ -6,6 +6,7 @@ export interface HelperOptions {
     logger?: Logger;
     isEnvDevelopment: boolean;
     isEnvProduction: boolean;
+    configType: `${WebpackMode}`;
     updateIncludes?: (values: string[], options?: {
         includeRootAssets?: boolean;
         includeRootStyles?: boolean;
@@ -18,6 +19,6 @@ export declare const enum WebpackMode {
 }
 export declare function webpackConfigFactory(webpackMode: WebpackMode, config: NormalizedClientConfig, { logger }?: {
     logger?: Logger;
-}): webpack.Configuration;
+}): Promise<webpack.Configuration>;
 export declare function configureModuleRules(helperOptions: HelperOptions): webpack.RuleSetRule[];
 export declare function configureResolve({ isEnvProduction, config, tsLinkedPackages, }: HelperOptions): webpack.ResolveOptions;

package/dist/common/webpack/config.js

@@ -49,9 +49,10 @@ const babel_1 = require("../babel");
 const progress_plugin_1 = require("./progress-plugin");
 const utils_1 = require("./utils");
 const s3_upload_1 = require("../s3-upload");
+const log_config_1 = require("../logger/log-config");
 const imagesSizeLimit = 2048;
 const fontSizeLimit = 8192;
-function webpackConfigFactory(webpackMode, config, { logger } = {}) {
+async function webpackConfigFactory(webpackMode, config, { logger } = {}) {
     const isEnvDevelopment = webpackMode === "development" /* WebpackMode.Dev */;
     const isEnvProduction = webpackMode === "production" /* WebpackMode.Prod */;
     const { updateIncludes, tsLinkedPackages } = updateIncludesFactory();
@@ -62,8 +63,9 @@ function webpackConfigFactory(webpackMode, config, { logger } = {}) {
         isEnvProduction,
         updateIncludes,
         tsLinkedPackages,
+        configType: webpackMode,
     };
-    return {
+    let webpackConfig = {
         mode: webpackMode,
         context: paths_1.default.app,
         bail: isEnvProduction,
@@ -92,6 +94,11 @@ function webpackConfigFactory(webpackMode, config, { logger } = {}) {
         },
         cache: config.cache,
     };
+    webpackConfig = await config.webpack(webpackConfig, { configType: webpackMode });
+    if (config.debugWebpack) {
+        (0, log_config_1.logConfig)('Preview webpack config', webpackConfig);
+    }
+    return webpackConfig;
 }
 exports.webpackConfigFactory = webpackConfigFactory;
 function configureModuleRules(helperOptions) {
@@ -253,35 +260,41 @@ function configureOutput({ isEnvDevelopment, ...rest }) {
         pathinfo: isEnvDevelopment,
     };
 }
-function createJavaScriptLoader({ isEnvProduction, isEnvDevelopment, config, }) {
+function createJavaScriptLoader({ isEnvProduction, isEnvDevelopment, configType, config, }) {
+    const plugins = [];
+    if (isEnvDevelopment && !config.disableReactRefresh) {
+        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)],
+        plugins,
+    }, { configType });
     return {
         loader: require.resolve('babel-loader'),
         options: {
+            sourceType: 'unambiguous',
+            ...transformOptions,
             babelrc: false,
             configFile: false,
-            presets: [(0, babel_1.babelPreset)(config)],
-            plugins: [
-                isEnvDevelopment &&
-                    !config.disableReactRefresh && [
-                    require.resolve('react-refresh/babel'),
-                    config.devServer?.webSocketPath
-                        ? {
-                            overlay: {
-                                sockPath: config.devServer.webSocketPath,
-                            },
-                        }
-                        : undefined,
-                ],
-                isEnvProduction && [
-                    require.resolve('babel-plugin-import'),
-                    { libraryName: 'lodash', libraryDirectory: '', camel2DashComponentName: false },
-                ],
-            ].filter(Boolean),
-            sourceType: 'unambiguous',
-            cacheDirectory: config.babelCacheDirectory ? config.babelCacheDirectory : true,
-            cacheCompression: isEnvProduction,
             compact: isEnvProduction,
-            sourceMap: !config.disableSourceMapGeneration,
+            sourceMaps: !config.disableSourceMapGeneration,
+            cacheCompression: isEnvProduction,
+            cacheDirectory: config.babelCacheDirectory ? config.babelCacheDirectory : true,
         },
     };
 }
@@ -333,16 +346,12 @@ function createWorkerRule(options) {
         ],
     };
 }
-function createSassStylesRule({ isEnvDevelopment, isEnvProduction, config, }) {
-    const loaders = getCssLoaders({
-        isEnvDevelopment,
-        isEnvProduction,
-        config,
-    });
+function createSassStylesRule(options) {
+    const loaders = getCssLoaders(options);
     loaders.push({
         loader: require.resolve('resolve-url-loader'),
         options: {
-            sourceMap: !config.disableSourceMapGeneration,
+            sourceMap: !options.config.disableSourceMapGeneration,
         },
     });
     loaders.push({
@@ -356,19 +365,15 @@ function createSassStylesRule({ isEnvDevelopment, isEnvProduction, config, }) {
     });
     return {
         test: /\.scss$/,
-        sideEffects: isEnvProduction ? true : undefined,
+        sideEffects: options.isEnvProduction ? true : undefined,
         use: loaders,
     };
 }
-function createStylesRule({ isEnvDevelopment, isEnvProduction, config, }) {
-    const loaders = getCssLoaders({
-        isEnvDevelopment,
-        isEnvProduction,
-        config,
-    });
+function createStylesRule(options) {
+    const loaders = getCssLoaders(options);
     return {
         test: /\.css$/,
-        sideEffects: isEnvProduction ? true : undefined,
+        sideEffects: options.isEnvProduction ? true : undefined,
         use: loaders,
     };
 }

package/dist/common/webpack/storybook.js

@@ -88,6 +88,7 @@ async function configureWebpackConfigForStorybook(mode, userConfig = {}) {
         isEnvDevelopment,
         isEnvProduction,
         config: config.client,
+        configType: mode,
     };
     return {
         module: {

package/dist/create-cli.d.ts

@@ -3,13 +3,16 @@ export declare function createCli(argv: string[]): {
     [x: string]: unknown;
     verbose: boolean | undefined;
     c: unknown;
-    inspect: number | undefined;
-    target: "client" | "server" | undefined;
+    cdn: string | undefined;
     env: string[] | undefined;
+    target: "client" | "server" | undefined;
+    inspect: number | undefined;
     inspectBrk: number | undefined;
     "inspect-brk": number | undefined;
     entryFilter: string[] | undefined;
     "entry-filter": string[] | undefined;
+    disableForkTsChecker: boolean | undefined;
+    "disable-fork-ts-checker": boolean | undefined;
     disableReactRefresh: boolean | undefined;
     "disable-react-refresh": boolean | undefined;
     lazyCompilation: boolean | undefined;
@@ -18,24 +21,26 @@ export declare function createCli(argv: string[]): {
     "react-profiling": boolean | undefined;
     analyzeBundle: "true" | "statoscope" | undefined;
     "analyze-bundle": "true" | "statoscope" | undefined;
-    disableForkTsChecker: boolean | undefined;
-    "disable-fork-ts-checker": boolean | undefined;
     disableSourceMapGeneration: boolean | undefined;
     "disable-source-map-generation": boolean | undefined;
-    cdn: string | undefined;
+    "debug-webpack": boolean | undefined;
+    debugWebpack: boolean | undefined;
     _: (string | number)[];
     $0: string;
 } | Promise<{
     [x: string]: unknown;
     verbose: boolean | undefined;
     c: unknown;
-    inspect: number | undefined;
-    target: "client" | "server" | undefined;
+    cdn: string | undefined;
     env: string[] | undefined;
+    target: "client" | "server" | undefined;
+    inspect: number | undefined;
     inspectBrk: number | undefined;
     "inspect-brk": number | undefined;
     entryFilter: string[] | undefined;
     "entry-filter": string[] | undefined;
+    disableForkTsChecker: boolean | undefined;
+    "disable-fork-ts-checker": boolean | undefined;
     disableReactRefresh: boolean | undefined;
     "disable-react-refresh": boolean | undefined;
     lazyCompilation: boolean | undefined;
@@ -44,11 +49,10 @@ export declare function createCli(argv: string[]): {
     "react-profiling": boolean | undefined;
     analyzeBundle: "true" | "statoscope" | undefined;
     "analyze-bundle": "true" | "statoscope" | undefined;
-    disableForkTsChecker: boolean | undefined;
-    "disable-fork-ts-checker": boolean | undefined;
     disableSourceMapGeneration: boolean | undefined;
     "disable-source-map-generation": boolean | undefined;
-    cdn: string | undefined;
+    "debug-webpack": boolean | undefined;
+    debugWebpack: boolean | undefined;
     _: (string | number)[];
     $0: string;
 }>;

package/dist/create-cli.js

@@ -136,6 +136,11 @@ function createCli(argv) {
             group: 'Client',
             type: 'boolean',
             describe: 'Enable lazy compilation',
+        })
+            .option('debug-webpack', {
+            group: 'Client',
+            type: 'boolean',
+            describe: 'Display final webpack configurations for debugging purposes',
         }),
         handler: handlerP(getCommandHandler('dev', (args, cmd) => {
             if ((0, models_1.isLibraryConfig)(args)) {
@@ -194,6 +199,11 @@ function createCli(argv) {
             group: 'Client',
             describe: 'Disable upload files to CDN [false]',
             type: 'string',
+        })
+            .option('debug-webpack', {
+            group: 'Client',
+            type: 'boolean',
+            describe: 'Display final webpack configurations for debugging purposes',
         }),
         handler: handlerP(getCommandHandler('build')),
     })

package/dist/index.d.ts

@@ -2,4 +2,5 @@ export { configureWebpackConfigForStorybook, configureServiceWebpackConfig, } fr
 export * from './common/s3-upload';
 export { createTransformPathsToLocalModules } from './common/typescript/transformers';
 export { defineConfig } from './common/models';
+export { babelPreset } from './common/babel';
 export type { ProjectConfig, ServiceConfig, LibraryConfig, ProjectFileConfig } from './common/models';

package/dist/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.defineConfig = exports.createTransformPathsToLocalModules = exports.configureServiceWebpackConfig = exports.configureWebpackConfigForStorybook = void 0;
+exports.babelPreset = exports.defineConfig = exports.createTransformPathsToLocalModules = exports.configureServiceWebpackConfig = exports.configureWebpackConfigForStorybook = void 0;
 var storybook_1 = require("./common/webpack/storybook");
 Object.defineProperty(exports, "configureWebpackConfigForStorybook", { enumerable: true, get: function () { return storybook_1.configureWebpackConfigForStorybook; } });
 Object.defineProperty(exports, "configureServiceWebpackConfig", { enumerable: true, get: function () { return storybook_1.configureServiceWebpackConfig; } });
@@ -23,3 +23,5 @@ var transformers_1 = require("./common/typescript/transformers");
 Object.defineProperty(exports, "createTransformPathsToLocalModules", { enumerable: true, get: function () { return transformers_1.createTransformPathsToLocalModules; } });
 var models_1 = require("./common/models");
 Object.defineProperty(exports, "defineConfig", { enumerable: true, get: function () { return models_1.defineConfig; } });
+var babel_1 = require("./common/babel");
+Object.defineProperty(exports, "babelPreset", { enumerable: true, get: function () { return babel_1.babelPreset; } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/app-builder",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Develop and build your React client-server projects, powered by typescript and webpack",
   "license": "MIT",
   "type": "commonjs",
@@ -60,7 +60,6 @@
     "@aws-sdk/client-s3": "^3.353.0",
     "@babel/core": "^7.22.0",
     "@babel/helper-plugin-utils": "^7.22.5",
-    "@babel/plugin-proposal-decorators": "^7.22.0",
     "@babel/plugin-transform-class-properties": "^7.22.5",
     "@babel/plugin-transform-dynamic-import": "^7.22.0",
     "@babel/plugin-transform-modules-commonjs": "^7.22.0",