Skip to content

Commit cfc78d1

Browse files
NikitaCGNikitaCG
authored
feat: update swiper on v10 (#1313)
* feat: update swiper on v10 * feat: update jest config * feat: update gulpfile linter * feat: temporal skip slider tests for testing alpha version * feat: fix typo
1 parent 88190f0 commit cfc78d1

File tree

10 files changed

+692
-333
lines changed

10 files changed

+692
-333
lines changed

‎gulpfile.js‎

Lines changed: 122 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
11
/* eslint-env node */
2+
const fs = require('fs');
23
const path = require('path');
34

45
const utils = require('@gravity-ui/gulp-utils');
6+
const esbuild = require('esbuild');
57
const {task, src, dest, series, parallel} = require('gulp');
68
const replace = require('gulp-replace');
79
const sass = require('gulp-sass')(require('sass'));
810
const sourcemaps = require('gulp-sourcemaps');
911
const {rimrafSync} = require('rimraf');
12+
1013
const BUILD_CLIENT_DIR = path.resolve('build');
1114
const ESM_DIR = 'esm';
1215
const CJS_DIR = 'cjs';
@@ -56,12 +59,6 @@ async function compileTs(modules = false) {
5659
},
5760
}),
5861
)
59-
.pipe(replace(/swiper/, () => (modules ? 'swiper/swiper.esm.js' : 'swiper')))
60-
.pipe(
61-
replace(/swiper\/react/g, () =>
62-
modules ? 'swiper/swiper-react.esm.js' : 'swiper/swiper-react.cjs.js',
63-
),
64-
)
6562
.pipe(sourcemaps.write('.', {includeContent: true, sourceRoot: '../../src'}))
6663
.pipe(
6764
utils.addVirtualFile({
@@ -101,6 +98,124 @@ task('copy-json', () => {
10198
.pipe(dest(path.resolve(BUILD_CLIENT_DIR, CJS_DIR)));
10299
});
103100

101+
// Transpile ESM-only packages (swiper) to CJS for compatibility
102+
task('bundle-esm-deps-for-cjs', async () => {
103+
const cjsDir = path.resolve(BUILD_CLIENT_DIR, CJS_DIR);
104+
const vendorDir = path.join(cjsDir, '_vendor');
105+
106+
// Create directory for vendored CJS modules
107+
fs.mkdirSync(vendorDir, {recursive: true});
108+
109+
// Bundle swiper to CJS
110+
await esbuild.build({
111+
entryPoints: {
112+
swiper: 'node_modules/swiper/swiper.mjs',
113+
'swiper-react': 'node_modules/swiper/swiper-react.mjs',
114+
},
115+
bundle: true,
116+
format: 'cjs',
117+
outdir: vendorDir,
118+
platform: 'browser',
119+
external: ['react', 'react-dom'],
120+
minify: false,
121+
sourcemap: true,
122+
});
123+
124+
// Bundle swiper modules
125+
await esbuild.build({
126+
stdin: {
127+
contents: `
128+
export { A11y, Autoplay, Pagination } from 'swiper/modules';
129+
`,
130+
resolveDir: process.cwd(),
131+
},
132+
bundle: true,
133+
format: 'cjs',
134+
outfile: path.join(vendorDir, 'swiper-modules.js'),
135+
platform: 'browser',
136+
minify: false,
137+
sourcemap: true,
138+
});
139+
140+
// Create node_modules/swiper structure in CJS build
141+
const swiperCjsDir = path.join(cjsDir, 'node_modules', 'swiper');
142+
fs.mkdirSync(swiperCjsDir, {recursive: true});
143+
144+
// Create package.json for CJS version of swiper
145+
fs.writeFileSync(
146+
path.join(swiperCjsDir, 'package.json'),
147+
JSON.stringify(
148+
{
149+
name: 'swiper',
150+
version: '10.2.0',
151+
type: 'commonjs',
152+
main: './swiper.js',
153+
exports: {
154+
'.': './swiper.js',
155+
'./react': './swiper-react.js',
156+
'./modules': './modules/index.js',
157+
'./css': './swiper.css',
158+
'./css/a11y': './modules/a11y.css',
159+
'./css/pagination': './modules/pagination.css',
160+
},
161+
},
162+
null,
163+
2,
164+
),
165+
);
166+
167+
// Copy transpiled JS files
168+
fs.copyFileSync(path.join(vendorDir, 'swiper.js'), path.join(swiperCjsDir, 'swiper.js'));
169+
fs.copyFileSync(
170+
path.join(vendorDir, 'swiper-react.js'),
171+
path.join(swiperCjsDir, 'swiper-react.js'),
172+
);
173+
174+
// Create modules directory and copy modules there
175+
const modulesDir = path.join(swiperCjsDir, 'modules');
176+
fs.mkdirSync(modulesDir, {recursive: true});
177+
fs.copyFileSync(path.join(vendorDir, 'swiper-modules.js'), path.join(modulesDir, 'index.js'));
178+
179+
// Copy CSS files
180+
const swiperNodeModules = path.join('node_modules', 'swiper');
181+
182+
// Main CSS
183+
fs.copyFileSync(
184+
path.join(swiperNodeModules, 'swiper.css'),
185+
path.join(swiperCjsDir, 'swiper.css'),
186+
);
187+
188+
// Module CSS files
189+
['pagination.css', 'a11y.css', 'autoplay.css'].forEach((file) => {
190+
const srcPath = path.join(swiperNodeModules, 'modules', file);
191+
const destPath = path.join(modulesDir, file);
192+
if (fs.existsSync(srcPath)) {
193+
fs.copyFileSync(srcPath, destPath);
194+
}
195+
});
196+
197+
// Copy types
198+
const typesDir = path.join(swiperCjsDir, 'types');
199+
fs.mkdirSync(path.join(typesDir, 'modules'), {recursive: true});
200+
201+
fs.copyFileSync(
202+
path.join(swiperNodeModules, 'swiper.d.ts'),
203+
path.join(swiperCjsDir, 'swiper.d.ts'),
204+
);
205+
fs.copyFileSync(
206+
path.join(swiperNodeModules, 'swiper-react.d.ts'),
207+
path.join(swiperCjsDir, 'swiper-react.d.ts'),
208+
);
209+
fs.copyFileSync(
210+
path.join(swiperNodeModules, 'types', 'index.d.ts'),
211+
path.join(typesDir, 'index.d.ts'),
212+
);
213+
fs.copyFileSync(
214+
path.join(swiperNodeModules, 'types', 'modules', 'index.d.ts'),
215+
path.join(typesDir, 'modules', 'index.d.ts'),
216+
);
217+
});
218+
104219
task('styles-global', () => {
105220
return src('styles/styles.scss')
106221
.pipe(
@@ -130,6 +245,7 @@ task(
130245
series([
131246
'clean',
132247
parallel(['compile-to-esm', 'compile-to-cjs']),
248+
'bundle-esm-deps-for-cjs',
133249
'copy-js-declarations',
134250
'copy-json',
135251
parallel(['styles-global', 'styles-components']),

‎jest.config.js‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,27 @@
11
module.exports = {
22
verbose: true,
3-
moduleFileExtensions: ['js', 'json', 'ts', 'tsx'],
3+
moduleFileExtensions: ['js', 'json', 'ts', 'tsx', 'mjs'],
44
rootDir: '.',
55
transform: {
66
'^.+\\.tsx?$': ['ts-jest', {tsconfig: './tsconfig.test.json'}],
7+
'^.+\\.m?js$': [
8+
'babel-jest',
9+
{
10+
presets: [
11+
[
12+
'@babel/preset-env',
13+
{
14+
targets: {node: 'current'},
15+
modules: 'commonjs',
16+
},
17+
],
18+
],
19+
},
20+
],
721
},
8-
transformIgnorePatterns: ['node_modules/(?!(@gravity-ui|react-github-btn|tinygesture)/)'],
22+
transformIgnorePatterns: [
23+
'node_modules/(?!(@gravity-ui|react-github-btn|tinygesture|swiper)/)',
24+
],
925
coverageDirectory: './coverage',
1026
collectCoverageFrom: [
1127
'src/blocks/**/*.{ts,tsx,js,jsx}',
@@ -18,6 +34,8 @@ module.exports = {
1834
setupFiles: ['<rootDir>/test-utils/setup-tests.ts'],
1935
setupFilesAfterEnv: ['<rootDir>/test-utils/setup-tests-after.ts'],
2036
moduleNameMapper: {
37+
// Mock CSS imports
38+
'^swiper/css.*': 'jest-transform-css',
2139
'\\.(css|less|scss|sass)$': 'jest-transform-css',
2240
},
2341
testMatch: ['**/*.test.[jt]s?(x)'],

0 commit comments

Comments
 (0)