@times-components/interactive-wrapper 0.8.60 → 0.9.2
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 +27 -0
- package/README.md +3 -6
- package/babel.config.js +12 -5
- package/dist/interactive-wrapper.js +140 -1
- package/dist/webview-event-callback-setup.js +43 -1
- package/package.json +11 -17
- package/rnw.js +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,33 @@
|
|
|
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.9.2](https://github.com/newsuk/times-components/compare/@times-components/interactive-wrapper@0.9.1...@times-components/interactive-wrapper@0.9.2) (2022-09-06)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @times-components/interactive-wrapper
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
## [0.9.1](https://github.com/newsuk/times-components/compare/@times-components/interactive-wrapper@0.9.0...@times-components/interactive-wrapper@0.9.1) (2022-09-06)
|
|
15
|
+
|
|
16
|
+
**Note:** Version bump only for package @times-components/interactive-wrapper
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
# [0.9.0](https://github.com/newsuk/times-components/compare/@times-components/interactive-wrapper@0.8.60...@times-components/interactive-wrapper@0.9.0) (2022-08-18)
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
### Features
|
|
26
|
+
|
|
27
|
+
* **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)
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
|
|
6
33
|
## [0.8.60](https://github.com/newsuk/times-components/compare/@times-components/interactive-wrapper@0.8.59...@times-components/interactive-wrapper@0.8.60) (2022-08-05)
|
|
7
34
|
|
|
8
35
|
**Note:** Version bump only for package @times-components/interactive-wrapper
|
package/README.md
CHANGED
|
@@ -1,13 +1,10 @@
|
|
|
1
1
|
# Interactive Wrapper
|
|
2
2
|
|
|
3
3
|
The editorial team's developers have created a number of Interactive widgets for
|
|
4
|
-
the site. These slot in via HTML web components.
|
|
5
|
-
native.
|
|
4
|
+
the site. These slot in via HTML web components.
|
|
6
5
|
|
|
7
6
|
This component wraps the Interactive allowing it to display as part of the React
|
|
8
|
-
article
|
|
9
|
-
|
|
10
|
-
This is a fallback option, with Interactives being written natively in future.
|
|
7
|
+
article.
|
|
11
8
|
|
|
12
9
|
## Contributing
|
|
13
10
|
|
|
@@ -29,7 +26,7 @@ yarn lint
|
|
|
29
26
|
|
|
30
27
|
## Testing
|
|
31
28
|
|
|
32
|
-
Testing can be done
|
|
29
|
+
Testing can be done with:
|
|
33
30
|
|
|
34
31
|
```
|
|
35
32
|
yarn test:web
|
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
|
};
|
|
@@ -1 +1,140 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.polyfillWCIfNecessary = polyfillWCIfNecessary;
|
|
7
|
+
exports.default = void 0;
|
|
8
|
+
|
|
9
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
10
|
+
|
|
11
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
12
|
+
|
|
13
|
+
var _image = require("@times-components/image");
|
|
14
|
+
|
|
15
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
16
|
+
|
|
17
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
18
|
+
|
|
19
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
20
|
+
|
|
21
|
+
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
|
|
22
|
+
|
|
23
|
+
function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
|
|
24
|
+
|
|
25
|
+
function ensureElement(selector, createElement) {
|
|
26
|
+
if (document.body.querySelector(selector)) {
|
|
27
|
+
return Promise.resolve(null);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
return new Promise((resolve, reject) => {
|
|
31
|
+
const element = createElement();
|
|
32
|
+
element.onload = resolve;
|
|
33
|
+
element.onerror = reject;
|
|
34
|
+
document.body.appendChild(element);
|
|
35
|
+
});
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
function ensureScript(src) {
|
|
39
|
+
return ensureElement("script[src=\"".concat(src, "\"]"), () => {
|
|
40
|
+
const script = document.createElement("script");
|
|
41
|
+
script.setAttribute("async", "async");
|
|
42
|
+
script.setAttribute("src", src);
|
|
43
|
+
return script;
|
|
44
|
+
});
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
function ensureImport(src) {
|
|
48
|
+
return ensureElement("link[href=\"".concat(src, "\"]"), () => {
|
|
49
|
+
const link = document.createElement("link");
|
|
50
|
+
link.setAttribute("href", src);
|
|
51
|
+
link.setAttribute("rel", "import");
|
|
52
|
+
return link;
|
|
53
|
+
});
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
function polyfillWCIfNecessary() {
|
|
57
|
+
const htmlImportsSupported = ("import" in document.createElement("link"));
|
|
58
|
+
const registerElementSupported = !!document.registerElement;
|
|
59
|
+
|
|
60
|
+
if (!htmlImportsSupported || !registerElementSupported) {
|
|
61
|
+
return Promise.all([ensureScript("https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.24/webcomponents-lite.min.js"), new Promise(resolve => {
|
|
62
|
+
window.addEventListener("WebComponentsReady", resolve);
|
|
63
|
+
})]);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
return Promise.resolve();
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
class InteractiveWrapper extends _react.Component {
|
|
70
|
+
constructor(props) {
|
|
71
|
+
super(props);
|
|
72
|
+
this.placeholder = _react.default.createRef(null);
|
|
73
|
+
this.component = _react.default.createRef(null);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
componentDidMount() {
|
|
77
|
+
const fetchPolyfill = this.props.fetchPolyfill;
|
|
78
|
+
fetchPolyfill().then(() => {
|
|
79
|
+
this.insertComponent();
|
|
80
|
+
});
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
componentDidUpdate() {
|
|
84
|
+
this.insertComponent();
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
insertComponent() {
|
|
88
|
+
var _this = this;
|
|
89
|
+
|
|
90
|
+
return _asyncToGenerator(function* () {
|
|
91
|
+
const _this$props = _this.props,
|
|
92
|
+
attributes = _this$props.attributes,
|
|
93
|
+
element = _this$props.element,
|
|
94
|
+
source = _this$props.source;
|
|
95
|
+
const placeholder = _this.placeholder.current;
|
|
96
|
+
const component = _this.component.current;
|
|
97
|
+
component.innerHTML = "";
|
|
98
|
+
placeholder.style.cssText += "display: block !important"; // It is possible for insertComponent to have been called again whilst the
|
|
99
|
+
// import link tag was loading. and therefore it is possible for multiple
|
|
100
|
+
// interactives to be inserted – therefore, we ensure that the interactive
|
|
101
|
+
// container is empty before inserting
|
|
102
|
+
|
|
103
|
+
component.innerHTML = "";
|
|
104
|
+
const newElement = document.createElement(element);
|
|
105
|
+
Object.keys(attributes).forEach(key => newElement.setAttribute(key, attributes[key]));
|
|
106
|
+
component.appendChild(newElement); // Do not remove this. This seems to notify polymer to correctly
|
|
107
|
+
// render the web component in more circumstances, specifically,
|
|
108
|
+
// its required to correctly re-render after a react re-render
|
|
109
|
+
|
|
110
|
+
newElement.outerHTML += "";
|
|
111
|
+
placeholder.style.cssText += "display: none !important";
|
|
112
|
+
yield ensureImport(source);
|
|
113
|
+
})();
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
render() {
|
|
117
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
|
|
118
|
+
ref: this.placeholder,
|
|
119
|
+
style: {
|
|
120
|
+
height: 150,
|
|
121
|
+
position: "relative"
|
|
122
|
+
}
|
|
123
|
+
}, /*#__PURE__*/_react.default.createElement(_image.Placeholder, null)), /*#__PURE__*/_react.default.createElement("div", {
|
|
124
|
+
ref: this.component
|
|
125
|
+
}));
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
exports.default = InteractiveWrapper;
|
|
131
|
+
InteractiveWrapper.propTypes = {
|
|
132
|
+
attributes: _propTypes.default.object,
|
|
133
|
+
element: _propTypes.default.string.isRequired,
|
|
134
|
+
source: _propTypes.default.string.isRequired,
|
|
135
|
+
fetchPolyfill: _propTypes.default.func
|
|
136
|
+
};
|
|
137
|
+
InteractiveWrapper.defaultProps = {
|
|
138
|
+
attributes: {},
|
|
139
|
+
fetchPolyfill: polyfillWCIfNecessary
|
|
140
|
+
};
|
|
@@ -1 +1,43 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
// NOTE: this function must be self-contained, i.e. contain no references to variables
|
|
9
|
+
// defined outside the function, so that it can be passed into a WebView.
|
|
10
|
+
|
|
11
|
+
/* eslint-env browser */
|
|
12
|
+
const webviewEventCallbackSetup = options => {
|
|
13
|
+
const window = options.window;
|
|
14
|
+
|
|
15
|
+
window.eventCallback = (type, detail) => {
|
|
16
|
+
window.postMessage(JSON.stringify({
|
|
17
|
+
detail,
|
|
18
|
+
isTngMessage: true,
|
|
19
|
+
type
|
|
20
|
+
}));
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
window.addEventListener("error", ev => {
|
|
24
|
+
const file = (ev.filename || "").substring(0, 100);
|
|
25
|
+
window.eventCallback("error", "msg=".concat(ev.message || "", ", file=").concat(file, ", line=").concat(ev.lineno || "", ", col=").concat(ev.colno || ""));
|
|
26
|
+
}); // eslint-disable-next-line no-console
|
|
27
|
+
|
|
28
|
+
window.console.error = function () {
|
|
29
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
30
|
+
args[_key] = arguments[_key];
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
window.eventCallback("error", args.join("\n"));
|
|
34
|
+
};
|
|
35
|
+
|
|
36
|
+
const meta = window.document.createElement("meta");
|
|
37
|
+
meta.setAttribute("content", "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0");
|
|
38
|
+
meta.setAttribute("name", "viewport");
|
|
39
|
+
window.document.getElementsByTagName("head")[0].appendChild(meta);
|
|
40
|
+
};
|
|
41
|
+
|
|
42
|
+
var _default = webviewEventCallbackSetup;
|
|
43
|
+
exports.default = _default;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@times-components/interactive-wrapper",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.9.2",
|
|
4
4
|
"description": "Wrapper for legacy Interactive components",
|
|
5
5
|
"main": "dist/interactive-wrapper",
|
|
6
6
|
"dev": "src/interactive-wrapper",
|
|
@@ -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
|
"interactive",
|
|
29
27
|
"interactive-wrapper",
|
|
@@ -37,11 +35,11 @@
|
|
|
37
35
|
"devDependencies": {
|
|
38
36
|
"@babel/core": "7.4.4",
|
|
39
37
|
"@times-components/eslint-config-thetimes": "0.8.18",
|
|
40
|
-
"@times-components/jest-configurator": "
|
|
41
|
-
"@times-components/jest-serializer": "3.
|
|
42
|
-
"@times-components/storybook": "4.
|
|
43
|
-
"@times-components/test-utils": "2.
|
|
44
|
-
"@times-components/webpack-configurator": "2.0
|
|
38
|
+
"@times-components/jest-configurator-web": "0.8.0",
|
|
39
|
+
"@times-components/jest-serializer": "3.4.0",
|
|
40
|
+
"@times-components/storybook": "4.5.0",
|
|
41
|
+
"@times-components/test-utils": "2.4.0",
|
|
42
|
+
"@times-components/webpack-configurator": "2.1.0",
|
|
45
43
|
"babel-jest": "24.8.0",
|
|
46
44
|
"enzyme": "3.9.0",
|
|
47
45
|
"eslint": "5.9.0",
|
|
@@ -49,12 +47,10 @@
|
|
|
49
47
|
"prettier": "1.14.3",
|
|
50
48
|
"react": "16.9.0",
|
|
51
49
|
"react-dom": "16.9.0",
|
|
52
|
-
"
|
|
53
|
-
"webpack": "4.30.0",
|
|
54
|
-
"webpack-cli": "3.3.1"
|
|
50
|
+
"webpack": "4.30.0"
|
|
55
51
|
},
|
|
56
52
|
"dependencies": {
|
|
57
|
-
"@times-components/image": "6.
|
|
53
|
+
"@times-components/image": "6.13.2",
|
|
58
54
|
"prop-types": "15.7.2"
|
|
59
55
|
},
|
|
60
56
|
"resolutions": {
|
|
@@ -63,12 +59,10 @@
|
|
|
63
59
|
},
|
|
64
60
|
"peerDependencies": {
|
|
65
61
|
"react": ">=16.9",
|
|
66
|
-
"react-dom": ">=16.9"
|
|
67
|
-
"react-native": ">=0.59",
|
|
68
|
-
"react-native-web": "0.11.4"
|
|
62
|
+
"react-dom": ">=16.9"
|
|
69
63
|
},
|
|
70
64
|
"publishConfig": {
|
|
71
65
|
"access": "public"
|
|
72
66
|
},
|
|
73
|
-
"gitHead": "
|
|
67
|
+
"gitHead": "a4cb8f16b75e0d54adf6ad9e23bb6cce1dda01fc"
|
|
74
68
|
}
|
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 o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.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 o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));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=2)}([function(e,t){e.exports=require("react")},function(e,t){e.exports=require("@times-components/image/rnw")},function(e,t,n){"use strict";n.r(t),n.d(t,"polyfillWCIfNecessary",(function(){return s})),n.d(t,"default",(function(){return l}));var r=n(0),o=n.n(r),i=(n(3),n(1));function c(e,t,n,r,o,i,c){try{var u=e[i](c),s=u.value}catch(e){return void n(e)}u.done?t(s):Promise.resolve(s).then(r,o)}function u(e,t){return document.body.querySelector(e)?Promise.resolve(null):new Promise((e,n)=>{const r=t();r.onload=e,r.onerror=n,document.body.appendChild(r)})}function s(){const e="import"in document.createElement("link"),t=!!document.registerElement;return e&&t?Promise.resolve():Promise.all([(n="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.24/webcomponents-lite.min.js",u('script[src="'.concat(n,'"]'),()=>{const e=document.createElement("script");return e.setAttribute("async","async"),e.setAttribute("src",n),e})),new Promise(e=>{window.addEventListener("WebComponentsReady",e)})]);var n}class l extends r.Component{constructor(e){super(e),this.placeholder=o.a.createRef(null),this.component=o.a.createRef(null)}componentDidMount(){(0,this.props.fetchPolyfill)().then(()=>{this.insertComponent()})}componentDidUpdate(){this.insertComponent()}insertComponent(){var e,t=this;return(e=function*(){const e=t.props,n=e.attributes,r=e.element,o=e.source,i=t.placeholder.current,c=t.component.current;c.innerHTML="",i.style.cssText+="display: block !important",c.innerHTML="";const s=document.createElement(r);var l;Object.keys(n).forEach(e=>s.setAttribute(e,n[e])),c.appendChild(s),s.outerHTML+="",i.style.cssText+="display: none !important",yield(l=o,u('link[href="'.concat(l,'"]'),()=>{const e=document.createElement("link");return e.setAttribute("href",l),e.setAttribute("rel","import"),e}))},function(){var t=this,n=arguments;return new Promise((function(r,o){var i=e.apply(t,n);function u(e){c(i,r,o,u,s,"next",e)}function s(e){c(i,r,o,u,s,"throw",e)}u(void 0)}))})()}render(){return o.a.createElement(o.a.Fragment,null,o.a.createElement("div",{ref:this.placeholder,style:{height:150,position:"relative"}},o.a.createElement(i.Placeholder,null)),o.a.createElement("div",{ref:this.component}))}}l.defaultProps={attributes:{},fetchPolyfill:s}},function(e,t){e.exports=require("prop-types")}]);
|