@rc-component/mutate-observer - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

es/index.d.ts

@@ -1,4 +0,4 @@
-import React from 'react';
-import type { MutationObserverProps } from './interface';
-declare const MutateObserver: React.FC<MutationObserverProps>;
+import MutateObserver from './MutateObserver';
+import useMutateObserver from './useMutateObserver';
+export { useMutateObserver };
 export default MutateObserver;

es/index.js

@@ -1,63 +0,4 @@
-import React, { useEffect, useRef } from 'react';
-import { composeRef, supportRef } from "rc-util/es/ref";
-import findDOMNode from "rc-util/es/Dom/findDOMNode";
-import canUseDom from "rc-util/es/Dom/canUseDom";
-import useEvent from "rc-util/es/hooks/useEvent";
-import DomWrapper from "./wapper";
-var defOptions = {
-  subtree: true,
-  childList: true,
-  attributeFilter: ['style', 'class']
-};
-
-var MutateObserver = function MutateObserver(props) {
-  var children = props.children,
-      _props$options = props.options,
-      options = _props$options === void 0 ? defOptions : _props$options,
-      _props$onMutate = props.onMutate,
-      onMutate = _props$onMutate === void 0 ? function () {} : _props$onMutate;
-  var callback = useEvent(onMutate);
-  var wrapperRef = useRef(null);
-  var elementRef = React.useRef(null);
-  var canRef = /*#__PURE__*/React.isValidElement(children) && supportRef(children);
-  var originRef = canRef ? children === null || children === void 0 ? void 0 : children.ref : null;
-  var mergedRef = React.useMemo(function () {
-    return composeRef(originRef, elementRef);
-  }, [originRef, elementRef]);
-  useEffect(function () {
-    if (!canUseDom()) {
-      return;
-    }
-
-    var instance;
-    var currentElement = findDOMNode(originRef === null || originRef === void 0 ? void 0 : originRef.current) || findDOMNode(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
-
-    if (currentElement && 'MutationObserver' in window) {
-      instance = new MutationObserver(callback);
-      instance.observe(currentElement, options);
-    }
-
-    return function () {
-      var _instance, _instance2;
-
-      (_instance = instance) === null || _instance === void 0 ? void 0 : _instance.takeRecords();
-      (_instance2 = instance) === null || _instance2 === void 0 ? void 0 : _instance2.disconnect();
-    }; // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [options, originRef]);
-
-  if (!children) {
-    if (process.env.NODE_ENV !== 'production') {
-      console.error('MutationObserver need children props');
-    }
-
-    return null;
-  }
-
-  return /*#__PURE__*/React.createElement(DomWrapper, {
-    ref: wrapperRef
-  }, canRef ? /*#__PURE__*/React.cloneElement(children, {
-    ref: mergedRef
-  }) : children);
-};
-
+import MutateObserver from "./MutateObserver";
+import useMutateObserver from "./useMutateObserver";
+export { useMutateObserver };
 export default MutateObserver;

lib/index.d.ts

@@ -1,4 +0,4 @@
-import React from 'react';
-import type { MutationObserverProps } from './interface';
-declare const MutateObserver: React.FC<MutationObserverProps>;
+import MutateObserver from './MutateObserver';
+import useMutateObserver from './useMutateObserver';
+export { useMutateObserver };
 export default MutateObserver;

lib/index.js

 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
 Object.defineProperty(exports, "__esModule", {
@@ -11,76 +8,11 @@ value: true
 exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _ref = require("rc-util/lib/ref");
-
-var _findDOMNode = _interopRequireDefault(require("rc-util/lib/Dom/findDOMNode"));
-
-var _canUseDom = _interopRequireDefault(require("rc-util/lib/Dom/canUseDom"));
-
-var _useEvent = _interopRequireDefault(require("rc-util/lib/hooks/useEvent"));
-
-var _wapper = _interopRequireDefault(require("./wapper"));
-
-var defOptions = {
-  subtree: true,
-  childList: true,
-  attributeFilter: ['style', 'class']
-};
-
-var MutateObserver = function MutateObserver(props) {
-  var children = props.children,
-      _props$options = props.options,
-      options = _props$options === void 0 ? defOptions : _props$options,
-      _props$onMutate = props.onMutate,
-      onMutate = _props$onMutate === void 0 ? function () {} : _props$onMutate;
-  var callback = (0, _useEvent.default)(onMutate);
-  var wrapperRef = (0, _react.useRef)(null);
-
-  var elementRef = _react.default.useRef(null);
-
-  var canRef = /*#__PURE__*/_react.default.isValidElement(children) && (0, _ref.supportRef)(children);
-  var originRef = canRef ? children === null || children === void 0 ? void 0 : children.ref : null;
-
-  var mergedRef = _react.default.useMemo(function () {
-    return (0, _ref.composeRef)(originRef, elementRef);
-  }, [originRef, elementRef]);
-
-  (0, _react.useEffect)(function () {
-    if (!(0, _canUseDom.default)()) {
-      return;
-    }
-
-    var instance;
-    var currentElement = (0, _findDOMNode.default)(originRef === null || originRef === void 0 ? void 0 : originRef.current) || (0, _findDOMNode.default)(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
-
-    if (currentElement && 'MutationObserver' in window) {
-      instance = new MutationObserver(callback);
-      instance.observe(currentElement, options);
-    }
-
-    return function () {
-      var _instance, _instance2;
-
-      (_instance = instance) === null || _instance === void 0 ? void 0 : _instance.takeRecords();
-      (_instance2 = instance) === null || _instance2 === void 0 ? void 0 : _instance2.disconnect();
-    }; // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [options, originRef]);
-
-  if (!children) {
-    if (process.env.NODE_ENV !== 'production') {
-      console.error('MutationObserver need children props');
-    }
-
-    return null;
+Object.defineProperty(exports, "useMutateObserver", {
+  enumerable: true,
+  get: function get() {
+    return _useMutateObserver.default;
   }
-
-  return /*#__PURE__*/_react.default.createElement(_wapper.default, {
-    ref: wrapperRef
-  }, canRef ? /*#__PURE__*/_react.default.cloneElement(children, {
-    ref: mergedRef
-  }) : children);
-};
-
-var _default = MutateObserver;
+});
+var _MutateObserver = _interopRequireDefault(require("./MutateObserver"));
+var _useMutateObserver = _interopRequireDefault(require("./useMutateObserver"));
+var _default = _MutateObserver.default;
 exports.default = _default;

package.json

 {
   "name": "@rc-component/mutate-observer",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "React MutateObserver Component",
@@ -39,6 +39,4 @@ "keywords": [
     "start": "dumi dev",
-    "test": "npm run test:client && npm run test:server",
-    "test:client": "umi-test --testPathIgnorePatterns=ssr.test.tsx --testPathIgnorePatterns=ssr.test.tsx",
-    "test:coverage": "npm run test:client --coverage",
-    "test:server": "umi-test --env=node -- tests/ssr.test.tsx",
+    "test": "umi-test",
+    "test:coverage": "npm run test --coverage",
     "watch": "father dev"
@@ -45,0 +43,0 @@ },

README.md

 # rc-mutate-observer
 
-React 18 supported Portal Component.
+MutateObserver for React.
 
 [![NPM version][npm-image]][npm-url] [![dumi](https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square)](https://github.com/umijs/dumi) [![build status][github-actions-image]][github-actions-url] [![Codecov][codecov-image]][codecov-url] [![npm download][download-image]][download-url]
 
-[npm-image]: http://img.shields.io/npm/v/rc-portal.svg?style=flat-square
-[npm-url]: http://npmjs.org/package/rc-portal
-[github-actions-image]: https://github.com/react-component/portal/workflows/CI/badge.svg
-[github-actions-url]: https://github.com/react-component/portal/actions
-[codecov-image]: https://img.shields.io/codecov/c/github/react-component/portal/master.svg?style=flat-square
-[codecov-url]: https://codecov.io/gh/react-component/portal/branch/master
-[download-image]: https://img.shields.io/npm/dm/rc-portal.svg?style=flat-square
-[download-url]: https://npmjs.org/package/rc-portal
+[npm-image]: http://img.shields.io/npm/v/@rc-component/mutate-observer.svg?style=flat-square
+[npm-url]: https://www.npmjs.com/package/@rc-component/mutate-observer
+[github-actions-image]: https://github.com/react-component/mutate-observer/workflows/CI/badge.svg
+[github-actions-url]: https://github.com/react-component/mutate-observer/actions
+[codecov-image]: https://img.shields.io/codecov/c/github/@rc-component/mutate-observer/master.svg?style=flat-square
+[download-image]: https://img.shields.io/npm/dm/@rc-component/mutate-observer.svg?style=flat-square
+[download-url]: https://www.npmjs.com/package/@rc-component/mutate-observer
 
@@ -20,13 +19,9 @@ ## Development
 npm install
-npm start
+npm run start
 open http://localhost:8000
 ```
 
-## Feature
-
-- React life cycle support portal component
-
 ## Install
 
-[![rc-portal](https://nodei.co/npm/rc-portal.png)](https://npmjs.org/package/rc-portal)
+[![@rc-component/mutate-observer](https://nodei.co/npm/mutate-observer.png)](https://www.npmjs.com/package/@rc-component/mutate-observer)
 
@@ -57,5 +52,5 @@ ## Usage
 
-We use typescript to create the Type definition. You can view directly in IDE. But you can still check the type definition [here](https://github.com/react-component/portal/blob/master/src/interface.ts).
+We use typescript to create the Type definition. You can view directly in IDE. But you can still check the type definition [here](https://github.com/react-component/mutate-observer/blob/master/src/interface.ts).
 
-### Portal
+### mutate-observer
 
@@ -62,0 +57,0 @@ | Prop     | Description                                                                                                      | Type                 | Default |

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

16672

increased by17.7%

Number of package files

23

increased by53.33%

Lines of code

264

increased by32%

Worsened metrics

Number of lines in readme file

59

decreased by-7.81%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes