@tramvai/cli 5.45.2 → 5.47.0

package/src/library/swc/__integration__/__snapshots__/swc.start.test.ts.snap

@@ -414,6 +414,11 @@ class ForBrowser {
     test() {
         console.log("Ok");
     }
+    constructor(){
+        (0,_swc_helpers_define_property__WEBPACK_IMPORTED_MODULE_0__._)(this, "property", ()=>{
+            console.log("Ok");
+        });
+    }
 }
 (0,_swc_helpers_define_property__WEBPACK_IMPORTED_MODULE_0__._)(ForBrowser, "prop", "static");
 
@@ -730,28 +735,20 @@ exports[`server: server.inline.ts 1`] = `
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   ForBrowser: function() { return /* binding */ ForBrowser; }
 /* harmony export */ });
-/* harmony import */ var _swc_helpers_class_call_check__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("../../node_modules/@swc/helpers/esm/_class_call_check.js");
-/* harmony import */ var _swc_helpers_create_class__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("../../node_modules/@swc/helpers/esm/_create_class.js");
-/* harmony import */ var _swc_helpers_define_property__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__("../../node_modules/@swc/helpers/esm/_define_property.js");
-
-
-
 var ForBrowser = /*#__PURE__*/ function() {
     "use strict";
     function ForBrowser() {
-        (0,_swc_helpers_class_call_check__WEBPACK_IMPORTED_MODULE_0__._)(this, ForBrowser);
+        this.property = function() {
+            console.log("Ok");
+        };
     }
-    (0,_swc_helpers_create_class__WEBPACK_IMPORTED_MODULE_1__._)(ForBrowser, [
-        {
-            key: "test",
-            value: function test() {
-                console.log("Ok");
-            }
-        }
-    ]);
+    var _proto = ForBrowser.prototype;
+    _proto.test = function test() {
+        console.log("Ok");
+    };
     return ForBrowser;
 }();
-(0,_swc_helpers_define_property__WEBPACK_IMPORTED_MODULE_2__._)(ForBrowser, "prop", "static");
+ForBrowser.prop = "static";
 
 
 "

package/src/library/swc/__integration__/server.inline.ts

@@ -1,6 +1,10 @@
 export class ForBrowser {
   static prop = 'static';
 
+  property = () => {
+    console.log('Ok');
+  };
+
   test() {
     console.log('Ok');
   }

package/src/library/swc/index.ts

@@ -1,8 +1,6 @@
 import isEmpty from '@tinkoff/utils/is/empty';
 import path from 'path';
 import { existsSync } from 'fs';
-import browserslist from 'browserslist';
-import envTargets from '@tinkoff/browserslist-config';
 import { sync as resolve } from 'resolve';
 import findCacheDir from 'find-cache-dir';
 import type { Options as SwcOptions } from '@swc/core';
@@ -16,16 +14,21 @@ let warningWasShown = false;
 export const getSwcOptions = (config: TranspilerConfig): SwcOptions => {
   const {
     env = 'development',
-    target,
-    modern,
     isServer = false,
     modules = false,
+    excludesPresetEnv,
+    browsersListTargets,
     typescript = false,
     hot = false,
     removeTypeofWindow,
     tramvai = false,
     rootDir = process.cwd(),
     generateDataQaTag = false,
+    // disabled because `arrayLikeIsIterable` and `iterableIsArray` assumtions is not supported yet in swc,
+    // this can leads to incorrect code generation e.g. when Set with spread is used - `[...new Set()] => [].concat(new Set())`
+    // TCORE-4904
+    loose = false,
+    externalHelpers = true,
   } = config;
 
   if (!warningWasShown) {
@@ -77,37 +80,17 @@ Having swc config may conflict with @tramvai/cli configuration`
     }
   }
 
