npm - @tramvai/cli - Versions diffs - 5.46.1 → 5.47.1 - Mend

@tramvai/cli 5.46.1 → 5.47.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (49) hide show

package/src/library/webpack/utils/polyfills/__integration__/condition.test.ts ADDED Viewed

@@ -0,0 +1,128 @@
+import fs from 'node:fs';
+import { fastify } from 'fastify';
+import { getPort } from '@tramvai/internal-test-utils/utils/getPort';
+import { initPlaywright } from '@tramvai/test-pw';
+import { getMaxBrowserVersionsByFeatures, getPolyfillCondition } from '../polyfillCondition';
+import { getSpecToFeatureDict } from '../specToFeature';
+const polyfillEntryPath = require.resolve('@tinkoff/pack-polyfills');
+const polyfillsEntryContent = fs.readFileSync(polyfillEntryPath, 'utf-8');
+// import 'core-js/modules/es.array.at'; => 'es.array.at'
+const usedFeatures = [...polyfillsEntryContent.matchAll(/core-js\/modules\/(.*)'/gm)].map(
+  (item) => item[1]
+);
+jest.setTimeout(3 * 60 * 1000);
+describe('polyfills', () => {
+  let server;
+  let port;
+  let testUrl;
+  beforeAll(async () => {
+    server = fastify();
+    port = await getPort();
+    testUrl = `http://localhost:${port}`;
+    server.get('*', () => '<html></html>');
+    server.listen({ port });
+  });
+  afterAll(() => {
+    server.close();
+  });
+  describe('spec to feature generator', () => {
+    it('should generate feature: expression dictionary', () => {
+      const specToFeatureDict = getSpecToFeatureDict();
+      expect(specToFeatureDict).toMatchSnapshot('featureDict');
+    });
+    it('all feature expresssion should be valid', async () => {
+      const specToFeatureDict = getSpecToFeatureDict();
+      const { getPageWrapper, browser } = await initPlaywright(testUrl);
+      const { page } = await getPageWrapper(testUrl);
+      const specExpressionsResult = await page.evaluate(
+        ([specDict]) => {
+          const evalResult: Record<string, string> = {};
+          for (const featureName in specDict) {
+            const expression = specDict[featureName];
+            try {
+              // eslint-disable-next-line no-eval
+              const result = eval(`Boolean(${expression})`);
+              evalResult[featureName] = result;
+            } catch (err) {
+              evalResult[featureName] = '';
+            }
+          }
+          return evalResult;
+        },
+        [specToFeatureDict]
+      );
+      expect(specExpressionsResult).toMatchSnapshot('expressionsResult');
+      const failedSpecExpressions = [];
+      // Неподдерживаемые в браузерах спецификации
+      const ignoredSpecs = [
+        'es.async-disposable-stack',
+        'es.disposable-stack',
+        'es.suppressed-error',
+        'es.web.immediate',
+        'web.immediate',
+        'es.observable',
+      ];
+      // Проверяем что не прошли проверку только esnext фичи и несколько исключений
+      for (const specName in specExpressionsResult) {
+        const specResult = specExpressionsResult[specName];
+        if (!specResult && !specName.includes('esnext') && !ignoredSpecs.includes(specName)) {
+          failedSpecExpressions.push(`${specName} - ${specToFeatureDict[specName]}`);
+        }
+      }
+      expect(failedSpecExpressions.length).toBe(0);
+      await browser.close();
+    });
+  });
+  describe('polyfill condition', () => {
+    it('should generate max browser versions dict', () => {
+      const browserVersions = getMaxBrowserVersionsByFeatures(usedFeatures);
+      expect(browserVersions).toMatchSnapshot('browserVersions');
+    });
+    it('should generate valid polyfill condition', async () => {
+      const browserVersions = getMaxBrowserVersionsByFeatures(usedFeatures);
+      const polyfillCondition = getPolyfillCondition(browserVersions);
+      expect(polyfillCondition).toMatchSnapshot('polyfillCondition');
+      const { getPageWrapper, browser } = await initPlaywright(testUrl);
+      const { page } = await getPageWrapper(testUrl);
+      const polyfillConditionResult = await page.evaluate(
+        ([expression]) => {
+          // eslint-disable-next-line no-eval
+          return eval(expression);
+        },
+        [polyfillCondition]
+      );
+      expect(polyfillConditionResult).toBe(false);
+      browser.close();
+    });
+  });
+});

package/src/library/webpack/utils/polyfills/const.ts ADDED Viewed

@@ -0,0 +1,46 @@
+// List of ignore polyfills
+// they are impossible or very difficult to support check in the browser
+export const ignoredPolyfills = [
+  'es.json.to-string-tag',
+  'es.error.to-string',
+  'es.aggregate-error.cause',
+  'es.iterator',
+  'es.object.to-string',
+  'es.array.species',
+  'es.date.to-primitive',
+  'es.function.has-instance',
+  'es.string.at-alternative',
+  'es.math.to-string-tag',
+  'esnext.math.to-string-tag',
+  'es.reflect.to-string-tag',
+  'esnext.reflect.to-string-tag',
+  'esnext.function.metadata',
+  'esnext.composite-key',
+  'esnext.composite-symbol',
+  'web.dom-collections.for-each',
+  'web.dom-collections.iterator',
+  'web.dom-exception.to-string-tag',
+  'web.dom-exception.stack',
+  'es.array.unscopables.flat-map',
+  'es.array.unscopables.flat',
+  'es.array.push',
+  'es.set.difference.v2',
+  'es.set.intersection.v2',
+  'es.set.is-disjoint-from.v2',
+  'es.set.is-subset-of.v2',
+  'es.set.is-superset-of.v2',
+  'es.set.symmetric-difference.v2',
+  'es.set.union.v2',
+];
+export const browsers = [
+  'chrome',
+  'safari',
+  'firefox',
+  'opera',
+  'edge',
+  'chrome-android',
+  'ios',
+  'opera_mobile',
+  'samsung',
+];

package/src/library/webpack/utils/polyfills/polyfillCondition.ts ADDED Viewed

@@ -0,0 +1,63 @@
+import compat from 'core-js-compat';
+import { coerce, compare } from 'semver';
+import { getSpecToFeatureDict } from './specToFeature';
+import { ignoredPolyfills, browsers } from './const';
+type BrowserVersions = Record<string, { version: string; spec: string }>;
+export function getMaxBrowserVersionsByFeatures(usedFeatures: string[]) {
+  const { data } = compat;
+  const browserVersions: BrowserVersions = {};
+  usedFeatures.forEach((spec) => {
+    if (ignoredPolyfills.includes(spec)) {
+      return;
+    }
+    const specBrowsers = data[spec];
+    if (!specBrowsers) {
+      return;
+    }
+    browsers.forEach((browserName) => {
+      const maxBrowserVersion = specBrowsers[browserName];
+      if (
+        maxBrowserVersion &&
+        (!browserVersions[browserName] ||
+          compare(coerce(browserVersions[browserName].version), coerce(maxBrowserVersion)) === -1)
+      ) {
+        browserVersions[browserName] = { version: maxBrowserVersion, spec };
+      }
+    });
+  });
+  return browserVersions;
+}
+export function getPolyfillCondition(browserVersions: BrowserVersions) {
+  const supportConditions = new Set();
+  Object.values(browserVersions).forEach(({ spec }) =>
+    supportConditions.add(`!(${getSpecToFeature(spec)})`)
+  );
+  const polyfillCondition = [...supportConditions].join(' || ');
+  return polyfillCondition;
+}
+/**
+ * Converting the name of the specification into an expression for checking support in runtime
+ * es.string.at => String.prototype.at
+ * es.object.assign => Object.assign
+ */
+let specToFeatureDictCache;
+function getSpecToFeature(spec) {
+  if (!specToFeatureDictCache) {
+    specToFeatureDictCache = getSpecToFeatureDict();
+  }
+  return specToFeatureDictCache[spec];
+}

package/src/library/webpack/utils/polyfills/specToFeature.ts ADDED Viewed

@@ -0,0 +1,243 @@
+import path from 'node:path';
+import camelCaseName from '@tinkoff/utils/string/camelCaseName';
+import { ignoredPolyfills } from './const';
+// built-in-definitions.js file is not listed in the package.json exports of package, so it cannot be imported
+// workaround this by using require with an absolute path to file
+const pathToDep = require.resolve('babel-plugin-polyfill-corejs3/package.json');
+const definitions = require(path.join(path.dirname(pathToDep), '/lib/built-in-definitions.js'));
+// A list of new primitives, their support in browsers was added recently
+const newPrimitivies = {
+  'weak-map': 'window.WeakMap',
+  'weak-set': 'window.WeakSet',
+  'async-disposable-stack': 'window.AsyncDisposableStack',
+  'disposable-stack': 'window.DisposableStack',
+  'suppressed-error': 'window.SuppressedError',
+  'web.immediate': 'window.setImmediate',
+  observable: 'window.Observable',
+};
+// A list of primitives for which there are no polyfills, but they are needed as a base for methods like JSON.stringify
+const missingBuiltIns = {
+  ...newPrimitivies,
+  'typed-array': 'window.Int8Array',
+  'uint8-array': 'window.Uint8Array',
+  string: 'window.String',
+  array: 'window.Array',
+  object: 'window.Object',
+  math: 'window.Math',
+  function: 'window.Function',
+  json: 'window.JSON',
+};
+// Exclude fetch builtin, because its treated as object.constructor
+const excludedBuiltIns = ['fetch'];
+const isBuiltInExcluded = (builtInName) => excludedBuiltIns.includes(builtInName);
+// Exclude iterators
+// we do not provide polyfills for them and their support check is much more complicated
+// es.iterator, es.async-iterator, esnext.async-iterator, esnext.iterator
+const isSpecExcluded = (specName) =>
+  /(es(next)?)?\.(async-)?iterator/.test(specName) || ignoredPolyfills.includes(specName);
+const specToFeatureDict = {};
+function _addFeature(specName: string, primitive: string, method: string, isInstance: boolean) {
+  if (specToFeatureDict[specName]) {
+    return;
+  }
+  let checkExpression = isInstance
+    ? `'${method}' in ${primitive}.prototype`
+    : `${primitive}.${method}`;
+  // For new primitives, we add a check for the existence of the primitive itself.
+  // for example WeakMap && WeakMap.from
+  // since WeakMap itself may not be supported in the browser, WeakMap check support may also be required
+  const isPrimitiveNew = Boolean(Object.values(newPrimitivies).includes(primitive));
+  if (isPrimitiveNew) {
+    checkExpression = `${primitive} && ${checkExpression}`;
+  }
+  specToFeatureDict[specName] = checkExpression;
+  specToFeatureDict[specName.replace('es.', 'esnext.')] = checkExpression;
+}
+const addStaticFeature = (specName: string, primitive: string, method: string) =>
+  _addFeature(specName, primitive, method, false);
+const addInstanceFeature = (specName: string, primitive: string, method: string) =>
+  _addFeature(specName, primitive, method, true);
+const methods = {};
+function addMethod(specName, expression) {
+  methods[specName] = expression;
+}
+const instanceMethods = new Set(['web.url.to-json']);
+const globals = new Set();
+function _addGlobal(globalList: string[], isInstance: boolean) {
+  globalList.forEach((globalSpecName) => {
+    globals.add(globalSpecName);
+    if (isInstance) {
+      instanceMethods.add(globalSpecName);
+    }
+  });
+}
+const addInstanceGlobal = (globalList: string[]) => _addGlobal(globalList, true);
+const addGlobal = (globalList: string[]) => _addGlobal(globalList, false);
+/**
+ * For conversion, a dictionary of the form `spec: feature` needs to be created
+ * we use a file from babel-plugin-polyfill-corejs3 for this - https://github.com/babel/babel-polyfills/blob/main/packages/babel-plugin-polyfill-corejs3/src/built-in-definitions.ts
+ * as a result we get dictinary like { 'es.array.at: 'Array.prototype.at', 'es.object.assign': 'Object.assign' }
+ */
+export function getSpecToFeatureDict(): Record<string, string> {
+  const { BuiltIns, InstanceProperties, StaticProperties } = definitions;
+  // JS primitives: Number, Reflect, Set, Map...
+  const builtIns = Object.keys(BuiltIns).reduce((acc, builtInKey) => {
+    const { name: builtInName, global } = BuiltIns[builtInKey];
+    if (isBuiltInExcluded(builtInKey)) return acc;
+    addGlobal(global);
+    const removeBaseMethodNames = (builtInName) =>
+      builtInName.replace('.constructor', '').replace('.to-string', '');
+    acc[removeBaseMethodNames(builtInName)] = `window.${builtInKey}`;
+    acc[removeBaseMethodNames(builtInName).replace('es.', 'esnext.')] = `window.${builtInKey}`;
+    return acc;
+  }, {});
+  // Some primitives are missing, so we add them manually
+  Object.keys(missingBuiltIns).forEach((missingBuiltInName) => {
+    builtIns[`es.${missingBuiltInName}`] = `${missingBuiltIns[missingBuiltInName]}`;
+    builtIns[`esnext.${missingBuiltInName}`] = `${missingBuiltIns[missingBuiltInName]}`;
+  });
+  function parseSpec(spec: string) {
+    // es.string.push
+    const splitName = spec.split('.');
+    // es.string
+    const builtInName = splitName.slice(0, -1).join('.');
+    // String
+    const primitiveExpr = builtIns[builtInName];
+    // push
+    const methodName = splitName.at(-1);
+    return {
+      builtInName,
+      primitiveExpr,
+      methodName,
+    };
+  }
+  // Instance methods, for example [1, 2, 3].at(), 'some_string'.toLowerCase()...
+  Object.keys(InstanceProperties).forEach((instancePropertyName) => {
+    const { name: instanceSpecName, global } = InstanceProperties[instancePropertyName];
+    if (isSpecExcluded(instanceSpecName)) return;
+    const { primitiveExpr, methodName } = parseSpec(instanceSpecName);
+    addMethod(methodName, instancePropertyName);
+    addInstanceGlobal(global);
+    // Some instance methods have no parent
+    // for example Symbol.constructor is es.Symbol
+    if (!primitiveExpr) return;
+    addInstanceFeature(instanceSpecName, primitiveExpr, instancePropertyName);
+  });
+  // Static methods for example Object.assign(), RegExp.escape()...
+  Object.keys(StaticProperties).forEach((primitiveName) => {
+    const staticPrimitiveProperties = StaticProperties[primitiveName];
+    Object.keys(staticPrimitiveProperties).forEach((staticPropertyName) => {
+      const { name: staticSpecName, global } = staticPrimitiveProperties[staticPropertyName];
+      if (isSpecExcluded(staticSpecName)) return;
+      const { methodName } = parseSpec(staticSpecName);
+      addGlobal(global);
+      addMethod(methodName, staticPropertyName);
+      // For some reason, several static properties have names that match a builtin
+      // we ignore such properties since their support in browsers appeared at the same time as the builtin itself
+      // for example Promise and Promise.all
+      if (builtIns[staticSpecName]) return;
+      addStaticFeature(staticSpecName, primitiveName, staticPropertyName);
+    });
+  });
+  function isFeatureExists(specName) {
+    return Boolean(builtIns[specName]) || Boolean(specToFeatureDict[specName]);
+  }
+  // Each spec has a list of globals, which also need to be converted into an expression for support check
+  // but not all globals can have their method name determined unambiguously
+  [...globals].forEach((globalSpecName: string) => {
+    if (!isFeatureExists(globalSpecName)) {
+      if (isSpecExcluded(globalSpecName)) return;
+      const { methodName, primitiveExpr, builtInName } = parseSpec(globalSpecName);
+      // es.array-buffer.from
+      const globalNameSplit = globalSpecName.split('.');
+      // Trying to find a support check expression for a method from the already bypassed spec
+      // for example, array and typed-array have the findLastIndex method, but typed-array is listed in global
+      const featureMethod = methodName === 'constructor' ? 'constructor' : methods[methodName];
+      // We consider a method to be simple if its name does not contain a '-'
+      // every, filter, map can be left as it is, the method in the language is called the same way
+      const isMethodSimple = !/-/.test(methodName);
+      // Primitives don't have a method, so its length is 2
+      // for example es.symbol или es.string
+      const isPrimitive = globalNameSplit.length === 2;
+      if (isPrimitive) {
+        builtIns[globalSpecName] = `${BuiltIns[globalSpecName]}`;
+        return;
+      }
+      // Trying to determine the type of method from global static or instance
+      const globalInstancePrimitives = [
+        'es.array-buffer',
+        'es.typed-array',
+        'es.symbol',
+        'web.url-search-params',
+        'esnext.weak-map',
+        'esnext.weak-set',
+        'uint8-array',
+      ];
+      const isInstanceMethod =
+        globalInstancePrimitives.includes(builtInName) || instanceMethods.has(globalSpecName);
+      let method: string;
+      if (featureMethod) {
+        method = featureMethod;
+      } else if (isMethodSimple) {
+        method = methodName;
+      } else if (primitiveExpr) {
+        // couldn't find a similar method in the original list and it contains '-'
+        // speculatively translating it to camelCase web.url.can-parse => URL.canParse
+        method = camelCaseName(methodName);
+      }
+      isInstanceMethod
+        ? addInstanceFeature(globalSpecName, primitiveExpr, method)
+        : addStaticFeature(globalSpecName, primitiveExpr, method);
+    }
+  });
+  return fixBrokenSpec({ ...builtIns, ...specToFeatureDict });
+}
+function fixBrokenSpec(specs: Record<string, string>) {
+  specs['es.string.italics'] = "'italics' in window.String.prototype";
+  return specs;
+}

package/src/library/webpack/utils/transpiler.ts CHANGED Viewed

@@ -1,5 +1,7 @@
 import type Config from 'webpack-chain';
 import { sync as resolve } from 'resolve';
+import envTargets from '@tinkoff/browserslist-config';
+import browserslist from 'browserslist';
 import type { ConfigManager } from '../../../config/configManager';
 import { getSwcOptions } from '../../swc';
 import { babelConfigFactory } from '../../babel';
@@ -10,6 +12,7 @@ import type { CliConfigEntry, ReactCompilerOptions } from '../../../typings/conf
 export type TranspilerConfig = {
   env: Env;
   target: Target;
+  actualTarget: Target;
   modern: boolean;
   isServer: boolean;
   generateDataQaTag: boolean;
@@ -23,6 +26,7 @@ export type TranspilerConfig = {
   hot: boolean;
   excludesPresetEnv: string[];
   rootDir: string;
+  browsersListTargets: string[];
   reactCompiler: boolean | ReactCompilerOptions;
   /**
    * Enable or disable `loose` transformations:
@@ -67,19 +71,43 @@ export const getTranspilerConfig = (
   const {
     generateDataQaTag,
     alias,
+    target,
+    rootDir,
     enableFillActionNamePlugin,
     excludesPresetEnv,
     experiments: { enableFillDeclareActionNamePlugin, reactCompiler },
   } = configManager;
   const { env, modern } = configManager;
+  const isServer = configManager.buildType === 'server';
   if (alias) {
     console.warn(`"alias" option deprecated and ignored as cli now supports baseUrl and paths from the app's tsconfig.json file.
 Just check or add configuration to your tsconfig file and remove alias from tramvai.json`);
   }
+  let actualTarget = target;
+  if (!target) {
+    if (isServer) {
+      actualTarget = 'node';
+    } else if (modern) {
+      actualTarget = 'modern';
+    }
+  }
+  const browserslistConfigRaw = browserslist.findConfig(rootDir);
+  // Set defaults if the explicit config for browserslist was not found or the config does not contain the necessary targets
+  const browserslistQuery =
+    browserslistConfigRaw?.[actualTarget] ?? envTargets[actualTarget] ?? envTargets.defaults;
+  const browsersListTargets = browserslist(browserslistQuery, {
+    mobileToDesktop: true,
+    env: actualTarget,
+  });
   return {
-    isServer: configManager.buildType === 'server',
+    isServer,
     env,
     generateDataQaTag,
     modern,
@@ -89,7 +117,9 @@ Just check or add configuration to your tsconfig file and remove alias from tram
     excludesPresetEnv,
     enableFillActionNamePlugin,
     rootDir: configManager.rootDir,
-    target: configManager.target,
+    target,
+    actualTarget,
+    browsersListTargets,
     loader: true,
     modules: false,
     typescript: false,

package/src/schema/autogeneratedSchema.json CHANGED Viewed

@@ -1016,8 +1016,7 @@
           ]
         },
         "excludesPresetEnv": {
-          "title": "List of modules to exclude from `@babel/preset-env`",
-          "description": "Option doesn't affect build with swc loader",
+          "title": "List of modules to exclude from `@babel/preset-env` and `swc-loader`",
           "type": "array",
           "items": {
             "type": "string"
@@ -1808,8 +1807,7 @@
           "additionalProperties": false
         },
         "excludesPresetEnv": {
-          "title": "List of modules to exclude from `@babel/preset-env`",
-          "description": "Option doesn't affect build with swc loader",
+          "title": "List of modules to exclude from `@babel/preset-env` and `swc-loader`",
           "type": "array",
           "items": {
             "type": "string"
@@ -2560,8 +2558,7 @@
           "additionalProperties": false
         },
         "excludesPresetEnv": {
-          "title": "List of modules to exclude from `@babel/preset-env`",
-          "description": "Option doesn't affect build with swc loader",
+          "title": "List of modules to exclude from `@babel/preset-env` and `swc-loader`",
           "type": "array",
           "items": {
             "type": "string"

package/src/typings/configEntry/cli.ts CHANGED Viewed

@@ -142,8 +142,7 @@ export interface CliConfigEntry extends ConfigEntry {
    */
   experiments: Experiments;
   /**
-   * @title List of modules to exclude from `@babel/preset-env`
-   * @description Option doesn't affect build with swc loader
+   * @title List of modules to exclude from `@babel/preset-env` and `swc-loader`
    */
   excludesPresetEnv?: string[];
   /**