@tramvai/cli 2.120.0 → 2.122.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tramvai/cli",
-  "version": "2.120.0",
+  "version": "2.122.0",
   "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.120.0",
-    "@tramvai/tools-check-versions": "0.4.14",
-    "@tramvai/tools-migrate": "0.6.18",
+    "@tramvai/react": "2.122.0",
+    "@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@8168": {
+                              "__@match@8191": {
                                 "type": "object",
                                 "additionalProperties": false
                               },
-                              "__@replace@8170": {
+                              "__@replace@8193": {
                                 "type": "object",
                                 "additionalProperties": false
                               },
-                              "__@search@8173": {
+                              "__@search@8196": {
                                 "type": "object",
                                 "additionalProperties": false
                               },
-                              "__@split@8175": {
+                              "__@split@8198": {
                                 "type": "object",
                                 "additionalProperties": false
                               },
-                              "__@matchAll@8177": {
+                              "__@matchAll@8200": {
                                 "type": "object",
                                 "additionalProperties": false
                               }
@@ -1793,23 +1793,23 @@
                                 "dotAll": {
                                   "type": "boolean"
                                 },
-                                "__@match@8168": {
+                                "__@match@8191": {
                                   "type": "object",
                                   "additionalProperties": false
                                 },
-                                "__@replace@8170": {
+                                "__@replace@8193": {
                                   "type": "object",
                                   "additionalProperties": false
                                 },
-                                "__@search@8173": {
+                                "__@search@8196": {
                                   "type": "object",
                                   "additionalProperties": false
                                 },
-                                "__@split@8175": {
+                                "__@split@8198": {
                                   "type": "object",
                                   "additionalProperties": false
                                 },
-                                "__@matchAll@8177": {
+                                "__@matchAll@8200": {
                                   "type": "object",
                                   "additionalProperties": false
                                 }
@@ -2443,23 +2443,23 @@
                                   "dotAll": {
                                     "type": "boolean"
                                   },
-                                  "__@match@8168": {
+                                  "__@match@8191": {
                                     "type": "object",
                                     "additionalProperties": false
                                   },
-                                  "__@replace@8170": {
+                                  "__@replace@8193": {
                                     "type": "object",
                                     "additionalProperties": false
                                   },
-                                  "__@search@8173": {
+                                  "__@search@8196": {
                                     "type": "object",
                                     "additionalProperties": false
                                   },
-                                  "__@split@8175": {
+                                  "__@split@8198": {
                                     "type": "object",
                                     "additionalProperties": false
                                   },
-                                  "__@matchAll@8177": {
+                                  "__@matchAll@8200": {
                                     "type": "object",
                                     "additionalProperties": false
                                   }

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/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',

package/src/library/webpack/plugins/PwaIconsPlugin.ts

@@ -8,7 +8,11 @@ const pluginName = 'PwaIconsPlugin';
 export class PwaIconsPlugin implements webpack.WebpackPluginInstance {
   private hash: string;
 
-  constructor(private options: PwaIconOptions) {
+  constructor(
+    private options: PwaIconOptions & {
+      mode: 'production' | 'development';
+    }
+  ) {
     this.options = options;
   }
 
@@ -16,7 +20,7 @@ export class PwaIconsPlugin implements webpack.WebpackPluginInstance {
     const { webpack } = compiler;
     const { Compilation } = webpack;
     const { RawSource } = webpack.sources;
-    const { src, dest, sizes } = this.options;
+    const { src, dest, sizes, mode } = this.options;
 
     compiler.hooks.thisCompilation.tap(pluginName, (compilation) => {
       // watch icon source file
@@ -27,7 +31,8 @@ export class PwaIconsPlugin implements webpack.WebpackPluginInstance {
       compilation.hooks.processAssets.tapPromise(
         {
           name: pluginName,
-          stage: Compilation.PROCESS_ASSETS_STAGE_ADDITIONS,
+          // to work before WebManifestPlugin
+          stage: Compilation.PROCESS_ASSETS_STAGE_ADDITIONS - 1,
         },
         async () => {
           try {
@@ -59,21 +64,23 @@ export class PwaIconsPlugin implements webpack.WebpackPluginInstance {
                 })
                 .toBuffer()
                 .then((content) => ({
-                  filename: `${dest}/${size}x${size}.png`,
+                  filename: `${dest}/${size}x${size}${
+                    mode === 'development' ? '' : `.${this.hash}`
+                  }.png`,
                   content,
                 }));
             });
 
             const results = await Promise.all(promises);
 
-            results.forEach(({ filename, content }) => {
+            results.forEach(({ filename, content }, i) => {
               const source = new RawSource(content);
               const asset = compilation.getAsset(filename);
 
               if (asset) {
-                compilation.updateAsset(filename, source);
+                compilation.updateAsset(filename, source, { _pwaIconSize: sizes[i] });
               } else {
-                compilation.emitAsset(filename, source);
+                compilation.emitAsset(filename, source, { _pwaIconSize: sizes[i] });
               }
             });
           } catch (e) {

package/src/library/webpack/plugins/WebManifestPlugin.ts

@@ -1,11 +1,13 @@
 import type webpack from 'webpack';
 import type { Compiler } from 'webpack';
-import type { WebManifestOptions } from '../../../typings/pwa';
+import type { PwaIconOptions, WebManifestOptions } from '../../../typings/pwa';
 
 const pluginName = 'WebManifestPlugin';
 
 export class WebManifestPlugin implements webpack.WebpackPluginInstance {
-  constructor(private options: WebManifestOptions) {
+  constructor(
+    private options: { manifest: WebManifestOptions; icon: PwaIconOptions; assetsPrefix: string }
+  ) {
     this.options = options;
   }
 
@@ -13,7 +15,11 @@ export class WebManifestPlugin implements webpack.WebpackPluginInstance {
     const { webpack } = compiler;
     const { Compilation } = webpack;
     const { RawSource } = webpack.sources;
-    const { dest, enabled, ...content } = this.options;
+    const {
+      manifest: { dest, enabled, ...content },
+      icon,
+      assetsPrefix,
+    } = this.options;
 
     compiler.hooks.thisCompilation.tap(pluginName, (compilation) => {
       compilation.hooks.processAssets.tap(
@@ -21,10 +27,34 @@ export class WebManifestPlugin implements webpack.WebpackPluginInstance {
           name: pluginName,
           stage: Compilation.PROCESS_ASSETS_STAGE_ADDITIONS,
         },
-        () => {
+        (compilationAssets) => {
+          if (!content.icons && icon?.src) {
+            const assets = Object.keys(compilationAssets);
+
+            assets.forEach((asset) => {
+              const assetInfo = compilation.assetsInfo.get(asset);
+              // asset info `_pwaIconSize` added in PwaIconsPlugin
+              const size = assetInfo._pwaIconSize;
+
+              if (size) {
+                if (!content.icons) {
+                  content.icons = [];
+                }
+
+                content.icons.push({
+                  src: `${assetsPrefix}${asset}`,
+                  sizes: `${size}x${size}`,
+                  type: 'image/png',
+                });
+              }
+            });
+          }
+
           const manifestFilename = dest.replace(/^\//, '');
 
-          compilation.emitAsset(manifestFilename, new RawSource(JSON.stringify(content, null, 2)));
+          compilation.emitAsset(manifestFilename, new RawSource(JSON.stringify(content, null, 2)), {
+            _webmanifestFilename: manifestFilename,
+          });
         }
       );
     });

package/src/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@8168": {
+                        "__@match@8191": {
                           "type": "object",
                           "additionalProperties": false
                         },
-                        "__@replace@8170": {
+                        "__@replace@8193": {
                           "type": "object",
                           "additionalProperties": false
                         },
-                        "__@search@8173": {
+                        "__@search@8196": {
                           "type": "object",
                           "additionalProperties": false
                         },
-                        "__@split@8175": {
+                        "__@split@8198": {
                           "type": "object",
                           "additionalProperties": false
                         },
-                        "__@matchAll@8177": {
+                        "__@matchAll@8200": {
                           "type": "object",
                           "additionalProperties": false
                         }
@@ -1764,23 +1764,23 @@
                         "dotAll": {
                           "type": "boolean"
                         },
-                        "__@match@8168": {
+                        "__@match@8191": {
                           "type": "object",
                           "additionalProperties": false
                         },
-                        "__@replace@8170": {
+                        "__@replace@8193": {
                           "type": "object",
                           "additionalProperties": false
                         },
-                        "__@search@8173": {
+                        "__@search@8196": {
                           "type": "object",
                           "additionalProperties": false
                         },
-                        "__@split@8175": {
+                        "__@split@8198": {
                           "type": "object",
                           "additionalProperties": false
                         },
-                        "__@matchAll@8177": {
+                        "__@matchAll@8200": {
                           "type": "object",
                           "additionalProperties": false
                         }
@@ -2406,23 +2406,23 @@
                         "dotAll": {
                           "type": "boolean"
                         },
-                        "__@match@8168": {
+                        "__@match@8191": {
                           "type": "object",
                           "additionalProperties": false
                         },
-                        "__@replace@8170": {
+                        "__@replace@8193": {
                           "type": "object",
                           "additionalProperties": false
                         },
-                        "__@search@8173": {
+                        "__@search@8196": {
                           "type": "object",
                           "additionalProperties": false
                         },
-                        "__@split@8175": {
+                        "__@split@8198": {
                           "type": "object",
                           "additionalProperties": false
                         },
-                        "__@matchAll@8177": {
+                        "__@matchAll@8200": {
                           "type": "object",
                           "additionalProperties": false
                         }

package/src/typings/pwa/index.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;