Release v3.3.2

Co-authored-by: Edem Reshidov <[email protected]>
GitOrigin-RevId: 784a81e871bffce3d4de194c3c46c6222b1c8106

packages-versions.json

@@ -1,2 +1,2 @@
 
-{"@tramvai/cli":"3.2.0","@tramvai/swc-integration":"3.2.0","@tinkoff/browser-timings":"0.11.1","@tinkoff/browserslist-config":"0.3.1","@tinkoff/browser-cookies":"3.0.1","@tinkoff/dippy":"0.9.1","@tinkoff/env-validators":"0.2.1","@tinkoff/error-handlers":"0.6.1","@tinkoff/errors":"0.4.1","@tinkoff/eslint-plugin-tramvai":"0.7.2","@tinkoff/hook-runner":"0.5.1","@tramvai/http-client":"0.3.1","@tinkoff/is-modern-lib":"3.0.1","@tramvai/react-lazy-hydration-render":"0.3.1","@tinkoff/logger":"0.10.168","@tinkoff/pack-polyfills":"0.5.1","@tinkoff/measure-express-requests":"3.0.1","@tinkoff/measure-fastify-requests":"0.2.1","@tinkoff/meta-tags-generate":"0.6.1","@tinkoff/metrics-noop":"3.0.1","@tinkoff/minicss-class-generator":"0.3.1","@tinkoff/mocker":"3.0.1","@tinkoff/module-loader-client":"0.5.1","@tinkoff/module-loader-server":"0.6.1","@tinkoff/monkeypatch":"3.0.1","@tinkoff/package-manager-wrapper":"0.2.1","@tinkoff/htmlpagebuilder":"0.6.1","prettier-config-tinkoff":"0.3.1","@tinkoff/pubsub":"0.6.1","@tinkoff/react-hooks":"0.2.1","@tinkoff/router":"0.3.1","@tramvai/safe-strings":"0.6.1","@tinkoff/terminus":"0.2.1","@tinkoff/layout-factory":"0.4.1","@tramvai/tinkoff-request-http-client-adapter":"0.10.5","@tinkoff/url":"0.9.1","@tinkoff/user-agent":"0.5.5","@tinkoff/webpack-dedupe-plugin":"2.0.1","@tramvai/module-autoscroll":"3.2.0","@tramvai/module-cache-warmup":"3.2.0","@tramvai/module-child-app":"3.2.0","@tramvai/module-client-hints":"3.2.0","@tramvai/module-common":"3.2.0","@tramvai/module-cookie":"3.2.0","@tramvai/module-deps-graph":"3.2.0","@tramvai/module-dns-cache":"3.2.0","@tramvai/module-environment":"3.2.0","@tramvai/module-error-interceptor":"3.2.0","@tramvai/module-http-client":"3.2.0","@tramvai/module-http-proxy-agent":"3.2.0","@tramvai/module-log":"3.2.0","@tramvai/module-metrics":"3.2.0","@tramvai/module-mocker":"3.2.0","@tramvai/module-page-render-mode":"3.2.0","@tramvai/module-progressive-web-app":"3.2.0","@tramvai/module-react-query":"3.2.0","@tramvai/module-render":"3.2.0","@tramvai/module-request-limiter":"3.2.0","@tramvai/module-router":"3.2.0","@tramvai/module-sentry":"3.2.0","@tramvai/module-seo":"3.2.0","@tramvai/module-server":"3.2.0","@tramvai/tokens-child-app":"3.2.0","@tramvai/tokens-common":"3.2.0","@tramvai/tokens-cookie":"3.2.0","@tramvai/tokens-core":"3.2.0","@tramvai/tokens-core-private":"3.2.0","@tramvai/tokens-http-client":"3.2.0","@tramvai/tokens-metrics":"3.2.0","@tramvai/tokens-react-query":"3.2.0","@tramvai/tokens-render":"3.2.0","@tramvai/tokens-router":"3.2.0","@tramvai/tokens-server":"3.2.0","@tramvai/tokens-server-private":"3.2.0","@tramvai/child-app-core":"3.2.0","@tramvai/core":"3.2.0","@tramvai/experiments":"3.2.0","@tramvai/papi":"3.2.0","@tramvai/pwa-recipes":"3.2.0","@tramvai/react":"3.2.0","@tramvai/react-query":"3.2.0","@tramvai/state":"3.2.0","@tramvai/storybook-addon":"3.2.0","@tramvai/types-actions-state-context":"3.2.0","@tramvai/test-child-app":"3.2.0","@tramvai/test-helpers":"3.2.0","@tramvai/test-integration":"3.2.0","@tramvai/test-integration-jest":"3.2.0","@tramvai/test-jsdom":"3.2.0","@tramvai/test-mocks":"3.2.0","@tramvai/test-pw":"3.2.0","@tramvai/test-puppeteer":"3.2.0","@tramvai/test-react":"3.2.0","@tramvai/test-unit":"3.2.0","@tramvai/test-unit-jest":"3.2.0","@tramvai/build":"4.0.1","@tramvai/tools-check-versions":"0.5.1","@tramvai/create":"3.2.0","@tramvai/tools-generate-schema":"0.2.1","@tramvai/tools-migrate":"0.7.1","@tinkoff-monorepo/depscheck":"3.0.0","@tinkoff-monorepo/fix-ts-references":"3.0.0","@tinkoff-monorepo/pkgs-collector":"3.0.0","@tinkoff-monorepo/pkgs-collector-dir":"3.0.0","@tinkoff-monorepo/pkgs-collector-workspaces":"3.0.0"}
+{"@tramvai/cli":"3.3.2","@tramvai/swc-integration":"3.3.2","@tinkoff/browser-timings":"0.11.1","@tinkoff/browserslist-config":"0.3.1","@tinkoff/browser-cookies":"3.0.1","@tinkoff/dippy":"0.9.1","@tinkoff/env-validators":"0.2.1","@tinkoff/error-handlers":"0.6.1","@tinkoff/errors":"0.4.1","@tinkoff/eslint-plugin-tramvai":"0.7.2","@tinkoff/hook-runner":"0.5.1","@tramvai/http-client":"0.3.1","@tinkoff/is-modern-lib":"3.0.1","@tramvai/react-lazy-hydration-render":"0.3.1","@tinkoff/logger":"0.10.168","@tinkoff/pack-polyfills":"0.5.1","@tinkoff/measure-express-requests":"3.0.1","@tinkoff/measure-fastify-requests":"0.2.1","@tinkoff/meta-tags-generate":"0.6.1","@tinkoff/metrics-noop":"3.0.1","@tinkoff/minicss-class-generator":"0.3.1","@tinkoff/mocker":"3.0.1","@tinkoff/module-loader-client":"0.5.1","@tinkoff/module-loader-server":"0.6.1","@tinkoff/monkeypatch":"3.0.1","@tinkoff/package-manager-wrapper":"0.2.1","@tinkoff/htmlpagebuilder":"0.6.1","prettier-config-tinkoff":"0.3.1","@tinkoff/pubsub":"0.6.1","@tinkoff/react-hooks":"0.2.1","@tinkoff/router":"0.3.1","@tramvai/safe-strings":"0.6.1","@tinkoff/terminus":"0.2.1","@tinkoff/layout-factory":"0.4.1","@tramvai/tinkoff-request-http-client-adapter":"0.10.9","@tinkoff/url":"0.9.1","@tinkoff/user-agent":"0.5.9","@tinkoff/webpack-dedupe-plugin":"2.0.1","@tramvai/module-autoscroll":"3.3.2","@tramvai/module-cache-warmup":"3.3.2","@tramvai/module-child-app":"3.3.2","@tramvai/module-client-hints":"3.3.2","@tramvai/module-common":"3.3.2","@tramvai/module-cookie":"3.3.2","@tramvai/module-deps-graph":"3.3.2","@tramvai/module-dns-cache":"3.3.2","@tramvai/module-environment":"3.3.2","@tramvai/module-error-interceptor":"3.3.2","@tramvai/module-http-client":"3.3.2","@tramvai/module-http-proxy-agent":"3.3.2","@tramvai/module-log":"3.3.2","@tramvai/module-metrics":"3.3.2","@tramvai/module-mocker":"3.3.2","@tramvai/module-page-render-mode":"3.3.2","@tramvai/module-progressive-web-app":"3.3.2","@tramvai/module-react-query":"3.3.2","@tramvai/module-render":"3.3.2","@tramvai/module-request-limiter":"3.3.2","@tramvai/module-router":"3.3.2","@tramvai/module-sentry":"3.3.2","@tramvai/module-seo":"3.3.2","@tramvai/module-server":"3.3.2","@tramvai/tokens-child-app":"3.3.2","@tramvai/tokens-common":"3.3.2","@tramvai/tokens-cookie":"3.3.2","@tramvai/tokens-core":"3.3.2","@tramvai/tokens-core-private":"3.3.2","@tramvai/tokens-http-client":"3.3.2","@tramvai/tokens-metrics":"3.3.2","@tramvai/tokens-react-query":"3.3.2","@tramvai/tokens-render":"3.3.2","@tramvai/tokens-router":"3.3.2","@tramvai/tokens-server":"3.3.2","@tramvai/tokens-server-private":"3.3.2","@tramvai/child-app-core":"3.3.2","@tramvai/core":"3.3.2","@tramvai/experiments":"3.3.2","@tramvai/papi":"3.3.2","@tramvai/pwa-recipes":"3.3.2","@tramvai/react":"3.3.2","@tramvai/react-query":"3.3.2","@tramvai/state":"3.3.2","@tramvai/storybook-addon":"3.3.2","@tramvai/types-actions-state-context":"3.3.2","@tramvai/test-child-app":"3.3.2","@tramvai/test-helpers":"3.3.2","@tramvai/test-integration":"3.3.2","@tramvai/test-integration-jest":"3.3.2","@tramvai/test-jsdom":"3.3.2","@tramvai/test-mocks":"3.3.2","@tramvai/test-pw":"3.3.2","@tramvai/test-puppeteer":"3.3.2","@tramvai/test-react":"3.3.2","@tramvai/test-unit":"3.3.2","@tramvai/test-unit-jest":"3.3.2","@tramvai/build":"4.0.1","@tramvai/tools-check-versions":"0.5.1","@tramvai/create":"3.3.2","@tramvai/tools-generate-schema":"0.2.1","@tramvai/tools-migrate":"0.7.1","@tinkoff-monorepo/depscheck":"3.0.0","@tinkoff-monorepo/fix-ts-references":"3.0.0","@tinkoff-monorepo/pkgs-collector":"3.0.0","@tinkoff-monorepo/pkgs-collector-dir":"3.0.0","@tinkoff-monorepo/pkgs-collector-workspaces":"3.0.0"}

