@builder.io/react 8.0.12 → 8.1.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 +20 -0
- package/dist/builder-react-lite.cjs.js +1 -1
- package/dist/builder-react-lite.cjs.js.map +1 -1
- package/dist/builder-react-lite.esm.js +1 -1
- package/dist/builder-react-lite.esm.js.map +1 -1
- package/dist/builder-react.browser.js +2 -2
- package/dist/builder-react.browser.js.map +1 -1
- package/dist/builder-react.cjs.js +1 -1
- package/dist/builder-react.cjs.js.map +1 -1
- package/dist/builder-react.es5.js +1 -1
- package/dist/builder-react.es5.js.map +1 -1
- package/dist/builder-react.unpkg.js +2 -2
- package/dist/builder-react.unpkg.js.map +1 -1
- package/dist/lib/package.json +1 -1
- package/dist/lib/src/blocks/Video.js +17 -25
- package/dist/lib/src/blocks/Video.js.map +1 -1
- package/dist/lib/src/blocks/raw/Img.js +14 -1
- package/dist/lib/src/blocks/raw/Img.js.map +1 -1
- package/dist/lib/src/sdk-version.js +1 -1
- package/dist/types/src/sdk-version.d.ts +1 -1
- package/package.json +2 -2
- package/src/blocks/Video.tsx +22 -34
- package/src/blocks/raw/Img.tsx +17 -6
package/dist/lib/package.json
CHANGED
|
@@ -33,7 +33,6 @@ exports.Video = void 0;
|
|
|
33
33
|
/** @jsx jsx */
|
|
34
34
|
var core_1 = require("@emotion/core");
|
|
35
35
|
var react_1 = __importDefault(require("react"));
|
|
36
|
-
var throttle_1 = require("../functions/throttle");
|
|
37
36
|
var with_children_1 = require("../functions/with-children");
|
|
38
37
|
var sdk_1 = require("@builder.io/sdk");
|
|
39
38
|
var file_types_constant_1 = require("src/constants/file-types.constant");
|
|
@@ -44,7 +43,7 @@ var VideoComponent = /** @class */ (function (_super) {
|
|
|
44
43
|
var _this = _super !== null && _super.apply(this, arguments) || this;
|
|
45
44
|
_this.video = null;
|
|
46
45
|
_this.containerRef = null;
|
|
47
|
-
_this.
|
|
46
|
+
_this.lazyVideoObserver = null;
|
|
48
47
|
_this.state = {
|
|
49
48
|
load: !_this.lazyLoad,
|
|
50
49
|
};
|
|
@@ -88,34 +87,27 @@ var VideoComponent = /** @class */ (function (_super) {
|
|
|
88
87
|
var _this = this;
|
|
89
88
|
this.updateVideo();
|
|
90
89
|
if (this.lazyLoad && sdk_1.Builder.isBrowser) {
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
_this.
|
|
99
|
-
window.removeEventListener('scroll', listener_1);
|
|
100
|
-
_this.scrollListener = null;
|
|
90
|
+
var observer = new IntersectionObserver(function (entries) {
|
|
91
|
+
entries.forEach(function (entry) {
|
|
92
|
+
if (!entry.isIntersecting)
|
|
93
|
+
return;
|
|
94
|
+
_this.setState(function (state) { return (__assign(__assign({}, state), { load: true })); });
|
|
95
|
+
if (_this.lazyVideoObserver) {
|
|
96
|
+
_this.lazyVideoObserver.disconnect();
|
|
97
|
+
_this.lazyVideoObserver = null;
|
|
101
98
|
}
|
|
102
|
-
}
|
|
103
|
-
}, 400, {
|
|
104
|
-
leading: false,
|
|
105
|
-
trailing: true,
|
|
106
|
-
});
|
|
107
|
-
this.scrollListener = listener_1;
|
|
108
|
-
window.addEventListener('scroll', listener_1, {
|
|
109
|
-
capture: true,
|
|
110
|
-
passive: true,
|
|
99
|
+
});
|
|
111
100
|
});
|
|
112
|
-
|
|
101
|
+
if (this.containerRef) {
|
|
102
|
+
observer.observe(this.containerRef);
|
|
103
|
+
this.lazyVideoObserver = observer;
|
|
104
|
+
}
|
|
113
105
|
}
|
|
114
106
|
};
|
|
115
107
|
VideoComponent.prototype.componentWillUnmount = function () {
|
|
116
|
-
if (
|
|
117
|
-
|
|
118
|
-
this.
|
|
108
|
+
if (this.lazyVideoObserver) {
|
|
109
|
+
this.lazyVideoObserver.disconnect();
|
|
110
|
+
this.lazyVideoObserver = null;
|
|
119
111
|
}
|
|
120
112
|
};
|
|
121
113
|
VideoComponent.prototype.render = function () {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Video.js","sourceRoot":"","sources":["../../../../src/blocks/Video.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,eAAe;AACf,sCAAoC;AACpC,gDAAiD;AAEjD,
|
|
1
|
+
{"version":3,"file":"Video.js","sourceRoot":"","sources":["../../../../src/blocks/Video.tsx"],"names":[],"mappings":"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"}
|
|
@@ -34,15 +34,28 @@ exports.Img = void 0;
|
|
|
34
34
|
var react_1 = __importDefault(require("react"));
|
|
35
35
|
var with_builder_1 = require("../../functions/with-builder");
|
|
36
36
|
var file_types_constant_1 = require("src/constants/file-types.constant");
|
|
37
|
+
var Image_1 = require("../Image");
|
|
37
38
|
// TODO: srcset, alt text input, object size/position input, etc
|
|
38
39
|
var ImgComponent = /** @class */ (function (_super) {
|
|
39
40
|
__extends(ImgComponent, _super);
|
|
40
41
|
function ImgComponent() {
|
|
41
42
|
return _super !== null && _super.apply(this, arguments) || this;
|
|
42
43
|
}
|
|
44
|
+
ImgComponent.prototype.getSrcSet = function () {
|
|
45
|
+
var url = this.props.image;
|
|
46
|
+
if (!url || typeof url !== 'string') {
|
|
47
|
+
return;
|
|
48
|
+
}
|
|
49
|
+
// We can auto add srcset for cdn.builder.io images
|
|
50
|
+
if (!url.match(/builder\.io/)) {
|
|
51
|
+
return;
|
|
52
|
+
}
|
|
53
|
+
return (0, Image_1.getSrcSet)(url);
|
|
54
|
+
};
|
|
43
55
|
ImgComponent.prototype.render = function () {
|
|
44
56
|
var attributes = this.props.attributes || {};
|
|
45
|
-
|
|
57
|
+
var srcset = this.getSrcSet();
|
|
58
|
+
return (react_1.default.createElement("img", __assign({}, this.props.attributes, { src: this.props.image || attributes.src, srcSet: srcset })));
|
|
46
59
|
};
|
|
47
60
|
return ImgComponent;
|
|
48
61
|
}(react_1.default.Component));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Img.js","sourceRoot":"","sources":["../../../../../src/blocks/raw/Img.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACb,gDAA0B;AAE1B,6DAA2D;AAC3D,yEAAqE;
|
|
1
|
+
{"version":3,"file":"Img.js","sourceRoot":"","sources":["../../../../../src/blocks/raw/Img.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACb,gDAA0B;AAE1B,6DAA2D;AAC3D,yEAAqE;AACrE,kCAAqC;AAQrC,gEAAgE;AAEhE;IAA2B,gCAAyB;IAApD;;IAsBA,CAAC;IArBC,gCAAS,GAAT;QACE,IAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;QAC7B,IAAI,CAAC,GAAG,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE;YACnC,OAAO;SACR;QAED,mDAAmD;QACnD,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,aAAa,CAAC,EAAE;YAC7B,OAAO;SACR;QAED,OAAO,IAAA,iBAAS,EAAC,GAAG,CAAC,CAAC;IACxB,CAAC;IAED,6BAAM,GAAN;QACE,IAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,IAAI,EAAE,CAAC;QAC/C,IAAM,MAAM,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;QAChC,OAAO,CACL,kDAAS,IAAI,CAAC,KAAK,CAAC,UAAU,IAAE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,UAAU,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,IAAI,CAC5F,CAAC;IACJ,CAAC;IACH,mBAAC;AAAD,CAAC,AAtBD,CAA2B,eAAK,CAAC,SAAS,GAsBzC;AAEY,QAAA,GAAG,GAAG,IAAA,0BAAW,EAAC,YAAY,EAAE;IAC3C,gBAAgB;IAChB,IAAI,EAAE,SAAS;IACf,kBAAkB,EAAE,IAAI;IACxB,KAAK,EACH,sKAAsK;IACxK,MAAM,EAAE;QACN;YACE,IAAI,EAAE,OAAO;YACb,MAAM,EAAE,IAAI;YACZ,IAAI,EAAE,MAAM;YACZ,gBAAgB,EAAE,sCAAgB;YAClC,QAAQ,EAAE,IAAI;SACf;KACF;IACD,MAAM,EAAE,IAAI;IACZ,MAAM,EAAE,IAAI;CACb,CAAC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const SDK_VERSION = "8.0
|
|
1
|
+
export declare const SDK_VERSION = "8.1.0";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@builder.io/react",
|
|
3
|
-
"version": "8.0
|
|
3
|
+
"version": "8.1.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"main": "dist/builder-react.cjs.js",
|
|
@@ -97,7 +97,7 @@
|
|
|
97
97
|
"react-dom": ">=16.8.0 || ^19.0.0-rc"
|
|
98
98
|
},
|
|
99
99
|
"dependencies": {
|
|
100
|
-
"@builder.io/sdk": "6.0.
|
|
100
|
+
"@builder.io/sdk": "6.0.7",
|
|
101
101
|
"@emotion/core": "^10.0.17",
|
|
102
102
|
"hash-sum": "^2.0.0",
|
|
103
103
|
"isolated-vm": "^5.0.0",
|
package/src/blocks/Video.tsx
CHANGED
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
import { jsx } from '@emotion/core';
|
|
3
3
|
import React, { PropsWithChildren } from 'react';
|
|
4
4
|
|
|
5
|
-
import { throttle } from '../functions/throttle';
|
|
6
5
|
import { withChildren } from '../functions/with-children';
|
|
7
6
|
import { Builder } from '@builder.io/sdk';
|
|
8
7
|
import { IMAGE_FILE_TYPES, VIDEO_FILE_TYPES } from 'src/constants/file-types.constant';
|
|
@@ -30,8 +29,7 @@ class VideoComponent extends React.Component<
|
|
|
30
29
|
> {
|
|
31
30
|
video: HTMLVideoElement | null = null;
|
|
32
31
|
containerRef: HTMLElement | null = null;
|
|
33
|
-
|
|
34
|
-
scrollListener: null | ((e: Event) => void) = null;
|
|
32
|
+
lazyVideoObserver: IntersectionObserver | null = null;
|
|
35
33
|
|
|
36
34
|
get lazyLoad() {
|
|
37
35
|
// Default is true, must be explicitly turned off to not have this behavior
|
|
@@ -72,43 +70,33 @@ class VideoComponent extends React.Component<
|
|
|
72
70
|
this.updateVideo();
|
|
73
71
|
|
|
74
72
|
if (this.lazyLoad && Builder.isBrowser) {
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
(event: Event) => {
|
|
79
|
-
if (this.containerRef) {
|
|
80
|
-
const rect = this.containerRef.getBoundingClientRect();
|
|
81
|
-
const buffer = window.innerHeight / 2;
|
|
82
|
-
if (rect.top < window.innerHeight + buffer) {
|
|
83
|
-
this.setState(state => ({
|
|
84
|
-
...state,
|
|
85
|
-
load: true,
|
|
86
|
-
}));
|
|
87
|
-
window.removeEventListener('scroll', listener);
|
|
88
|
-
this.scrollListener = null;
|
|
89
|
-
}
|
|
90
|
-
}
|
|
91
|
-
},
|
|
92
|
-
400,
|
|
93
|
-
{
|
|
94
|
-
leading: false,
|
|
95
|
-
trailing: true,
|
|
96
|
-
}
|
|
97
|
-
);
|
|
98
|
-
this.scrollListener = listener;
|
|
73
|
+
const observer = new IntersectionObserver(entries => {
|
|
74
|
+
entries.forEach(entry => {
|
|
75
|
+
if (!entry.isIntersecting) return;
|
|
99
76
|
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
77
|
+
this.setState(state => ({
|
|
78
|
+
...state,
|
|
79
|
+
load: true,
|
|
80
|
+
}));
|
|
81
|
+
|
|
82
|
+
if (this.lazyVideoObserver) {
|
|
83
|
+
this.lazyVideoObserver.disconnect();
|
|
84
|
+
this.lazyVideoObserver = null;
|
|
85
|
+
}
|
|
86
|
+
});
|
|
103
87
|
});
|
|
104
|
-
|
|
88
|
+
|
|
89
|
+
if (this.containerRef) {
|
|
90
|
+
observer.observe(this.containerRef);
|
|
91
|
+
this.lazyVideoObserver = observer;
|
|
92
|
+
}
|
|
105
93
|
}
|
|
106
94
|
}
|
|
107
95
|
|
|
108
96
|
componentWillUnmount() {
|
|
109
|
-
if (
|
|
110
|
-
|
|
111
|
-
this.
|
|
97
|
+
if (this.lazyVideoObserver) {
|
|
98
|
+
this.lazyVideoObserver.disconnect();
|
|
99
|
+
this.lazyVideoObserver = null;
|
|
112
100
|
}
|
|
113
101
|
}
|
|
114
102
|
|
package/src/blocks/raw/Img.tsx
CHANGED
|
@@ -3,6 +3,7 @@ import React from 'react';
|
|
|
3
3
|
import { BuilderElement } from '@builder.io/sdk';
|
|
4
4
|
import { withBuilder } from '../../functions/with-builder';
|
|
5
5
|
import { IMAGE_FILE_TYPES } from 'src/constants/file-types.constant';
|
|
6
|
+
import { getSrcSet } from '../Image';
|
|
6
7
|
|
|
7
8
|
export interface ImgProps {
|
|
8
9
|
attributes?: any;
|
|
@@ -13,15 +14,25 @@ export interface ImgProps {
|
|
|
13
14
|
// TODO: srcset, alt text input, object size/position input, etc
|
|
14
15
|
|
|
15
16
|
class ImgComponent extends React.Component<ImgProps> {
|
|
17
|
+
getSrcSet(): string | undefined {
|
|
18
|
+
const url = this.props.image;
|
|
19
|
+
if (!url || typeof url !== 'string') {
|
|
20
|
+
return;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
// We can auto add srcset for cdn.builder.io images
|
|
24
|
+
if (!url.match(/builder\.io/)) {
|
|
25
|
+
return;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
return getSrcSet(url);
|
|
29
|
+
}
|
|
30
|
+
|
|
16
31
|
render() {
|
|
17
32
|
const attributes = this.props.attributes || {};
|
|
33
|
+
const srcset = this.getSrcSet();
|
|
18
34
|
return (
|
|
19
|
-
<img
|
|
20
|
-
{...this.props.attributes}
|
|
21
|
-
src={this.props.image || attributes.src}
|
|
22
|
-
// TODO: generate this
|
|
23
|
-
// srcSet={this.props.image || attributes.srcSet || attributes.srcset}
|
|
24
|
-
/>
|
|
35
|
+
<img {...this.props.attributes} src={this.props.image || attributes.src} srcSet={srcset} />
|
|
25
36
|
);
|
|
26
37
|
}
|
|
27
38
|
}
|