@gravity-ui/app-builder 0.22.0 → 0.23.1-beta.0

package/README.md

@@ -177,6 +177,9 @@ With this `{rootDir}/src/ui/tsconfig.json`:
 - `icons` (`string[]`) — Additional paths for svg icons. By default, all svgs with paths including `icons/` will be processed.
   Example: `icons: [node_modules/@fortawesome/fontawesome-pro/svgs]`
 - `publicPathPrefix` (`string`) — publicPath prefix, will be added to `/build/`
+- `publicPath` (`string`) — publicPath for bundler, this option has higher priority than publicPathPrefix
+- `outputPath` (`string`) — Build directory for output, default: `dist/public/build` and `dist/ssr` - for SSR
+- `assetsManifestFile` (`string`) — File name for assets manifest, default: `assets-manifest.json`
 - `symlinks` (`boolean`) — Follow symbolic links while looking for a file. [more](https://webpack.js.org/configuration/resolve/#resolvesymlinks)
 - `externals` — specify dependencies that shouldn't be resolved by webpack, but should become dependencies of the resulting bundle. [more](https://webpack.js.org/configuration/externals/)
 - `node` — include polyfills or mocks for various node stuff. [more](https://webpack.js.org/configuration/node/)
@@ -187,6 +190,7 @@ With this `{rootDir}/src/ui/tsconfig.json`:
 - `definitions` — add additional options to DefinePlugin. [more](https://webpack.js.org/plugins/define-plugin/#usage)
 - `newJsxTransform` (`boolean=true`) — use new JSX Transform.
 - `svgr` (`SvgrConfig`) — svgr plugin options. [more](https://react-svgr.com/docs/options/)
+- `entry` (`string | string[] | Record<string, string | string[]>`) — entry for bundler, overrides entry which is generated from entries directory
 - `entryFilter` (`string[]`) — filter used entrypoints.
 - `excludeFromClean` (`string[]`) — do not clean provided paths before build.
 - `forkTsCheker` (`false | ForkTsCheckerWebpackPluginOptions`) - config for ForkTsCheckerWebpackPlugin [more](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin#options). If `false`, ForkTsCheckerWebpackPlugin will be disabled.

package/dist/commands/dev/client.js

@@ -49,7 +49,8 @@ async function watchClientCompilation(config, onManifestReady) {
 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 { publicPath } = config.client;
+    const { webSocketPath = path.normalize(`/${publicPath}/sockjs-node`), writeToDisk, ...devServer } = config.client.devServer || {};
     const normalizedConfig = { ...config.client, devServer: { ...devServer, webSocketPath } };
     const isSsr = Boolean(normalizedConfig.ssr);
     let webpackConfigs = [];
@@ -90,7 +91,6 @@ async function buildDevServer(config) {
             }));
         }
     }
-    const publicPath = path.normalize(config.client.publicPathPrefix + '/build/');
     const staticFolder = path.resolve(paths_1.default.appDist, 'public');
     const options = {
         static: staticFolder,
@@ -170,6 +170,7 @@ async function buildDevServer(config) {
     if (bundler === 'rspack') {
         // Rspack multicompiler dont work with lazy compilation.
         // Pass a single config to avoid multicompiler when SSR disabled.
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         const compiler = (0, core_1.rspack)(isSsr ? rspackConfigs : rspackConfigs[0]);
         server = new dev_server_1.RspackDevServer(options, compiler);
     }
@@ -197,11 +198,11 @@ function subscribeToManifestReadyEvent(compiler, onManifestReady) {
     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) {
+        const currentCompiler = compilers[i];
+        if (!config || !currentCompiler) {
             throw new Error('Something goes wrong!');
         }
-        if (!isRspackCompiler(compiler)) {
+        if (!isRspackCompiler(currentCompiler)) {
             const assetsManifestPlugin = config.plugins.find((plugin) => plugin instanceof webpack_assets_manifest_1.default);
             if (assetsManifestPlugin) {
                 const assetsManifestReady = (0, utils_1.deferredPromise)();
@@ -211,12 +212,12 @@ function subscribeToManifestReadyEvent(compiler, onManifestReady) {
         }
         const manifestReady = (0, utils_1.deferredPromise)();
         promises.push(manifestReady.promise);
-        if (isRspackCompiler(compiler)) {
-            const { afterEmit } = (0, rspack_manifest_plugin_1.getCompilerHooks)(compiler);
+        if (isRspackCompiler(currentCompiler)) {
+            const { afterEmit } = (0, rspack_manifest_plugin_1.getCompilerHooks)(currentCompiler);
             afterEmit.tap('app-builder', manifestReady.resolve);
         }
         else {
-            const { afterEmit } = (0, webpack_manifest_plugin_1.getCompilerHooks)(compiler);
+            const { afterEmit } = (0, webpack_manifest_plugin_1.getCompilerHooks)(currentCompiler);
             afterEmit.tap('app-builder', manifestReady.resolve);
         }
     }

package/dist/common/config.js

@@ -189,7 +189,8 @@ async function normalizeClientConfig(client, mode) {
             ? false
             : (client.reactRefresh ?? ((options) => options)),
         newJsxTransform: client.newJsxTransform ?? true,
-        publicPathPrefix: client.publicPathPrefix || '',
+        publicPath: client.publicPath || path.normalize(`${client.publicPathPrefix || ''}/build/`),
+        assetsManifestFile: client.assetsManifestFile || 'assets-manifest.json',
         modules: client.modules && remapPaths(client.modules),
         includes: client.includes && remapPaths(client.includes),
         images: client.images && remapPaths(client.images),

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

@@ -79,9 +79,24 @@ export interface ClientConfig {
     devServer?: DevServerConfig;
     contextReplacement?: ContextReplacement;
     /**
-     *  publicPath prefix, will be added to '/build/'
+     * publicPath prefix, will be added to '/build/'
      */
     publicPathPrefix?: string;
+    /**
+     * publicPath for bundler
+     * This option has higher priority than publicPathPrefix
+     */
+    publicPath?: string;
+    /**
+     * Build directory for output
+     * Default: 'dist/public/build' and 'dist/ssr' - for SSR
+     */
+    outputPath?: string;
+    /**
+     * File name for assets manifest
+     * Default: 'assets-manifest.json'
+     */
+    assetsManifestFile?: string;
     /**
      * Add monaco-editor support
      */
@@ -92,7 +107,7 @@ export interface ClientConfig {
         customLanguages?: IFeatureDefinition[];
     };
     /**
-     * if false - source maps will be generated for prod builds,
+     * if false - source maps will be generated for prod builds
      */
     hiddenSourceMap?: boolean;
     /**
@@ -131,6 +146,11 @@ export interface ClientConfig {
      * svgr plugin options.
      */
     svgr?: SvgrConfig;
+    /**
+     * entry for bundler
+     * Overrides entry which is generated from entries directory
+     */
+    entry?: string | string[] | Record<string, string | string[]>;
     entryFilter?: string[];
     excludeFromClean?: string[];
     analyzeBundle?: 'true' | 'statoscope' | 'rsdoctor';
@@ -252,10 +272,11 @@ export interface ServiceConfig {
     lib?: never;
     verbose?: boolean;
 }
-export type NormalizedClientConfig = Omit<ClientConfig, 'publicPathPrefix' | 'hiddenSourceMap' | 'svgr' | 'lazyCompilation' | 'devServer' | 'disableForkTsChecker' | 'disableReactRefresh'> & {
+export type NormalizedClientConfig = Omit<ClientConfig, 'publicPathPrefix' | 'publicPath' | 'assetsManifestFile' | 'hiddenSourceMap' | 'svgr' | 'lazyCompilation' | 'devServer' | 'disableForkTsChecker' | 'disableReactRefresh'> & {
     bundler: Bundler;
     javaScriptLoader: JavaScriptLoader;
-    publicPathPrefix: string;
+    publicPath: string;
+    assetsManifestFile: string;
     hiddenSourceMap: boolean;
     svgr: NonNullable<ClientConfig['svgr']>;
     lazyCompilation?: LazyCompilationConfig;

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

@@ -9,6 +9,8 @@ export interface HelperOptions {
     isEnvProduction: boolean;
     configType: `${WebpackMode}`;
     buildDirectory: string;
+    assetsManifestFile: string;
+    entry?: string | string[] | Record<string, string | string[]>;
     entriesDirectory: string;
     isSsr: boolean;
 }

package/dist/common/webpack/config.js

@@ -60,7 +60,6 @@ const node_externals_1 = require("./node-externals");
 const statoscope_1 = require("./statoscope");
 const imagesSizeLimit = 2048;
 const fontSizeLimit = 8192;
-const assetsManifestFile = 'assets-manifest.json';
 function getHelperOptions({ webpackMode, config, logger, isSsr = false, }) {
     const isEnvDevelopment = webpackMode === "development" /* WebpackMode.Dev */;
     const isEnvProduction = webpackMode === "production" /* WebpackMode.Prod */;
@@ -70,7 +69,9 @@ function getHelperOptions({ webpackMode, config, logger, isSsr = false, }) {
         isEnvDevelopment,
         isEnvProduction,
         configType: webpackMode,
-        buildDirectory: isSsr ? paths_1.default.appSsrBuild : paths_1.default.appBuild,
+        buildDirectory: config.outputPath || (isSsr ? paths_1.default.appSsrBuild : paths_1.default.appBuild),
+        assetsManifestFile: config.assetsManifestFile,
+        entry: config.entry,
         entriesDirectory: isSsr ? paths_1.default.appSsrEntry : paths_1.default.appEntry,
         isSsr,
     };
@@ -88,6 +89,16 @@ function configureExternals({ config, isSsr }) {
     }
     return externals;
 }
+function configureWebpackCache(options) {
+    const { config } = options;
+    if (typeof config.cache === 'object' && config.cache.type === 'filesystem') {
+        return {
+            ...config.cache,
+            buildDependencies: getCacheBuildDependencies(options),
+        };
+    }
+    return config.cache;
+}
 async function webpackConfigFactory(options) {
     const { config } = options;
     const helperOptions = getHelperOptions(options);
@@ -120,7 +131,7 @@ async function webpackConfigFactory(options) {
         snapshot: {
             managedPaths: config.watchOptions?.watchPackages ? [] : undefined,
         },
-        cache: config.cache,
+        cache: configureWebpackCache(helperOptions),
     };
     webpackConfig = await config.webpack(webpackConfig, {
         configType: isEnvProduction ? 'production' : 'development',
@@ -210,6 +221,34 @@ function configureWatchOptions({ config }) {
     delete watchOptions.watchPackages;
     return watchOptions;
 }
+function getCacheBuildDependencies({ config }) {
+    const buildDependencies = {};
+    const dependenciesGroups = {
+        appBuilderConfig: [
+            path.join(paths_1.default.app, 'app-builder.config.ts'),
+            path.join(paths_1.default.app, 'app-builder.config.js'),
+        ],
+        packageJson: [path.join(paths_1.default.app, 'package.json')],
+        tsconfig: [
+            path.join(paths_1.default.app, 'tsconfig.json'),
+            path.join(paths_1.default.appClient, 'tsconfig.json'),
+        ],
+    };
+    for (const [group, filePaths] of Object.entries(dependenciesGroups)) {
+        for (const filePath of filePaths) {
+            if (fs.existsSync(filePath)) {
+                buildDependencies[group] = [...(buildDependencies[group] || []), filePath];
+            }
+        }
+    }
+    const userBuildDependencies = typeof config.cache === 'object' && config.cache.type === 'filesystem'
+        ? config.cache.buildDependencies
+        : {};
+    return {
+        ...buildDependencies,
+        ...userBuildDependencies,
+    };
+}
 function configureExperiments({ config, isEnvProduction, isSsr, }) {
     if (isSsr) {
         return config.ssr?.moduleType === 'esm' ? { outputModule: true } : undefined;
@@ -243,7 +282,8 @@ function configureExperiments({ config, isEnvProduction, isSsr, }) {
         lazyCompilation,
     };
 }
-function configureRspackExperiments({ config, isEnvProduction, isSsr, }) {
+function configureRspackExperiments(options) {
+    const { config, isSsr, isEnvProduction } = options;
     if (isSsr) {
         return config.ssr?.moduleType === 'esm' ? { outputModule: true } : undefined;
     }
@@ -289,6 +329,7 @@ function configureRspackExperiments({ config, isEnvProduction, isSsr, }) {
                     ? config.cache.cacheDirectory
                     : undefined,
             },
+            buildDependencies: Object.values(getCacheBuildDependencies(options)).flat(),
         },
         lazyCompilation,
     };
@@ -315,7 +356,10 @@ function configureResolve({ isEnvProduction, config }) {
     };
 }
 function createEntryArray(entry) {
-    return [require.resolve('./public-path'), entry];
+    if (typeof entry === 'string') {
+        return [require.resolve('./public-path'), entry];
+    }
+    return [require.resolve('./public-path'), ...entry];
 }
 function addEntry(entry, file) {
     return {
@@ -323,15 +367,24 @@ function addEntry(entry, file) {
         [path.parse(file).name]: createEntryArray(file),
     };
 }
-function configureEntry({ config, entriesDirectory }) {
+function configureEntry({ config, entry, entriesDirectory }) {
+    if (typeof entry === 'string' || Array.isArray(entry)) {
+        return createEntryArray(entry);
+    }
+    if (typeof entry === 'object') {
+        return Object.entries(entry).reduce((acc, [key, value]) => ({
+            ...acc,
+            [key]: createEntryArray(value),
+        }), {});
+    }
     let entries = fs.readdirSync(entriesDirectory).filter((file) => /\.[jt]sx?$/.test(file));
     if (Array.isArray(config.entryFilter) && config.entryFilter.length) {
-        entries = entries.filter((entry) => config.entryFilter?.includes(entry.split('.')[0] ?? ''));
+        entries = entries.filter((file) => config.entryFilter?.includes(file.split('.')[0] ?? ''));
     }
     if (!entries.length) {
         throw new Error('No entries were found after applying entry filter');
     }
-    return entries.reduce((entry, file) => addEntry(entry, path.resolve(entriesDirectory, file)), {});
+    return entries.reduce((acc, file) => addEntry(acc, path.resolve(entriesDirectory, file)), {});
 }
 function getFileNames({ isEnvProduction, isSsr, config }) {
     let ext = 'js';
@@ -609,6 +662,7 @@ function getCssLoaders({ isEnvDevelopment, isEnvProduction, config, isSsr }, add
         else {
             loaders.unshift({
                 loader: require.resolve('style-loader'),
+                options: { insert: require.resolve('./insert-style-tag.js') },
             });
         }
     }
@@ -864,7 +918,7 @@ function configureCommonPlugins(options, bundlerPlugins) {
                 ...config.monaco,
                 // currently, workers located on cdn are not working properly, so we are enforcing loading workers from
                 // service instead
-                publicPath: path.normalize(config.publicPathPrefix + '/build/'),
+                publicPath: config.publicPath,
             }));
         }
         plugins.push(createMomentTimezoneDataPlugin(config.momentTz));
@@ -928,17 +982,17 @@ function configureWebpackPlugins(options) {
         new webpack_assets_manifest_1.default(isEnvProduction
             ? {
                 entrypoints: true,
-                output: assetsManifestFile,
+                output: options.assetsManifestFile,
             }
             : {
                 entrypoints: true,
                 writeToDisk: true,
-                output: path.resolve(options.buildDirectory, assetsManifestFile),
+                output: path.resolve(options.buildDirectory, options.assetsManifestFile),
             }),
         ...(process.env.WEBPACK_PROFILE === 'true' ? [new webpack.debug.ProfilingPlugin()] : []),
     ];
     if (!isSsr && isEnvDevelopment && config.reactRefresh !== false) {
-        const { webSocketPath = path.normalize(`/${config.publicPathPrefix}/build/sockjs-node`) } = config.devServer || {};
+        const { webSocketPath = path.normalize(`/${config.publicPath}/sockjs-node`) } = config.devServer || {};
         const reactRefreshConfig = config.reactRefresh({
             overlay: { sockPath: webSocketPath },
             exclude: [/node_modules/, /\.worker\.[jt]sx?$/],
@@ -963,8 +1017,8 @@ function configureRspackPlugins(options) {
         ...configureCommonPlugins(options, plugins),
         new rspack_manifest_plugin_1.RspackManifestPlugin({
             fileName: isEnvProduction
-                ? assetsManifestFile
-                : path.resolve(options.buildDirectory, assetsManifestFile),
+                ? options.assetsManifestFile
+                : path.resolve(options.buildDirectory, options.assetsManifestFile),
             writeToFileEmit: true,
             useLegacyEmit: true,
             publicPath: '',
@@ -972,7 +1026,7 @@ function configureRspackPlugins(options) {
         }),
     ];
     if (!isSsr && isEnvDevelopment && config.reactRefresh !== false) {
-        const { webSocketPath = path.normalize(`/${config.publicPathPrefix}/build/sockjs-node`) } = config.devServer || {};
+        const { webSocketPath = path.normalize(`/${config.publicPath}/sockjs-node`) } = config.devServer || {};
         const { overlay, ...reactRefreshConfig } = config.reactRefresh({
             overlay: { sockPath: webSocketPath },
             exclude: [/node_modules/, /\.worker\.[jt]sx?$/],

package/dist/common/webpack/insert-style-tag.d.ts

@@ -0,0 +1,9 @@
+export = insertStyleTag;
+/**
+ * This function inserts a style tag into the document head if it doesn't already exist.
+ * It is needed to do not allow duplicate style tags.
+ *
+ * @param {HTMLStyleElement} $targetStyle - The style element to be inserted
+ * @returns {void}
+ */
+declare function insertStyleTag($targetStyle: HTMLStyleElement): void;

package/dist/common/webpack/insert-style-tag.js

@@ -0,0 +1,26 @@
+"use strict";
+/* eslint-env browser */
+/**
+ * This function inserts a style tag into the document head if it doesn't already exist.
+ * It is needed to do not allow duplicate style tags.
+ *
+ * @param {HTMLStyleElement} $targetStyle - The style element to be inserted
+ * @returns {void}
+ */
+function insertStyleTag($targetStyle) {
+    // setTimeout is used to queue the insertion of the style tag
+    // to the end of the current event loop, allowing other
+    setTimeout(() => {
+        const $head = document.head;
+        let targetStyleExists = false;
+        $head.querySelectorAll('style').forEach(($style) => {
+            if ($style.innerHTML === $targetStyle.innerHTML) {
+                targetStyleExists = true;
+            }
+        });
+        if (!targetStyleExists) {
+            $head.appendChild($targetStyle);
+        }
+    });
+}
+module.exports = insertStyleTag;

package/dist/common/webpack/storybook.js

@@ -112,7 +112,9 @@ async function configureWebpackConfigForStorybook(mode, userConfig = {}, storybo
         isEnvProduction,
         config: config.client,
         configType: mode,
-        buildDirectory: paths_1.default.appBuild,
+        buildDirectory: config.client.outputPath || paths_1.default.appBuild,
+        assetsManifestFile: config.client.assetsManifestFile,
+        entry: config.client.entry,
         entriesDirectory: paths_1.default.appEntry,
         isSsr: false,
     };

package/package.json

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