-  let resultTarget = target;
-
-  if (!target) {
-    if (isServer) {
-      resultTarget = 'node';
-    } else if (modern) {
-      resultTarget = 'modern';
-    }
-  }
-
-  const browserslistConfigRaw = browserslist.findConfig(rootDir);
-
-  // выставляем дефолты если явный конфиг для browserslist не был найден или в нём нет нужного targets
-  const browserslistQuery =
-    browserslistConfigRaw?.[resultTarget] ?? envTargets[resultTarget] ?? envTargets.defaults;
-
-  const targets = browserslist(browserslistQuery, {
-    mobileToDesktop: true,
-    env: resultTarget,
-  });
-
   return {
     env: {
-      targets,
+      targets: browsersListTargets,
       // Use relevant core-js version, because it affects which polyfills are included
       // https://github.com/swc-project/swc/blob/main/crates/swc_ecma_preset_env/data/core-js-compat/modules-by-versions.json
       coreJs: require('core-js/package.json').version,
       // disabled because `arrayLikeIsIterable` and `iterableIsArray` assumtions is not supported yet in swc,
       // this can leads to incorrect code generation e.g. when Set with spread is used - `[...new Set()] => [].concat(new Set())`
       // TCORE-4904
-      loose: false,
+      loose,
+      exclude: excludesPresetEnv,
       mode: 'entry',
     },
     module: {
@@ -115,7 +98,7 @@ Having swc config may conflict with @tramvai/cli configuration`
     },
     isModule: 'unknown',
     jsc: {
-      externalHelpers: true,
+      externalHelpers,
       parser: {
         syntax: typescript ? 'typescript' : 'ecmascript',
         decorators: true,

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

@@ -27,6 +27,7 @@ import {
   WEBPACK_DEBUG_STATS_FIELDS,
 } from '../../constants/stats';
 import { pwaBlock } from '../../blocks/pwa/client';
+import PolyfillConditionPlugin from '../../plugins/PolyfillCondition';
 
 export default (configManager: ConfigManager<ApplicationConfigEntry>) => (config: Config) => {
   const { polyfill, fileSystemPages, env } = configManager;
@@ -59,11 +60,13 @@ export default (configManager: ConfigManager<ApplicationConfigEntry>) => (config
     .when(portalExists, (cfg) => cfg.entry('portal').add(portal))
     .when(polyfillExists, (cfg) => cfg.entry('polyfill').add(polyfillPath));
 
+  const statsFileName = configManager.modern ? 'stats.modern.json' : 'stats.json';
+
   config
     .plugin('stats-plugin')
     .use(StatsWriterPlugin, [
       {
-        filename: configManager.modern ? 'stats.modern.json' : 'stats.json',
+        filename: statsFileName,
         stats: {
           ...(env === 'development' ? DEV_STATS_OPTIONS : DEFAULT_STATS_OPTIONS),
           ...(configManager.verboseWebpack ? WEBPACK_DEBUG_STATS_OPTIONS : {}),
@@ -75,6 +78,9 @@ export default (configManager: ConfigManager<ApplicationConfigEntry>) => (config
       },
     ])
     .end()
+    .plugin('polyfill-condition-plugin')
+    .use(PolyfillConditionPlugin, [{ filename: statsFileName }])
+    .end()
     .plugin('define')
     .tap((args) => [
       {

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

@@ -17,7 +17,13 @@ export const serverInline = (configManager: ConfigManager<CliConfigEntry>) => (c
       .batch(
         addTranspilerLoader(
           clientConfigManager,
-          getTranspilerConfig(clientConfigManager, { typescript: type === 'ts' })
+          getTranspilerConfig(clientConfigManager, {
+            typescript: type === 'ts',
+            // inline transpiler runtime helpers to prevent webpack imports in generated inline scripts
+            externalHelpers: false,
+            // minimize swc helpers usage to prevent inline scripts bloat, risks is minimal for rarely used inline scripts
+            loose: true,
+          })
         )
       );
   };

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

@@ -0,0 +1,62 @@
+import {
+  getPolyfillCondition,
+  getMaxBrowserVersionsByFeatures,
+} from '../utils/polyfills/polyfillCondition';
+
+const TARGET_PLUGIN_NAME = 'stats-writer-plugin';
+
+export default class PolyfillConditionPlugin {
+  constructor(private options: { filename: string }) {
+    this.options = options;
+  }
+
+  apply(compiler) {
+    compiler.hooks.thisCompilation.tap(TARGET_PLUGIN_NAME, (compilation) => {
+      compilation.hooks.processAssets.tap(
+        {
+          name: TARGET_PLUGIN_NAME,
+          stage: compilation.constructor.PROCESS_ASSETS_STAGE_REPORT,
+        },
+        () => {
+          const { entrypoints } = compilation;
+          const polyfillEntrypoint = entrypoints.get('polyfill');
+
+          // If no polyfill entrypoint presented do nothing
+          if (!polyfillEntrypoint) return;
+
+          const polyfillChunk = polyfillEntrypoint.getEntrypointChunk();
+          const polyfillModules = compilation.chunkGraph.getChunkModulesIterable(polyfillChunk);
+          const coreJsModules = [];
+
+          for (const module of polyfillModules) {
+            if (module.resource && /\/core-js\/modules\//.test(module.resource)) {
+              coreJsModules.push(module);
+            }
+          }
+
+          const features = coreJsModules.map((module) =>
+            getFeatureNameFromModulePath(module.resource)
+          );
+
+          const browserVersionsByFeatures = getMaxBrowserVersionsByFeatures(features);
+          const polyfillCondition = getPolyfillCondition(browserVersionsByFeatures);
+          const { filename } = this.options;
+          const statsJSON = JSON.parse(compilation.assets[filename].source().toString());
+
+          statsJSON.polyfillCondition = polyfillCondition;
+          statsJSON.features = browserVersionsByFeatures;
+
+          compilation.updateAsset(
+            filename,
+            new compiler.webpack.sources.RawSource(JSON.stringify(statsJSON))
+          );
+        }
+      );
+    });
+  }
+}
+
+// node_modules/core-js/modules/es.array.push.js => es.array.push
+function getFeatureNameFromModulePath(modulePath) {
+  return modulePath.split('/').at(-1).replace(/\.js$/, '');
+}