@tramvai/cli 7.5.3 → 7.11.0

package/src/api/start/providers/shared.ts

@@ -1,8 +1,10 @@
 import type { Provider } from '@tinkoff/dippy';
 import { provide } from '@tinkoff/dippy';
+import { nanoid } from 'nanoid';
 import { STRICT_ERROR_HANDLE } from '../tokens';
 import { COMMAND_PARAMETERS_TOKEN } from '../../../di/tokens';
 import type { Params } from '../index';
+import { BUILD_ID_TOKEN } from '../../../builder/webpack/tokens';
 
 export const sharedProviders: readonly Provider[] = [
   provide({
@@ -14,4 +16,10 @@ export const sharedProviders: readonly Provider[] = [
       parameters: COMMAND_PARAMETERS_TOKEN,
     },
   }),
+  provide({
+    provide: BUILD_ID_TOKEN,
+    useFactory: () => {
+      return nanoid();
+    },
+  }),
 ] as const;

package/src/api/start-prod/providers/application.ts

@@ -18,6 +18,7 @@ import type { ConfigManager } from '../../../config/configManager';
 import { createConfigManager } from '../../../config/configManager';
 import { selfSignedCertificateProvider } from '../../shared/providers/selfSignedCertificateProvider';
 import { createServer } from '../../start/utils/createServer';
