feat: support Nextjs13 (add GlobalTHis)

README.md

@@ -45,6 +45,7 @@
 - Support auto play and init start play time
 - Support keyboard control slide index
 - Support lazy load image
+- Support Nextjs13 (v4.0.14+)
 
 
 

package.json

@@ -11,7 +11,6 @@
     "swiper"
   ],
   "private": false,
-  "type": "module",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -45,10 +44,10 @@
     "gitlog": "git log --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cblueby %an %Cgreen(%cr)%Creset'",
     "release": "standard-version --release-as"
   },
-  "dependencies": {
+  "peerDependencies": {
     "react": "^18.x",
     "react-dom": "^18.x",
-    "ulid": "^2.3.0"
+    "ulid": "^2.3.x"
   },
   "devDependencies": {
     "@swc/jest": "^0.2.26",
@@ -61,6 +60,9 @@
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
     "@vitejs/plugin-react-swc": "^3.0.0",
+    "react": "^18.x",
+    "react-dom": "^18.x",
+    "ulid": "^2.3.x",
     "classnames": "^2.3.2",
     "cz-git": "^1.6.1",
     "eslint": "^8.37.0",

src/BearCarousel.tsx

@@ -71,10 +71,10 @@ class BearCarousel extends React.Component<IBearCarouselProps, IState> {
         // this._device = checkIsMobile() ? EDevice.mobile : EDevice.desktop;
 
         const setting = getSetting(props);
-        this._configurator = new Configurator(props.breakpoints, setting);
+        this._configurator = new Configurator(props.breakpoints, setting, globalThis.window);
         this._windowSizer = new WindowSizer({
             breakpoints: props.breakpoints,
-            win: window,
+            win: globalThis.window,
             configurator: this._configurator,
         });
         this._stater = new Stater(this._configurator, props.data);

src/manager/Configurator/Configurator.ts

@@ -1,7 +1,7 @@
 import {ulid} from 'ulid';
 import {getHeight, getMediaSetting} from './utils';
 import {ISetting} from './types';
-import {IPropsBreakpoints} from '../../types';
+import {IPropsBreakpoints, GlobalWindow} from '../../types';
 import elClassName from '../../el-class-name';
 
 
@@ -10,7 +10,7 @@ class Configurator {
     private _setting: ISetting;
     private _carouselId = `bear-react-carousel_${ulid().toLowerCase()}`;
 
-    constructor(breakpoint: IPropsBreakpoints, options?: ISetting) {
+    constructor(breakpoint: IPropsBreakpoints, options?: ISetting, win?: GlobalWindow) {
         this.init(breakpoint, options);
     }
 
@@ -55,8 +55,8 @@ class Configurator {
     }
 
 
-    init = (responsiveBreakpoints: IPropsBreakpoints, options?: ISetting) => {
-        this._setting = getMediaSetting(options, responsiveBreakpoints);
+    init = (responsiveBreakpoints: IPropsBreakpoints, options?: ISetting, win?: GlobalWindow) => {
+        this._setting = getMediaSetting(options, responsiveBreakpoints, win);
     };
 }
 

src/manager/Configurator/utils.ts

@@ -1,4 +1,11 @@
-import {IAspectRatio, IBearCarouselProps, IBreakpointSetting, IBreakpointSettingActual, IPropsBreakpoints} from '../../types';
+import {
+    IAspectRatio,
+    IBearCarouselProps,
+    IBreakpointSetting,
+    IBreakpointSettingActual,
+    IPropsBreakpoints,
+    GlobalWindow
+} from '../../types';
 import {ISetting} from './types';
 import {anyToNumber, getSizeByRange} from '../../utils';
 
@@ -43,11 +50,12 @@ export function getPaddingBySize(aspectRatio: IAspectRatio, slidesPerView: numbe
 
 /**
  * 取得響應式設定
- * @param setting
+ * @param defaultBreakpoint
  * @param breakpoints
+ * @param win
  */
-export function getMediaSetting(defaultBreakpoint: IBreakpointSetting, breakpoints: IPropsBreakpoints): IBreakpointSettingActual {
-    const selectSize = getSizeByRange(window.innerWidth, Object.keys(breakpoints).map(Number));
+export function getMediaSetting(defaultBreakpoint: IBreakpointSetting, breakpoints: IPropsBreakpoints, win?: GlobalWindow): IBreakpointSettingActual {
+    const selectSize = getSizeByRange(win?.innerWidth, Object.keys(breakpoints).map(Number));
     let setting = defaultBreakpoint;
     if(selectSize > 0){
         setting = Object.assign(defaultBreakpoint ?? {}, breakpoints[selectSize]);

src/manager/WindowSizer/WindowSizer.ts

@@ -2,7 +2,7 @@ import {getSizeByRange} from './utils';
 import {TEventMap} from './types';
 
 import Eventor from '../Eventor';
-import {EDevice, IPropsBreakpoints} from '../../types';
+import {EDevice, IPropsBreakpoints, GlobalWindow} from '../../types';
 import {checkIsDesktop, checkIsMobile} from '../../utils';
 import {logEnable} from '../../config';
 import logger from '../../logger';
@@ -20,7 +20,7 @@ class WindowSizer {
     private _size: number;
     private _device: EDevice;
     private _eventManager = new Eventor<TEventMap>();
-    private _window: Window & typeof globalThis;
+    private _window: GlobalWindow;
 
     get size() {
         return this._size;
@@ -31,7 +31,7 @@ class WindowSizer {
 
     constructor(inject: {
         breakpoints: IPropsBreakpoints,
-        win: Window & typeof globalThis
+        win: GlobalWindow
         configurator: Configurator,
     }) {
         this._breakpoints = inject.breakpoints;
@@ -47,12 +47,12 @@ class WindowSizer {
         } else if (checkIsDesktop()) {
             return EDevice.desktop;
         } else {
-            throw new Error('Unable to detect device type');
+            return EDevice.desktop; // default
         }
     };
 
     private _setSize = () => {
-        this._size = getSizeByRange(window.innerWidth, Object.keys(this._breakpoints).map(Number));
+        this._size = getSizeByRange(this._window?.innerWidth, Object.keys(this._breakpoints).map(Number));
     };
 
     private _emitResize = () => {

src/manager/WindowSizer/utils.ts

@@ -4,7 +4,7 @@
  * @param innerWidth
  * @param breakpointSizes
  */
-export function getSizeByRange(innerWidth: number, breakpointSizes: number[]): number{
+export function getSizeByRange(innerWidth: number = 0, breakpointSizes: number[]): number{
     const filterArray = breakpointSizes
         .filter(size => size <= innerWidth)
         .sort((a, b) => Number(b) - Number(a));

src/types.ts

@@ -16,7 +16,7 @@ export type TRenderPagination = (pageTotal: number) => JSX.Element[]|undefined
 export type TRenderLazyPreloader = () => JSX.Element|undefined
 export type TStateOnChange = (carouselState: ICarouselState) => void
 export type TOnMount = () => void
-
+export type GlobalWindow = Window & typeof globalThis
 
 
 export interface IBearCarouselProps extends IBreakpointSetting{

src/utils.ts

@@ -36,7 +36,7 @@ export function anyToNumber(value: any, defaultValue = 0): number {
  * @param innerWidth
  * @param breakpointSizes
  */
-export function getSizeByRange(innerWidth: number, breakpointSizes: number[]): number{
+export function getSizeByRange(innerWidth: number = 0, breakpointSizes: number[]): number{
     const filterArray = breakpointSizes
         .filter(size => size <= innerWidth)
         .sort((a, b) => Number(b) - Number(a));

yarn.lock

@@ -6420,7 +6420,7 @@ uglify-js@^3.1.4:
   resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.17.4.tgz#61678cf5fa3f5b7eb789bb345df29afb8257c22c"
   integrity sha512-T9q82TJI9e/C1TAxYvfb16xO120tMVFZrGA3f9/P4424DNu6ypK103y0GPFVa17yotwSyZW5iYXgjYHkGrJW/g==
 
-ulid@^2.3.0:
+ulid@^2.3.x:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/ulid/-/ulid-2.3.0.tgz#93063522771a9774121a84d126ecd3eb9804071f"
   integrity sha512-keqHubrlpvT6G2wH0OEfSW4mquYRcbe/J8NMmveoQOjUqmo+hXtO+ORCpWhdbZ7k72UtY61BL7haGxW6enBnjw==