react-keep-alive - npm Package Compare versions

Comparing version 2.4.2 to 2.5.2

cjs/components/Provider.d.ts

@@ -35,5 +35,9 @@ import * as React from 'react';
     exclude?: string | string[] | RegExp;
+    max?: number;
 }
 export default class KeepAliveProvider extends React.PureComponent<IKeepAliveProviderProps> implements IKeepAliveProviderImpl {
     static displayName: string;
+    static defaultProps: {
+        max: number;
+    };
     storeElement: HTMLElement;
@@ -40,0 +44,0 @@ cache: ICache;

cjs/components/Provider.js

@@ -68,2 +68,3 @@ "use strict";
             var _a = _this, cache = _a.cache, keys = _a.keys;
+            var max = _this.props.max;
             var currentCache = cache[identification];
@@ -74,3 +75,21 @@ if (!currentCache) {
             _this.cache[identification] = __assign({}, currentCache, value);
-            _this.forceUpdate();
+            _this.forceUpdate(function () {
+                // If the maximum value is set, the value in the cache is deleted after it goes out.
+                if (currentCache) {
+                    return;
+                }
+                if (!max) {
+                    return;
+                }
+                var difference = keys.length - max;
+                if (difference <= 0) {
+                    return;
+                }
+                var spliceKeys = keys.splice(0, difference);
+                _this.forceUpdate(function () {
+                    spliceKeys.forEach(function (key) {
+                        delete cache[key];
+                    });
+                });
+            });
         };
@@ -123,3 +142,3 @@ _this.unactivate = function (identification) {
                 innerChildren,
-                keys.map(function (identification) {
+                ReactDOM.createPortal(keys.map(function (identification) {
                     var currentCache = cache[identification];
@@ -139,13 +158,16 @@ var keepAlive = currentCache.keepAlive, children = currentCache.children, lifecycle = currentCache.lifecycle;
                     // current true, previous false, keepAlive false, not cache
-                    return ReactDOM.createPortal((cacheChildren
-                        ? (React.createElement(React.Fragment, null,
+                    return (cacheChildren
+                        ? (React.createElement(React.Fragment, { key: identification },
                             React.createElement(Comment_1.default, null, identification),
                             cacheChildren,
                             React.createElement(Comment_1.default, { onLoaded: function () { return _this.startMountingDOM(identification); } }, identification)))
-                        : null), storeElement);
-                }))));
+                        : null);
+                }), storeElement))));
     };
     KeepAliveProvider.displayName = exports.keepAliveProviderTypeName;
+    KeepAliveProvider.defaultProps = {
+        max: 10,
+    };
     return KeepAliveProvider;
 }(React.PureComponent));
 exports.default = KeepAliveProvider;

es/components/Provider.d.ts

@@ -35,5 +35,9 @@ import * as React from 'react';
     exclude?: string | string[] | RegExp;
