@tramvai/cli 6.68.4 → 6.77.2

package/src/commands/build/command.ts

@@ -47,6 +47,12 @@ class BuildCommand extends CLICommand<Params> {
       value: '[forPublish]',
       description: '<package> Prepare library package.json for publication',
     },
+    {
+      name: '--analyze',
+      value: '[analyze]',
+      description:
+        'Run build with analyze, supported plugins: <bundle|whybundled|statoscope|rsdoctor>',
+    },
     {
       name: '--fileCache',
       value: '[fileCache]',

package/src/commands/new/steps/installDependencies.ts

@@ -9,10 +9,9 @@ const COMMON_JEST_DEPENDENCIES = [
   '@tramvai/test-unit',
   '@tramvai/test-react',
   '@tramvai/test-unit-jest',
-  '@types/jest@^29.0.0',
-  'jest@^29.0.0',
-  'jest-circus@^29.0.0',
-  'jest-environment-jsdom@^29.0.0',
+  '@jest/types@^29.6.3',
+  'jest@^29.7.0',
+  'jest-environment-jsdom@^29.7.0',
   'ts-node',
 ];
 

package/src/commands/new/templates/app/block/shared/header/Header.spec.tsx.hbs

@@ -4,10 +4,12 @@
 import { testComponent } from '@tramvai/test-react';
 import { Header } from './Header';
 
-it('should render header', () => {
-  const { render } = testComponent(<Header />);
+describe('Header', () => {
+  it('should render header', () => {
+    const { render } = testComponent(<Header />);
 
-  expect(render.container.innerHTML).toMatchInlineSnapshot(
-    `"<header class="Header"><h1>Tramvai <span role="img" aria-label="Salute">🥳</span></h1></header>"`
-  );
+    expect(render.container.innerHTML).toMatchInlineSnapshot(
+      `"<header class="Header"><h1>Tramvai <span role="img" aria-label="Salute">🥳</span></h1></header>"`
+    );
+  });
 });

package/src/commands/new/templates/shared/package.json.hbs

@@ -9,7 +9,7 @@
     "start": "tramvai start {{configEntry.name}}",
     "build": "tramvai build {{configEntry.name}}",
     "preview": "tramvai start-prod {{configEntry.name}}",
-    "analyze": "tramvai analyze {{configEntry.name}}",
+    "analyze": "tramvai {{configEntry.name}} --analyze=statoscope",
     "lint": "eslint --ext .ts,.tsx --ignore-path .gitignore ."{{#if isJest}},
     "test": "jest --passWithNoTests",
     "test:watch": "jest --watch",

package/src/commands/start/command.ts

@@ -88,6 +88,12 @@ export class StartCommand extends CLICommand<Params> {
       value: '[showConfig]',
       description: 'Show config with which cli was launched',
     },
+    {
+      name: '--analyze',
+      value: '[analyze]',
+      description:
+        'Run build with analyze, supported plugins: <bundle|whybundled|statoscope|rsdoctor>',
+    },
     {
       name: '--onlyBundles',
       value: '[onlyBundles]',

package/src/commands/static/application.ts

@@ -16,7 +16,7 @@ import { app } from '../index';
 import { startStaticServer } from './staticServer';
 import { startServer } from './server';
 import { handleServerOutput } from './utils/handle-server-output';
-import { appBundleInfo } from '../../utils/dev-app/request';
+import { appPrerenderRoutes } from '../../utils/dev-app/request';
 import { PortManager } from '../../models/port-manager';
 
 // eslint-disable-next-line max-statements
@@ -94,10 +94,10 @@ export const staticApp = async (
           ...safeRequire(path.resolve(process.cwd(), 'env'), true),
         }
       : {}),
+    CACHE_WARMUP_DISABLED: 'true',
     ...process.env,
     NODE_ENV: 'production',
     TRAMVAI_CLI_COMMAND: 'static',
-    CACHE_WARMUP_DISABLED: 'true',
     PORT: `${port}`,
     PORT_SERVER: `${port}`,
     TRAMVAI_CLI_ASSETS_PREFIX: staticAssetsPrefix,
@@ -105,7 +105,7 @@ export const staticApp = async (
   };
 
   const server = node(path.resolve(root, 'server.js'), [], {
-    cwd: root,
+    cwd: process.cwd(),
     env: envVariables,
   });
 
@@ -124,6 +124,13 @@ export const staticApp = async (
 
     handleServerOutput(context.logger, chunk);
   });
+  server.stderr.on('data', (chunk: Buffer) => {
+    if (server.killed) {
+      return;
+    }
+
+    handleServerOutput(context.logger, chunk);
+  });
 
   const readinessProbePath = `${clientConfigManager.httpProtocol}://localhost:${
     envVariables.UTILITY_SERVER_PORT ?? port
@@ -145,7 +152,7 @@ export const staticApp = async (
     message: `message: server started, fetch application routes`,
   });
 
-  let paths = await appBundleInfo(serverConfigManager);
+  let paths = await appPrerenderRoutes(serverConfigManager);
 
   if (isString(rootErrorBoundaryPath)) {
     // implicit connection with packages/modules/server/src/server/error.ts

package/src/commands/static/generate.ts

@@ -1,6 +1,7 @@
 import { resolve, join } from 'path';
 import PQueue from 'promise-queue';
 import { outputFile } from 'fs-extra';
+import { getHeaders } 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';
@@ -8,7 +9,6 @@ import { appRequest } from '../../utils/dev-app/request';
 import type { Params } from './command';
 
 const MAX_CONCURRENT = 10;
-const DYNAMIC_PAGE_REGEX = /\/:.+\//g;
 
 export const generateStatic = async (
   context: Context,
@@ -28,7 +28,9 @@ export const generateStatic = async (
 
       return result;
     },
-    {} as Record<string, string>
+    {
+      'x-tramvai-prerender': 'true',
+    } as Record<string, string>
   );
 
   const { rootDir, output } = configManager;
@@ -37,15 +39,7 @@ export const generateStatic = async (
   for (const path of paths) {
     promises.push(
       q.add(async () => {
-        // @todo need something similar to https://nextjs.org/docs/basic-features/data-fetching#getstaticpaths-static-generation
-        if (DYNAMIC_PAGE_REGEX.test(path)) {
-          context.logger.event({
-            type: 'warning',
-            event: 'COMMAND:STATIC:DYNAMIC_PAGE_UNSUPPORTED',
-            message: `path: ${path}, message: export dynamic pages to HTML is not supported`,
-          });
-          return;
-        }
+        let response: any;
 
         try {
           context.logger.event({
@@ -54,7 +48,8 @@ export const generateStatic = async (
             message: `path: ${path}, message: start fetching page`,
           });
 
-          const html = await appRequest(configManager, path, { headers });
+          response = appRequest(configManager, path, { headers });
+          const html = await response;
 
           await outputFile(join(staticPath, path, 'index.html'), html);
 
@@ -64,6 +59,18 @@ export const generateStatic = async (
             message: `path: ${path}, message: page created successfully`,
           });
         } catch (e) {
+          const responseHeaders = response ? getHeaders(response) : {};
+
+          if (responseHeaders['x-tramvai-prerender-skip'] === 'true') {
+            context.logger.event({
+              type: 'debug',
+              event: 'COMMAND:STATIC:PAGE_SKIP',
+              message: `path: ${path}, message: page prerender skipped`,
+            });
+
+            return;
+          }
+
           context.logger.event({
             type: 'error',
             event: 'COMMAND:STATIC:ERROR',

package/src/config/configManager.ts

@@ -41,6 +41,7 @@ export interface Settings<E extends Env> {
   resolveSymlinks?: boolean;
   showConfig?: boolean;
   onlyBundles?: string[];
+  analyze?: false | 'bundle' | 'whybundled' | 'statoscope' | 'rsdoctor';
   disableProdOptimization?: boolean;
   fileCache?: boolean;
 }
@@ -135,6 +136,7 @@ export const createConfigManager = <C extends ConfigEntry = ConfigEntry, E exten
     benchmark: false,
     resolveSymlinks: true,
     disableProdOptimization: false,
+    analyze: false,
     onlyBundles: [],
     // according to measures fileCache in webpack doesn't affect
     // performance much so enable it by default as it always was before

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

@@ -73,17 +73,33 @@ export const cssWebpackRulesFactory =
         typeof postcssConfig === 'undefined'
       ) ?? {};
 
-    const postcssOptionsFn = (...args) => ({
-      ...postcssCfg,
-      plugins: [
-        require('postcss-modules-tilda'),
-        require('postcss-modules-values-replace')({ importsAsModuleRequests: true }),
+    // https://github.com/webpack-contrib/postcss-loader/blob/master/src/config.d.ts
+    const postcssOptionsFn = (loaderContext: any) => {
+      const isFnConfig = typeof postcssCfg === 'function';
+      // TODO: async config fn support?
+      const defaultConfig = isFnConfig ? postcssCfg(loaderContext) : postcssCfg;
+      // eslint-disable-next-line no-nested-ternary
+      const defaultPlugins = defaultConfig.plugins ? defaultConfig.plugins : [];
+
+      return {
+        config: false,
+        ...defaultConfig,
         // TODO: придумать как прокинуть настройки browserslist в autoprefixer - сейчас autoprefixer добавляется в самом приложении и из
         // конфига нет возможности задавать динамический env в зависимости от сборки. Подсунуть в сам autoprefixer после его инициализации тоже
         // тоже не получится - https://github.com/postcss/autoprefixer/blob/10.3.1/lib/autoprefixer.js#L108
-        ...(applyOrReturn(args, postcssCfg.plugins) || []),
-      ],
-    });
+        plugins: Array.isArray(defaultPlugins)
+          ? [
+              require('postcss-modules-tilda'),
+              require('postcss-modules-values-replace')({ importsAsModuleRequests: true }),
+              ...defaultPlugins,
+            ]
+          : {
+              'postcss-modules-tilda': {},
+              'postcss-modules-values-replace': { importsAsModuleRequests: true },
+              ...defaultPlugins,
+            },
+      };
+    };
 
     // otherwise postcss-loader will use cosmiconfig to resolve postcss configuration file
     // https://github.com/webpack-contrib/postcss-loader/blob/6f470db420f6febbea729080921050e8fe353226/src/index.js#L38

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

@@ -1,3 +1,4 @@
+import path from 'node:path';
 import type Config from 'webpack-chain';
 import { modernLibsFilter } from '@tinkoff/is-modern-lib';
 import { applyThreadLoader } from '../utils/threadLoader';
@@ -5,25 +6,22 @@ import type { ConfigManager } from '../../../config/configManager';
 import { getTranspilerConfig, addTranspilerLoader } from '../utils/transpiler';
 import type { CliConfigEntry } from '../../../typings/configEntry/cli';
 
-// eslint-disable-next-line import/no-default-export
-export default (configManager: ConfigManager<CliConfigEntry>) => (config: Config) => {
-  const { transpileOnlyModernLibs } = configManager;
-
-  const rule = config.module
-    .rule('js')
-    .test(/\.[cm]?js[x]?$/)
-    .batch(applyThreadLoader(configManager));
+const projectRulesName = 'project';
+const nodeModuleRulesName = 'node_module';
 
+const applyProjectRules = (rule, configManager) => {
   rule
-    .oneOf('project')
+    .oneOf(projectRulesName)
     .exclude.add(/node_modules/)
     .end()
     .use('transpiler')
-    .batch(addTranspilerLoader(configManager, getTranspilerConfig(configManager)));
+    .batch(addTranspilerLoader(configManager, getTranspilerConfig(configManager)))
+    .end();
+};
 
+const applyNodeModulesRules = (rule, configManager) => {
   rule
-    .oneOf('node_module')
-    .when(transpileOnlyModernLibs, (cfg) => cfg.include.add(modernLibsFilter))
+    .oneOf(nodeModuleRulesName)
     .merge({
       // true value forces to use file extensions for importing mjs modules
       // but we want to use mjs if it exists anyway
@@ -32,3 +30,52 @@ export default (configManager: ConfigManager<CliConfigEntry>) => (config: Config
     .use('transpiler')
     .batch(addTranspilerLoader(configManager, getTranspilerConfig(configManager, { hot: false })));
 };
+
+// eslint-disable-next-line import/no-default-export
+export default (configManager: ConfigManager<CliConfigEntry>) => (config: Config) => {
+  const { transpileOnlyModernLibs } = configManager;
+  const { include } = configManager.experiments.transpilation;
+  const shouldTranspileOnlyModern = transpileOnlyModernLibs || include === 'only-modern';
+
+  const rule = config.module
+    .rule('js')
+    .test(/\.[cm]?js[x]?$/)
+    .batch(applyThreadLoader(configManager));
+
+  if (configManager.env === 'production') {
+    applyProjectRules(rule, configManager);
+    applyNodeModulesRules(rule, configManager);
+
+    if (shouldTranspileOnlyModern) {
+      rule.oneOf(nodeModuleRulesName).include.add(modernLibsFilter);
+    }
+  } else {
+    const shouldSkipTranspiling = include === 'none';
+    const shouldSelectiveTranspile = Array.isArray(include);
+
+    if (shouldSkipTranspiling) {
+      rule.exclude
+        .add(/node_modules/)
+        .end()
+        .use('transpiler')
+        .batch(addTranspilerLoader(configManager, getTranspilerConfig(configManager)));
+    } else {
+      applyProjectRules(rule, configManager);
+      applyNodeModulesRules(rule, configManager);
+
+      if (shouldSelectiveTranspile) {
+        const includeForTranspiling = (<string[]>include).map(
+          (includePath) => new RegExp(includePath)
+        );
+
+        includeForTranspiling.forEach((includePath) => {
+          rule.oneOf(nodeModuleRulesName).include.add(includePath);
+        });
+      } else if (shouldTranspileOnlyModern) {
+        if (shouldTranspileOnlyModern) {
+          rule.oneOf(nodeModuleRulesName).include.add(modernLibsFilter);
+        }
+      }
+    }
+  }
+};

package/src/library/webpack/common/main.ts

@@ -4,7 +4,7 @@ import path from 'path';
 import { existsSync } from 'fs-extra';
 import findCacheDir from 'find-cache-dir';
 import { RsdoctorWebpackMultiplePlugin } from '@rsdoctor/webpack-plugin';
-import { getRsdoctorOptions } from '@tramvai/plugin-webpack-builder';
+import { getBenchmarkRsdoctorOptions } from '@tramvai/plugin-webpack-builder';
 import { ignoreWarnings } from '../utils/warningsFilter';
 import resolve from '../blocks/resolve';
 import ignoreLocales from '../blocks/ignoreLocales';
@@ -124,6 +124,10 @@ export default (configManager: ConfigManager<CliConfigEntry>) => (config: Config
         'process.env.ENABLE_DEVTOOLS':
           process.env.ENABLE_DEVTOOLS || configManager.env === 'development',
 
+        'typeof window': JSON.stringify(
+          configManager.buildType === 'server' ? 'undefined' : 'object'
+        ),
+
         'process.env.DISABLE_EXTERNAL_SCRIPTS': process.env.DISABLE_EXTERNAL_SCRIPTS || false,
       },
     ]);
@@ -131,7 +135,7 @@ export default (configManager: ConfigManager<CliConfigEntry>) => (config: Config
   if (configManager.benchmark) {
     config
       .plugin('rsdoctor-benchmark')
-      .use(RsdoctorWebpackMultiplePlugin, [getRsdoctorOptions(configManager.buildType)]);
+      .use(RsdoctorWebpackMultiplePlugin, [getBenchmarkRsdoctorOptions(configManager.buildType)]);
   }
 
   // TODO: remove after dropping support for node@14

package/src/models/config.spec.ts

@@ -76,6 +76,7 @@ it('should populate defaults for config', () => {
             "runtimeChunk": false,
             "serverRunner": "thread",
             "transpilation": {
+              "include": "only-modern",
               "loader": "babel",
             },
             "viewTransitions": false,
@@ -152,6 +153,7 @@ it('should populate defaults for config', () => {
             "minifier": "terser",
             "reactCompiler": false,
             "transpilation": {
+              "include": "only-modern",
               "loader": "babel",
             },
             "webpack": {
@@ -325,6 +327,7 @@ it('should populate defaults for overridable options', () => {
             "runtimeChunk": false,
             "serverRunner": "thread",
             "transpilation": {
+              "include": "only-modern",
               "loader": {
                 "development": "swc",
                 "production": "babel",
@@ -419,6 +422,7 @@ it('should populate defaults for overridable options', () => {
             "minifier": "terser",
             "reactCompiler": false,
             "transpilation": {
+              "include": "only-modern",
               "loader": {
                 "development": "babel",
                 "production": "babel",