@times-components/lazy-load 0.6.63 → 0.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +11 -0
- package/babel.config.js +12 -5
- package/dist/lazy-load.js +137 -1
- package/package.json +10 -16
- package/rnw.js +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,17 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# [0.7.0](https://github.com/newsuk/times-components/compare/@times-components/lazy-load@0.6.63...@times-components/lazy-load@0.7.0) (2022-08-18)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* **TDP-1712:** remove react-native foreverrrrr ([#3064](https://github.com/newsuk/times-components/issues/3064)) ([2a20cb5](https://github.com/newsuk/times-components/commit/2a20cb5abc10a4e7ca2d62487967f8fcf4eccb62)), closes [#3037](https://github.com/newsuk/times-components/issues/3037) [#3045](https://github.com/newsuk/times-components/issues/3045) [#3050](https://github.com/newsuk/times-components/issues/3050) [#3056](https://github.com/newsuk/times-components/issues/3056) [#3057](https://github.com/newsuk/times-components/issues/3057) [#3066](https://github.com/newsuk/times-components/issues/3066) [#3065](https://github.com/newsuk/times-components/issues/3065) [#3037](https://github.com/newsuk/times-components/issues/3037) [#3045](https://github.com/newsuk/times-components/issues/3045) [#3045](https://github.com/newsuk/times-components/issues/3045) [#3056](https://github.com/newsuk/times-components/issues/3056) [#3066](https://github.com/newsuk/times-components/issues/3066) [#3069](https://github.com/newsuk/times-components/issues/3069) [#3068](https://github.com/newsuk/times-components/issues/3068) [#3070](https://github.com/newsuk/times-components/issues/3070) [#3072](https://github.com/newsuk/times-components/issues/3072) [#3073](https://github.com/newsuk/times-components/issues/3073) [#3071](https://github.com/newsuk/times-components/issues/3071) [#3074](https://github.com/newsuk/times-components/issues/3074) [#3076](https://github.com/newsuk/times-components/issues/3076) [#3079](https://github.com/newsuk/times-components/issues/3079) [#3078](https://github.com/newsuk/times-components/issues/3078) [#3083](https://github.com/newsuk/times-components/issues/3083) [#3087](https://github.com/newsuk/times-components/issues/3087) [#3091](https://github.com/newsuk/times-components/issues/3091) [#3096](https://github.com/newsuk/times-components/issues/3096) [#3102](https://github.com/newsuk/times-components/issues/3102) [#3105](https://github.com/newsuk/times-components/issues/3105) [#3108](https://github.com/newsuk/times-components/issues/3108) [#3111](https://github.com/newsuk/times-components/issues/3111) [#3112](https://github.com/newsuk/times-components/issues/3112) [#3113](https://github.com/newsuk/times-components/issues/3113) [#3114](https://github.com/newsuk/times-components/issues/3114) [#3120](https://github.com/newsuk/times-components/issues/3120) [#3119](https://github.com/newsuk/times-components/issues/3119) [#3112](https://github.com/newsuk/times-components/issues/3112) [#3126](https://github.com/newsuk/times-components/issues/3126) [#3112](https://github.com/newsuk/times-components/issues/3112) [#3126](https://github.com/newsuk/times-components/issues/3126) [#3127](https://github.com/newsuk/times-components/issues/3127) [#3116](https://github.com/newsuk/times-components/issues/3116) [#3128](https://github.com/newsuk/times-components/issues/3128) [#3132](https://github.com/newsuk/times-components/issues/3132) [#3133](https://github.com/newsuk/times-components/issues/3133)
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
6
17
|
## [0.6.63](https://github.com/newsuk/times-components/compare/@times-components/lazy-load@0.6.62...@times-components/lazy-load@0.6.63) (2022-08-05)
|
|
7
18
|
|
|
8
19
|
**Note:** Version bump only for package @times-components/lazy-load
|
package/babel.config.js
CHANGED
|
@@ -1,10 +1,17 @@
|
|
|
1
1
|
module.exports = api => {
|
|
2
2
|
api.cache(true);
|
|
3
3
|
return {
|
|
4
|
-
plugins: [
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
4
|
+
plugins: ["babel-plugin-styled-components"],
|
|
5
|
+
presets: [
|
|
6
|
+
[
|
|
7
|
+
"@babel/preset-env",
|
|
8
|
+
{
|
|
9
|
+
targets: {
|
|
10
|
+
esmodules: true
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
],
|
|
14
|
+
"@babel/preset-react"
|
|
15
|
+
]
|
|
9
16
|
};
|
|
10
17
|
};
|
package/dist/lazy-load.js
CHANGED
|
@@ -1 +1,137 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
var _react = require("react");
|
|
9
|
+
|
|
10
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
+
|
|
12
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
|
+
|
|
14
|
+
/* eslint-env browser */
|
|
15
|
+
class LazyLoad extends _react.Component {
|
|
16
|
+
constructor(props) {
|
|
17
|
+
super(props);
|
|
18
|
+
this.isObserving = false;
|
|
19
|
+
this.pending = new Set();
|
|
20
|
+
this.pendingTimer = null;
|
|
21
|
+
this.state = {
|
|
22
|
+
clientHasRendered: false,
|
|
23
|
+
nodes: new Map()
|
|
24
|
+
};
|
|
25
|
+
this.unobserved = new Set();
|
|
26
|
+
this.unobservedTimer = null;
|
|
27
|
+
this.registerNode = this.registerNode.bind(this);
|
|
28
|
+
|
|
29
|
+
if (typeof window === "undefined" || !("IntersectionObserver" in window)) {
|
|
30
|
+
return;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
this.isObserving = true;
|
|
34
|
+
const options = {
|
|
35
|
+
rootMargin: props.rootMargin,
|
|
36
|
+
threshold: props.threshold
|
|
37
|
+
};
|
|
38
|
+
this.observer = new window.IntersectionObserver(this.handleObservation.bind(this), options);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
componentDidMount() {
|
|
42
|
+
const newState = {
|
|
43
|
+
clientHasRendered: true
|
|
44
|
+
}; // eslint-disable-next-line react/no-did-mount-set-state
|
|
45
|
+
|
|
46
|
+
this.setState(newState);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
componentWillUnmount() {
|
|
50
|
+
if (this.observer) {
|
|
51
|
+
this.observer.disconnect();
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
clearTimeout(this.pendingTimer);
|
|
55
|
+
clearTimeout(this.unobservedTimer);
|
|
56
|
+
this.pending.clear();
|
|
57
|
+
this.unobserved.clear();
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
handleObservation(entries) {
|
|
61
|
+
const threshold = this.props.threshold;
|
|
62
|
+
const nodes = this.state.nodes;
|
|
63
|
+
entries.forEach(_ref => {
|
|
64
|
+
let target = _ref.target,
|
|
65
|
+
intersectionRatio = _ref.intersectionRatio;
|
|
66
|
+
|
|
67
|
+
if (intersectionRatio >= threshold && !nodes.get(target.id)) {
|
|
68
|
+
this.pending.add(target);
|
|
69
|
+
} else if (intersectionRatio < threshold && this.pending.has(target)) {
|
|
70
|
+
this.pending.delete(target);
|
|
71
|
+
}
|
|
72
|
+
});
|
|
73
|
+
clearTimeout(this.pendingTimer);
|
|
74
|
+
|
|
75
|
+
if (this.pending.size) {
|
|
76
|
+
this.pendingTimer = setTimeout(() => {
|
|
77
|
+
if (!this.pending.size) {
|
|
78
|
+
return;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
this.setState(state => ({
|
|
82
|
+
nodes: new Map([...state.nodes, ...[...this.pending].map(n => [n.id, n])])
|
|
83
|
+
}));
|
|
84
|
+
this.pending.clear();
|
|
85
|
+
}, 100);
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
registerNode(node) {
|
|
90
|
+
if (!node) {
|
|
91
|
+
return;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
if (!this.observer) {
|
|
95
|
+
if (this.unobserved.has(node)) {
|
|
96
|
+
return;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
this.unobserved.add(node);
|
|
100
|
+
clearTimeout(this.unobservedTimer);
|
|
101
|
+
this.unobservedTimer = setTimeout(() => {
|
|
102
|
+
this.setState({
|
|
103
|
+
nodes: new Map([...this.unobserved].map(n => [n.id, n]))
|
|
104
|
+
});
|
|
105
|
+
this.unobserved.clear();
|
|
106
|
+
}, 10);
|
|
107
|
+
return;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
this.observer.observe(node);
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
render() {
|
|
114
|
+
const children = this.props.children;
|
|
115
|
+
const _this$state = this.state,
|
|
116
|
+
clientHasRendered = _this$state.clientHasRendered,
|
|
117
|
+
nodes = _this$state.nodes;
|
|
118
|
+
return children({
|
|
119
|
+
clientHasRendered,
|
|
120
|
+
isObserving: this.isObserving,
|
|
121
|
+
observed: nodes,
|
|
122
|
+
registerNode: this.registerNode
|
|
123
|
+
});
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
LazyLoad.propTypes = {
|
|
129
|
+
children: _propTypes.default.func.isRequired,
|
|
130
|
+
rootMargin: _propTypes.default.string,
|
|
131
|
+
threshold: _propTypes.default.number.isRequired
|
|
132
|
+
};
|
|
133
|
+
LazyLoad.defaultProps = {
|
|
134
|
+
rootMargin: "0px"
|
|
135
|
+
};
|
|
136
|
+
var _default = LazyLoad;
|
|
137
|
+
exports.default = _default;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@times-components/lazy-load",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.7.0",
|
|
4
4
|
"description": "Use IntersectionObserver to lazy load resources",
|
|
5
5
|
"main": "dist/lazy-load",
|
|
6
6
|
"dev": "src/lazy-load",
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
"fmt": "eslint . --fix && prettier --write '**/*.*'",
|
|
10
10
|
"prettier:diff": "prettier --list-different '**/*.*'",
|
|
11
11
|
"lint": "eslint . && yarn prettier:diff && yarn depcheck",
|
|
12
|
-
"test:web": "jest --config='./__tests__/
|
|
12
|
+
"test:web": "jest --config='./__tests__/jest.config.js'",
|
|
13
13
|
"prepublishOnly": "yarn transpile && yarn bundle",
|
|
14
14
|
"watch": "watch 'yarn bundle' ./src --ignoreDotFiles --ignoreUnreadable",
|
|
15
15
|
"cleanup-dist": "rm -rf dist",
|
|
@@ -21,9 +21,7 @@
|
|
|
21
21
|
"url": "git+https://github.com/newsuk/times-components.git"
|
|
22
22
|
},
|
|
23
23
|
"keywords": [
|
|
24
|
-
"react-native-web",
|
|
25
24
|
"react",
|
|
26
|
-
"native",
|
|
27
25
|
"web",
|
|
28
26
|
"lazy-load",
|
|
29
27
|
"component"
|
|
@@ -36,11 +34,11 @@
|
|
|
36
34
|
"devDependencies": {
|
|
37
35
|
"@babel/core": "7.4.4",
|
|
38
36
|
"@times-components/eslint-config-thetimes": "0.8.18",
|
|
39
|
-
"@times-components/jest-configurator": "
|
|
40
|
-
"@times-components/jest-serializer": "3.
|
|
41
|
-
"@times-components/storybook": "4.
|
|
42
|
-
"@times-components/test-utils": "2.
|
|
43
|
-
"@times-components/webpack-configurator": "2.0
|
|
37
|
+
"@times-components/jest-configurator-web": "0.8.0",
|
|
38
|
+
"@times-components/jest-serializer": "3.4.0",
|
|
39
|
+
"@times-components/storybook": "4.5.0",
|
|
40
|
+
"@times-components/test-utils": "2.4.0",
|
|
41
|
+
"@times-components/webpack-configurator": "2.1.0",
|
|
44
42
|
"babel-jest": "24.8.0",
|
|
45
43
|
"enzyme": "3.9.0",
|
|
46
44
|
"eslint": "5.9.0",
|
|
@@ -48,10 +46,8 @@
|
|
|
48
46
|
"prettier": "1.14.3",
|
|
49
47
|
"react": "16.9.0",
|
|
50
48
|
"react-dom": "16.9.0",
|
|
51
|
-
"react-native": "0.61.5",
|
|
52
49
|
"styled-components": "4.3.2",
|
|
53
|
-
"webpack": "4.30.0"
|
|
54
|
-
"webpack-cli": "3.3.1"
|
|
50
|
+
"webpack": "4.30.0"
|
|
55
51
|
},
|
|
56
52
|
"dependencies": {
|
|
57
53
|
"prop-types": "15.7.2"
|
|
@@ -62,12 +58,10 @@
|
|
|
62
58
|
},
|
|
63
59
|
"peerDependencies": {
|
|
64
60
|
"react": ">=16.9",
|
|
65
|
-
"react-dom": ">=16.9"
|
|
66
|
-
"react-native": ">=0.59",
|
|
67
|
-
"react-native-web": "0.11.4"
|
|
61
|
+
"react-dom": ">=16.9"
|
|
68
62
|
},
|
|
69
63
|
"publishConfig": {
|
|
70
64
|
"access": "public"
|
|
71
65
|
},
|
|
72
|
-
"gitHead": "
|
|
66
|
+
"gitHead": "fe2f12b7448a88662c53f840772282cd97756c5c"
|
|
73
67
|
}
|
package/rnw.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
module.exports=function(e){var t={};function r
|
|
1
|
+
module.exports=function(e){var t={};function n(r){if(t[r])return t[r].exports;var i=t[r]={i:r,l:!1,exports:{}};return e[r].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)n.d(r,i,function(t){return e[t]}.bind(null,i));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=1)}([function(e,t){e.exports=require("react")},function(e,t,n){"use strict";n.r(t);var r=n(0);n(2);class i extends r.Component{constructor(e){if(super(e),this.isObserving=!1,this.pending=new Set,this.pendingTimer=null,this.state={clientHasRendered:!1,nodes:new Map},this.unobserved=new Set,this.unobservedTimer=null,this.registerNode=this.registerNode.bind(this),"undefined"==typeof window||!("IntersectionObserver"in window))return;this.isObserving=!0;const t={rootMargin:e.rootMargin,threshold:e.threshold};this.observer=new window.IntersectionObserver(this.handleObservation.bind(this),t)}componentDidMount(){this.setState({clientHasRendered:!0})}componentWillUnmount(){this.observer&&this.observer.disconnect(),clearTimeout(this.pendingTimer),clearTimeout(this.unobservedTimer),this.pending.clear(),this.unobserved.clear()}handleObservation(e){const t=this.props.threshold,n=this.state.nodes;e.forEach(e=>{let r=e.target,i=e.intersectionRatio;i>=t&&!n.get(r.id)?this.pending.add(r):i<t&&this.pending.has(r)&&this.pending.delete(r)}),clearTimeout(this.pendingTimer),this.pending.size&&(this.pendingTimer=setTimeout(()=>{this.pending.size&&(this.setState(e=>({nodes:new Map([...e.nodes,...[...this.pending].map(e=>[e.id,e])])})),this.pending.clear())},100))}registerNode(e){if(e){if(!this.observer){if(this.unobserved.has(e))return;return this.unobserved.add(e),clearTimeout(this.unobservedTimer),void(this.unobservedTimer=setTimeout(()=>{this.setState({nodes:new Map([...this.unobserved].map(e=>[e.id,e]))}),this.unobserved.clear()},10))}this.observer.observe(e)}}render(){const e=this.props.children,t=this.state,n=t.clientHasRendered,r=t.nodes;return e({clientHasRendered:n,isObserving:this.isObserving,observed:r,registerNode:this.registerNode})}}i.defaultProps={rootMargin:"0px"},t.default=i},function(e,t){e.exports=require("prop-types")}]);
|