+    max?: number;
 }
 export default class KeepAliveProvider extends React.PureComponent<IKeepAliveProviderProps> implements IKeepAliveProviderImpl {
     static displayName: string;
+    static defaultProps: {
+        max: number;
+    };
     storeElement: HTMLElement;
@@ -40,0 +44,0 @@ cache: ICache;

es/components/Provider.js

@@ -56,2 +56,3 @@ var __extends = (this && this.__extends) || (function () {
             var _a = _this, cache = _a.cache, keys = _a.keys;
+            var max = _this.props.max;
             var currentCache = cache[identification];
@@ -62,3 +63,21 @@ if (!currentCache) {
             _this.cache[identification] = __assign({}, currentCache, value);
-            _this.forceUpdate();
+            _this.forceUpdate(function () {
+                // If the maximum value is set, the value in the cache is deleted after it goes out.
+                if (currentCache) {
+                    return;
+                }
+                if (!max) {
+                    return;
+                }
+                var difference = keys.length - max;
+                if (difference <= 0) {
+                    return;
+                }
+                var spliceKeys = keys.splice(0, difference);
+                _this.forceUpdate(function () {
+                    spliceKeys.forEach(function (key) {
+                        delete cache[key];
+                    });
+                });
+            });
         };
@@ -111,3 +130,3 @@ _this.unactivate = function (identification) {
                 innerChildren,
-                keys.map(function (identification) {
+                ReactDOM.createPortal(keys.map(function (identification) {
                     var currentCache = cache[identification];
@@ -127,13 +146,16 @@ var keepAlive = currentCache.keepAlive, children = currentCache.children, lifecycle = currentCache.lifecycle;
                     // current true, previous false, keepAlive false, not cache
-                    return ReactDOM.createPortal((cacheChildren
-                        ? (React.createElement(React.Fragment, null,
+                    return (cacheChildren
+                        ? (React.createElement(React.Fragment, { key: identification },
                             React.createElement(Comment, null, identification),
                             cacheChildren,
                             React.createElement(Comment, { onLoaded: function () { return _this.startMountingDOM(identification); } }, identification)))
-                        : null), storeElement);
-                }))));
+                        : null);
+                }), storeElement))));
     };
     KeepAliveProvider.displayName = keepAliveProviderTypeName;
+    KeepAliveProvider.defaultProps = {
+        max: 10,
+    };
     return KeepAliveProvider;
 }(React.PureComponent));
 export default KeepAliveProvider;

