@tramvai/cli 2.119.5 → 2.121.2

package/lib/schema/autogeneratedSchema.json

@@ -652,7 +652,7 @@
                                             "type": "boolean"
                                         },
                                         "dest": {
-                                            "title": "Name of generated manifest file (will be placed in \"output.client\" directory). You can use `[hash]` placeholder for manifest cache busting",
+                                            "title": "Name of generated manifest file (will be placed in \"output.client\" directory). You can use `[hash]` placeholder for manifest cache busting in production mode",
                                             "default": "/manifest.[hash].json",
                                             "type": "string"
                                         },
@@ -1122,23 +1122,23 @@
                                                 "dotAll": {
                                                     "type": "boolean"
                                                 },
-                                                "__@match@8167": {
+                                                "__@match@8168": {
                                                     "type": "object",
                                                     "additionalProperties": false
                                                 },
-                                                "__@replace@8169": {
+                                                "__@replace@8170": {
                                                     "type": "object",
                                                     "additionalProperties": false
                                                 },
-                                                "__@search@8172": {
+                                                "__@search@8173": {
                                                     "type": "object",
                                                     "additionalProperties": false
                                                 },
-                                                "__@split@8174": {
+                                                "__@split@8175": {
                                                     "type": "object",
                                                     "additionalProperties": false
                                                 },
-                                                "__@matchAll@8176": {
+                                                "__@matchAll@8177": {
                                                     "type": "object",
                                                     "additionalProperties": false
                                                 }
@@ -1344,6 +1344,15 @@
                             "default": true,
                             "type": "boolean"
                         },
+                        "criticalChunks": {
+                            "title": "add chunks to preload as critical in-parallel with \"platform.js\"",
+                            "description": "this option is useful when you need to create async boundary for app dependencies.\nMore info - https://webpack.js.org/concepts/module-federation/#uncaught-error-shared-module-is-not-available-for-eager-consumption",
+                            "default": [],
+                            "type": "array",
+                            "items": {
+                                "type": "string"
+                            }
+                        },
                         "deps": {
                             "title": "list of the dependencies that will be shared",
                             "default": [],
@@ -1755,23 +1764,23 @@
                                                 "dotAll": {
                                                     "type": "boolean"
                                                 },
-                                                "__@match@8167": {
+                                                "__@match@8168": {
                                                     "type": "object",
                                                     "additionalProperties": false
                                                 },
-                                                "__@replace@8169": {
+                                                "__@replace@8170": {
                                                     "type": "object",
                                                     "additionalProperties": false
                                                 },
-                                                "__@search@8172": {
+                                                "__@search@8173": {
                                                     "type": "object",
                                                     "additionalProperties": false
                                                 },
-                                                "__@split@8174": {
+                                                "__@split@8175": {
                                                     "type": "object",
                                                     "additionalProperties": false
                                                 },
-                                                "__@matchAll@8176": {
+                                                "__@matchAll@8177": {
                                                     "type": "object",
                                                     "additionalProperties": false
                                                 }
@@ -1977,6 +1986,15 @@
                             "default": true,
                             "type": "boolean"
                         },
+                        "criticalChunks": {
+                            "title": "add chunks to preload as critical in-parallel with \"platform.js\"",
+                            "description": "this option is useful when you need to create async boundary for app dependencies.\nMore info - https://webpack.js.org/concepts/module-federation/#uncaught-error-shared-module-is-not-available-for-eager-consumption",
+                            "default": [],
+                            "type": "array",
+                            "items": {
+                                "type": "string"
+                            }
+                        },
                         "deps": {
                             "title": "list of the dependencies that will be shared",
                             "default": [],
@@ -2388,23 +2406,23 @@
                                                 "dotAll": {
                                                     "type": "boolean"
                                                 },
-                                                "__@match@8167": {
+                                                "__@match@8168": {
                                                     "type": "object",
                                                     "additionalProperties": false
                                                 },
-                                                "__@replace@8169": {
+                                                "__@replace@8170": {
                                                     "type": "object",
                                                     "additionalProperties": false
                                                 },
-                                                "__@search@8172": {
+                                                "__@search@8173": {
                                                     "type": "object",
                                                     "additionalProperties": false
                                                 },
-                                                "__@split@8174": {
+                                                "__@split@8175": {
                                                     "type": "object",
                                                     "additionalProperties": false
                                                 },
-                                                "__@matchAll@8176": {
+                                                "__@matchAll@8177": {
                                                     "type": "object",
                                                     "additionalProperties": false
                                                 }
@@ -2610,6 +2628,15 @@
                             "default": true,
                             "type": "boolean"
                         },
+                        "criticalChunks": {
+                            "title": "add chunks to preload as critical in-parallel with \"platform.js\"",
+                            "description": "this option is useful when you need to create async boundary for app dependencies.\nMore info - https://webpack.js.org/concepts/module-federation/#uncaught-error-shared-module-is-not-available-for-eager-consumption",
+                            "default": [],
+                            "type": "array",
+                            "items": {
+                                "type": "string"
+                            }
+                        },
                         "deps": {
                             "title": "list of the dependencies that will be shared",
                             "default": [],

package/lib/typings/configEntry/cli.d.ts

@@ -284,6 +284,13 @@ export interface CliConfigEntry extends ConfigEntry {
          * @default true
          */
         flexibleTramvaiVersions: boolean;
+        /**
+         * @title add chunks to preload as critical in-parallel with "platform.js"
+         * @description this option is useful when you need to create async boundary for app dependencies.
+         * More info - https://webpack.js.org/concepts/module-federation/#uncaught-error-shared-module-is-not-available-for-eager-consumption
+         * @default []
+         */
+        criticalChunks: string[];
         /**
          * @title list of the dependencies that will be shared
          * @default []

package/lib/typings/pwa/index.d.ts

@@ -5,7 +5,7 @@ export type WebManifestOptions = {
      */
     enabled?: boolean;
     /**
-     * @title Name of generated manifest file (will be placed in "output.client" directory). You can use `[hash]` placeholder for manifest cache busting
+     * @title Name of generated manifest file (will be placed in "output.client" directory). You can use `[hash]` placeholder for manifest cache busting in production mode
      * @default "/manifest.[hash].json"
      */
     dest?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tramvai/cli",
-  "version": "2.119.5",
+  "version": "2.121.2",
   "description": "Cli инструмент для сборки и запуска приложений",
   "files": [
     "src",
@@ -63,7 +63,7 @@
     "@tinkoff/browserslist-config": "0.2.5",
     "@tinkoff/dippy": "0.8.15",
     "@tinkoff/is-modern-lib": "2.0.10",
-    "@tinkoff/logger": "0.10.63",
+    "@tinkoff/logger": "0.10.64",
     "@tinkoff/minicss-class-generator": "0.2.5",
     "@tinkoff/package-manager-wrapper": "0.1.9",
     "@tinkoff/request-core": "^0.9.2",
@@ -71,9 +71,9 @@
     "@tinkoff/utils": "^2.1.3",
     "@tinkoff/webpack-dedupe-plugin": "1.0.5",
     "@tramvai/build": "3.1.3",
-    "@tramvai/react": "2.119.5",
-    "@tramvai/tools-check-versions": "0.4.14",
-    "@tramvai/tools-migrate": "0.6.18",
+    "@tramvai/react": "2.121.2",
+    "@tramvai/tools-check-versions": "0.4.15",
+    "@tramvai/tools-migrate": "0.6.19",
     "ajv": "^6.12.6",
     "ansi-escapes": "^4.3.2",
     "autoprefixer": "^10.4.8",

package/schema.json

@@ -673,7 +673,7 @@
                             "type": "boolean"
                           },
                           "dest": {
-                            "title": "Name of generated manifest file (will be placed in \"output.client\" directory). You can use `[hash]` placeholder for manifest cache busting",
+                            "title": "Name of generated manifest file (will be placed in \"output.client\" directory). You can use `[hash]` placeholder for manifest cache busting in production mode",
                             "default": "/manifest.[hash].json",
                             "type": "string"
                           },
@@ -1143,23 +1143,23 @@
                               "dotAll": {
                                 "type": "boolean"
                               },
-                              "__@match@8167": {
+                              "__@match@8168": {
                                 "type": "object",
                                 "additionalProperties": false
                               },
-                              "__@replace@8169": {
+                              "__@replace@8170": {
                                 "type": "object",
                                 "additionalProperties": false
                               },
-                              "__@search@8172": {
+                              "__@search@8173": {
                                 "type": "object",
                                 "additionalProperties": false
                               },
-                              "__@split@8174": {
+                              "__@split@8175": {
                                 "type": "object",
                                 "additionalProperties": false
                               },
-                              "__@matchAll@8176": {
+                              "__@matchAll@8177": {
                                 "type": "object",
                                 "additionalProperties": false
                               }
@@ -1365,6 +1365,15 @@
                     "default": true,
                     "type": "boolean"
                   },
+                  "criticalChunks": {
+                    "title": "add chunks to preload as critical in-parallel with \"platform.js\"",
+                    "description": "this option is useful when you need to create async boundary for app dependencies.\nMore info - https://webpack.js.org/concepts/module-federation/#uncaught-error-shared-module-is-not-available-for-eager-consumption",
+                    "default": [],
+                    "type": "array",
+                    "items": {
+                      "type": "string"
+                    }
+                  },
                   "deps": {
                     "title": "list of the dependencies that will be shared",
                     "default": [],
@@ -1784,23 +1793,23 @@
                                 "dotAll": {
                                   "type": "boolean"
                                 },
-                                "__@match@8167": {
+                                "__@match@8168": {
                                   "type": "object",
                                   "additionalProperties": false
                                 },
-                                "__@replace@8169": {
+                                "__@replace@8170": {
                                   "type": "object",
                                   "additionalProperties": false
                                 },
-                                "__@search@8172": {
+                                "__@search@8173": {
                                   "type": "object",
                                   "additionalProperties": false
                                 },
-                                "__@split@8174": {
+                                "__@split@8175": {
                                   "type": "object",
                                   "additionalProperties": false
                                 },
-                                "__@matchAll@8176": {
+                                "__@matchAll@8177": {
                                   "type": "object",
                                   "additionalProperties": false
                                 }
@@ -2006,6 +2015,15 @@
                       "default": true,
                       "type": "boolean"
                     },
+                    "criticalChunks": {
+                      "title": "add chunks to preload as critical in-parallel with \"platform.js\"",
+                      "description": "this option is useful when you need to create async boundary for app dependencies.\nMore info - https://webpack.js.org/concepts/module-federation/#uncaught-error-shared-module-is-not-available-for-eager-consumption",
+                      "default": [],
+                      "type": "array",
+                      "items": {
+                        "type": "string"
+                      }
+                    },
                     "deps": {
                       "title": "list of the dependencies that will be shared",
                       "default": [],
@@ -2425,23 +2443,23 @@
                                   "dotAll": {
                                     "type": "boolean"
                                   },
-                                  "__@match@8167": {
+                                  "__@match@8168": {
                                     "type": "object",
                                     "additionalProperties": false
                                   },
-                                  "__@replace@8169": {
+                                  "__@replace@8170": {
                                     "type": "object",
                                     "additionalProperties": false
                                   },
-                                  "__@search@8172": {
+                                  "__@search@8173": {
                                     "type": "object",
                                     "additionalProperties": false
                                   },
-                                  "__@split@8174": {
+                                  "__@split@8175": {
                                     "type": "object",
                                     "additionalProperties": false
                                   },
-                                  "__@matchAll@8176": {
+                                  "__@matchAll@8177": {
                                     "type": "object",
                                     "additionalProperties": false
                                   }
@@ -2647,6 +2665,15 @@
                         "default": true,
                         "type": "boolean"
                       },
+                      "criticalChunks": {
+                        "title": "add chunks to preload as critical in-parallel with \"platform.js\"",
+                        "description": "this option is useful when you need to create async boundary for app dependencies.\nMore info - https://webpack.js.org/concepts/module-federation/#uncaught-error-shared-module-is-not-available-for-eager-consumption",
+                        "default": [],
+                        "type": "array",
+                        "items": {
+                          "type": "string"
+                        }
+                      },
                       "deps": {
                         "title": "list of the dependencies that will be shared",
                         "default": [],

package/src/api/start/__integration__/__fixtures__/app/server.tsx

@@ -50,6 +50,7 @@ app.get<{ Querystring: Querystring }>(
     return `<html>
     <head>
       <link rel="stylesheet" href="http://localhost:${appConfig.staticPort}/dist/client/platform.css">
+      <script src="http://localhost:${appConfig.staticPort}/dist/client/react.js" defer></script>
       <script src="http://localhost:${appConfig.staticPort}/dist/client/hmr.js" defer></script>
       <script src="http://localhost:${appConfig.staticPort}/dist/client/platform.js" defer></script>
     </head>

package/src/api/start/__integration__/start.test.ts

@@ -79,6 +79,7 @@ describe('@tramvai/cli start command', () => {
 
         expect(responseServer.text)
           .toMatch(`<link rel="stylesheet" href="http://localhost:${staticServerPort}/dist/client/platform.css">
+      <script src="http://localhost:${staticServerPort}/dist/client/react.js" defer></script>
       <script src="http://localhost:${staticServerPort}/dist/client/hmr.js" defer></script>
       <script src="http://localhost:${staticServerPort}/dist/client/platform.js" defer></script>`);
         expect(responseServer.text).toMatch(`this is App`);
@@ -188,6 +189,7 @@ describe('@tramvai/cli start command', () => {
 
       expect(responseServer.text)
         .toMatch(`<link rel="stylesheet" href="http://localhost:${staticServerPort}/dist/client/platform.css">
+      <script src="http://localhost:${staticServerPort}/dist/client/react.js" defer></script>
       <script src="http://localhost:${staticServerPort}/dist/client/hmr.js" defer></script>
       <script src="http://localhost:${staticServerPort}/dist/client/platform.js" defer></script>`);
       expect(responseServer.text).toMatch(`this is App`);

package/src/builder/webpack/devServer/server.ts

@@ -86,6 +86,7 @@ export const serverRunner = ({
     let resolveWorkerPort: () => void | null;
     let workerPortPromise: Promise<void> | null;
     let hasExitedUnexpectedly = false;
+    let proxyErrorCount = 0;
 
     const proxy = createProxyServer({
       // указываем, что сами обработаем ответ
@@ -157,6 +158,8 @@ export const serverRunner = ({
     // делаем запросы к дочернему процессу и пытаемся полностью получить его ответ
     // если всё ок, то просто отправляем полученные данные клиенту
     proxy.on('proxyRes', (proxyRes, req, res) => {
+      proxyErrorCount--;
+
       if (!res.headersSent) {
         // дублируем всю логику прокси и отправляем ответ
         // немного костыль по мотивам https://github.com/http-party/node-http-proxy/issues/1263#issuecomment-394758768
@@ -197,7 +200,17 @@ export const serverRunner = ({
         return;
       }
 
+      if (proxyErrorCount > 10) {
+        console.error('[dev-server-error] looping of request proxying to worker', err);
+        // @ts-ignore
+        res.statusCode = 500;
+        res.end(EXITED_UNEXPECTEDLY);
+        return;
+      }
+
       if (pool.state !== PoolState.CLOSED) {
+        proxyErrorCount++;
+
         await waitWorkerPort();
 
         proxy.web(req, res as any, { target: `http://localhost:${workerPort}` });

package/src/config/configManager.ts

@@ -197,13 +197,6 @@ export const createConfigManager = <C extends ConfigEntry = ConfigEntry, E exten
 
     if (pwa.webmanifest?.enabled) {
       pwa.webmanifest = {
-        icons: pwa.icon?.src
-          ? pwa.icon.sizes.map((size) => ({
-              src: `${config.assetsPrefix}${pwa.icon.dest}/${size}x${size}.png`,
-              sizes: `${size}x${size}`,
-              type: 'image/png',
-            }))
-          : [],
         ...pwa.webmanifest,
         scope: pwa.webmanifest.scope ?? pwa.sw?.scope,
         name: pwa.webmanifest.name ?? config.name,
@@ -212,12 +205,16 @@ export const createConfigManager = <C extends ConfigEntry = ConfigEntry, E exten
       };
 
       if (pwa.webmanifest.dest.includes('[hash]')) {
-        const crypto = require('crypto');
-        const hashSum = crypto.createHash('sha256');
-        hashSum.update(JSON.stringify(pwa.webmanifest));
-        const currentHash = hashSum.digest('hex');
-
-        pwa.webmanifest.dest = pwa.webmanifest.dest.replace('[hash]', currentHash.substr(0, 8));
+        if (env === 'production') {
+          const crypto = require('crypto');
+          const hashSum = crypto.createHash('sha256');
+          hashSum.update(JSON.stringify(pwa.webmanifest));
+          const currentHash = hashSum.digest('hex');
+
+          pwa.webmanifest.dest = pwa.webmanifest.dest.replace('[hash]', currentHash.substr(0, 8));
+        } else {
+          pwa.webmanifest.dest = pwa.webmanifest.dest.replace('.[hash]', '').replace('[hash].', '');
+        }
       }
     }
   } else if (isChildApp(config)) {

package/src/library/webpack/application/client/dev.ts

@@ -21,7 +21,7 @@ import sourcemaps from '../../blocks/sourcemaps';
 import FancyReporter from '../../plugins/WebpackBar/reporters/fancy';
 import { extendEntry } from '../../utils/extendEntry';
 import { extractCssPluginFactory } from '../../blocks/extractCssPlugin';
-import type { SplitChunksOptions } from '../../types/webpack';
+import { splitChunksConfig } from './prod/optimization/splitChunks';
 
 // eslint-disable-next-line max-statements
 export const webpackClientConfig = ({
@@ -78,7 +78,12 @@ export const webpackClientConfig = ({
 
   config.optimization.set('emitOnErrors', false);
 
-  config.batch(extractCssPluginFactory(configManager));
+  config.batch(
+    extractCssPluginFactory(configManager, {
+      filename: '[name].css',
+      chunkFilename: '[name].chunk.css',
+    })
+  );
 
   if (showProgress) {
     config.plugin('progress').use(WebpackBar, [
@@ -136,24 +141,11 @@ export const webpackClientConfig = ({
     },
   ]);
 
+  config.batch(splitChunksConfig(configManager));
+
   const { hotRefresh } = configManager;
 
   if (hotRefresh?.enabled) {
-    const splitChunks: SplitChunksOptions = {
-      cacheGroups: {
-        default: false,
-        defaultVendors: false,
-        commons: {
-          name: 'hmr',
-          enforce: true,
-          test: /[\\/]node_modules[\\/](react-refresh|webpack-hot-middleware|@pmmmwh[\\/]react-refresh-webpack-plugin)[\\/]/,
-          chunks: 'all',
-        },
-      },
-    };
-
-    config.optimization.splitChunks(splitChunks).set('chunkIds', 'named');
-
     extendEntry(config.entry('platform'), {
       import: [
         'webpack-hot-middleware/client?name=client&dynamicPublicPath=true&path=__webpack_hmr',

package/src/library/webpack/application/client/prod/optimization/splitChunks.ts

@@ -73,7 +73,10 @@ export const splitChunksConfig =
           return false;
         }
 
-        return topLevelFrameworkPaths.some((packagePath) => resource.startsWith(packagePath));
+        return (
+          !resource.startsWith('react-refresh') &&
+          topLevelFrameworkPaths.some((packagePath) => resource.startsWith(packagePath))
+        );
       },
       priority: 40,
       // Don't let webpack eliminate this chunk (prevents this chunk from becoming a part of the commons chunk)
@@ -96,6 +99,7 @@ export const splitChunksConfig =
               minChunks: splitChunks.granularChunksSplitNumber,
               minSize: splitChunks.granularChunksMinSize,
               reuseExistingChunk: true,
+              priority: 30,
               name(module: any, chunks: webpack.Chunk[]) {
                 return crypto
                   .createHash('sha1')
@@ -119,12 +123,25 @@ export const splitChunksConfig =
             commons: {
               name: 'common-chunk',
               minChunks: splitChunks.commonChunkSplitNumber,
+              priority: 30,
             },
           },
         };
         break;
     }
 
+    const { hotRefresh } = configManager;
+
+    if (hotRefresh?.enabled && webpackSplitChunks) {
+      webpackSplitChunks.cacheGroups.hmr = {
+        name: 'hmr',
+        enforce: true,
+        test: /[\\/]node_modules[\\/](react-refresh|webpack-hot-middleware|@pmmmwh[\\/]react-refresh-webpack-plugin)[\\/]/,
+        chunks: 'all',
+        priority: 20,
+      };
+    }
+
     config.optimization
       .splitChunks(webpackSplitChunks)
       // namedChunks должно быть включено, чтобы webpack-flush-chunks смог определить имена чанков от которых зависит чанк бандла после обработчки через splitChunks

package/src/library/webpack/blocks/configToEnv.ts

@@ -5,9 +5,12 @@ import type { ConfigEntry } from '../../../typings/configEntry/common';
 import { shouldUseReactRoot } from '../../../utils/shouldUseReactRoot';
 
 export const configToEnv = (configManager: ConfigManager<ConfigEntry>) => (config: Config) => {
-  const { fileSystemPages } = isApplication(configManager)
+  const { fileSystemPages, shared } = isApplication(configManager)
     ? configManager
-    : { fileSystemPages: { enabled: false, routesDir: false, pagesDir: false } };
+    : {
+        fileSystemPages: { enabled: false, routesDir: false, pagesDir: false },
+        shared: { criticalChunks: [] },
+      };
 
   config.plugin('define').tap((args) => [
     {
@@ -22,6 +25,7 @@ export const configToEnv = (configManager: ConfigManager<ConfigEntry>) => (confi
         fileSystemPages.pagesDir
       ),
       'process.env.__TRAMVAI_CONCURRENT_FEATURES': JSON.stringify(shouldUseReactRoot()),
+      'process.env.__TRAMVAI_CRITICAL_CHUNKS': `'${JSON.stringify(shared.criticalChunks)}'`,
     },
   ]);
 };

package/src/library/webpack/blocks/pwa/client.ts

@@ -54,6 +54,25 @@ export const pwaBlock =
           // @todo CSR fallback or all static pages?
           // do not forget about revision and possible conflict with modifyURLPrefix
         ],
+        manifestTransforms: [
+          (manifest, compilation: any) => {
+            return {
+              // we need to have a relative webmanifest url for precaching
+              manifest: manifest.map((asset) => {
+                const assetName = asset.url.replace(assetsPrefix, '');
+                const assetInfo = compilation.assetsInfo.get(asset.url.replace(assetsPrefix, ''));
+
+                if (assetInfo._webmanifestFilename) {
+                  return {
+                    ...asset,
+                    url: `${pwa.sw.scope}${assetName}`,
+                  };
+                }
+                return asset;
+              }),
+            };
+          },
+        ],
       };
 
       if (pwa.workbox.include) {
@@ -104,18 +123,33 @@ export const pwaBlock =
         config.output.set('devtoolNamespace', 'tramvai');
       }
 
+      config.plugin('define').tap((args) => [
+        {
+          ...args[0],
+          'process.env.ASSETS_PREFIX': JSON.stringify(assetsPrefix),
+        },
+      ]);
+
       config.plugin('workbox').use(workboxPlugin);
     }
 
     if (pwa.webmanifest?.enabled) {
-      const webmanifestPlugin = new WebManifestPlugin(pwa.webmanifest);
+      const webmanifestPlugin = new WebManifestPlugin({
+        manifest: pwa.webmanifest,
+        icon: pwa.icon,
+        assetsPrefix,
+      });
 
       config.plugin('webmanifest').use(webmanifestPlugin);
     }
 
     if (pwa.icon?.src) {
       const iconSrc = path.join(rootDir, root, pwa.icon.src);
-      const pwaIconsPlugin = new PwaIconsPlugin({ ...pwa.icon, src: iconSrc });
+      const pwaIconsPlugin = new PwaIconsPlugin({
+        ...pwa.icon,
+        src: iconSrc,
+        mode: configManager.env,
+      });
 
       config.plugin('pwa-icons').use(pwaIconsPlugin);
     }

package/src/library/webpack/common/main.ts

@@ -99,7 +99,9 @@ export default (configManager: ConfigManager<CliConfigEntry>) => (config: Config
         ...configManager.define[configManager.env],
 
         'process.env.APP_ID': JSON.stringify(configManager.name || 'common'),
-        'process.env.APP_VERSION': JSON.stringify(process.env.APP_VERSION),
+        'process.env.APP_VERSION': process.env.APP_VERSION
+          ? JSON.stringify(process.env.APP_VERSION)
+          : undefined,
 
         'process.env.ENABLE_DEVTOOLS':
           process.env.ENABLE_DEVTOOLS || configManager.env === 'development',