feat: use type: module

package/package.json

@@ -2,10 +2,59 @@
   "name": "swiper",
   "version": "6.8.1",
   "description": "Most modern mobile touch slider and framework with hardware accelerated transitions",
-  "main": "swiper.cjs.js",
-  "jsnext:main": "swiper.esm.js",
-  "module": "swiper.esm.js",
   "typings": "swiper.d.ts",
+  "type": "module",
+  "exports": {
+    ".": "./swiper.esm.js",
+    "./core/": "./swiper.esm.js",
+    "./bundle/": "./swiper-bundle.esm.js",
+    "./css/": "./swiper-bundle.css",
+    "./less/": "./swiper.less",
+    "./less/a11y": "./modules/a11y/a11y.less",
+    "./less/autoplay": "./modules/autoplay/autoplay.less",
+    "./less/controller": "./modules/controller/controller.less",
+    "./less/effect-coverflow": "./modules/effect-coverflow/effect-coverflow.less",
+    "./less/effect-cube": "./modules/effect-cube/effect-cube.less",
+    "./less/effect-fade": "./modules/effect-fade/effect-fade.less",
+    "./less/effect-flip": "./modules/effect-flip/effect-flip.less",
+    "./less/free-mode": "./modules/free-mode/free-mode.less",
+    "./less/hash-navigation": "./modules/hash-navigation/hash-navigation.less",
+    "./less/history": "./modules/history/history.less",
+    "./less/keyboard": "./modules/keyboard/keyboard.less",
+    "./less/lazy": "./modules/lazy/lazy.less",
+    "./less/mousewheel": "./modules/mousewheel/mousewheel.less",
+    "./less/navigation": "./modules/navigation/navigation.less",
+    "./less/pagination": "./modules/pagination/pagination.less",
+    "./less/parallax": "./modules/parallax/parallax.less",
+    "./less/scrollbar": "./modules/scrollbar/scrollbar.less",
+    "./less/thumbs": "./modules/thumbs/thumbs.less",
+    "./less/virtual": "./modules/virtual/virtual.less",
+    "./less/zoom": "./modules/zoom/zoom.less",
+    "./scss/": "./swiper.scss",
+    "./scss/a11y": "./modules/a11y/a11y.scss",
+    "./scss/autoplay": "./modules/autoplay/autoplay.scss",
+    "./scss/controller": "./modules/controller/controller.scss",
+    "./scss/effect-coverflow": "./modules/effect-coverflow/effect-coverflow.scss",
+    "./scss/effect-cube": "./modules/effect-cube/effect-cube.scss",
+    "./scss/effect-fade": "./modules/effect-fade/effect-fade.scss",
+    "./scss/effect-flip": "./modules/effect-flip/effect-flip.scss",
+    "./scss/free-mode": "./modules/free-mode/free-mode.scss",
+    "./scss/hash-navigation": "./modules/hash-navigation/hash-navigation.scss",
+    "./scss/history": "./modules/history/history.scss",
+    "./scss/keyboard": "./modules/keyboard/keyboard.scss",
+    "./scss/lazy": "./modules/lazy/lazy.scss",
+    "./scss/mousewheel": "./modules/mousewheel/mousewheel.scss",
+    "./scss/navigation": "./modules/navigation/navigation.scss",
+    "./scss/pagination": "./modules/pagination/pagination.scss",
+    "./scss/parallax": "./modules/parallax/parallax.scss",
+    "./scss/scrollbar": "./modules/scrollbar/scrollbar.scss",
+    "./scss/thumbs": "./modules/thumbs/thumbs.scss",
+    "./scss/virtual": "./modules/virtual/virtual.scss",
+    "./scss/zoom": "./modules/zoom/zoom.scss",
+    "./react/": "./react/swiper-react.js",
+    "./vue/": "./vue/swiper-vue.js",
+    "./svelte/": "./svelte/swiper-svelte.js"
+  },
   "sideEffects": [
     "*.less",
     "*.scss",
@@ -68,4 +117,4 @@
     "dom7": "^3.0.0",
     "ssr-window": "^3.0.0"
   }
-}
+}

scripts/build-js-bundle.js

