@rsuite/document-nav - npm Package Compare versions

Comparing version 1.0.8 to 1.0.9

CHANGELOG.md

@@ -0,4 +1,14 @@
+## 1.0.9
 
+- 使用 `MutationObserver` API 监听 DOM 树修改，实时解析更新 Nav
+- 增加 `deep` 属性，配置最大解析的 DOM 深度，避免解析层级过深，造成卡顿
+
+_考虑在未来性能优化到比较合适后，去掉 `once` 属性_
+
+## 1.0.8
+
+修复了监听事件未正常更新引起的一些问题
+
 ## 1.0.6
 
-增加了 rtl 配置
+增加了 rtl 配置

lib/Nav.js

@@ -74,2 +74,4 @@ 'use strict';
     key: 'getContext',
+    // 兼容没有 MutationObserver 的浏览器
+
     value: function getContext() {
@@ -106,3 +108,5 @@ var _props = this.props,
       }
-      if (!once) {
+      // 无 MutationObserver 时使用传统判断
+      if (!once && !window.MutationObserver) {
+        // 这里的 content 引用值理论上是不会变的，其实不需要这个判断，暂且先留着吧
         if (this.props.content !== nextProps.content) {
@@ -175,4 +179,4 @@ this.reload(nextProps.content, nextProps.rtl);
     key: 'traverseTitle',
-    value: function traverseTitle(node, titleList, anchors) {
-      if (!node || !titleList || !anchors) {
+    value: function traverseTitle(node, titleList, anchors, deep) {
+      if (!node || !titleList || !anchors || deep > this.props.deep) {
         return false;
@@ -202,3 +206,3 @@ }
         for (var i = 0; i < _children.length; i += 1) {
-          this.traverseTitle(_children[i], titleList, anchors);
+          this.traverseTitle(_children[i], titleList, anchors, deep + 1);
         }
@@ -238,4 +242,19 @@ }
     value: function handelContentMount(content, rtl) {
+      var _this3 = this;
+
       if (content) {
-        this.prevInnerHTML = content.innerHTML;
+        if (window.MutationObserver) {
+          this.observe = new MutationObserver(function () {
+            if (!_this3.props.once) {
+              _this3.reload(_this3.props.content, _this3.props.rtl);
+            }
+          });
+          var config = {
+            childList: true,
+            subtree: true
+          };
+          this.observe.observe(content, config);
+        } else {
+          this.prevInnerHTML = content.innerHTML;
+        }
       }
@@ -251,3 +270,3 @@ var titleList = [];
       if (!children) {
-        this.traverseTitle(content, titleList, anchors);
+        this.traverseTitle(content, titleList, anchors, 0);
         this.setState({
@@ -273,3 +292,3 @@ anchors: anchors
     value: function bindPageNavRef(nav) {
-      var _this3 = this;
+      var _this4 = this;
 
@@ -288,3 +307,3 @@ if (!nav) {
       var resizeListener = function resizeListener() {
-        var pageNav = _this3.pageNav;
+        var pageNav = _this4.pageNav;
         if (pageNav) {
@@ -303,3 +322,3 @@ pageNav.style.height = _constants.itemHeight * parseInt((window.innerHeight - (offset.top || offset.bottom) - 60) / _constants.itemHeight, 10) + 'px';
     value: function render() {
-      var _this4 = this;
+      var _this5 = this;
 
@@ -327,3 +346,3 @@ var _props6 = this.props,
             ref: function ref(_ref) {
-              return _this4.bindPageNavRef(_ref);
+              return _this5.bindPageNavRef(_ref);
             }
@@ -347,2 +366,3 @@ },
   maxLevel: 4,
+  deep: 10,
   scrollBar: 'right',
@@ -349,0 +369,0 @@ show: true,

package.json

 {
   "name": "@rsuite/document-nav",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "Document navigation is automatically generated based on the HTML title (h1-h6) tag",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -129,2 +129,3 @@ # Document Nav
 | rtl             | boolean `(false)`                  | 文档从右侧开始阅读                                                                                     |
+| deep            | number `(10)`                       | 解析的 DOM 深度，避免和标题无关的 DOM 层级过深导致的性能损耗                                           |
 
@@ -131,0 +132,0 @@ ### `<Nav.Item>`

src/Nav.js

@@ -52,2 +52,3 @@ // @flow
     maxLevel: 4,
+    deep: 10,
     scrollBar: 'right',
@@ -77,3 +78,3 @@ show: true,
   pageNav: ?HTMLElement;
-  prevInnerHTML: ?string;
+  prevInnerHTML: ?string; // 兼容没有 MutationObserver 的浏览器
 
@@ -99,3 +100,5 @@ getContext() {
     }
-    if (!once) {
+    // 无 MutationObserver 时使用传统判断
+    if (!once && !window.MutationObserver) {
+      // 这里的 content 引用值理论上是不会变的，其实不需要这个判断，暂且先留着吧
       if (this.props.content !== nextProps.content) {
@@ -153,8 +156,8 @@ this.reload(nextProps.content, nextProps.rtl);
     }, 300);
-    window.addEventListener('scroll',this.scrollListener);
+    window.addEventListener('scroll', this.scrollListener);
   }
 
   // 遍历所有标题
-  traverseTitle(node: HTMLElement, titleList: TitleList, anchors: Array<string>) {
-    if (!node || !titleList || !anchors) {
+  traverseTitle(node: HTMLElement, titleList: TitleList, anchors: Array<string>, deep) {
+    if (!node || !titleList || !anchors || deep > this.props.deep) {
       return false;
@@ -180,3 +183,3 @@ }
       for (let i = 0; i < children.length; i += 1) {
-        this.traverseTitle(children[i], titleList, anchors);
+        this.traverseTitle(children[i], titleList, anchors, deep + 1);
       }
@@ -210,3 +213,16 @@ }
     if (content) {
-      this.prevInnerHTML = content.innerHTML;
+      if (window.MutationObserver) {
+        this.observe = new MutationObserver(() => {
+          if (!this.props.once) {
+            this.reload(this.props.content, this.props.rtl);
+          }
+        });
+        const config = {
+          childList: true,
+          subtree: true
+        };
+        this.observe.observe(content, config);
+      } else {
+        this.prevInnerHTML = content.innerHTML;
+      }
     }
@@ -217,3 +233,3 @@ const titleList: TitleList = [];
     if (!children) {
-      this.traverseTitle(content, titleList, anchors);
+      this.traverseTitle(content, titleList, anchors, 0);
       this.setState({
@@ -220,0 +236,0 @@ anchors

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

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

56401

increased by3.51%

Lines of code

1241

increased by2.82%

Number of lines in readme file

142

increased by0.71%

No dependency changes