chore: rm resize-observer-polyfill (#218)

* chore: rm resize-observer-polyfill

* chore: force update

Author: zombieJ

now.json

@@ -1,6 +1,6 @@
 {
-  "name": "rc-resize-observer",
-  "version": "1.4.3",
+  "name": "@rc-component/resize-observer",
+  "version": "1.0.0-0",
   "description": "Resize observer for React",
   "keywords": [
     "react",
@@ -32,7 +32,7 @@
     "deploy": "UMI_ENV=gh npm run build && gh-pages -d dist",
     "gh-pages": "npm run deploy",
     "prepare": "dumi setup",
-    "prepublishOnly": "npm run compile && np --no-cleanup --yolo --no-publish",
+    "prepublishOnly": "npm run compile && rc-np",
     "postpublish": "npm run gh-pages",
     "lint": "eslint src/ --ext .ts,.tsx,.jsx,.js,.md",
     "prettier": "prettier --write \"**/*.{ts,tsx,js,jsx,json,md}\"",
@@ -41,13 +41,11 @@
     "now-build": "npm run build"
   },
   "dependencies": {
-    "@babel/runtime": "^7.20.7",
     "classnames": "^2.2.1",
-    "@rc-component/util": "^1.2.0",
-    "resize-observer-polyfill": "^1.5.1"
+    "@rc-component/util": "^1.2.0"
   },
   "devDependencies": {
-    "@rc-component/father-plugin": "^1.0.0",
+    "@rc-component/father-plugin": "^2.0.2",
     "@testing-library/react": "^12.1.5",
     "@types/jest": "^29.5.10",
     "@types/react-dom": "^18.0.11",
@@ -63,7 +61,7 @@
     "gh-pages": "^6.1.0",
     "glob": "^7.1.6",
     "less": "^4.1.3",
-    "np": "^9.0.0",
+    "@rc-component/np": "^1.0.0",
     "prettier": "^3.2.5",
     "pretty-quick": "^4.0.0",
     "rc-test": "^7.0.15",

package.json

@@ -1,5 +1,3 @@
-import ResizeObserver from 'resize-observer-polyfill';
-
 export type ResizeListener = (element: Element) => void;
 
 // =============================== Const ===============================
@@ -12,8 +10,15 @@ function onResize(entities: ResizeObserverEntry[]) {
   });
 }
 
-// Note: ResizeObserver polyfill not support option to measure border-box resize
-const resizeObserver = new ResizeObserver(onResize);
+// Delay create ResizeObserver since it's not supported in server side
+let observer: ResizeObserver;
+
+function ensureResizeObserver() {
+  if (!observer) {
+    observer = new ResizeObserver(onResize);
+  }
+  return observer;
+}
 
 // Dev env only
 export const _el = process.env.NODE_ENV !== 'production' ? elementListeners : null; // eslint-disable-line
@@ -23,7 +28,7 @@ export const _rs = process.env.NODE_ENV !== 'production' ? onResize : null; // e
 export function observe(element: Element, callback: ResizeListener) {
   if (!elementListeners.has(element)) {
     elementListeners.set(element, new Set());
-    resizeObserver.observe(element);
+    ensureResizeObserver().observe(element);
   }
 
   elementListeners.get(element).add(callback);
@@ -33,7 +38,7 @@ export function unobserve(element: Element, callback: ResizeListener) {
   if (elementListeners.has(element)) {
     elementListeners.get(element).delete(callback);
     if (!elementListeners.get(element).size) {
-      resizeObserver.unobserve(element);
+      ensureResizeObserver().unobserve(element);
       elementListeners.delete(element);
     }
   }

src/utils/observerUtil.ts

@@ -13,3 +13,16 @@ Object.assign(Enzyme.ReactWrapper.prototype, {
     onResize([{ target }]);
   },
 });
+
+// Mock for ResizeObserver
+global.ResizeObserver = class ResizeObserver {
+  constructor(callback) {
+    this.callback = callback;
+  }
+
+  observe(target) {
+    this.callback([{ target }]);
+  }
+
+  unobserve() {}
+};