Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@twreporter/react-article-components
Advanced tools
@twreporter/react-article-components - npm Package Compare versions
Comparing version 2.5.2-rc.2 to 2.5.2-rc.3
@@ -18,2 +18,3 @@ "use strict"; | ||
| var _theme = require("@twreporter/core/lib/constants/theme"); | ||
| var _excluded = ["isScrollingToAnchor"]; | ||
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } | ||
@@ -30,2 +31,4 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); } | ||
| function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } | ||
| function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } | ||
| function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } | ||
| function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | ||
@@ -85,2 +88,5 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } } | ||
| } | ||
| var dispatchInlineScriptLoadEvent = function dispatchInlineScriptLoadEvent(scriptText) { | ||
| return "".concat(scriptText, "\n // Manually trigger the load event on the script itself\n const loadEvent = new Event('load');\n document.currentScript.dispatchEvent(loadEvent); // Dispatches load event on this script element\n "); | ||
| }; | ||
| var EmbeddedCode = /*#__PURE__*/function (_React$PureComponent) { | ||
@@ -100,34 +106,37 @@ _inherits(EmbeddedCode, _React$PureComponent); | ||
| var scripts = _.get(_this.props, ['data', 'content', 0, 'scripts']); | ||
| if (node && Array.isArray(scripts)) { | ||
| var scriptsCount = scripts.length; | ||
| var loadScriptsCount = 0; | ||
| var scriptsFragment = new DocumentFragment(); // eslint-disable-line no-undef | ||
| _.forEach(scripts, function (script) { | ||
| var scriptEle = document.createElement('script'); | ||
| var attribs = script.attribs; | ||
| _.forEach(attribs, function (value, name) { | ||
| try { | ||
| scriptEle.setAttribute(name, value); | ||
| } catch (err) { | ||
| console.error('Failed to set an attribute to the embbeded script.\n', "embedded element id: ".concat(_.get(_this.props, 'data.id', ''), "\n"), "attribute name: ".concat(name, "\n"), "attribute value: ".concat(value, "\n"), 'error:\n', err); | ||
| } | ||
| }); | ||
| scriptEle.text = script.text || ''; | ||
| // `dispatchWindowLoadEvent` is a workaround to trigger rendering of venngage infographics: | ||
| // The embedded venngage code (https://infograph.venngage.com/js/embed/v1/embed.js) | ||
| // will only initiate when `load` event on `window` is emitted. | ||
| // Hence, we need to emit the `load` event of `window` manually after all scripts are load. | ||
| var handleLoad = function handleLoad() { | ||
| loadScriptsCount += 1; | ||
| if (loadScriptsCount === scriptsCount) { | ||
| /* all scripts are load */ | ||
| dispatchWindowLoadEvent(); | ||
| } | ||
| scriptEle.removeEventListener('load', handleLoad); | ||
| }; | ||
| scriptEle.addEventListener('load', handleLoad); | ||
| scriptsFragment.appendChild(scriptEle); | ||
| if (!node || !Array.isArray(scripts)) { | ||
| return; | ||
| } | ||
| var scriptsCount = scripts.length; | ||
| var loadScriptsCount = 0; | ||
| var scriptsFragment = new DocumentFragment(); // eslint-disable-line no-undef | ||
| _.forEach(scripts, function (script, index) { | ||
| var scriptEle = document.createElement('script'); | ||
| var attribs = script.attribs; | ||
| var isInlineScript = !attribs.src; | ||
| _.forEach(attribs, function (value, name) { | ||
| try { | ||
| scriptEle.setAttribute(name, value); | ||
| } catch (err) { | ||
| console.error('Failed to set an attribute to the embbeded script.\n', "embedded element id: ".concat(_.get(_this.props, 'data.id', ''), "\n"), "attribute name: ".concat(name, "\n"), "attribute value: ".concat(value, "\n"), 'error:\n', err); | ||
| } | ||
| }); | ||
| node.appendChild(scriptsFragment); | ||
| } | ||
| scriptEle.text = (isInlineScript ? dispatchInlineScriptLoadEvent(script.text) : script.text) || ''; | ||
| // `dispatchWindowLoadEvent` is a workaround to trigger rendering of venngage infographics: | ||
| // The embedded venngage code (https://infograph.venngage.com/js/embed/v1/embed.js) | ||
| // will only initiate when `load` event on `window` is emitted. | ||
| // Hence, we need to emit the `load` event of `window` manually after all scripts are load. | ||
| var handleLoad = function handleLoad() { | ||
| loadScriptsCount += 1; | ||
| if (loadScriptsCount === scriptsCount) { | ||
| /* all scripts are load */ | ||
| dispatchWindowLoadEvent(); | ||
| _this.props.handleFinishLoaded(); | ||
| } | ||
| scriptEle.removeEventListener('load', handleLoad); | ||
| }; | ||
| scriptEle.addEventListener('load', handleLoad); | ||
| scriptsFragment.appendChild(scriptEle); | ||
| }); | ||
| node.appendChild(scriptsFragment); | ||
| }); | ||
@@ -215,3 +224,4 @@ _defineProperty(_assertThisInitialized(_this), "loadEmbed", function () { | ||
| showCaption: _propTypes["default"].bool, | ||
| handleIsLoaded: _propTypes["default"].func | ||
| handleIsLoaded: _propTypes["default"].func, | ||
| handleFinishLoaded: _propTypes["default"].func | ||
| }); | ||
@@ -223,4 +233,6 @@ _defineProperty(EmbeddedCode, "defaultProps", { | ||
| }); | ||
| var WayPointWrapper = function WayPointWrapper(props) { | ||
| var isScrollingToAnchor = props.isScrollingToAnchor; | ||
| var WayPointWrapper = function WayPointWrapper(_ref) { | ||
| var _ref$isScrollingToAnc = _ref.isScrollingToAnchor, | ||
| isScrollingToAnchor = _ref$isScrollingToAnc === void 0 ? false : _ref$isScrollingToAnc, | ||
| props = _objectWithoutProperties(_ref, _excluded); | ||
| var _useState = (0, _react.useState)(false), | ||
@@ -262,10 +274,5 @@ _useState2 = _slicedToArray(_useState, 2), | ||
| }; | ||
| WayPointWrapper.defaultProps = { | ||
| isScrollingToAnchor: false, | ||
| showCaption: true | ||
| }; | ||
| WayPointWrapper.propTypes = { | ||
| isScrollingToAnchor: _propTypes["default"].bool, | ||
| showCaption: _propTypes["default"].bool | ||
| isScrollingToAnchor: _propTypes["default"].bool | ||
| }; | ||
| var _default = exports["default"] = WayPointWrapper; |
@@ -104,4 +104,4 @@ "use strict"; | ||
| }; | ||
| var handleIsLoaded = function handleIsLoaded() { | ||
| // add timeout before hidding loading to prevent flashing | ||
| var handleFinishLoaded = function handleFinishLoaded() { | ||
| // add timeout before hidding loading to prevent content shifting | ||
| window.setTimeout(function () { | ||
@@ -131,11 +131,6 @@ return setIsLoading(false); | ||
| }, []); | ||
| (0, _react.useEffect)(function () { | ||
| window.addEventListener('load', handleIsLoaded, true); | ||
| return function () { | ||
| return window.removeEventListener('load', handleIsLoaded, true); | ||
| }; | ||
| }, []); | ||
| return /*#__PURE__*/_react["default"].createElement("div", null, isLoading ? /*#__PURE__*/_react["default"].createElement(LoaderContainer, null, /*#__PURE__*/_react["default"].createElement(Loader, null)) : null, embeddedCode ? /*#__PURE__*/_react["default"].createElement(EmbeddedBlock, null, /*#__PURE__*/_react["default"].createElement(_embeddedCode["default"], { | ||
| data: embeddedCode, | ||
| showCaption: !captionText | ||
| showCaption: !captionText, | ||
| handleFinishLoaded: handleFinishLoaded | ||
| })) : null, /*#__PURE__*/_react["default"].createElement(ContentBlock, null, /*#__PURE__*/_react["default"].createElement(TitleBlock, null, isTopicPublished && shortTitle ? /*#__PURE__*/_react["default"].createElement(TopicTitle, { | ||
@@ -142,0 +137,0 @@ onClick: onTopicClick |
| { | ||
| "name": "@twreporter/react-article-components", | ||
| "version": "2.5.2-rc.2", | ||
| "version": "2.5.2-rc.3", | ||
| "description": "The Reporter react article components, which are used in article page", | ||
@@ -44,3 +44,3 @@ "main": "lib/components/article-page.js", | ||
| ], | ||
| "gitHead": "69bd51424296bdbbd56e11d9dc37daa9533d6ecc" | ||
| "gitHead": "b0221e49ef87d15b3d934f3007700a2e51501e97" | ||
| } |
New alerts
License Policy Violation
LicenseThis 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
LicenseThis 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
- increased by0.23%
537368
- Lines of code
- increased by0.05%
8141
No dependency changes