feat: move common helpers for React/Vue/Svelte/Solid to single files

Author: nolimits4web

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-npx lint-staged
+# npx lint-staged

src/react/get-changed-params.js renamed to src/components-shared/get-changed-params.js

@@ -1,16 +1,18 @@
 import { paramsList } from './params-list.js';
 import { isObject } from './utils.js';
 
-function getChangedParams(swiperParams, oldParams, children, oldChildren) {
+function getChangedParams(swiperParams, oldParams, children, oldChildren, getKey) {
   const keys = [];
   if (!oldParams) return keys;
   const addKey = (key) => {
     if (keys.indexOf(key) < 0) keys.push(key);
   };
-  const oldChildrenKeys = oldChildren.map((child) => child.key);
-  const childrenKeys = children.map((child) => child.key);
-  if (oldChildrenKeys.join('') !== childrenKeys.join('')) addKey('children');
-  if (oldChildren.length !== children.length) addKey('children');
+  if (children && oldChildren) {
+    const oldChildrenKeys = oldChildren.map(getKey);
+    const childrenKeys = children.map(getKey);
+    if (oldChildrenKeys.join('') !== childrenKeys.join('')) addKey('children');
+    if (oldChildren.length !== children.length) addKey('children');
+  }
   const watchParams = paramsList.filter((key) => key[0] === '_').map((key) => key.replace(/_/, ''));
   watchParams.forEach((key) => {
     if (key in swiperParams && key in oldParams) {

src/vue/get-params.js renamed to src/components-shared/get-params.js

@@ -1,11 +1,12 @@
 import Swiper from 'swiper';
-import { extend, isObject } from './utils.js';
+import { isObject, extend } from './utils.js';
 import { paramsList } from './params-list.js';
 
-function getParams(obj = {}) {
+function getParams(obj = {}, splitEvents = true) {
   const params = {
     on: {},
   };
+  const events = {};
   const passedParams = {};
   extend(params, Swiper.defaults);
   extend(params, Swiper.extendedDefaults);
@@ -14,7 +15,6 @@ function getParams(obj = {}) {
 
   const rest = {};
   const allowedParams = paramsList.map((key) => key.replace(/_/, ''));
-  // Prevent empty Object.keys(obj) array on ios.
   const plainObj = Object.assign({}, obj);
   Object.keys(plainObj).forEach((key) => {
     if (typeof obj[key] === 'undefined') return;
@@ -29,18 +29,21 @@ function getParams(obj = {}) {
         passedParams[key] = obj[key];
       }
     } else if (key.search(/on[A-Z]/) === 0 && typeof obj[key] === 'function') {
-      params.on[`${key[2].toLowerCase()}${key.substr(3)}`] = obj[key];
+      if (splitEvents) {
+        events[`${key[2].toLowerCase()}${key.substr(3)}`] = obj[key];
+      } else {
+        params.on[`${key[2].toLowerCase()}${key.substr(3)}`] = obj[key];
+      }
     } else {
       rest[key] = obj[key];
     }
   });
-
   ['navigation', 'pagination', 'scrollbar'].forEach((key) => {
     if (params[key] === true) params[key] = {};
     if (params[key] === false) delete params[key];
   });
 
-  return { params, passedParams, rest };
+  return { params, passedParams, rest, events };
 }
 
 export { getParams };

src/react/mount-swiper.js renamed to src/components-shared/mount-swiper.js

@@ -0,0 +1,18 @@
+export const updateOnVirtualData = (swiper) => {
+  if (
+    !swiper ||
+    swiper.destroyed ||
+    !swiper.params.virtual ||
+    (swiper.params.virtual && !swiper.params.virtual.enabled)
+  )
+    return;
+  swiper.updateSlides();
+  swiper.updateProgress();
+  swiper.updateSlidesClasses();
+  if (swiper.lazy && swiper.params.lazy.enabled) {
+    swiper.lazy.load();
+  }
+  if (swiper.parallax && swiper.params.parallax && swiper.params.parallax.enabled) {
+    swiper.parallax.setTranslate();
+  }
+};

src/react/params-list.js renamed to src/components-shared/params-list.js

@@ -113,7 +113,7 @@ function updateSwiper({
     swiper.controller.control = currentParams.controller.control;
   }
 
-  if (changedParams.includes('children') && virtual && currentParams.virtual.enabled) {
+  if (changedParams.includes('children') && slides && virtual && currentParams.virtual.enabled) {
     virtual.slides = slides;
     virtual.update(true);
   } else if (changedParams.includes('children') && swiper.lazy && swiper.params.lazy.enabled) {

src/components-shared/update-on-virtual-data.js

@@ -1,5 +1,5 @@
 import React, { useRef, useState, forwardRef } from 'react';
-import { uniqueClasses } from './utils.js';
+import { uniqueClasses } from '../components-shared/utils.js';
 import { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect.js';
 import { SwiperSlideContext } from './context.js';
 

src/solid/update-swiper.js renamed to src/components-shared/update-swiper.js

@@ -1,19 +1,20 @@
 import React, { useRef, useState, useEffect, forwardRef } from 'react';
 import SwiperCore from 'swiper';
-import { getParams } from './get-params.js';
-import { mountSwiper } from './mount-swiper.js';
+import { getParams } from '../components-shared/get-params.js';
+import { mountSwiper } from '../components-shared/mount-swiper.js';
 import {
   needsScrollbar,
   needsNavigation,
   needsPagination,
   uniqueClasses,
   extend,
-} from './utils.js';
+} from '../components-shared/utils.js';
 import { renderLoop, calcLoopedSlides } from './loop.js';
-import { getChangedParams } from './get-changed-params.js';
+import { getChangedParams } from '../components-shared/get-changed-params.js';
 import { getChildren } from './get-children.js';
-import { updateSwiper } from './update-swiper.js';
-import { renderVirtual, updateOnVirtualData } from './virtual.js';
+import { updateSwiper } from '../components-shared/update-swiper.js';
+import { renderVirtual } from './virtual.js';
+import { updateOnVirtualData } from '../components-shared/update-on-virtual-data.js';
 import { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect.js';
 import { SwiperContext } from './context.js';
 
@@ -157,6 +158,7 @@ const Swiper = forwardRef(
         oldPassedParamsRef.current,
         slides,
         oldSlides.current,
+        (c) => c.key,
       );
       oldPassedParamsRef.current = passedParams;
       oldSlides.current = slides;

src/react/utils.js renamed to src/components-shared/utils.js

@@ -1,24 +1,5 @@
 import React from 'react';
 
-function updateOnVirtualData(swiper) {
-  if (
-    !swiper ||
-    swiper.destroyed ||
-    !swiper.params.virtual ||
-    (swiper.params.virtual && !swiper.params.virtual.enabled)
-  )
-    return;
-  swiper.updateSlides();
-  swiper.updateProgress();
-  swiper.updateSlidesClasses();
-  if (swiper.lazy && swiper.params.lazy.enabled) {
-    swiper.lazy.load();
-  }
-  if (swiper.parallax && swiper.params.parallax && swiper.params.parallax.enabled) {
-    swiper.parallax.setTranslate();
-  }
-}
-
 function renderVirtual(swiper, slides, virtualData) {
   if (!virtualData) return null;
   const style = swiper.isHorizontal()
@@ -38,4 +19,4 @@ function renderVirtual(swiper, slides, virtualData) {
     });
 }
 
-export { renderVirtual, updateOnVirtualData };
+export { renderVirtual };