@@ -30,7 +30,7 @@ async function buildBundle(components, format, browser, cb) {
         '//IMPORT_COMPONENTS': components
           .map(
             (component) =>
-              `import ${component.capitalized} from './modules/${component.name}/${component.name}';`,
+              `import ${component.capitalized} from './modules/${component.name}/${component.name}.js';`,
           )
           .join('\n'),
         '//INSTALL_COMPONENTS': components
@@ -56,14 +56,6 @@ async function buildBundle(components, format, browser, cb) {
       }),
     )
     .then(async (bundle) => {
-      if (!browser && format === 'esm') {
-        // Fix imports
-        const modularContent = fs
-          .readFileSync(`./${output}/${filename}.js`, 'utf-8')
-          .replace(/require\('\.\//g, `require('./${format}/`)
-          .replace(/from '\.\//g, `from './${format}/`);
-        fs.writeFileSync(`./${output}/${filename}.js`, modularContent);
-      }
       if (env === 'development' || !browser) {
         if (cb) cb();
         return;

scripts/build-js-core.js

@@ -11,11 +11,11 @@ async function buildCore(components) {
   const filename = `swiper.esm`;
   const outputDir = env === 'development' ? 'build' : 'package';
   let coreContent = '';
-  coreContent += `export { default as Swiper, default } from './core/core-class';\n`;
+  coreContent += `export { default as Swiper, default } from './core/core-class.js';\n`;
   coreContent += components
     .map(
       (component) =>
-        `export { default as ${component.capitalized} } from './modules/${component.name}/${component.name}';`,
+        `export { default as ${component.capitalized} } from './modules/${component.name}/${component.name}.js';`,
     )
     .join('\n');
 
@@ -25,15 +25,13 @@ async function buildCore(components) {
 
   // Babel
   const ignore = [
+    '"src/angular/**/*.js"',
     '"src/react/**/*.js"',
     '"src/*-react.js"',
-    '"src/swiper-react.js"',
     '"src/vue/**/*.js"',
     '"src/*-vue.js"',
-    '"src/swiper-vue.js"',
     '"src/svelte/**/*.js"',
     '"src/*-svelte.js"',
-    '"src/swiper-svelte.js"',
   ];
   await exec.promise(
     `npx cross-env npx babel src --out-dir ${outputDir} --ignore ${ignore.join(',')}`,
@@ -51,8 +49,6 @@ async function buildCore(components) {
 }
 
 async function build() {
-  const env = process.env.NODE_ENV || 'development';
-  const outputDir = env === 'development' ? 'build' : 'package';
   const components = [];
   config.components.forEach((name) => {
     // eslint-disable-next-line

scripts/build-svelte.js

@@ -12,9 +12,9 @@ module.exports = async (outputDir) => {
   );
 
   // Fix import paths
-  let fileContent = await fs.readFile(`./${outputDir}/swiper-svelte.js`, 'utf-8');
+  let fileContent = await fs.readFile(`./${outputDir}/svelte/swiper-svelte.js`, 'utf-8');
   fileContent = `${bannerSvelte}\n${fileContent}`;
-  fs.writeFileSync(`./${outputDir}/swiper-svelte.js`, fileContent);
+  fs.writeFileSync(`./${outputDir}/svelte/swiper-svelte.js`, fileContent);
 
   /* DON'T TRANSFORM SVELTE FILES
   // Transform svelte files

scripts/build-vue.js

@@ -11,7 +11,7 @@ module.exports = async (outputDir) => {
   );
 
   // Fix import paths
-  let fileContent = await fs.readFile(`./${outputDir}/swiper-vue.js`, 'utf-8');
+  let fileContent = await fs.readFile(`./${outputDir}/vue/swiper-vue.js`, 'utf-8');
   fileContent = `${bannerVue}\n${fileContent}`;
-  await fs.writeFile(`./${outputDir}/swiper-vue.js`, fileContent);
+  await fs.writeFile(`./${outputDir}/vue/swiper-vue.js`, fileContent);
 };

scripts/build.js

@@ -7,7 +7,7 @@ const buildReact = require('./build-react');
 const buildVue = require('./build-vue');
 const buildSvelte = require('./build-svelte');
 const buildStyles = require('./build-styles');
-const buildAngular = require('./build-angular');
+// const buildAngular = require('./build-angular');
 const outputCheckSize = require('./check-size');
 const setEnv = require('./utils/env');
 
@@ -61,7 +61,7 @@ class Build {
     .add('react', buildReact)
     .add('vue', buildVue)
     .add('svelte', buildSvelte)
-    .add('angular', buildAngular)
+    // .add('angular', buildAngular)
     .add('styles', () => buildStyles(build.outputDir))
     .run();
 })();

src/swiper.js

@@ -1,5 +1,5 @@
 // Swiper Class
-import Swiper from './core/core-class';
+import Swiper from './core/core-class.js';
 
 //IMPORT_COMPONENTS