packages/cli/README.md

@@ -288,3 +288,20 @@ TRAMVAI_CPU_PROFILE=1 tramvai build {appName}
 Then, file with `tramvai-cli.${Date.now()}.cpuprofile` name will be generated in current working directory.
 
 You can open this trace in Chrome DevTools - `chrome://inspect`, "Open dedicated DevTools for Node", `Performance` tab.
+
+### How to enable production profiling for React
+
+```bash
+TRAMVAI_REACT_PROFILE=1 tramvai build {appName}
+# or
+TRAMVAI_REACT_PROFILE=1 tramvai start-prod {appName}
+```
+
+After that, you can use the React DevTools Profiler in the same way as you would in development.
+
+WARNING: The size of the bundle will be larger, because mangling is disabled for such builds. Do not use this env variable for production environment.
+
+Documentation:
+
+- [How to use React Profiler](https://legacy.reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html)
+- [Introducing a new React profiler (React 18)](https://github.com/reactwg/react-18/discussions/76)

packages/cli/src/library/webpack/application/client/prod.ts

@@ -109,5 +109,9 @@ export const webpackClientConfig = ({
     config.batch(sourcemaps(configManager));
   }
 
+  if (process.env.TRAMVAI_REACT_PROFILE) {
+    config.resolve.alias.set('react-dom$', 'react-dom/profiling');
+  }
+
   return config;
 };

packages/cli/src/library/webpack/blocks/optimize.ts

@@ -8,6 +8,12 @@ import type { CliConfigEntry } from '../../../typings/configEntry/cli';
 export default (configManager: ConfigManager<CliConfigEntry>) => (config: Config) => {
   const { modern, debug, disableProdOptimization } = configManager;
 
+  const isProductionProfilingEnabled = !!process.env.TRAMVAI_REACT_PROFILE;
+  const tramvaiReactProfileTerserOptions = {
+    keep_fnames: isProductionProfilingEnabled,
+    keep_classnames: isProductionProfilingEnabled,
+  };
+
   if (disableProdOptimization) {
     // with this option for id of module path to file will be used
     config.optimization.set('moduleIds', 'named');
@@ -18,6 +24,7 @@ export default (configManager: ConfigManager<CliConfigEntry>) => (config: Config
       {
         extractComments: false,
         terserOptions: {
+          ...tramvaiReactProfileTerserOptions,
           ecma: 6,
           mangle: false,
           output: {
@@ -45,6 +52,7 @@ export default (configManager: ConfigManager<CliConfigEntry>) => (config: Config
       extractComments: false,
       parallel: terser.parallel,
       terserOptions: {
+        ...tramvaiReactProfileTerserOptions,
         ecma: modern ? 6 : 5,
         mangle: {
           // https://github.com/node-fetch/node-fetch/issues/667

packages/cli/src/library/webpack/common/main.ts

@@ -17,6 +17,16 @@ const filterNonExisted = (filePaths: string[]) => {
   });
 };
 
+const getConfigCacheNameAdditionalFlags = (configManager: ConfigManager<CliConfigEntry>) => {
+  return [
+    configManager.buildType === 'client' && configManager.modern ? 'modern' : '',
+    configManager.debug ? 'debug' : '',
+    process.env.TRAMVAI_REACT_PROFILE ? 'tramvai_react_profile' : '',
+  ]
+    .filter(Boolean)
+    .join('-');
+};
+
 // eslint-disable-next-line import/no-default-export
 export default (configManager: ConfigManager<CliConfigEntry>) => (config: Config) => {
   const env = configManager.env === 'development' ? 'dev' : 'prod';
@@ -66,9 +76,9 @@ export default (configManager: ConfigManager<CliConfigEntry>) => (config: Config
   if (configManager.fileCache) {
     config.cache({
       type: 'filesystem',
-      name: `${env}-${configManager.type}-${configManager.buildType}-${configManager.name}${
-        configManager.buildType === 'client' && configManager.modern ? '-modern' : ''
-      }`,
+      name: `${env}-${configManager.type}-${configManager.buildType}-${
+        configManager.name
+      }-${getConfigCacheNameAdditionalFlags(configManager)}`,
       cacheDirectory: findCacheDir({ cwd: configManager.rootDir, name: 'webpack' }),
       buildDependencies: {
         cli: ['@tramvai/cli'],