@tramvai/cli 2.98.2 → 2.101.0

package/schema.json

@@ -546,6 +546,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/api/start-prod/providers/application.ts

@@ -46,7 +46,7 @@ export const applicationsProviders: readonly Provider[] = [
       ).withSettings({
         buildType: 'server',
       });
-      const { debug, port, staticPort, staticHost, output } = serverConfigManager;
+      const { debug, port, assetsPrefix } = serverConfigManager;
       const root = serverConfigManager.buildPath;
 
       return fork(path.resolve(root, 'server.js'), [], {
@@ -58,11 +58,10 @@ export const applicationsProviders: readonly Provider[] = [
           ...env,
           ...process.env,
           NODE_ENV: 'production',
+          TRAMVAI_CLI_COMMAND: 'start-prod',
           PORT: `${port}`,
           PORT_SERVER: `${port}`,
-          ASSETS_PREFIX:
-            process.env.ASSETS_PREFIX ??
-            `http://${staticHost}:${staticPort}/${output.client.replace(/\/$/, '')}/`,
+          ASSETS_PREFIX: assetsPrefix,
         },
       });
     },

package/src/commands/analyze/command.ts

@@ -1,6 +1,7 @@
 import { CLICommand } from '../../models/command';
 import { checkApplication } from '../../validators/commands/checkBuild';
 import { checkConfigExists } from '../../validators/commands/checkConfigExists';