package.json

 {
   "name": "react-keep-alive",
-  "version": "2.4.2",
+  "version": "2.5.2",
   "description": "Package will allow components to maintain their status, to avoid repeated re-rendering.",
@@ -5,0 +5,0 @@ "author": "Shen Chang",

README.md

@@ -10,3 +10,3 @@ <p align="center">
 
-[![npm](https://img.shields.io/npm/v/react-keep-alive.svg?style=for-the-badge)](https://www.npmjs.com/package/react-keep-alive) [![Travis (.org)](https://img.shields.io/travis/Sam618/react-keep-alive.svg?style=for-the-badge)](https://travis-ci.org/Sam618/react-keep-alive.svg?branch=master) [![LICENSE](https://img.shields.io/npm/l/react-keep-alive.svg?style=for-the-badge)](https://github.com/Sam618/react-keep-alive/blob/master/LICENSE.MIT) [![LICENSE](https://img.shields.io/badge/license-Anti%20996-blue.svg?style=for-the-badge)](https://github.com/Sam618/react-keep-alive/blob/master/LICENSE.996ICU) [![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/react-keep-alive.svg?style=for-the-badge)](https://www.npmjs.com/package/react-keep-alive) [![downloads](https://img.shields.io/npm/dm/react-keep-alive.svg?style=for-the-badge)](https://www.npmjs.com/package/react-keep-alive) [![typescript](https://img.shields.io/badge/language-typescript-blue.svg?style=for-the-badge)](https://www.typescriptlang.org/) [![996.icu](https://img.shields.io/badge/link-996.icu-red.svg?style=for-the-badge)](https://996.icu)
+[![npm](https://img.shields.io/npm/v/react-keep-alive.svg?style=for-the-badge)](https://www.npmjs.com/package/react-keep-alive) [![Travis (.org)](https://img.shields.io/travis/Sam618/react-keep-alive.svg?style=for-the-badge)](https://travis-ci.org/Sam618/react-keep-alive.svg?branch=master) [![LICENSE](https://img.shields.io/npm/l/react-keep-alive.svg?style=for-the-badge)](https://github.com/Sam618/react-keep-alive/blob/master/LICENSE.MIT) [![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/react-keep-alive.svg?style=for-the-badge)](https://www.npmjs.com/package/react-keep-alive) [![downloads](https://img.shields.io/npm/dm/react-keep-alive.svg?style=for-the-badge)](https://www.npmjs.com/package/react-keep-alive) [![typescript](https://img.shields.io/badge/language-typescript-blue.svg?style=for-the-badge)](https://www.typescriptlang.org/)
 
@@ -91,2 +91,4 @@ <p><a href="https://nodei.co/npm/react-keep-alive/"><img src="https://nodei.co/npm/react-keep-alive.png?downloads=true&downloadRank=true&stars=true"></a></p>
 
+`max`(`v2.5.2+`): If the maximum value is set, the value in the cache is deleted after it goes out.
+
 #### Example
@@ -93,0 +95,0 @@ In the example below, the <App /> component is our root-level component. This means it’s at the very top of our component hierarchy.

README.zh-CN.md

@@ -10,3 +10,3 @@ <p align="center">
 
-[![npm](https://img.shields.io/npm/v/react-keep-alive.svg?style=for-the-badge)](https://www.npmjs.com/package/react-keep-alive) [![Travis (.org)](https://img.shields.io/travis/Sam618/react-keep-alive.svg?style=for-the-badge)](https://travis-ci.org/Sam618/react-keep-alive.svg?branch=master) [![LICENSE](https://img.shields.io/npm/l/react-keep-alive.svg?style=for-the-badge)](https://github.com/Sam618/react-keep-alive/blob/master/LICENSE.MIT) [![LICENSE](https://img.shields.io/badge/license-Anti%20996-blue.svg?style=for-the-badge)](https://github.com/Sam618/react-keep-alive/blob/master/LICENSE.996ICU) [![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/react-keep-alive.svg?style=for-the-badge)](https://www.npmjs.com/package/react-keep-alive) [![downloads](https://img.shields.io/npm/dm/react-keep-alive.svg?style=for-the-badge)](https://www.npmjs.com/package/react-keep-alive) [![typescript](https://img.shields.io/badge/language-typescript-blue.svg?style=for-the-badge)](https://www.typescriptlang.org/) [![996.icu](https://img.shields.io/badge/link-996.icu-red.svg?style=for-the-badge)](https://996.icu)
+[![npm](https://img.shields.io/npm/v/react-keep-alive.svg?style=for-the-badge)](https://www.npmjs.com/package/react-keep-alive) [![Travis (.org)](https://img.shields.io/travis/Sam618/react-keep-alive.svg?style=for-the-badge)](https://travis-ci.org/Sam618/react-keep-alive.svg?branch=master) [![LICENSE](https://img.shields.io/npm/l/react-keep-alive.svg?style=for-the-badge)](https://github.com/Sam618/react-keep-alive/blob/master/LICENSE.MIT) [![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/react-keep-alive.svg?style=for-the-badge)](https://www.npmjs.com/package/react-keep-alive) [![downloads](https://img.shields.io/npm/dm/react-keep-alive.svg?style=for-the-badge)](https://www.npmjs.com/package/react-keep-alive) [![typescript](https://img.shields.io/badge/language-typescript-blue.svg?style=for-the-badge)](https://www.typescriptlang.org/)
 
@@ -91,4 +91,6 @@
 
-`exclude`：任何匹配 `key` 的组件都不会被缓存。它可以是字符串，字符串数组或正则表达式，例如：
+`exclude`：任何匹配 `key` 的组件都不会被缓存。它可以是字符串，字符串数组或正则表达式。
 
+`max`(`v2.5.2+`)：如果设置了最大值，那么在超出最大值之后就会删除缓存中的值。
+
 #### 例子
@@ -95,0 +97,0 @@ 在下面的示例中，`<App />` 是我们的根组件，这意味着它位于组件层次结构的最顶层。

Fixed alerts

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

Non-permissive License

License

(Experimental) A license not known to be considered permissive was found.

Found 1 instance in 1 package

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 2 instances in 1 package

Improved metrics

Number of low license alerts

0

-100%

License quality

100

11.11%

Lines of code

3056

1.73%

Number of lines in readme file

320

0.63%

Worsened metrics

Total package byte prevSize

277788

-0.65%

Number of package files

110

-0.9%

No dependency changes