@tramvai/cli 2.98.2 → 2.101.0

package/src/models/config.spec.ts

@@ -41,6 +41,33 @@ it('should populate defaults for config', () => {
             "minicss": {
               "useImportModule": true,
             },
+            "pwa": {
+              "icon": {
+                "dest": "pwa-icons",
+                "sizes": [
+                  36,
+                  48,
+                  72,
+                  96,
+                  144,
+                  192,
+                  512,
+                ],
+              },
+              "meta": {},
+              "sw": {
+                "dest": "sw.js",
+                "scope": "/",
+                "src": "sw.ts",
+              },
+              "webmanifest": {
+                "dest": "/manifest.[hash].json",
+                "enabled": false,
+              },
+              "workbox": {
+                "enabled": false,
+              },
+            },
             "serverRunner": "process",
             "transpilation": {
               "loader": "babel",
@@ -242,6 +269,33 @@ it('should populate defaults for overridable options', () => {
             "minicss": {
               "useImportModule": true,
             },
+            "pwa": {
+              "icon": {
+                "dest": "pwa-icons",
+                "sizes": [
+                  36,
+                  48,
+                  72,
+                  96,
+                  144,
+                  192,
+                  512,
+                ],
+              },
+              "meta": {},
+              "sw": {
+                "dest": "sw.js",
+                "scope": "/",
+                "src": "sw.ts",
+              },
+              "webmanifest": {
+                "dest": "/manifest.[hash].json",
+                "enabled": false,
+              },
+              "workbox": {
+                "enabled": false,
+              },
+            },
             "serverRunner": "process",
             "transpilation": {
               "loader": {

package/src/schema/autogeneratedSchema.json

@@ -525,6 +525,189 @@
               ],
               "type": "string"
             },
+            "pwa": {
+              "title": "PWA configuration (works with `TramvaiPwaModule` from `@tramvai/module-progressive-web-app` library)",
+              "default": {},
+              "type": "object",
+              "properties": {
+                "sw": {
+                  "title": "Service-Worker configuration",
+                  "default": {},
+                  "type": "object",
+                  "properties": {
+                    "src": {
+                      "title": "Path to sw.ts file (relative to \"root\" directory)",
+                      "default": "sw.ts",
+                      "type": "string"
+                    },
+                    "dest": {
+                      "title": "Name of generated SW file (will be placed in \"output.client\" directory)",
+                      "default": "sw.js",
+                      "type": "string"
+                    },
+                    "scope": {
+                      "title": "Scope of SW (see https://developers.google.com/web/ilt/pwa/introduction-to-service-worker#registration_and_scope)",
+                      "default": "/",
+                      "type": "string"
+                    }
+                  },
+                  "additionalProperties": false
+                },
+                "workbox": {
+                  "title": "Workbox configuration",
+                  "default": {},
+                  "type": "object",
+                  "properties": {
+                    "enabled": {
+                      "cli_overridable": "",
+                      "title": "Connect `InjectManifest` from `workbox-webpack-plugin` library",
+                      "default": false,
+                      "anyOf": [
+                        {
+                          "type": "object",
+                          "properties": {
+                            "development": {
+                              "type": "boolean"
+                            },
+                            "production": {
+                              "type": "boolean"
+                            }
+                          },
+                          "additionalProperties": false
+                        },
+                        {
+                          "type": "boolean"
+                        }
+                      ]
+                    }
+                  },
+                  "additionalProperties": false
+                },
+                "webmanifest": {
+                  "title": "WebManifest content (manifest.json or webmanifest will be generated based on this options)",
+                  "default": {},
+                  "type": "object",
+                  "properties": {
+                    "enabled": {
+                      "title": "Create webmanifest file",
+                      "default": false,
+                      "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",
+                      "default": "/manifest.[hash].json",
+                      "type": "string"
+                    },
+                    "scope": {
+                      "title": "prefer to use \"pwa.sw.scope\" instead, this field will be generated automatically",
+                      "type": "string"
+                    },
+                    "name": {
+                      "type": "string"
+                    },
+                    "short_name": {
+                      "type": "string"
+                    },
+                    "description": {
+                      "type": "string"
+                    },
+                    "start_url": {
+                      "type": "string"
+                    },
+                    "display": {
+                      "type": "string"
+                    },
+                    "theme_color": {
+                      "title": "prefer to use \"pwa.meta.themeColor\" instead, this field will be generated automatically",
+                      "type": "string"
+                    },
+                    "background_color": {
+                      "type": "string"
+                    },
+                    "icons": {
+                      "title": "prefer to use \"pwa.icon\" instead, this field will be generated automatically",
+                      "type": "array",
+                      "items": {
+                        "type": "object",
+                        "properties": {
+                          "src": {
+                            "type": "string"
+                          },
+                          "sizes": {
+                            "type": "string"
+                          },
+                          "type": {
+                            "type": "string"
+                          }
+                        },
+                        "additionalProperties": false
+                      }
+                    }
+                  },
+                  "additionalProperties": false
+                },
+                "icon": {
+                  "title": "PWA icons options",
+                  "default": {},
+                  "type": "object",
+                  "properties": {
+                    "src": {
+                      "title": "Path to icon file (relative to \"root\" directory)",
+                      "type": "string"
+                    },
+                    "dest": {
+                      "title": "Folder for generated icons (will be placed in \"output.client\" directory)",
+                      "default": "pwa-icons",
+                      "type": "string"
+                    },
+                    "sizes": {
+                      "title": "Icon sizes",
+                      "default": [
+                        36,
+                        48,
+                        72,
+                        96,
+                        144,
+                        192,
+                        512
+                      ],
+                      "type": "array",
+                      "items": {
+                        "type": "number"
+                      }
+                    }
+                  },
+                  "additionalProperties": false
+                },
+                "meta": {
+                  "title": "PWA meta options",
+                  "default": {},
+                  "type": "object",
+                  "properties": {
+                    "viewport": {
+                      "type": "string"
+                    },
+                    "themeColor": {
+                      "type": "string"
+                    },
+                    "mobileApp": {
+                      "type": "string"
+                    },
+                    "mobileAppIOS": {
+                      "type": "string"
+                    },
+                    "appleTitle": {
+                      "type": "string"
+                    },
+                    "appleStatusBarStyle": {
+                      "type": "string"
+                    }
+                  },
+                  "additionalProperties": false
+                }
+              },
+              "additionalProperties": false
+            },
             "webpack": {
               "title": "experiments configuration for [webpack](https://webpack.js.org/configuration/experiments/)",
               "default": {},

package/src/schema/tramvai.spec.ts

@@ -64,6 +64,33 @@ describe('JSON schema для tramvai.json', () => {
               "minicss": {
                 "useImportModule": true,
               },
+              "pwa": {
+                "icon": {
+                  "dest": "pwa-icons",
+                  "sizes": [
+                    36,
+                    48,
+                    72,
+                    96,
+                    144,
+                    192,
+                    512,
+                  ],
+                },
+                "meta": {},
+                "sw": {
+                  "dest": "sw.js",
+                  "scope": "/",
+                  "src": "sw.ts",
+                },
+                "webmanifest": {
+                  "dest": "/manifest.[hash].json",
+                  "enabled": false,
+                },
+                "workbox": {
+                  "enabled": false,
+                },
+              },
               "serverRunner": "process",
               "transpilation": {
                 "loader": "babel",

package/src/typings/configEntry/application.ts

@@ -1,5 +1,6 @@
 // eslint-disable-next-line no-restricted-imports
 import type { ForkTsCheckerWebpackPluginOptions } from 'fork-ts-checker-webpack-plugin/lib/plugin-options';
+import type { PwaIconOptions, PwaMetaOptions, WebManifestOptions } from '../pwa';
 import type { CliConfigEntry, Experiments } from './cli';
 import type { OverridableOption } from './common';
 
@@ -22,6 +23,60 @@ export interface ApplicationExperiments extends Experiments {
    * @default "process"
    */
   serverRunner?: 'process' | 'thread';
+  /**
+   * @title PWA configuration (works with `TramvaiPwaModule` from `@tramvai/module-progressive-web-app` library)
+   * @default {}
+   */
+  pwa: {
+    /**
+     * @title Service-Worker configuration
+     * @default {}
+     */
+    sw?: {
+      /**
+       * @title Path to sw.ts file (relative to "root" directory)
+       * @default "sw.ts"
+       */
+      src?: string;
+      /**
+       * @title Name of generated SW file (will be placed in "output.client" directory)
+       * @default "sw.js"
+       */
+      dest?: string;
+      /**
+       * @title Scope of SW (see https://developers.google.com/web/ilt/pwa/introduction-to-service-worker#registration_and_scope)
+       * @default "/"
+       */
+      scope?: string;
+    };
+    // @todo optional workbox-window?
+    /**
+     * @title Workbox configuration
+     * @default {}
+     */
+    workbox?: {
+      /**
+       * @title Connect `InjectManifest` from `workbox-webpack-plugin` library
+       * @default false
+       */
+      enabled?: OverridableOption<boolean>;
+    };
+    /**
+     * @title WebManifest content (manifest.json or webmanifest will be generated based on this options)
+     * @default {}
+     */
+    webmanifest?: WebManifestOptions;
+    /**
+     * @title PWA icons options
+     * @default {}
+     */
+    icon?: PwaIconOptions;
+    /**
+     * @title PWA meta options
+     * @default {}
+     */
+    meta?: PwaMetaOptions;
+  };
 }
 
 export interface ApplicationConfigEntry extends CliConfigEntry {

package/src/typings/public.ts

@@ -7,3 +7,5 @@ export interface ImageObject {
 }
 
 export type SvgComponent = ComponentType<SVGProps<SVGElement>>;
+
+export * from './pwa/index';

package/src/typings/pwa/index.ts

@@ -0,0 +1,64 @@
+export type WebManifestOptions = {
+  /**
+   * @title Create webmanifest file
+   * @default false
+   */
+  enabled?: boolean;
+  /**
+   * @title Name of generated manifest file (will be placed in "output.client" directory). You can use `[hash]` placeholder for manifest cache busting
+   * @default "/manifest.[hash].json"
+   */
+  dest?: string;
+  /**
+   * @title prefer to use "pwa.sw.scope" instead, this field will be generated automatically
+   */
+  scope?: string;
+  name?: string;
+  short_name?: string;
+  description?: string;
+  // @todo - example or default with `/?standalone=true`?
+  start_url?: string;
+  display?: string;
+  /**
+   * @title prefer to use "pwa.meta.themeColor" instead, this field will be generated automatically
+   */
+  theme_color?: string;
+  background_color?: string;
+  /**
+   * @title prefer to use "pwa.icon" instead, this field will be generated automatically
+   */
+  icons?: Array<PwaIconItem>;
+};
+
+export type PwaIconItem = {
+  src: string;
+  sizes: string;
+  type?: string;
+};
+
+export type PwaIconOptions = {
+  /**
+   * @title Path to icon file (relative to "root" directory)
+   */
+  src: string;
+  /**
+   * @title Folder for generated icons (will be placed in "output.client" directory)
+   * @default "pwa-icons"
+   */
+  dest?: string;
+  /**
+   * @title Icon sizes
+   * @default [36, 48, 72, 96, 144, 192, 512]
+   */
+  sizes?: number[];
+  // @todo: dest directory
+};
+
+export type PwaMetaOptions = {
+  viewport?: string;
+  themeColor?: string;
+  mobileApp?: string;
+  mobileAppIOS?: string;
+  appleTitle?: string;
+  appleStatusBarStyle?: string;
+};

package/src/validators/commands/checkPwaDependencies.ts

@@ -0,0 +1,17 @@
+import type { ApplicationConfigEntry } from '../../api';
+import type { Validator } from './validator.h';
+
+export const checkPwaDependencies: Validator = async ({ packageManager, config }, parameters) => {
+  const { target } = parameters;
+  const cfg = config.getProject(target) as ApplicationConfigEntry;
+
+  if (cfg.experiments?.pwa?.icon && packageManager.name !== 'unknown') {
+    const sharpInstalled = await packageManager.exists({ name: 'sharp' });
+
+    if (!sharpInstalled) {
+      throw Error('You need to install `sharp` library for PWA icon generation in devDependencies');
+    }
+  }
+
+  return { name: 'checkPwaDependencies', status: 'ok' };
+};

package/lib/utils/webpackBuild.d.ts

@@ -1,5 +0,0 @@
-import type { ConfigManager } from '../config/configManager';
-import type { Context } from '../models/context';
-import type { CliConfigEntry } from '../typings/configEntry/cli';
-declare const _default: (configManager: ConfigManager<CliConfigEntry>, config: any, context: Context) => Promise<void>;
-export default _default;

package/lib/utils/webpackBuild.js

@@ -1,32 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const webpack_1 = tslib_1.__importDefault(require("webpack"));
-const rimraf_1 = tslib_1.__importDefault(require("rimraf"));
-const npmRequire_1 = require("./npmRequire");
-exports.default = (configManager, config, context) => {
-    rimraf_1.default.sync(`${configManager.buildPath}/*.*`, {});
-    // eslint-disable-next-line no-async-promise-executor
-    return new Promise((resolve, reject) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
-        var _a;
-        if ((_a = configManager.imageOptimization) === null || _a === void 0 ? void 0 : _a.enabled) {
-            yield (0, npmRequire_1.npmRequire)({
-                cliRootDir: context.cliRootDir,
-                packageManager: context.cliPackageManager,
-                packageName: 'image-webpack-loader',
-                description: 'Устанавливаем зависимости для опции imageOptimization',
-            });
-        }
-        (0, webpack_1.default)(config, (err, stats) => {
-            if (err || stats.hasErrors()) {
-                return reject(err ||
-                    new Error(stats
-                        .toJson()
-                        .errors.map((error) => { var _a; return (_a = error.message) !== null && _a !== void 0 ? _a : error; })
-                        .join('\n')));
-            }
-            return resolve();
-        });
-    }));
-};
-//# sourceMappingURL=webpackBuild.js.map

package/lib/utils/webpackBuild.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"webpackBuild.js","sourceRoot":"","sources":["../../src/utils/webpackBuild.ts"],"names":[],"mappings":";;;AAAA,8DAA8B;AAC9B,4DAA4B;AAE5B,6CAA0C;AAI1C,kBAAe,CAAC,aAA4C,EAAE,MAAM,EAAE,OAAgB,EAAE,EAAE;IACxF,gBAAM,CAAC,IAAI,CAAC,GAAG,aAAa,CAAC,SAAS,MAAM,EAAE,EAAE,CAAC,CAAC;IAElD,qDAAqD;IACrD,OAAO,IAAI,OAAO,CAAO,CAAO,OAAO,EAAE,MAAM,EAAE,EAAE;;QACjD,IAAI,MAAA,aAAa,CAAC,iBAAiB,0CAAE,OAAO,EAAE;YAC5C,MAAM,IAAA,uBAAU,EAAC;gBACf,UAAU,EAAE,OAAO,CAAC,UAAU;gBAC9B,cAAc,EAAE,OAAO,CAAC,iBAAiB;gBACzC,WAAW,EAAE,sBAAsB;gBACnC,WAAW,EAAE,uDAAuD;aACrE,CAAC,CAAC;SACJ;QAED,IAAA,iBAAO,EAAC,MAAM,EAAE,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE;YAC7B,IAAI,GAAG,IAAI,KAAK,CAAC,SAAS,EAAE,EAAE;gBAC5B,OAAO,MAAM,CACX,GAAG;oBACD,IAAI,KAAK,CACP,KAAK;yBACF,MAAM,EAAE;yBACR,MAAM,CAAC,GAAG,CAAC,CAAC,KAAU,EAAE,EAAE,WAAC,OAAA,MAAA,KAAK,CAAC,OAAO,mCAAI,KAAK,CAAA,EAAA,CAAC;yBAClD,IAAI,CAAC,IAAI,CAAC,CACd,CACJ,CAAC;aACH;YAED,OAAO,OAAO,EAAE,CAAC;QACnB,CAAC,CAAC,CAAC;IACL,CAAC,CAAA,CAAC,CAAC;AACL,CAAC,CAAC"}

package/src/utils/webpackBuild.ts

@@ -1,38 +0,0 @@
-import webpack from 'webpack';
-import rimraf from 'rimraf';
-import type { ConfigManager } from '../config/configManager';
-import { npmRequire } from './npmRequire';
-import type { Context } from '../models/context';
-import type { CliConfigEntry } from '../typings/configEntry/cli';
-
-export default (configManager: ConfigManager<CliConfigEntry>, config, context: Context) => {
-  rimraf.sync(`${configManager.buildPath}/*.*`, {});
-
-  // eslint-disable-next-line no-async-promise-executor
-  return new Promise<void>(async (resolve, reject) => {
-    if (configManager.imageOptimization?.enabled) {
-      await npmRequire({
-        cliRootDir: context.cliRootDir,
-        packageManager: context.cliPackageManager,
-        packageName: 'image-webpack-loader',
-        description: 'Устанавливаем зависимости для опции imageOptimization',
-      });
-    }
-
-    webpack(config, (err, stats) => {
-      if (err || stats.hasErrors()) {
-        return reject(
-          err ||
-            new Error(
-              stats
-                .toJson()
-                .errors.map((error: any) => error.message ?? error)
-                .join('\n')
-            )
-        );
-      }
-
-      return resolve();
-    });
-  });
-};