+import { checkPwaDependencies } from '../../validators/commands/checkPwaDependencies';
 import { runMigrationsAndCheckVersions } from '../../validators/commands/runMigrationsAndCheckVersions';
 
 export type Params = {
@@ -38,7 +39,12 @@ class AnalyzeCommand extends CLICommand<Params> {
 
   alias = 'a';
 
-  validators = [checkConfigExists, checkApplication, runMigrationsAndCheckVersions];
+  validators = [
+    checkConfigExists,
+    checkApplication,
+    runMigrationsAndCheckVersions,
+    checkPwaDependencies,
+  ];
 
   action(parameters: Params) {
     // used require for lazy code execution

package/src/commands/build/command.ts

@@ -4,6 +4,7 @@ import { checkConfigExists } from '../../validators/commands/checkConfigExists';
 import { checkDependencies } from '../../validators/commands/checkDependencies';
 import { runMigrationsAndCheckVersions } from '../../validators/commands/runMigrationsAndCheckVersions';
 import type { BuildCommand as BuildCommandType } from '../../api/build';
+import { checkPwaDependencies } from '../../validators/commands/checkPwaDependencies';
 
 export type Params = Parameters<BuildCommandType>[0] & {
   target: string;
@@ -65,6 +66,7 @@ class BuildCommand extends CLICommand<Params> {
     checkApplication,
     runMigrationsAndCheckVersions,
     checkDependencies,
+    checkPwaDependencies,
   ];
 
   action(parameters: Params) {

package/src/commands/start/command.ts

@@ -4,6 +4,7 @@ import { checkConfigExists } from '../../validators/commands/checkConfigExists';
 import { checkDependencies } from '../../validators/commands/checkDependencies';
 import { runMigrationsAndCheckVersions } from '../../validators/commands/runMigrationsAndCheckVersions';
 import type { StartCommand as StartCommandType } from '../../api/start';
+import { checkPwaDependencies } from '../../validators/commands/checkPwaDependencies';
 
 export type Params = Parameters<StartCommandType>[0] & {
   target: string;
@@ -113,6 +114,7 @@ export class StartCommand extends CLICommand<Params> {
     checkApplication,
     runMigrationsAndCheckVersions,
     checkDependencies,
+    checkPwaDependencies,
   ];
 
   action(parameters) {

package/src/commands/start-prod/command.ts

@@ -2,6 +2,7 @@ import { CLICommand } from '../../models/command';
 import { checkConfigExists } from '../../validators/commands/checkConfigExists';
 import { checkApplication } from '../../validators/commands/checkBuild';
 import { runMigrationsAndCheckVersions } from '../../validators/commands/runMigrationsAndCheckVersions';
+import { checkPwaDependencies } from '../../validators/commands/checkPwaDependencies';
 
 export interface Params {
   target: string;
@@ -82,7 +83,12 @@ export class StartProdCommand extends CLICommand<Params> {
 
   alias = 'sp';
 
-  validators = [checkConfigExists, checkApplication, runMigrationsAndCheckVersions];
+  validators = [
+    checkConfigExists,
+    checkApplication,
+    runMigrationsAndCheckVersions,
+    checkPwaDependencies,
+  ];
 
   action(parameters: Params) {
     // used require for lazy code execution

package/src/commands/static/application.ts

@@ -72,10 +72,7 @@ export const staticApp = async (
   });
 
   const staticServer = await startStaticServer(clientConfigManager);
-  const staticAssetsPrefix = `http://${staticHost}:${staticPort}/${output.client.replace(
-    /\/$/,
-    ''
-  )}/`;
+  const staticAssetsPrefix = serverConfigManager.assetsPrefix;
 
   const server = node(path.resolve(root, 'server.js'), [], {
     cwd: root,

package/src/config/configManager.ts

@@ -86,12 +86,14 @@ export type ConfigManager<
     buildPath: string;
     withSettings(settings: Settings<E>): ConfigManager<C, E>;
     dehydrate(): [C, Settings<E>];
+    assetsPrefix?: string;
   };
 
 export const DEFAULT_PORT = 3000;
 export const DEFAULT_STATIC_PORT = 4000;
 export const DEFAULT_STATIC_MODULE_PORT = 4040;
 
+// eslint-disable-next-line max-statements, complexity
 export const createConfigManager = <C extends ConfigEntry = ConfigEntry, E extends Env = Env>(
   configEntry: C,
   settings: Settings<E>
@@ -165,10 +167,45 @@ export const createConfigManager = <C extends ConfigEntry = ConfigEntry, E exten
   };
 
   if (isApplication(config)) {
+    config.assetsPrefix =
+      process.env.ASSETS_PREFIX && process.env.ASSETS_PREFIX !== 'static'
+        ? process.env.ASSETS_PREFIX
+        : `http://${config.staticHost}:${config.staticPort}/${config.output.client.replace(
+            /\/$/,
+            ''
+          )}/`;
     config.buildPath = resolve(
       rootDir,
       buildType === 'server' ? config.output.server : config.output.client
     );
+
+    const pwa = config.experiments?.pwa;
+
+    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,
+        short_name: pwa.webmanifest.name ?? config.name,
+        theme_color: pwa.webmanifest.theme_color ?? pwa.meta.themeColor,
+      };
+
+      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));
+      }
+    }
   } else if (isChildApp(config)) {
     config.buildPath = resolve(rootDir, ...config.output.split('/'));
   } else if (isModule(config)) {

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

@@ -19,6 +19,7 @@ import nodeClient from '../../blocks/nodeClient';
 import { pagesResolve } from '../../blocks/pagesResolve';
 import { configToEnv } from '../../blocks/configToEnv';
 import { DEFAULT_STATS_OPTIONS, DEFAULT_STATS_FIELDS } from '../../constants/stats';
+import { pwaBlock } from '../../blocks/pwa/client';
 
 export default (configManager: ConfigManager<ApplicationConfigEntry>) => (config: Config) => {
   const { polyfill, fileSystemPages } = configManager;
@@ -41,6 +42,7 @@ export default (configManager: ConfigManager<ApplicationConfigEntry>) => (config
     .batch(css(configManager))
     .batch(nodeClient(configManager))
     .batch(postcssAssets(configManager))
+    .batch(pwaBlock(configManager))
     .when(fileSystemPages.enabled, (cfg) => cfg.batch(pagesResolve(configManager)));
 
   config

package/src/library/webpack/application/server/common.ts

@@ -17,6 +17,7 @@ import { browserslistConfigResolve } from '../../blocks/browserslistConfig';
 import { configToEnv } from '../../blocks/configToEnv';
 import { commonApplication } from '../common';
 import { extractCssPluginFactory } from '../../blocks/extractCssPlugin';
+import { pwaBlock } from '../../blocks/pwa/server';
 
 // eslint-disable-next-line import/no-default-export
 export default (configManager: ConfigManager<ApplicationConfigEntry>) => (config: Config) => {
@@ -45,6 +46,7 @@ export default (configManager: ConfigManager<ApplicationConfigEntry>) => (config
       })
     )
     .batch(css(configManager))
+    .batch(pwaBlock(configManager))
     .when(fileSystemPages.enabled, (cfg) => cfg.batch(pagesResolve(configManager)));
 
   config.output

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

@@ -0,0 +1,83 @@
+import path from 'path';
+import type Config from 'webpack-chain';
+import { InjectManifest } from 'workbox-webpack-plugin';
+import type { ConfigManager } from '../../../../config/configManager';
+import type { ApplicationConfigEntry } from '../../../../typings/configEntry/application';
+import { PwaIconsPlugin } from '../../plugins/PwaIconsPlugin';
+import { WebManifestPlugin } from '../../plugins/WebManifestPlugin';
+import { pwaSharedBlock } from './shared';
+
+export const pwaBlock =
+  (configManager: ConfigManager<ApplicationConfigEntry>) => (config: Config) => {
+    const {
+      experiments: { pwa },
+      rootDir,
+      root,
+      output,
+      env,
+      modern,
+      sourceMap,
+      assetsPrefix,
+    } = configManager;
+
+    config.batch(pwaSharedBlock(configManager));
+
+    // @todo check `@tramvai/module-progressive-web-app` is installed
+
+    if (pwa.workbox?.enabled) {
+      // @todo check `sw.ts` exists
+      // @todo: static HTML caching ??? full offline mode for tramvai static ???
+      const workboxOptions: InjectManifest['config'] = {
+        swSrc: path.join(rootDir, root, pwa.sw?.src),
+        swDest: path.join(rootDir, output.client, pwa.sw?.dest),
+        exclude: [/hmr\.js$/, /\.map$/, /\.hot-update\./],
+        // @todo maybe less for production?
+        maximumFileSizeToCacheInBytes: 10 * 1024 * 1024,
+      };
+
+      if (env === 'production') {
+        workboxOptions.modifyURLPrefix = {
+          '': assetsPrefix,
+        };
+      }
+
+      if (modern) {
+        workboxOptions.swDest = workboxOptions.swDest.replace(/\.js$/, '.modern.js');
+      }
+
+      // @todo: break hmr on client when sw.ts is changed - infinity loop !!!
+
+      const workboxPlugin = new InjectManifest(workboxOptions);
+
+      // https://github.com/GoogleChrome/workbox/issues/1790#issuecomment-1241356293
+      if (env === 'development') {
+        Object.defineProperty(workboxPlugin, 'alreadyCalled', {
+          get() {
+            return false;
+          },
+          set() {},
+        });
+      }
+
+      // Fix `ERROR in Invalid URL` problem
+      // https://github.com/webpack/webpack/issues/9570#issuecomment-520713006
+      if (sourceMap) {
+        config.output.set('devtoolNamespace', 'tramvai');
+      }
+
+      config.plugin('workbox').use(workboxPlugin);
+    }
+
+    if (pwa.webmanifest?.enabled) {
+      const webmanifestPlugin = new WebManifestPlugin(pwa.webmanifest);
+
+      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 });
+
+      config.plugin('pwa-icons').use(pwaIconsPlugin);
+    }
+  };

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

@@ -0,0 +1,9 @@
+import type Config from 'webpack-chain';
+import type { ConfigManager } from '../../../../config/configManager';
+import type { ApplicationConfigEntry } from '../../../../typings/configEntry/application';
+import { pwaSharedBlock } from './shared';
+
+export const pwaBlock =
+  (configManager: ConfigManager<ApplicationConfigEntry>) => (config: Config) => {
+    config.batch(pwaSharedBlock(configManager));
+  };

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

@@ -0,0 +1,26 @@
+import path from 'path';
+import type Config from 'webpack-chain';
+import type { ConfigManager } from '../../../../config/configManager';
+import type { ApplicationConfigEntry } from '../../../../typings/configEntry/application';
+
+export const pwaSharedBlock =
+  (configManager: ConfigManager<ApplicationConfigEntry>) => (config: Config) => {
+    const {
+      experiments: { pwa },
+      rootDir,
+      root,
+    } = configManager;
+
+    config.plugin('define').tap((args) => [
+      {
+        ...args[0],
+        'process.env.TRAMVAI_PWA_WORKBOX_ENABLED': JSON.stringify(pwa.workbox?.enabled),
+        // @todo duplicated logic with path.join
+        'process.env.TRAMVAI_PWA_SW_SRC': JSON.stringify(path.join(rootDir, root, pwa.sw?.src)),
+        'process.env.TRAMVAI_PWA_SW_DEST': JSON.stringify(pwa.sw?.dest),
+        'process.env.TRAMVAI_PWA_SW_SCOPE': JSON.stringify(pwa.sw?.scope),
+        'process.env.TRAMVAI_PWA_MANIFEST_ENABLED': JSON.stringify(pwa.webmanifest?.enabled),
+        'process.env.TRAMVAI_PWA_MANIFEST_DEST': JSON.stringify(pwa.webmanifest?.dest),
+      },
+    ]);
+  };

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

@@ -0,0 +1,87 @@
+import type webpack from 'webpack';
+import type { Compiler } from 'webpack';
+import type Sharp from 'sharp';
+import type { PwaIconOptions } from '../../../typings/pwa';
+
+const pluginName = 'PwaIconsPlugin';
+
+export class PwaIconsPlugin implements webpack.WebpackPluginInstance {
+  private hash: string;
+
+  constructor(private options: PwaIconOptions) {
+    this.options = options;
+  }
+
+  apply(compiler: Compiler) {
+    const { webpack } = compiler;
+    const { Compilation } = webpack;
+    const { RawSource } = webpack.sources;
+    const { src, dest, sizes } = this.options;
+
+    compiler.hooks.thisCompilation.tap(pluginName, (compilation) => {
+      // watch icon source file
+      if (!compilation.fileDependencies.has(src)) {
+        compilation.fileDependencies.add(src);
+      }
+
+      compilation.hooks.processAssets.tapPromise(
+        {
+          name: pluginName,
+          stage: Compilation.PROCESS_ASSETS_STAGE_ADDITIONS,
+        },
+        async () => {
+          try {
+            const sharp: typeof Sharp = require('sharp');
+            // check icon source file updates
+            const nextHash = await new Promise<string>((resolve) => {
+              compilation.fileSystemInfo.getFileHash(src, (_, hash) => {
+                resolve(hash);
+              });
+            });
+
+            if (!this.hash) {
+              this.hash = nextHash;
+            } else if (this.hash === nextHash) {
+              // skip if icon source file not changed
+              return;
+            }
+
+            // @todo persistent cache between builds !!!
+            const promises = sizes.map((size) => {
+              return sharp(src)
+                .resize({ width: size, height: size })
+                .png({
+                  quality: 95,
+                  compressionLevel: 8,
+                  adaptiveFiltering: true,
+                  progressive: true,
+                  force: true,
+                })
+                .toBuffer()
+                .then((content) => ({
+                  filename: `${dest}/${size}x${size}.png`,
+                  content,
+                }));
+            });
+
+            const results = await Promise.all(promises);
+
+            results.forEach(({ filename, content }) => {
+              const source = new RawSource(content);
+              const asset = compilation.getAsset(filename);
+
+              if (asset) {
+                compilation.updateAsset(filename, source);
+              } else {
+                compilation.emitAsset(filename, source);
+              }
+            });
+          } catch (e) {
+            // @todo: throw error?
+            console.error('PWA icons processing error:', e);
+          }
+        }
+      );
+    });
+  }
+}

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

@@ -0,0 +1,32 @@
+import type webpack from 'webpack';
+import type { Compiler } from 'webpack';
+import type { WebManifestOptions } from '../../../typings/pwa';
+
+const pluginName = 'WebManifestPlugin';
+
+export class WebManifestPlugin implements webpack.WebpackPluginInstance {
+  constructor(private options: WebManifestOptions) {
+    this.options = options;
+  }
+
+  apply(compiler: Compiler) {
+    const { webpack } = compiler;
+    const { Compilation } = webpack;
+    const { RawSource } = webpack.sources;
+    const { dest, enabled, ...content } = this.options;
+
+    compiler.hooks.thisCompilation.tap(pluginName, (compilation) => {
+      compilation.hooks.processAssets.tap(
+        {
+          name: pluginName,
+          stage: Compilation.PROCESS_ASSETS_STAGE_ADDITIONS,
+        },
+        () => {
+          const manifestFilename = dest;
+
+          compilation.emitAsset(manifestFilename, new RawSource(JSON.stringify(content)));
+        }
+      );
+    });
+  }
+}