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

package/README.md

@@ -192,8 +192,11 @@ 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.
+- `babel` (`(config: babel.TransformOptions, options: {configType: 'development' | 'production'; isSsr: boolean}) => babel.TransformOptions | Promise<babel.TransformOptions>`) - Allow override the default babel transform options.
+- `webpack` (`(config: webpack.Configuration, options: {configType: 'development' | 'production'; isSsr: boolean}) => webpack.Configuration | Promise<webpack.Configuration>`) - Allow override the default configuration.
+- `ssr` - build SSR bundle. The SSR entries should be inside `src/ui/ssr` directory and match the client entries.
+  - `noExternal` (`string | RegExp | (string | RegExp)[] | true`) - prevent listed dependencies from being externalized for SSR. By default, all dependencies are externalized.
+  - `moduleType`: (`'commonjs' | 'esm'`) - library type for the SSR bundle, by default `commonjs`.
 
 ##### Dev build
 

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

@@ -1,9 +1,13 @@
 export declare function babelPreset(config: {
     newJsxTransform?: boolean;
+    isSsr?: boolean;
 }): (string | {
     env: {
         modules: boolean;
         bugfixes: boolean;
+        targets: {
+            node: string;
+        } | undefined;
     };
     runtime: {
         version: string;

package/dist/common/babel/index.js

@@ -5,7 +5,11 @@ function babelPreset(config) {
     return [
         require.resolve('./ui-preset'),
         {
-            env: { modules: false, bugfixes: true },
+            env: {
+                modules: false,
+                bugfixes: true,
+                targets: config.isSsr ? { node: 'current' } : undefined,
+            },
             runtime: { version: '^7.13.10' },
             typescript: true,
             react: {

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

@@ -180,12 +180,14 @@ export interface ClientConfig {
      */
     webpack?: (config: Configuration, options: {
         configType: `${WebpackMode}`;
+        isSsr?: boolean;
     }) => Configuration | Promise<Configuration>;
     /**
      * Modify or return a custom Babel config.
      */
     babel?: (config: Babel.TransformOptions, options: {
         configType: `${WebpackMode}`;
+        isSsr: boolean;
     }) => Babel.TransformOptions | Promise<Babel.TransformOptions>;
     /**
      * Modify or return a custom [Terser options](https://github.com/terser/terser#minify-options).
@@ -234,10 +236,12 @@ export type NormalizedClientConfig = Omit<ClientConfig, 'publicPathPrefix' | 'hi
     verbose?: boolean;
     webpack: (config: Configuration, options: {
         configType: `${WebpackMode}`;
+        isSsr: boolean;
     }) => Configuration | Promise<Configuration>;
     debugWebpack?: boolean;
     babel: (config: Babel.TransformOptions, options: {
         configType: `${WebpackMode}`;
+        isSsr: boolean;
     }) => Babel.TransformOptions | Promise<Babel.TransformOptions>;
     reactRefresh: NonNullable<ClientConfig['reactRefresh']>;
 };

package/dist/common/webpack/config.js

@@ -107,7 +107,7 @@ async function webpackConfigFactory(webpackMode, config, { logger, isSsr = false
         },
         cache: config.cache,
     };
-    webpackConfig = await config.webpack(webpackConfig, { configType: webpackMode });
+    webpackConfig = await config.webpack(webpackConfig, { configType: webpackMode, isSsr });
     if (config.debugWebpack) {
         (0, log_config_1.logConfig)('Preview webpack config', webpackConfig);
     }
@@ -273,9 +273,9 @@ function createJavaScriptLoader({ isEnvProduction, isEnvDevelopment, configType,
         }
     }
     const transformOptions = config.babel({
-        presets: [(0, babel_1.babelPreset)(config)],
+        presets: [(0, babel_1.babelPreset)({ newJsxTransform: config.newJsxTransform, isSsr })],
         plugins,
-    }, { configType });
+    }, { configType, isSsr });
     return {
         loader: require.resolve('babel-loader'),
         options: {
@@ -407,8 +407,8 @@ function getCssLoaders({ isEnvDevelopment, isEnvProduction, config, isSsr }, add
         loaders.unshift({ loader: mini_css_extract_plugin_1.default.loader, options: { emit: !isSsr } });
     }
     if (isEnvDevelopment) {
-        if (isSsr) {
-            loaders.unshift({ loader: mini_css_extract_plugin_1.default.loader, options: { emit: false } });
+        if (isSsr || config.ssr) {
+            loaders.unshift({ loader: mini_css_extract_plugin_1.default.loader, options: { emit: !isSsr } });
         }
         else {
             loaders.unshift({
@@ -455,7 +455,7 @@ function createIconsRule({ isEnvProduction, config, isSsr }, jsLoader) {
                 generator: {
                     filename: 'assets/images/[name].[contenthash:8][ext]',
                     publicPath: isEnvProduction ? '../' : undefined,
-                    emit: !isSsr,
+                    emit: isSsr ? false : undefined,
                 },
             }),
     };
@@ -472,7 +472,7 @@ function createAssetsRules({ isEnvProduction, config, isSsr }) {
         },
         generator: {
             filename: 'assets/images/[name].[contenthash:8][ext]',
-            emit: !isSsr,
+            emit: isSsr ? false : undefined,
         },
     };
     const fontsRule = {
@@ -486,7 +486,7 @@ function createAssetsRules({ isEnvProduction, config, isSsr }) {
         },
         generator: {
             filename: 'assets/fonts/[name].[contenthash:8][ext]',
-            emit: !isSsr,
+            emit: isSsr ? false : undefined,
         },
     };
     const rules = [imagesRule, fontsRule];
@@ -506,7 +506,7 @@ function createAssetsRules({ isEnvProduction, config, isSsr }) {
             generator: {
                 filename: 'assets/images/[name].[contenthash:8][ext]',
                 publicPath: '../',
-                emit: !isSsr,
+                emit: isSsr ? false : undefined,
             },
         }, {
             test: /\.(ttf|eot|woff2?)$/,
@@ -521,7 +521,7 @@ function createAssetsRules({ isEnvProduction, config, isSsr }) {
             generator: {
                 filename: 'assets/fonts/[name].[contenthash:8][ext]',
                 publicPath: '../',
-                emit: !isSsr,
+                emit: isSsr ? false : undefined,
             },
         });
     }
@@ -533,7 +533,7 @@ function createFallbackRules({ isEnvProduction, isSsr }) {
             type: 'asset/resource',
             generator: {
                 filename: 'assets/[name].[contenthash:8][ext]',
-                emit: !isSsr,
+                emit: isSsr ? false : undefined,
             },
             exclude: [/\.[jt]sx?$/, /\.json$/, /\.[cm]js$/, /\.ejs$/],
         },
@@ -548,7 +548,7 @@ function createFallbackRules({ isEnvProduction, isSsr }) {
             generator: {
                 filename: 'assets/[name].[contenthash:8][ext]',
                 publicPath: '../',
-                emit: !isSsr,
+                emit: isSsr ? false : undefined,
             },
         });
     }
@@ -591,6 +591,7 @@ function configurePlugins(options) {
             }),
         new webpack.DefinePlugin({
             'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
+            'process.env.IS_SSR': JSON.stringify(isSsr),
             ...config.definitions,
         }),
     ];
@@ -645,24 +646,26 @@ function configurePlugins(options) {
             }));
         }
     }
-    if (isEnvProduction || isSsr) {
+    if (isEnvProduction || isSsr || config.ssr) {
         plugins.push(new mini_css_extract_plugin_1.default({
-            filename: 'css/[name].[contenthash:8].css',
-            chunkFilename: 'css/[name].[contenthash:8].chunk.css',
+            filename: isEnvProduction ? 'css/[name].[contenthash:8].css' : 'css/[name].css',
+            chunkFilename: isEnvProduction
+                ? 'css/[name].[contenthash:8].chunk.css'
+                : 'css/[name].chunk.css',
             ignoreOrder: true,
         }));
     }
-    if (config.monaco) {
-        const MonacoEditorWebpackPlugin = require('monaco-editor-webpack-plugin');
-        plugins.push(new MonacoEditorWebpackPlugin({
-            filename: isEnvProduction ? '[name].[hash:8].worker.js' : undefined,
-            ...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/'),
-        }));
-    }
     if (!isSsr) {
+        if (config.monaco) {
+            const MonacoEditorWebpackPlugin = require('monaco-editor-webpack-plugin');
+            plugins.push(new MonacoEditorWebpackPlugin({
+                filename: isEnvProduction ? '[name].[hash:8].worker.js' : undefined,
+                ...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/'),
+            }));
+        }
         const contextReplacement = config.contextReplacement || {};
         plugins.push(createMomentTimezoneDataPlugin(config.momentTz));
         plugins.push(new webpack.ContextReplacementPlugin(/moment[\\/]locale$/, 

package/dist/common/webpack/utils.js

@@ -55,15 +55,12 @@ function webpackCompilerHandlerFactory(logger, onCompilationEnd) {
             const time = clientStats.endTime - clientStats.startTime;
             logger.success(`Client was successfully compiled in ${(0, pretty_time_1.prettyTime)(BigInt(time) * BigInt(1_000_000))}`);
         }
-        else {
-            logger.success(`Client was successfully compiled`);
-        }
         if (ssrStats) {
             const time = ssrStats.endTime - ssrStats.startTime;
             logger.success(`SSR: Client was successfully compiled in ${(0, pretty_time_1.prettyTime)(BigInt(time) * BigInt(1_000_000))}`);
         }
-        else {
-            logger.success(`SSR: Client was successfully compiled`);
+        if (!clientStats && !ssrStats) {
+            logger.success(`Client was successfully compiled`);
         }
     };
 }

package/package.json

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