feat(core): convert Resize to functional module

src/core/modules/resize/resize.js

@@ -1,75 +1,61 @@
 import { getWindow } from 'ssr-window';
-import { extend } from '../../../shared/utils.js';
 
-const supportsResizeObserver = () => {
+export default function Resize({ swiper, on, emit }) {
   const window = getWindow();
-  return typeof window.ResizeObserver !== 'undefined';
-};
+  let observer = null;
 
-export default {
-  name: 'resize',
-  create() {
-    const swiper = this;
-    extend(swiper, {
-      resize: {
-        observer: null,
-        createObserver() {
-          if (!swiper || swiper.destroyed || !swiper.initialized) return;
-          swiper.resize.observer = new ResizeObserver((entries) => {
-            const { width, height } = swiper;
-            let newWidth = width;
-            let newHeight = height;
-            entries.forEach(({ contentBoxSize, contentRect, target }) => {
-              if (target && target !== swiper.el) return;
-              newWidth = contentRect
-                ? contentRect.width
-                : (contentBoxSize[0] || contentBoxSize).inlineSize;
-              newHeight = contentRect
-                ? contentRect.height
-                : (contentBoxSize[0] || contentBoxSize).blockSize;
-            });
-            if (newWidth !== width || newHeight !== height) {
-              swiper.resize.resizeHandler();
-            }
-          });
-          swiper.resize.observer.observe(swiper.el);
-        },
-        removeObserver() {
-          if (swiper.resize.observer && swiper.resize.observer.unobserve && swiper.el) {
-            swiper.resize.observer.unobserve(swiper.el);
-            swiper.resize.observer = null;
-          }
-        },
-        resizeHandler() {
-          if (!swiper || swiper.destroyed || !swiper.initialized) return;
-          swiper.emit('beforeResize');
-          swiper.emit('resize');
-        },
-        orientationChangeHandler() {
-          if (!swiper || swiper.destroyed || !swiper.initialized) return;
-          swiper.emit('orientationchange');
-        },
-      },
-    });
-  },
-  on: {
-    init(swiper) {
-      const window = getWindow();
-      if (swiper.params.resizeObserver && supportsResizeObserver()) {
-        swiper.resize.createObserver();
-        return;
+  const resizeHandler = () => {
+    if (!swiper || swiper.destroyed || !swiper.initialized) return;
+    emit('beforeResize');
+    emit('resize');
+  };
+
+  const createObserver = () => {
+    if (!swiper || swiper.destroyed || !swiper.initialized) return;
+    observer = new ResizeObserver((entries) => {
+      const { width, height } = swiper;
+      let newWidth = width;
+      let newHeight = height;
+      entries.forEach(({ contentBoxSize, contentRect, target }) => {
+        if (target && target !== swiper.el) return;
+        newWidth = contentRect
+          ? contentRect.width
+          : (contentBoxSize[0] || contentBoxSize).inlineSize;
+        newHeight = contentRect
+          ? contentRect.height
+          : (contentBoxSize[0] || contentBoxSize).blockSize;
+      });
+      if (newWidth !== width || newHeight !== height) {
+        resizeHandler();
       }
-      // Emit resize
-      window.addEventListener('resize', swiper.resize.resizeHandler);
+    });
+    observer.observe(swiper.el);
+  };
+
+  const removeObserver = () => {
+    if (observer && observer.unobserve && swiper.el) {
+      observer.unobserve(swiper.el);
+      observer = null;
+    }
+  };
+
+  const orientationChangeHandler = () => {
+    if (!swiper || swiper.destroyed || !swiper.initialized) return;
+    emit('orientationchange');
+  };
+
+  on('init', () => {
+    if (swiper.params.resizeObserver && typeof window.ResizeObserver !== 'undefined') {
+      createObserver();
+      return;
+    }
+    window.addEventListener('resize', resizeHandler);
+    window.addEventListener('orientationchange', orientationChangeHandler);
+  });
 
-      // Emit orientationchange
-      window.addEventListener('orientationchange', swiper.resize.orientationChangeHandler);
-    },
-    destroy(swiper) {
-      const window = getWindow();
-      swiper.resize.removeObserver();
-      window.removeEventListener('resize', swiper.resize.resizeHandler);
-      window.removeEventListener('orientationchange', swiper.resize.orientationChangeHandler);
-    },
-  },
-};
+  on('destroy', () => {
+    removeObserver();
+    window.removeEventListener('resize', resizeHandler);
+    window.removeEventListener('orientationchange', orientationChangeHandler);
+  });
+}