@merkur/integration-react 0.29.2 → 0.30.0

package/lib/index.cjs

@@ -11,20 +11,17 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function _extends() {
-  _extends = Object.assign || function (target) {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
-
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
         }
       }
     }
-
     return target;
   };
-
   return _extends.apply(this, arguments);
 }
 
@@ -32,6 +29,7 @@ const SelectorIdentifierMap = Object.freeze({
   '#': 'id',
   '.': 'className'
 });
+
 /**
  * Parses container selector into element property. Currently
  * only works with IDs and classnames.
@@ -39,28 +37,24 @@ const SelectorIdentifierMap = Object.freeze({
  * @param {string} [containerSelector='']
  * @return {{ string: string }} Property name and value tuple.
  */
-
 function selectorToAttribute(containerSelector = '') {
   if (typeof containerSelector !== 'string' || containerSelector.length === 0) {
     return {};
   }
-
   let lastIdentifierIndex = -1;
-
   for (let identifierKey in SelectorIdentifierMap) {
     let curLastIndex = containerSelector.lastIndexOf(identifierKey);
-
     if (lastIdentifierIndex < curLastIndex) {
       lastIdentifierIndex = curLastIndex;
     }
   }
-
   const identifier = containerSelector[lastIdentifierIndex];
   const selectorName = containerSelector.substr(lastIdentifierIndex + 1);
   return {
     [SelectorIdentifierMap[identifier]]: selectorName
   };
 }
+
 /**
  * Returns empty <div> with SSR html as it's contents (if provided) and
  * container selector defined, which is used as merkur widget wrapper.
@@ -68,8 +62,6 @@ function selectorToAttribute(containerSelector = '') {
  * @param {{ html, containerSelector, children }}
  * @return {import('react').ReactElement}
  */
