feat!: update swiper on v10

gulpfile.js

@@ -1,12 +1,15 @@
 /* eslint-env node */
+const fs = require('fs');
 const path = require('path');
 
 const utils = require('@gravity-ui/gulp-utils');
+const esbuild = require('esbuild');
 const {task, src, dest, series, parallel} = require('gulp');
 const replace = require('gulp-replace');
 const sass = require('gulp-sass')(require('sass'));
 const sourcemaps = require('gulp-sourcemaps');
 const {rimrafSync} = require('rimraf');
+
 const BUILD_CLIENT_DIR = path.resolve('build');
 const ESM_DIR = 'esm';
 const CJS_DIR = 'cjs';
@@ -56,12 +59,6 @@ async function compileTs(modules = false) {
                     },
                 }),
             )
-            .pipe(replace(/swiper/, () => (modules ? 'swiper/swiper.esm.js' : 'swiper')))
-            .pipe(
-                replace(/swiper\/react/g, () =>
-                    modules ? 'swiper/swiper-react.esm.js' : 'swiper/swiper-react.cjs.js',
-                ),
-            )
             .pipe(sourcemaps.write('.', {includeContent: true, sourceRoot: '../../src'}))
             .pipe(
                 utils.addVirtualFile({
@@ -101,6 +98,124 @@ task('copy-json', () => {
         .pipe(dest(path.resolve(BUILD_CLIENT_DIR, CJS_DIR)));
 });
 
+// Transpile ESM-only packages (swiper) to CJS for compatibility
+task('bundle-esm-deps-for-cjs', async () => {
+    const cjsDir = path.resolve(BUILD_CLIENT_DIR, CJS_DIR);
+    const vendorDir = path.join(cjsDir, '_vendor');
+
+    // Create directory for vendored CJS modules
+    fs.mkdirSync(vendorDir, {recursive: true});
+
+    // Bundle swiper to CJS
+    await esbuild.build({
+        entryPoints: {
+            swiper: 'node_modules/swiper/swiper.mjs',
+            'swiper-react': 'node_modules/swiper/swiper-react.mjs',
+        },
+        bundle: true,
+        format: 'cjs',
+        outdir: vendorDir,
+        platform: 'browser',
+        external: ['react', 'react-dom'],
+        minify: false,
+        sourcemap: true,
+    });
+
+    // Bundle swiper modules
+    await esbuild.build({
+        stdin: {
+            contents: `
+                export { A11y, Autoplay, Pagination } from 'swiper/modules';
+            `,
+            resolveDir: process.cwd(),
+        },
+        bundle: true,
+        format: 'cjs',
+        outfile: path.join(vendorDir, 'swiper-modules.js'),
+        platform: 'browser',
+        minify: false,
+        sourcemap: true,
+    });
+
+    // Create node_modules/swiper structure in CJS build
+    const swiperCjsDir = path.join(cjsDir, 'node_modules', 'swiper');
+    fs.mkdirSync(swiperCjsDir, {recursive: true});
+
+    // Create package.json for CJS version of swiper
+    fs.writeFileSync(
+        path.join(swiperCjsDir, 'package.json'),
+        JSON.stringify(
+            {
+                name: 'swiper',
+                version: '10.2.0',
+                type: 'commonjs',
+                main: './swiper.js',
+                exports: {
+                    '.': './swiper.js',
+                    './react': './swiper-react.js',
+                    './modules': './modules/index.js',
+                    './css': './swiper.css',
+                    './css/a11y': './modules/a11y.css',
+                    './css/pagination': './modules/pagination.css',
+                },
+            },
+            null,
+            2,
+        ),
+    );
+
+    // Copy transpiled JS files
+    fs.copyFileSync(path.join(vendorDir, 'swiper.js'), path.join(swiperCjsDir, 'swiper.js'));
+    fs.copyFileSync(
+        path.join(vendorDir, 'swiper-react.js'),
+        path.join(swiperCjsDir, 'swiper-react.js'),
+    );
+
+    // Create modules directory and copy modules there
+    const modulesDir = path.join(swiperCjsDir, 'modules');
+    fs.mkdirSync(modulesDir, {recursive: true});
+    fs.copyFileSync(path.join(vendorDir, 'swiper-modules.js'), path.join(modulesDir, 'index.js'));
+
+    // Copy CSS files
+    const swiperNodeModules = path.join('node_modules', 'swiper');
+
+    // Main CSS
+    fs.copyFileSync(
+        path.join(swiperNodeModules, 'swiper.css'),
+        path.join(swiperCjsDir, 'swiper.css'),
+    );
+
+    // Module CSS files
+    ['pagination.css', 'a11y.css', 'autoplay.css'].forEach((file) => {
+        const srcPath = path.join(swiperNodeModules, 'modules', file);
+        const destPath = path.join(modulesDir, file);
+        if (fs.existsSync(srcPath)) {
+            fs.copyFileSync(srcPath, destPath);
+        }
+    });
+
+    // Copy types
+    const typesDir = path.join(swiperCjsDir, 'types');
+    fs.mkdirSync(path.join(typesDir, 'modules'), {recursive: true});
+
+    fs.copyFileSync(
+        path.join(swiperNodeModules, 'swiper.d.ts'),
+        path.join(swiperCjsDir, 'swiper.d.ts'),
+    );
+    fs.copyFileSync(
+        path.join(swiperNodeModules, 'swiper-react.d.ts'),
+        path.join(swiperCjsDir, 'swiper-react.d.ts'),
+    );
+    fs.copyFileSync(
+        path.join(swiperNodeModules, 'types', 'index.d.ts'),
+        path.join(typesDir, 'index.d.ts'),
+    );
+    fs.copyFileSync(
+        path.join(swiperNodeModules, 'types', 'modules', 'index.d.ts'),
+        path.join(typesDir, 'modules', 'index.d.ts'),
+    );
+});
+
 task('styles-global', () => {
     return src('styles/styles.scss')
         .pipe(
@@ -130,6 +245,7 @@ task(
     series([
         'clean',
         parallel(['compile-to-esm', 'compile-to-cjs']),
+        'bundle-esm-deps-for-cjs',
         'copy-js-declarations',
         'copy-json',
         parallel(['styles-global', 'styles-components']),

jest.config.js

@@ -1,11 +1,27 @@
 module.exports = {
     verbose: true,
-    moduleFileExtensions: ['js', 'json', 'ts', 'tsx'],
+    moduleFileExtensions: ['js', 'json', 'ts', 'tsx', 'mjs'],
     rootDir: '.',
     transform: {
         '^.+\\.tsx?$': ['ts-jest', {tsconfig: './tsconfig.test.json'}],
+        '^.+\\.m?js$': [
+            'babel-jest',
+            {
+                presets: [
+                    [
+                        '@babel/preset-env',
+                        {
+                            targets: {node: 'current'},
+                            modules: 'commonjs',
+                        },
+                    ],
+                ],
+            },
+        ],
     },
-    transformIgnorePatterns: ['node_modules/(?!(@gravity-ui|react-github-btn|tinygesture)/)'],
+    transformIgnorePatterns: [
+        'node_modules/(?!(@gravity-ui|react-github-btn|tinygesture|swiper)/)',
+    ],
     coverageDirectory: './coverage',
     collectCoverageFrom: [
         'src/blocks/**/*.{ts,tsx,js,jsx}',
@@ -18,6 +34,8 @@ module.exports = {
     setupFiles: ['<rootDir>/test-utils/setup-tests.ts'],
     setupFilesAfterEnv: ['<rootDir>/test-utils/setup-tests-after.ts'],
     moduleNameMapper: {
+        // Мокаем CSS импорты
+        '^swiper/css.*': 'jest-transform-css',
         '\\.(css|less|scss|sass)$': 'jest-transform-css',
     },
     testMatch: ['**/*.test.[jt]s?(x)'],