@tramvai/cli 2.119.5 → 2.121.2

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/models/config.spec.ts

@@ -102,6 +102,7 @@ it('should populate defaults for config', () => {
           "root": "src",
           "serverApiDir": "src/api",
           "shared": {
+            "criticalChunks": [],
             "deps": [],
             "flexibleTramvaiVersions": true,
           },
@@ -159,6 +160,7 @@ it('should populate defaults for config', () => {
           },
           "root": "packages/child-app",
           "shared": {
+            "criticalChunks": [],
             "deps": [],
             "flexibleTramvaiVersions": true,
           },
@@ -337,6 +339,7 @@ it('should populate defaults for overridable options', () => {
           "root": "src",
           "serverApiDir": "src/api",
           "shared": {
+            "criticalChunks": [],
             "deps": [],
             "flexibleTramvaiVersions": true,
           },
@@ -408,6 +411,7 @@ it('should populate defaults for overridable options', () => {
           },
           "root": "packages/child-app",
           "shared": {
+            "criticalChunks": [],
             "deps": [],
             "flexibleTramvaiVersions": true,
           },

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@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/src/schema/tramvai.spec.ts

@@ -125,6 +125,7 @@ describe('JSON schema для tramvai.json', () => {
             "root": "src/app",
             "serverApiDir": "src/api",
             "shared": {
+              "criticalChunks": [],
               "deps": [],
               "flexibleTramvaiVersions": true,
             },
@@ -182,6 +183,7 @@ describe('JSON schema для tramvai.json', () => {
             },
             "root": "src/module",
             "shared": {
+              "criticalChunks": [],
               "deps": [],
               "flexibleTramvaiVersions": true,
             },

package/src/typings/configEntry/cli.ts

@@ -302,6 +302,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/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;