-
-
 function WidgetWrapper({
   html,
   containerSelector,
@@ -95,51 +87,45 @@ class AbstractMerkurWidget extends React__default["default"].Component {
   static hasWidgetChanged(props, nextProps) {
     return !!(props && props.name && props.version && nextProps && nextProps.name && nextProps.version && (props.version !== nextProps.version || props.name !== nextProps.name));
   }
+
   /**
    * Validates widget properties, widget properties should not be an empty object.
    *
    * @param {object} widgetProperties
    * @return {boolean} validation result.
    */
-
-
   static validateProperties(widgetProperties) {
     return !!(widgetProperties && widgetProperties.name && widgetProperties.version);
   }
+
   /**
    * Widget SSR rendered html (from server response).
    */
-
-
   get html() {
     throw new Error('The html getter is abstract and must be overridden');
   }
+
   /**
    * Widget container element.
    */
-
-
   get container() {
     throw new Error('The container getter is abstract and must be overridden');
   }
-
   constructor(props) {
     super(props);
     this._isMounted = false;
     this._html = null;
   }
-
   componentDidMount() {
     this._isMounted = true;
   }
+
   /**
    * Renders fallback (children) when widget is already mounted
    * but not ready or any error has occurred.
    *
    * @return {React.ReactElement|null}
    */
-
-
   _renderFallback() {
     const {
       children
@@ -147,7 +133,6 @@ class AbstractMerkurWidget extends React__default["default"].Component {
     const {
       encounteredError = null
     } = this.state || {};
-
     if (typeof children === 'function') {
       return children({
         error: encounteredError
@@ -155,66 +140,58 @@ class AbstractMerkurWidget extends React__default["default"].Component {
     } else if ( /*#__PURE__*/React__default["default"].isValidElement(children)) {
       return children;
     }
-
     return null;
   }
+
   /**
    * Clears cached SSR rendered html.
    */
-
-
   _clearCachedHtml() {
     this._html = null;
   }
+
   /**
    * @return {boolean} true in browser environment.
    */
-
-
   _isClient() {
     return typeof window !== 'undefined' && typeof document !== 'undefined';
   }
+
   /**
    * @return {string} SSR rendered HTML, html from widgetProperties or ''.
    */
-
-
   _getWidgetHTML() {
     if (this._html !== null) {
       return this._html;
     }
-
     this._html = this.html || this._getSSRHTML();
     return this._html;
   }
+
   /**
    * Return server-side rendered html, if its the first render on client
    * after SSR.
    *
    * @return {string} server-side rendered html, if it's not available, return empty string.
    */
-
-
   _getSSRHTML() {
     if (!this._isMounted && this._isClient()) {
       return this.container?.children?.[0]?.outerHTML || '';
     }
-
     return '';
   }
+
   /**
    * Checks if it's the first render after SSR.
    *
    * @return {boolean} true in case of a first render after SSR, otherwise false.
    */
-
-
   _isSSRHydrate() {
     return this._getSSRHTML().length > 0;
   }
-
 }
 
+// error event name from @merkur/plugin-error
 const MERKUR_ERROR_EVENT_NAME = '@merkur/plugin-error.error';
 class MerkurWidget extends AbstractMerkurWidget {
   /**
@@ -223,15 +200,13 @@ class MerkurWidget extends AbstractMerkurWidget {
   get html() {
     return this.props.widgetProperties?.html || null;
   }
+
   /**
    * @inheritdoc
    */
-
-
   get container() {
     return this._isClient() && document?.querySelector(this.props.widgetProperties?.containerSelector) || null;
   }
-
   constructor(props) {
     super(props);
     this._widget = null;
@@ -242,6 +217,7 @@ class MerkurWidget extends AbstractMerkurWidget {
       cachedWidgetMeta: null
     };
   }
+
   /**
    * In case widget props change to new widget, we need to reset
    * state before next render. This enables us to immediately render
@@ -250,15 +226,14 @@ class MerkurWidget extends AbstractMerkurWidget {
    * @param {object} nextProps
    * @param {object} prevState
    */
-
-
   static getDerivedStateFromProps(nextProps, prevState) {
     if (prevState && nextProps && AbstractMerkurWidget.validateProperties(nextProps.widgetProperties)) {
       const {
         version,
         name
-      } = nextProps.widgetProperties; // Cache widget meta data (name & version)
+      } = nextProps.widgetProperties;
 
+      // Cache widget meta data (name & version)
       if (!prevState.cachedWidgetMeta) {
         return {
           cachedWidgetMeta: {
@@ -266,9 +241,9 @@ class MerkurWidget extends AbstractMerkurWidget {
             version
           }
         };
-      } // Replace cached widget meta data with new ones and reset state
-
+      }
 
+      // Replace cached widget meta data with new ones and reset state
       if (AbstractMerkurWidget.hasWidgetChanged(prevState.cachedWidgetMeta, nextProps.widgetProperties)) {
         return {
           encounteredError: false,
@@ -280,9 +255,9 @@ class MerkurWidget extends AbstractMerkurWidget {
         };
       }
     }
-
     return null;
   }
+
   /**
    * Component should be updated only in these cases:
    *  1) State of MerkurWidget has changed (excluding { @code this.state.cachedWidgetMeta }).
@@ -296,13 +271,10 @@ class MerkurWidget extends AbstractMerkurWidget {
    * @param {object} nextProps
    * @param {object} nextState
    */
-
-
   shouldComponentUpdate(nextProps, nextState) {
     if (this.state.assetsLoaded !== nextState.assetsLoaded || this.state.encounteredError !== nextState.encounteredError || !AbstractMerkurWidget.validateProperties(this.props.widgetProperties) || AbstractMerkurWidget.hasWidgetChanged(this.props.widgetProperties, nextProps.widgetProperties)) {
       return true;
     }
-
     if (this._widget && nextProps.widgetProperties && nextProps.widgetProperties.props) {
       if (Object.keys(nextProps.widgetProperties.props).length !== Object.keys(this.props.widgetProperties.props).length) {
         /**
@@ -311,7 +283,6 @@ class MerkurWidget extends AbstractMerkurWidget {
          * comparison below would not work.
          */
         this._widget.setProps(nextProps.widgetProperties.props);
-
         return false;
       } else {
         /**
@@ -321,43 +292,37 @@ class MerkurWidget extends AbstractMerkurWidget {
         for (let key in nextProps.widgetProperties.props) {
           if (!this.props.widgetProperties || !this.props.widgetProperties.props || nextProps.widgetProperties.props[key] !== this.props.widgetProperties.props[key]) {
             this._widget.setProps(nextProps.widgetProperties.props);
-
             return false;
           }
         }
       }
     }
-
     if (this._widget && nextProps.widgetProperties && nextProps.widgetProperties.state) {
       if (Object.keys(nextProps.widgetProperties.state).length !== Object.keys(this.props.widgetProperties.state).length) {
         this._widget.setState(nextProps.widgetProperties.state);
-
         return false;
       } else {
         for (let key in nextProps.widgetProperties.state) {
           if (!this.props.widgetProperties || !this.props.widgetProperties.state || nextProps.widgetProperties.state[key] !== this.props.widgetProperties.state[key]) {
             this._widget.setState(nextProps.widgetProperties.state);
-
             return false;
           }
         }
       }
     }
-
     return false;
   }
+
   /**
    * In case of mounting the component, we always try to first load
    * the widget assets. Be it first mount after SSR or mount after
    * first render on client.
    */
-
-
   componentDidMount() {
     super.componentDidMount();
-
     this._loadWidgetAssets();
   }
+
   /**
    * After the component has been updated, we still need to handle few situations.
    *  1) In case assets have been loaded, we need to mount the widget.
@@ -366,24 +331,22 @@ class MerkurWidget extends AbstractMerkurWidget {
    * @param {object} prevProps
    * @param {object} prevState
    */
-
-
   componentDidUpdate(prevProps, prevState) {
     const {
       widgetProperties: currentWidgetProperties
     } = this.props;
     const {
       widgetProperties: prevWidgetProperties
-    } = prevProps; // 1) Assets have been loaded => mount the widget
+    } = prevProps;
 
+    // 1) Assets have been loaded => mount the widget
     if (this.state.assetsLoaded && prevState.assetsLoaded !== this.state.assetsLoaded) {
       return this._mountWidget();
-    } // 2.1) In case we receive empty new properties, we need to cleanup.
-
+    }
 
+    // 2.1) In case we receive empty new properties, we need to cleanup.
     if (!AbstractMerkurWidget.validateProperties(currentWidgetProperties) && AbstractMerkurWidget.validateProperties(prevWidgetProperties)) {
       this._removeWidget();
-
       this.setState({
         encounteredError: false,
         assetsLoaded: false,
@@ -391,39 +354,35 @@ class MerkurWidget extends AbstractMerkurWidget {
       });
       return;
     }
+
     /**
      * 2.2) In case there were no widget properties before, we try to
      * initialize widget first by doing the same as if it first mounted
      * (loading assets into the DOM).
      */
-
-
     if (AbstractMerkurWidget.validateProperties(currentWidgetProperties) && !AbstractMerkurWidget.validateProperties(prevWidgetProperties)) {
       return this._loadWidgetAssets();
     }
+
     /**
      * 2.3) In case widget has changed, first we need to cleanup (remove previous widget),
      * and then we again try to initialize the new widget same way as
      * if it has mounted for the first time (if there are any new widget properties).
      */
-
-
     if (AbstractMerkurWidget.hasWidgetChanged(currentWidgetProperties, prevWidgetProperties)) {
       this._removeWidget();
-
       this._loadWidgetAssets();
-
       return;
     }
   }
+
   /**
    * In case of unmounting we only really need to do the cleanup.
    */
-
-
   componentWillUnmount() {
     this._removeWidget();
   }
+
   /**
    * There are two possible outputs from the render method:
    *  1) Fallback is rendered only, when assets are not yet loaded
@@ -434,8 +393,6 @@ class MerkurWidget extends AbstractMerkurWidget {
    *
    * @return {React.ReactElement|null}
    */
-
-
   render() {
     const {
       widgetProperties
@@ -444,30 +401,25 @@ class MerkurWidget extends AbstractMerkurWidget {
       encounteredError,
       assetsLoaded
     } = this.state;
-
     if (!AbstractMerkurWidget.validateProperties(widgetProperties) || encounteredError || this._isClient() && !this._isSSRHydrate() && !assetsLoaded) {
       return this._renderFallback();
     }
-
     if (!widgetProperties.containerSelector) {
       throw new Error(`The widgetProperties.containerSelector is not defined`);
     }
-
     const html = this._getWidgetHTML();
-
     return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, (!this._isClient() || this._isSSRHydrate()) && this._renderStyleAssets(), /*#__PURE__*/React__default["default"].createElement(WidgetWrapper$1, {
       containerSelector: widgetProperties.containerSelector,
       html: html
     }));
   }
+
   /**
    * Renders widget style assets inline. This is used on SSR
    * and in first render after SSR hydration.
    *
    * @return {[React.ReactElement]}
    */
-
-
   _renderStyleAssets() {
     const {
       widgetProperties
@@ -481,7 +433,6 @@ class MerkurWidget extends AbstractMerkurWidget {
             href: asset.source,
             key: key
           });
-
         case 'inlineStyle':
           return /*#__PURE__*/React__default["default"].createElement("style", {
             key: key,
@@ -492,56 +443,46 @@ class MerkurWidget extends AbstractMerkurWidget {
       }
     });
   }
-
   _handleError(error) {
-    if (typeof this.props.onError === 'function') {
-      this.props.onError(error);
+    if (typeof this.props.onError === 'function' && this.props.onError(error)) {
+      return;
     }
-
     this.setState({
       encounteredError: error
     });
   }
+
   /**
    * Handles widget unmounting and removal, while removing
    * event listeners, calling unmount on props and widget.
    */
-
-
   _removeWidget() {
     if (!this._widget) {
       return;
     }
-
     if (this.props.onWidgetUnmounting) {
       this.props.onWidgetUnmounting(this._widget);
-    } // widget might not be using @merkur/plugin-event-emitter
-
+    }
 
+    // widget might not be using @merkur/plugin-event-emitter
     if (typeof this._widget.off === 'function') {
       this._widget.off(MERKUR_ERROR_EVENT_NAME, this._handleClientError);
     }
-
     this._widget.unmount();
-
     this._widget = null;
-
     this._clearCachedHtml();
   }
+
   /**
    * Loads widget assets into page.
    */
-
-
   _loadWidgetAssets() {
     const {
       widgetProperties
     } = this.props;
-
     if (!AbstractMerkurWidget.validateProperties(widgetProperties) || this._widget) {
       return;
     }
-
     return Promise.all([integration.loadStyleAssets(widgetProperties.assets), integration.loadScriptAssets(widgetProperties.assets)]).then(() => new Promise(resolve => {
       this.setState({
         assetsLoaded: true
@@ -550,32 +491,27 @@ class MerkurWidget extends AbstractMerkurWidget {
       });
     })).catch(error => this._handleError(error));
   }
+
   /**
    * Creates and mounts widget instance after all resource loaded.
    */
-
-
   async _mountWidget() {
     const {
       widgetProperties,
       onWidgetMounted,
       debug = false
     } = this.props;
-
     if (!AbstractMerkurWidget.validateProperties(widgetProperties) || this._widget) {
       return;
     }
-
     try {
       const merkur = core.getMerkur();
       this._widget = await merkur.create(widgetProperties);
       await this._widget.mount();
-
       if (typeof this._widget.on === 'function') {
         // widget might not be using @merkur/plugin-event-emitter
         this._widget.on(MERKUR_ERROR_EVENT_NAME, this._handleClientError);
       }
-
       if (typeof onWidgetMounted === 'function') {
         onWidgetMounted(this._widget);
       }
@@ -585,7 +521,6 @@ class MerkurWidget extends AbstractMerkurWidget {
       }
     }
   }
-
 }
 
 class MerkurSlot extends AbstractMerkurWidget {
@@ -600,22 +535,21 @@ class MerkurSlot extends AbstractMerkurWidget {
     } = this.props;
     return widgetProperties?.slot?.[slotName] ?? null;
   }
+
   /**
    * @inheritdoc
    */
-
-
   get html() {
     return this.slot?.html || null;
   }
+
   /**
    * @inheritdoc
    */
-
-
   get container() {
     return this._isClient() && document?.querySelector(this.slot?.containerSelector) || null;
   }
+
   /**
    * The component should update only in following cases:
    *  1) Component has no props.widgetProperties.
@@ -623,23 +557,19 @@ class MerkurSlot extends AbstractMerkurWidget {
    *
    * @param {object} nextProps
    */
-
-
   shouldComponentUpdate(nextProps) {
     if (!AbstractMerkurWidget.validateProperties(this.props.widgetProperties) || !AbstractMerkurWidget.validateProperties(nextProps.widgetProperties) || AbstractMerkurWidget.hasWidgetChanged(this.props.widgetProperties, nextProps.widgetProperties)) {
       return true;
     }
-
     return false;
   }
+
   /**
    * Cleanup when we receive empty widget properties.
    *
    * @param {object} prevProps
    * @param {object} prevState
    */
-
-
   componentDidUpdate(prevProps) {
     const {
       widgetProperties: currentWidgetProperties
@@ -647,21 +577,19 @@ class MerkurSlot extends AbstractMerkurWidget {
     const {
       widgetProperties: prevWidgetProperties
     } = prevProps;
-
     if (!AbstractMerkurWidget.validateProperties(currentWidgetProperties) && AbstractMerkurWidget.validateProperties(prevWidgetProperties)) {
       this._removeSlot();
-
       return;
     }
   }
+
   /**
    * Cleanup when unmounting
    */
-
-
   componentWillUnmount() {
     this._removeSlot();
   }
+
   /**
    * There are two possible outputs from the render method:
    *  1) Fallback is rendered only, when there are no widget properties.
@@ -671,20 +599,17 @@ class MerkurSlot extends AbstractMerkurWidget {
    *
    * @return {React.ReactElement|null}
    */
-
-
   render() {
     const {
       widgetProperties
     } = this.props;
-
     if (!AbstractMerkurWidget.validateProperties(widgetProperties) || !this.slot) {
       return this._renderFallback();
     }
-
     if (!this.slot['containerSelector']) {
       throw new Error(`The ${this.slot.name}.containerSelector is not defined`);
     }
+
     /**
      * In case of SPA rendering, we render fallback (which can also display
      * loading placeholders) inside the component wrapper, until the widget
@@ -692,8 +617,6 @@ class MerkurSlot extends AbstractMerkurWidget {
      * of the wrapper (containing fallback) with slot markup. In case of SPA
      * we also don't want to render html to prevent FOUC.
      */
-
-
     const isInitialSPARender = this._isClient() && !this._isSSRHydrate();
     const html = isInitialSPARender ? '' : this._getWidgetHTML();
     return /*#__PURE__*/React__default["default"].createElement(WidgetWrapper$1, {
@@ -701,15 +624,13 @@ class MerkurSlot extends AbstractMerkurWidget {
       html: html
     }, isInitialSPARender && this._renderFallback());
   }
+
   /**
    * Cleanup after slot removal.
    */
-
-
   _removeSlot() {
     this._clearCachedHtml();
   }
-
 }
 
 exports.MerkurSlot = MerkurSlot;