Only bundle the Swiper modules that we use (#4455)

_scripts/webpack.renderer.config.js

@@ -7,6 +7,7 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
 const ProcessLocalesPlugin = require('./ProcessLocalesPlugin')
 const WatchExternalFilesPlugin = require('webpack-watch-external-files-plugin')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
 
 const isDevMode = process.env.NODE_ENV === 'development'
 
@@ -131,6 +132,18 @@ const config = {
       filename: isDevMode ? '[name].css' : '[name].[contenthash].css',
       chunkFilename: isDevMode ? '[id].css' : '[id].[contenthash].css',
     }),
+    new CopyWebpackPlugin({
+      patterns: [
+        {
+          from: path.join(__dirname, '../node_modules/swiper/modules/{a11y,navigation,pagination}-element.css').replaceAll('\\', '/'),
+          to: 'swiper.css',
+          context: path.join(__dirname, '../node_modules/swiper/modules'),
+          transformAll: (assets) => {
+            return Buffer.concat(assets.map(asset => asset.data))
+          }
+        }
+      ]
+    })
   ],
   resolve: {
     alias: {

_scripts/webpack.web.config.js

@@ -140,6 +140,18 @@ const config = {
     new MiniCssExtractPlugin({
       filename: isDevMode ? '[name].css' : '[name].[contenthash].css',
       chunkFilename: isDevMode ? '[id].css' : '[id].[contenthash].css',
+    }),
+    new CopyWebpackPlugin({
+      patterns: [
+        {
+          from: path.join(__dirname, '../node_modules/swiper/modules/{a11y,navigation,pagination}-element.css').replaceAll('\\', '/'),
+          to: 'swiper.css',
+          context: path.join(__dirname, '../node_modules/swiper/modules'),
+          transformAll: (assets) => {
+            return Buffer.concat(assets.map(asset => asset.data))
+          }
+        }
+      ]
     })
   ],
   resolve: {

src/renderer/components/ft-community-post/ft-community-post.js

@@ -5,7 +5,9 @@ import FtCommunityPoll from '../ft-community-poll/ft-community-poll.vue'
 
 import autolinker from 'autolinker'
 
-import { deepCopy, toLocalePublicationString } from '../../helpers/utils'
+import { A11y, Navigation, Pagination } from 'swiper/modules'
+
+import { createWebURL, deepCopy, toLocalePublicationString } from '../../helpers/utils'
 import { youtubeImageUrlToInvidious } from '../../helpers/api/invidious'
 
 export default defineComponent({
@@ -47,6 +49,34 @@ export default defineComponent({
   created: function () {
     this.parseCommunityData()
   },
+  mounted: function () {
+    if (this.type === 'multiImage' && this.postContent.content.length > 0) {
+      const swiperContainer = this.$refs.swiperContainer
+
+      /** @type {import('swiper/element').SwiperContainer} */
+      const swiperOptions = {
+        modules: [A11y, Navigation, Pagination],
+
+        injectStylesUrls: [
+          // This file is created with the copy webpack plugin in the web and renderer webpack configs.
+          // If you add more modules, please remember to add their CSS files to the list in webpack config files.
+          createWebURL('/swiper.css')
+        ],
+
+        a11y: true,
+        navigation: true,
+        pagination: {
+          enabled: true,
+          clickable: true
+        },
+        slidesPerView: 1
+      }
+
+      Object.assign(swiperContainer, swiperOptions)
+
+      swiperContainer.initialize()
+    }
+  },
   methods: {
     parseCommunityData: function () {
       if ('backstagePostThreadRenderer' in this.data) {

src/renderer/components/ft-community-post/ft-community-post.vue

@@ -59,11 +59,8 @@
     <div class="sliderContainer">
       <swiper-container
         v-if="type === 'multiImage' && postContent.content.length > 0"
-        slides-per-view="1"
-        navigation="true"
-        pagination-clickable="true"
-        pagination="true"
-        a11y="true"
+        ref="swiperContainer"
+        init="false"
         class="slider"
       >
         <swiper-slide

src/renderer/main.js

@@ -6,7 +6,7 @@ import store from './store/index'
 import i18n from './i18n/index'
 import { library } from '@fortawesome/fontawesome-svg-core'
 
-import { register as registerSwiper } from 'swiper/element/bundle'
+import { register as registerSwiper } from 'swiper/element'
 
 // Please keep the list of constants sorted by name
 // to avoid code conflict and duplicate entries