@gravity-ui/app-builder 0.11.3 → 0.12.1

package/README.md

@@ -205,7 +205,7 @@ With this `{rootDir}/src/ui/tsconfig.json`:
   - `options` (`import('https').ServerOptions`) — allow to provide your own certificate.
 - `watchOptions` — a set of options used to customize watch mode, [more](https://webpack.js.org/configuration/watch/#watchoptions)
   - `watchPackages` (`boolean`) - watch all changes in `node_modules`.
-- `disableReactRefresh` (`boolean`) — disable `react-refresh` in dev mode.
+- `reactRefresh` (`false | (options: ReactRefreshPluginOptions) => ReactRefreshPluginOptions`) — disable or configure `react-refresh` in dev mode, [more](https://github.com/pmmmwh/react-refresh-webpack-plugin/blob/main/docs/API.md#options)
 - `detectCircularDependencies` (`true | CircularDependenciesOptions`) - detect modules with circular dependencies, [more](https://github.com/aackerman/circular-dependency-plugin)
 - `lazyCompilation` (`true | LazyCompilationConfig`) — enable experimental [lazy compilation](https://webpack.js.org/configuration/experiments/#experimentslazycompilation) feature
   - `true` — enable feature
@@ -244,8 +244,8 @@ With this `{rootDir}/src/ui/tsconfig.json`:
 
 - `monaco` (`object`) — use [monaco-editor-webpack-plugin](https://github.com/microsoft/monaco-editor/tree/main/webpack-plugin#monaco-editor-webpack-loader-plugin)
 
-  - `fileName` (`string`) — custom filename template for worker scripts
-  - `languages` (`string[]`) - include only a subset of the languages supported.
+  - `fileName` (`string`) — custom filename template for worker scripts.
+  - `languages` (`string[]`) - include only a subset of the languages supported. If you don't need support for all languages, set needed languages explicitly, since it may significantly affect build time.
   - `features` (`string[]`) - include only a subset of the editor features.
   - `customLanguages` (`IFeatureDefinition[]`) - include custom languages (outside of the ones shipped with the `monaco-editor`).
 

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

@@ -1,3 +1,3 @@
 import WebpackDevServer from 'webpack-dev-server';
 import type { NormalizedServiceConfig } from '../../common/models';
-export declare function watchClientCompilation(config: NormalizedServiceConfig, onCompilationEnd: () => void): Promise<WebpackDevServer>;
+export declare function watchClientCompilation(config: NormalizedServiceConfig, onManifestReady: () => void): Promise<WebpackDevServer>;

package/dist/commands/dev/client.js

@@ -32,13 +32,18 @@ const fs = __importStar(require("node:fs"));
 const webpack_1 = __importDefault(require("webpack"));
 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 paths_1 = __importDefault(require("../../common/paths"));
 const logger_1 = require("../../common/logger");
 const config_1 = require("../../common/webpack/config");
-async function watchClientCompilation(config, onCompilationEnd) {
+async function watchClientCompilation(config, onManifestReady) {
     const clientCompilation = await buildWebpackServer(config);
-    const { afterEmit } = (0, webpack_manifest_plugin_1.getCompilerHooks)(clientCompilation.compiler);
-    afterEmit.tap('app-builder: afterEmit', onCompilationEnd);
+    const compiler = clientCompilation.compiler;
+    if ('compilers' in compiler) {
+        throw new Error('Unexpected multi compiler');
+    }
+    subscribeToManifestReadyEvent(compiler, onManifestReady);
     return clientCompilation;
 }
 async function buildWebpackServer(config) {
@@ -124,3 +129,17 @@ async function buildWebpackServer(config) {
     }
     return server;
 }
+function subscribeToManifestReadyEvent(compiler, 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 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/common/config.js

@@ -28,6 +28,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getProjectConfig = getProjectConfig;
 exports.normalizeConfig = normalizeConfig;
+/* eslint-disable complexity */
 const path = __importStar(require("node:path"));
 const lodash_1 = __importDefault(require("lodash"));
 const cosmiconfig_1 = require("cosmiconfig");
@@ -183,6 +184,9 @@ async function normalizeClientConfig(client, mode) {
     const normalizedConfig = {
         ...client,
         forkTsChecker: client.disableForkTsChecker ? false : client.forkTsChecker,
+        reactRefresh: client.disableReactRefresh
+            ? false
+            : client.reactRefresh ?? ((options) => options),
         newJsxTransform: client.newJsxTransform ?? true,
         publicPathPrefix: client.publicPathPrefix || '',
         modules: client.modules && remapPaths(client.modules),

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

@@ -13,6 +13,7 @@ import type { SentryWebpackPluginOptions } from '@sentry/webpack-plugin';
 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';
 export interface Entities<T> {
     data: Record<string, T>;
     keys: string[];
@@ -129,9 +130,13 @@ export interface ClientConfig {
     statoscopeConfig?: Partial<StatoscopeOptions>;
     reactProfiling?: boolean;
     /**
-     *  Disable react-refresh in dev mode
+     * Disable react-refresh in dev mode
+     *
+     * @deprecated use `reactRefresh: false` instead
      */
     disableReactRefresh?: boolean;
+    /** Disable or configure react-refresh in dev mode */
+    reactRefresh?: false | ((options: ReactRefreshPluginOptions) => ReactRefreshPluginOptions);
     /**
      * Detect modules with circular dependencies
      */
@@ -213,7 +218,7 @@ export interface ServiceConfig {
     lib?: never;
     verbose?: boolean;
 }
-export type NormalizedClientConfig = Omit<ClientConfig, 'publicPathPrefix' | 'hiddenSourceMap' | 'svgr' | 'lazyCompilation' | 'devServer' | 'disableForkTsChecker'> & {
+export type NormalizedClientConfig = Omit<ClientConfig, 'publicPathPrefix' | 'hiddenSourceMap' | 'svgr' | 'lazyCompilation' | 'devServer' | 'disableForkTsChecker' | 'disableReactRefresh'> & {
     publicPathPrefix: string;
     hiddenSourceMap: boolean;
     svgr: NonNullable<ClientConfig['svgr']>;
@@ -230,6 +235,7 @@ export type NormalizedClientConfig = Omit<ClientConfig, 'publicPathPrefix' | 'hi
     babel: (config: Babel.TransformOptions, options: {
         configType: `${WebpackMode}`;
     }) => Babel.TransformOptions | Promise<Babel.TransformOptions>;
+    reactRefresh: NonNullable<ClientConfig['reactRefresh']>;
 };
 export type NormalizedServerConfig = Omit<ServerConfig, 'port' | 'inspect' | 'inspectBrk'> & {
     port?: number;

package/dist/common/utils.d.ts

@@ -4,3 +4,8 @@ export declare function getCacheDir(): Promise<string>;
 export declare function getPort({ port }: {
     port: number;
 }): Promise<number>;
+export declare function deferredPromise<T>(): {
+    promise: Promise<T | undefined>;
+    resolve: (value?: T) => void;
+    reject: (reason?: unknown) => void;
+};

package/dist/common/utils.js

@@ -7,6 +7,7 @@ exports.createRunFolder = createRunFolder;
 exports.shouldCompileTarget = shouldCompileTarget;
 exports.getCacheDir = getCacheDir;
 exports.getPort = getPort;
+exports.deferredPromise = deferredPromise;
 const node_fs_1 = __importDefault(require("node:fs"));
 const node_os_1 = __importDefault(require("node:os"));
 const paths_1 = __importDefault(require("./paths"));
@@ -27,3 +28,13 @@ async function getPort({ port }) {
     const { default: getPortDefault, portNumbers } = await import('get-port');
     return getPortDefault({ port: portNumbers(port, port + 100) });
 }
+function deferredPromise() {
+    let resolve;
+    let reject;
+    const promise = new Promise((res, rej) => {
+        resolve = res;
+        reject = rej;
+    });
+    // @ts-expect-error Promise callback executes synchronously, so resolve and reject are initialized here
+    return { promise, resolve, reject };
+}

package/dist/common/webpack/config.js

@@ -223,7 +223,7 @@ function configureOutput({ isEnvDevelopment, ...rest }) {
 }
 function createJavaScriptLoader({ isEnvProduction, isEnvDevelopment, configType, config, }) {
     const plugins = [];
-    if (isEnvDevelopment && !config.disableReactRefresh) {
+    if (isEnvDevelopment && config.reactRefresh !== false) {
         plugins.push([
             require.resolve('react-refresh/babel'),
             config.devServer?.webSocketPath
@@ -517,6 +517,7 @@ function createMomentTimezoneDataPlugin(options = {}) {
 function configurePlugins(options) {
     const { isEnvDevelopment, isEnvProduction, config } = options;
     const excludeFromClean = config.excludeFromClean || [];
+    const manifestFile = 'assets-manifest.json';
     const plugins = [
         new clean_webpack_plugin_1.CleanWebpackPlugin({
             verbose: config.verbose,
@@ -530,6 +531,16 @@ function configurePlugins(options) {
             writeToFileEmit: true,
             publicPath: '',
         }),
+        new webpack_assets_manifest_1.default(isEnvProduction
+            ? {
+                entrypoints: true,
+                output: manifestFile,
+            }
+            : {
+                entrypoints: true,
+                writeToDisk: true,
+                output: path.resolve(paths_1.default.appBuild, manifestFile),
+            }),
         createMomentTimezoneDataPlugin(config.momentTz),
         new webpack.DefinePlugin({
             'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
@@ -564,12 +575,12 @@ function configurePlugins(options) {
             publicPath: path.normalize(config.publicPathPrefix + '/build/'),
         }));
     }
-    if (isEnvDevelopment && !config.disableReactRefresh) {
+    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({
+        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 = {
@@ -628,17 +639,6 @@ function configurePlugins(options) {
             }));
         }
     }
-    const manifestFile = 'assets-manifest.json';
-    plugins.push(new webpack_assets_manifest_1.default(isEnvProduction
-        ? {
-            entrypoints: true,
-            output: manifestFile,
-        }
-        : {
-            entrypoints: true,
-            writeToDisk: true,
-            output: path.resolve(paths_1.default.appBuild, manifestFile),
-        }));
     if (config.cdn) {
         let credentialsGlobal;
         if (process.env.FRONTEND_S3_ACCESS_KEY_ID && process.env.FRONTEND_S3_SECRET_ACCESS_KEY) {

package/dist/common/webpack/storybook.js

@@ -133,8 +133,8 @@ function configurePlugins({ isEnvDevelopment, isEnvProduction, config }) {
             publicPath: '/',
         }));
     }
-    if (isEnvDevelopment && !config.disableReactRefresh) {
-        plugins.push(new react_refresh_webpack_plugin_1.default());
+    if (isEnvDevelopment && config.reactRefresh !== false) {
+        plugins.push(new react_refresh_webpack_plugin_1.default(config.reactRefresh({})));
     }
     if (isEnvProduction) {
         plugins.push(new mini_css_extract_plugin_1.default({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/app-builder",
-  "version": "0.11.3",
+  "version": "0.12.1",
   "description": "Develop and build your React client-server projects, powered by typescript and webpack",
   "license": "MIT",
   "type": "commonjs",