+import { BUILD_ID_TOKEN } from '../../../builder/webpack/tokens';
 
 export const applicationsProviders: readonly Provider[] = [
   ...selfSignedCertificateProvider,
@@ -35,8 +36,9 @@ export const applicationsProviders: readonly Provider[] = [
   }),
   provide({
     provide: CONFIG_MANAGER_TOKEN,
-    useFactory: ({ configEntry, parameters, portManager }) =>
+    useFactory: ({ configEntry, parameters, portManager, buildId }) =>
       createConfigManager(configEntry as ApplicationConfigEntry, {
+        buildId,
         ...parameters,
         appEnv: parameters.env,
         env: 'production',
@@ -48,6 +50,7 @@ export const applicationsProviders: readonly Provider[] = [
       configEntry: CONFIG_ENTRY_TOKEN,
       parameters: COMMAND_PARAMETERS_TOKEN,
       portManager: PORT_MANAGER_TOKEN,
+      buildId: BUILD_ID_TOKEN,
     },
   }),
   provide({

package/src/api/start-prod/providers/shared.ts

@@ -4,11 +4,13 @@ import fastify from 'fastify';
 import fastifyCompress from '@fastify/compress';
 import fastifyStatic from '@fastify/static';
 import zlib from 'zlib';
+import { nanoid } from 'nanoid';
 import { CLOSE_HANDLER_TOKEN, INIT_HANDLER_TOKEN, PROCESS_HANDLER_TOKEN } from '../tokens';
 import { CONFIG_MANAGER_TOKEN, PORT_MANAGER_TOKEN, STATIC_SERVER_TOKEN } from '../../../di/tokens';
 import { stopServer } from '../../start/utils/stopServer';
 import { listenServer } from '../../start/utils/listenServer';
 import { isApplication, isChildApp } from '../../../config/validate';
+import { BUILD_ID_TOKEN } from '../../../builder/webpack/tokens';
 
 export const sharedProviders: readonly Provider[] = [
   provide({
@@ -89,4 +91,10 @@ export const sharedProviders: readonly Provider[] = [
       portManager: PORT_MANAGER_TOKEN,
     },
   }),
+  provide({
+    provide: BUILD_ID_TOKEN,
+    useFactory: () => {
+      return nanoid();
+    },
+  }),
 ] as const;

package/src/builder/webpack/devServer/pool/process/pool.ts

@@ -41,6 +41,7 @@ export const ProcessWorkerBridge: WorkerBridgeFactory<Worker> = (di) => {
         // https://nodejs.org/dist/latest-v15.x/docs/api/all.html#cluster_how_it_works
         PORT: `${configManager.port}`,
         PORT_SERVER: `${configManager.port}`,
+        HOST: `${configManager.host}`,
         HOST_STATIC: `${configManager.staticHost}`,
         PORT_STATIC: `${configManager.staticPort}`,
         TRAMVAI_CLI_WATCH_INITIAL_BUILD: firstWorker,

package/src/builder/webpack/devServer/pool/thread/pool.ts

@@ -39,6 +39,7 @@ export const ThreadWorkerBridge: WorkerBridgeFactory<Worker> = (di) => {
           // https://nodejs.org/dist/latest-v15.x/docs/api/all.html#cluster_how_it_works
           PORT: `${configManager.port}`,
           PORT_SERVER: `${configManager.port}`,
+          HOST: `${configManager.host}`,
           HOST_STATIC: `${configManager.staticHost}`,
           PORT_STATIC: `${configManager.staticPort}`,
           TRAMVAI_CLI_WATCH_INITIAL_BUILD: firstWorker,

package/src/builder/webpack/providers/build/client.ts

@@ -3,6 +3,7 @@ import { DI_TOKEN, provide } from '@tinkoff/dippy';
 import { COMMAND_PARAMETERS_TOKEN, CONFIG_MANAGER_TOKEN } from '../../../../di/tokens';
 import { toWebpackConfig } from '../../../../library/webpack/utils/toWebpackConfig';
 import {
+  BUILD_ID_TOKEN,
   CLIENT_CONFIG_MANAGER_TOKEN,
   CLOSE_HANDLER_TOKEN,
   PROCESS_HANDLER_TOKEN,
@@ -17,13 +18,15 @@ import { createCompiler } from '../../utils/compiler';
 export const buildClientProviders: Provider[] = [
   provide({
     provide: CLIENT_CONFIG_MANAGER_TOKEN,
-    useFactory: ({ configManager }) => {
+    useFactory: ({ configManager, buildId }) => {
       return configManager.withSettings({
         buildType: 'client',
+        buildId,
       });
     },
     deps: {
       configManager: CONFIG_MANAGER_TOKEN,
+      buildId: BUILD_ID_TOKEN,
     },
   }),
   provide({

package/src/builder/webpack/providers/build/clientShared.ts

@@ -1,18 +1,25 @@
 import type { Provider } from '@tinkoff/dippy';
 import { optional } from '@tinkoff/dippy';
 import { provide } from '@tinkoff/dippy';
-import rimraf from 'rimraf';
+import rimrafCb from 'rimraf';
+import { promisify } from 'util';
+
 import { CLI_PACKAGE_MANAGER, CLI_ROOT_DIR_TOKEN } from '../../../../di/tokens';
 import { npmRequire } from '../../../../utils/npmRequire';
 import { CLIENT_CONFIG_MANAGER_TOKEN, INIT_HANDLER_TOKEN } from '../../tokens';
 
+const rimraf = promisify(rimrafCb);
+
 export const buildClientSharedProviders: Provider[] = [
   provide({
     provide: INIT_HANDLER_TOKEN,
     multi: true,
     useFactory: ({ configManager }) => {
-      return function clearBuildDir() {
-        return rimraf.sync(`${configManager.buildPath}/**`, {});
+      return async function clearBuildDir() {
+        await Promise.all([
+          rimraf(`${configManager.buildPath}/**`),
+          configManager.prerenderPagesPath && rimraf(`${configManager.prerenderPagesPath}/**`),
+        ]);
       };
     },
     deps: {

package/src/builder/webpack/providers/build/server.ts

@@ -1,6 +1,7 @@
 import type { Provider } from '@tinkoff/dippy';
 import { DI_TOKEN, provide } from '@tinkoff/dippy';
-import rimraf from 'rimraf';
+import rimrafCb from 'rimraf';
+import { promisify } from 'util';
 import { toWebpackConfig } from '../../../../library/webpack/utils/toWebpackConfig';
 import { CONFIG_MANAGER_TOKEN } from '../../../../di/tokens';
 import {
@@ -17,6 +18,8 @@ import { closeWebpack } from '../../utils/closeWebpack';
 import { runWebpack } from '../../utils/runWebpack';
 import { createCompiler } from '../../utils/compiler';
 
+const rimraf = promisify(rimrafCb);
+
 export const buildServerProviders: Provider[] = [
   provide({
     provide: WEBPACK_SERVER_COMPILER_TOKEN,
@@ -40,8 +43,11 @@ export const buildServerProviders: Provider[] = [
     provide: INIT_HANDLER_TOKEN,
     multi: true,
     useFactory: ({ configManager }) => {
-      return function clearBuildDir() {
-        return rimraf.sync(`${configManager.buildPath}/**`, {});
+      return async function clearBuildDir() {
+        await Promise.all([
+          rimraf(`${configManager.buildPath}/**`),
+          configManager.prerenderPagesPath && rimraf(`${configManager.prerenderPagesPath}/**`),
+        ]);
       };
     },
     deps: {

package/src/builder/webpack/providers/shared.ts

@@ -13,6 +13,7 @@ import {
   WEBPACK_SERVER_COMPILER_TOKEN,
   WEBPACK_ANALYZE_PLUGIN_NAME_TOKEN,
   WEBPACK_ANALYZE_PLUGIN_TOKEN,
+  BUILD_ID_TOKEN,
 } from '../tokens';
 import { emitWebpackEvents } from '../utils/webpackEvents';
 import { BundleAnalyzePlugin } from '../analyzePlugins/bundle';

package/src/builder/webpack/providers/start/shared.ts

@@ -1,6 +1,8 @@
 import type { Provider } from '@tinkoff/dippy';
 import { DI_TOKEN, provide } from '@tinkoff/dippy';
 import webpack from 'webpack';
+import rimrafCb from 'rimraf';
+import { promisify } from 'util';
 import { toWebpackConfig } from '../../../../library/webpack/utils/toWebpackConfig';
 import {
   PROCESS_HANDLER_TOKEN,
@@ -10,10 +12,13 @@ import {
   WEBPACK_SERVER_COMPILER_TOKEN,
   WEBPACK_SERVER_CONFIG_TOKEN,
   WEBPACK_ANALYZE_PLUGIN_TOKEN,
+  CLOSE_HANDLER_TOKEN,
 } from '../../tokens';
 import { createDevServer } from '../../devServer/setup';
 import { CONFIG_MANAGER_TOKEN, STATIC_SERVER_TOKEN } from '../../../../di/tokens';
 
+const rimraf = promisify(rimrafCb);
+
 export const startSharedProviders: Provider[] = [
   provide({
     provide: WEBPACK_COMPILER_TOKEN,
@@ -112,4 +117,18 @@ export const startSharedProviders: Provider[] = [
       staticServer: STATIC_SERVER_TOKEN,
     },
   }),
+  provide({
+    provide: CLOSE_HANDLER_TOKEN,
+    multi: true,
+    useFactory: ({ configManager }) => {
+      return async () => {
+        if (configManager.prerenderPagesPath) {
+          await rimraf(`${configManager.prerenderPagesPath}/**`);
+        }
+      };
+    },
+    deps: {
+      configManager: CONFIG_MANAGER_TOKEN,
+    },
+  }),
 ];

package/src/builder/webpack/tokens.ts

@@ -58,3 +58,5 @@ export const CLOSE_HANDLER_TOKEN = createToken<() => Promise<void> | void>(
   'builder-webpack closeHandler',
   { multi: true }
 );
+
+export const BUILD_ID_TOKEN = createToken<string>('builder-webpack build id');

package/src/cli/index.ts

@@ -68,6 +68,7 @@ export async function cliInitialized(cliArgs = process.argv) {
     }>('package.json');
     const { content: config } = getTramvaiConfig();
 
+    // todo: different build id here, can be a problem?
     const configManager = new ConfigManager({ config, syncConfigFile: syncJsonFile });
     const packageManager = resolvePackageManager({ rootDir: process.cwd() });
 

package/src/commands/static/generate.ts

@@ -1,25 +1,39 @@
 import { resolve, join } from 'path';
 import PQueue from 'promise-queue';
 import { outputFile } from 'fs-extra';
-import { getHeaders } from '@tinkoff/request-plugin-protocol-http';
+import { getHeader, getHeaders, getStatus } from '@tinkoff/request-plugin-protocol-http';
 import type { Context } from '../../models/context';
 import type { ConfigManager } from '../../config/configManager';
 import type { ApplicationConfigEntry } from '../../typings/configEntry/application';
-import { appRequest } from '../../utils/dev-app/request';
+import { appFetch } from '../../utils/dev-app/request';
 import type { Params } from './command';
 
 const MAX_CONCURRENT = 10;
 
+export interface PrerenderRequest {
+  /**
+   * Page path, for example, '/product/123/', without query parameters
+   */
+  pathname: string;
+  headers?: Record<string, string>;
+  query?: Record<string, string>;
+}
+
 export const generateStatic = async (
   context: Context,
   params: Params,
   configManager: ConfigManager<ApplicationConfigEntry>,
-  paths: string[]
+  paths: Array<string | PrerenderRequest>
 ) => {
+  const meta: {
+    staticPages: Record<string, any>[];
+  } = {
+    staticPages: [],
+  };
   const { header = [], folder = '' } = params;
   const q = new PQueue(MAX_CONCURRENT);
   const promises = [];
-  const headers = header.reduce(
+  const baseHeaders = header.reduce(
     (result, item) => {
       const [key, value] = item.split(':');
 
@@ -36,50 +50,110 @@ export const generateStatic = async (
   const { rootDir, output } = configManager;
   const staticPath = resolve(rootDir, output.static, folder);
 
-  for (const path of paths) {
+  for (const pathOrRequest of paths) {
     promises.push(
+      // eslint-disable-next-line max-statements
       q.add(async () => {
-        let response: any;
+        let response: Response;
+
+        const request: PrerenderRequest =
+          typeof pathOrRequest === 'string' ? { pathname: pathOrRequest } : pathOrRequest;
+
+        const { pathname, headers: requestHeaders = {}, query = {} } = request;
+
+        const mergedHeaders = {
+          ...baseHeaders,
+          ...requestHeaders,
+        };
 
         try {
           context.logger.event({
             type: 'debug',
             event: 'COMMAND:STATIC:PAGE_FETCH',
-            message: `path: ${path}, message: start fetching page`,
+            message: `path: ${pathname}, message: start fetching page`,
+            payload: {
+              headers: mergedHeaders,
+              query,
+            },
           });
 
-          response = appRequest(configManager, path, { headers });
-          const html = await response;
-
-          await outputFile(join(staticPath, path, 'index.html'), html);
-
-          context.logger.event({
-            type: 'debug',
-            event: 'COMMAND:STATIC:PAGE_CREATED',
-            message: `path: ${path}, message: page created successfully`,
+          response = await appFetch(configManager, pathname, {
+            query,
+            headers: mergedHeaders,
+            // we need to save raw redirect response status code and headers
+            redirect: 'manual',
           });
-        } catch (e) {
-          const responseHeaders = response ? getHeaders(response) : {};
 
-          if (responseHeaders['x-tramvai-prerender-skip'] === 'true') {
+          if (response?.headers?.get('x-tramvai-prerender-skip') === 'true') {
             context.logger.event({
               type: 'debug',
               event: 'COMMAND:STATIC:PAGE_SKIP',
-              message: `path: ${path}, message: page prerender skipped`,
+              message: `path: ${pathname}, message: page prerender skipped`,
+              payload: {
+                headers: mergedHeaders,
+                query,
+              },
             });
 
             return;
           }
 
+          const keyHeader = response.headers.get('x-tramvai-static-page-key');
+          const routeHeader = response.headers.get('x-tramvai-static-page-route');
+          const filename = keyHeader ? `index.${keyHeader}.html` : 'index.html';
+          const metaFilename = keyHeader ? `index.${keyHeader}.json` : 'index.json';
+          const outputPath = join(staticPath, pathname, filename);
+          const metaOutputPath = join(staticPath, pathname, metaFilename);
+
+          if (typeof routeHeader === 'string') {
+            const route = JSON.parse(routeHeader);
+
+            if (
+              !meta.staticPages.some((item) => item.name === route.name || item.path === route.path)
+            ) {
+              meta.staticPages.push(route);
+            }
+          }
+
+          await outputFile(outputPath, await response.text());
+          await outputFile(
+            metaOutputPath,
+            JSON.stringify(
+              {
+                // @ts-expect-error
+                headers: Object.fromEntries(response.headers),
+                status: response.status,
+              },
+              null,
+              2
+            )
+          );
+
+          context.logger.event({
+            type: 'debug',
+            event: 'COMMAND:STATIC:PAGE_CREATED',
+            message: `path: ${pathname}${keyHeader ? `, key: ${keyHeader}` : ''}, message: page created successfully at ${outputPath}`,
+            payload: {
+              headers: mergedHeaders,
+              query,
+            },
+          });
+        } catch (e) {
           context.logger.event({
             type: 'error',
             event: 'COMMAND:STATIC:ERROR',
-            message: `path: ${path}, message: ${e.message}`,
+            message: `path: ${pathname}, message: ${e.message}`,
+            payload: {
+              headers: mergedHeaders,
+              query,
+            },
           });
         }
       })
     );
   }
 
-  return Promise.all(promises);
+  return Promise.all(promises).then(() => {
+    return outputFile(join(staticPath, 'meta.json'), JSON.stringify(meta, null, 2));
+  });
 };

package/src/commands/update/update.ts

@@ -58,6 +58,8 @@ export default async (
 
   await context.packageManager.install({ stdio: 'inherit' });
 
+  // todo если с --tag то для npm надо запустить `npm update --no-save`
+
   if (context.packageManager.name !== 'npm') {
     // npm dedupe is extremely slow in most cases
     // so execute it only for yarn

package/src/config/configManager.ts

@@ -5,6 +5,7 @@ import prop from '@tinkoff/utils/object/prop';
 import mapObj from '@tinkoff/utils/object/map';
 import { resolve } from 'path';
 import fs from 'fs';
+import { nanoid } from 'nanoid';
 import type { BuildType } from '../typings/projectType';
 import type { Env } from '../typings/Env';
 import type { ConfigEntry, OverridableOption } from '../typings/configEntry/common';
@@ -25,6 +26,7 @@ export interface Settings<E extends Env> {
   rootDir?: string;
   version?: string;
   buildType?: BuildType;
+  buildId?: string;
   debug?: string | boolean;
   verboseWebpack?: boolean;
   trace?: boolean;
@@ -91,8 +93,10 @@ export type ConfigManager<
   E extends Env = Env,
 > = OmitOverridable<C> &
   Required<Settings<E>> & {
+    buildId: string;
     target: Target;
     buildPath: string;
+    prerenderPagesPath?: string;
     withSettings(settings: Settings<E>): ConfigManager<C, E>;
     dehydrate(): [C, Settings<E>];
     assetsPrefix?: string;
@@ -106,6 +110,7 @@ export const createConfigManager = <C extends ConfigEntry = ConfigEntry, E exten
   configEntry: C,
   settings: Settings<E>
 ): ConfigManager<C, E> => {
+  const buildId = settings.buildId ?? nanoid();
   const env: E = settings.env ?? ('development' as E);
   const normalizedConfigEntry = omitEnvOptions(env, configEntry);
 
@@ -122,6 +127,7 @@ export const createConfigManager = <C extends ConfigEntry = ConfigEntry, E exten
   }
 
   const config: ConfigManager<C, E> = {
+    buildId,
     ...normalizedConfigEntry,
     version:
       (type === 'module' ? moduleVersion(configEntry) : '') ||
@@ -179,6 +185,7 @@ export const createConfigManager = <C extends ConfigEntry = ConfigEntry, E exten
       return [
         configEntry,
         {
+          buildId,
           ...settings,
           // drop options that couldn't be serialized
           stdout: undefined,
@@ -199,6 +206,10 @@ export const createConfigManager = <C extends ConfigEntry = ConfigEntry, E exten
       rootDir,
       buildType === 'server' ? config.output.server : config.output.client
     );
+    config.prerenderPagesPath =
+      env === 'development'
+        ? resolve(rootDir, config.output.static, config.buildId)
+        : resolve(rootDir, config.output.static);
 
     const pwa = config.experiments?.pwa;
     if (pwa.webmanifest?.enabled) {

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

@@ -1,3 +1,4 @@
+import path from 'node:path';
 import type Config from 'webpack-chain';
 import type { ConfigManager } from '../../../config/configManager';
 import { isApplication } from '../../../config/validate';
@@ -5,12 +6,13 @@ import type { ConfigEntry } from '../../../typings/configEntry/common';
 import { shouldUseReactRoot } from '../../../utils/shouldUseReactRoot';
 
 export const configToEnv = (configManager: ConfigManager<ConfigEntry>) => (config: Config) => {
-  const { fileSystemPages, shared, experiments } = isApplication(configManager)
+  const { fileSystemPages, shared, experiments, output } = isApplication(configManager)
     ? configManager
     : {
         fileSystemPages: { enabled: false, routesDir: false, pagesDir: false },
         shared: { criticalChunks: [] },
         experiments: {},
+        output: { static: 'dist/client' },
       };
 
   config.plugin('define').tap((args) => [
@@ -31,6 +33,7 @@ export const configToEnv = (configManager: ConfigManager<ConfigEntry>) => (confi
       'process.env.__TRAMVAI_REACT_TRANSITIONS': `'${JSON.stringify(
         experiments.reactTransitions
       )}'`,
+      'process.env.__TRAMVAI_OUTPUT_STATIC': `${JSON.stringify(configManager.env === 'development' ? path.join(output.static, configManager.buildId) : output.static)}`,
     },
   ]);
 };

package/src/utils/dev-app/request.ts

@@ -14,6 +14,22 @@ export const appRequest = <T>(configManager: ConfigManager, path: string, option
   return request<T>({ url: `${serverPath}${path}`, ...options });
 };
 
+export const appFetch = (
+  configManager: ConfigManager,
+  path: string,
+  { query = {}, ...options }: RequestInit & { query?: Record<string, string> } = {}
+) => {
+  const { host, port } = configManager;
+  const serverPath = `http://${host}:${port}/`;
+  const url = new URL(path, serverPath);
+
+  Object.entries(query).forEach(([key, value]) => {
+    url.searchParams.append(key, value);
+  });
+
+  return fetch(url, options);
+};
+
 interface BundleInfoResponse {
   resultCode: string;
   payload: string[];

package/src/utils/tramvaiVersions.ts

@@ -3,6 +3,7 @@
 // actual version to update will be calculated from the some of the @tramvai/module
 export const DEPENDANT_LIBS_MAP = new Map([
   ['@tinkoff/logger', '@tramvai/module-log'],
+  ['@tinkoff/env-validators', '@tramvai/module-client-hints'],
   ['@tinkoff/dippy', '@tramvai/core'],
   ['@tinkoff/router', '@tramvai/module-router'],
   ['@tinkoff/url', '@tramvai/module-common'],