feat: cherry pick component constructor / event lifecycle cleanup wor…

…k related to larger work in #1579

docs-site/src/components/schema-form/schema-form.js

@@ -118,7 +118,7 @@ export default class SchemaForm extends withContext(withPreact()) {
         schema={this.state.schema}
         formData={this.state.formData}
         uiSchema={uiSchema}
-        // widgets={customWidgets} 
+        // widgets={customWidgets}
         onChange={data => this.onFormChange(data)}
         onError={(data) => console.error('Error in Schema Form', formData)}>
       </Form>

packages/base-element/src/BoltActionElement.js

@@ -21,11 +21,12 @@ class BoltActionElement extends BoltElement {
     };
   }
 
-  constructor() {
-    super();
-    this.rootElementTags = [];
-    this.delegateFocus = true;
-    this.clickHandler = this.clickHandler.bind(this);
+  constructor(self) {
+    self = super(self);
+    self.rootElementTags = [];
+    self.delegateFocus = true;
+    self.clickHandler = self.clickHandler.bind(self);
+    return self;
   }
 
   connectedCallback() {

packages/components/bolt-blockquote/src/blockquote.js

@@ -32,7 +32,7 @@ class BoltBlockquote extends withLitHtml() {
   constructor(self) {
     self = super(self);
     self.useShadow = hasNativeShadowDomSupport;
-    self.schema = this.getModifiedSchema(schema);
+    self.schema = self.getModifiedSchema(schema);
     return self;
   }
 

packages/components/bolt-copy-to-clipboard/src/copy-to-clipboard.standalone.js

@@ -9,7 +9,7 @@ class BoltCopyToClipboard extends withLitHtml() {
 
   constructor(self) {
     self = super(self);
-    this.useShadow = false;
+    self.useShadow = false;
     return self;
   }
 

packages/components/bolt-device-viewer/src/device-viewer.standalone.js

@@ -40,7 +40,7 @@ class BoltDeviceViewer extends withLitHtml() {
 
   constructor(self) {
     self = super(self);
-    this.useShadow = hasNativeShadowDomSupport;
+    self.useShadow = hasNativeShadowDomSupport;
     return self;
   }
 

packages/components/bolt-dropdown/dropdown.js

@@ -32,14 +32,14 @@ class BoltDropdown extends withLitHtml() {
   constructor(self) {
     self = super(self);
 
-    this.useShadow = hasNativeShadowDomSupport;
+    self.useShadow = hasNativeShadowDomSupport;
 
-    this.state = {
-      open: this.props.autoOpen ? this.props.autoOpen : false,
-      collapse: this.props.collapse ? this.props.collapse : false,
+    self.state = {
+      open: self.props.autoOpen ? self.props.autoOpen : false,
+      collapse: self.props.collapse ? self.props.collapse : false,
     };
 
-    this.uuid = '12345';
+    self.uuid = '12345';
     return self;
   }
 

packages/components/bolt-figure/src/figure.js

@@ -16,12 +16,6 @@ let cx = classNames.bind(styles);
 class BoltFigure extends withLitHtml() {
   static is = 'bolt-figure';
 
-  // https://github.com/WebReflection/document-register-element#upgrading-the-constructor-context
-  constructor(self) {
-    self = super(self);
-    return self;
-  }
-
   render() {
     const classes = cx('c-bolt-figure');
 

packages/components/bolt-icon/src/icon.standalone.js

@@ -2,7 +2,6 @@ import {
   colorContrast,
   css,
   define,
-  hasNativeShadowDomSupport,
   props,
   rgb2hex,
   supportsCSSVars,
@@ -33,15 +32,10 @@ class BoltIcon extends withPreact() {
     contrastColor: props.string,
   };
 
-  constructor(self) {
-    self = super(self);
-    this.useShadow = hasNativeShadowDomSupport;
-    this.useCssVars = supportsCSSVars;
-    return self;
-  }
-
-  connecting() {
+  connectedCallback() {
+    super.connectedCallback && super.connectedCallback();
     const elem = this;
+    this.useCssVars = supportsCSSVars;
 
     this.state = {
       primaryColor: 'var(--bolt-theme-icon, currentColor)',
@@ -67,7 +61,7 @@ class BoltIcon extends withPreact() {
         }
       };
 
-      const colorObserver = PubSub.subscribe(
+      this.colorObserver = PubSub.subscribe(
         'component.icon',
         checkIfColorChanged,
       );
@@ -86,6 +80,14 @@ class BoltIcon extends withPreact() {
     }
   }
 
+  disconnectedCallback() {
+    super.disconnectedCallback && super.disconnectedCallback();
+
+    if (this.colorObserver) {
+      PubSub.unsubscribe(this.colorObserver);
+    }
+  }
+
   render() {
     const { size, name, color, background } = this.props;
     const { primaryColor, secondaryColor } = this.state;

packages/components/bolt-image/src/image.js

@@ -75,16 +75,17 @@ class BoltImage extends BoltElement {
     };
   }
 
-  constructor() {
-    super();
-    this.onResize = this.onResize.bind(this);
-    this.onLazyLoaded = this.onLazyLoaded.bind(this);
-    this.initialClasses = [];
-    this.valign = 'center';
-    this.placeholderImage =
+  constructor(self) {
+    self = super(self);
+    self.onResize = self.onResize.bind(self);
+    self.onLazyLoaded = self.onLazyLoaded.bind(self);
+    self.initialClasses = [];
+    self.valign = 'center';
+    self.placeholderImage =
       'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
-    this.sizes = 'auto';
-    this.ratio = 'auto';
+    self.sizes = 'auto';
+    self.ratio = 'auto';
+    return self;
   }
 
   disconnectedCallback() {

packages/components/bolt-modal/src/modal.js

@@ -51,9 +51,9 @@ class BoltModal extends withLitHtml() {
     self = super(self);
     self.useShadow = hasNativeShadowDomSupport;
     self.schema = schema;
-    self.show = self.show.bind(this);
-    self.hide = self.hide.bind(this);
-    self._handleKeyPresseskeypress = this._handleKeyPresseskeypress.bind(this);
+    self.show = self.show.bind(self);
+    self.hide = self.hide.bind(self);
+    self._handleKeyPresseskeypress = self._handleKeyPresseskeypress.bind(self);
     self._noBodyScroll = false; // Internal switch to enable 'no-body-scroll' feature which is not ready for release
 
     return self;

packages/components/bolt-nav-priority/nav-priority.js

@@ -20,15 +20,13 @@ class BoltNavPriority extends withLitHtml() {
 
   constructor(self) {
     self = super(self);
-    this.activeLink = false;
-    this.useShadow = false;
-    this.isReady = false;
-    this.transitionEvent = whichTransitionEvent();
+    self.activeLink = false;
+    self.useShadow = false;
+    self.isReady = false;
+    self.transitionEvent = whichTransitionEvent();
 
-    this._adaptPriorityNav = this._adaptPriorityNav.bind(this);
-    this._handleDropdownToggle = this._handleDropdownToggle.bind(this);
-
-    return self;
+    self._adaptPriorityNav = self._adaptPriorityNav.bind(self);
+    self._handleDropdownToggle = self._handleDropdownToggle.bind(self);
   }
 
   static props = {
@@ -52,7 +50,7 @@ class BoltNavPriority extends withLitHtml() {
         <li class="c-bolt-nav-priority__item c-bolt-nav-priority__show-more">
           <button type="button" aria-haspopup="true" aria-expanded="false" class="c-bolt-nav-priority__button c-bolt-nav-priority__show-button">
             <span class="c-bolt-nav-priority__show-text">
-              ${this.props.moreText ? this.props.moreText : 'More'}
+              ${this.moreText ? this.moreText : 'More'}
             </span>
             <span class="c-bolt-nav-priority__show-icon">
               <bolt-icon name="chevron-down"></bolt-icon>

packages/components/bolt-navlink/navlink.js

@@ -20,9 +20,9 @@ class BoltNavLink extends withLitHtml() {
 
   constructor(self) {
     self = super(self);
-    this.activeClass = 'is-active';
-    this.useShadow = false; // just-in-case workaround given that the current <bolt-navlink> doesn't actually render any HTML...
-    this.dropdownLinkClass = 'is-dropdown-link';
+    self.activeClass = 'is-active';
+    self.useShadow = false; // just-in-case workaround given that the current <bolt-navlink> doesn't actually render any HTML...
+    self.dropdownLinkClass = 'is-dropdown-link';
     return self;
   }
 
@@ -130,8 +130,8 @@ class BoltNavLink extends withLitHtml() {
     this._shadowLink.classList.remove(this.activeClass);
   }
 
-  connecting() {
-    super.connecting && super.connecting();
+  connectedCallback() {
+    super.connectedCallback && super.connectedCallback();
     this.addEventListener('click', this.onClick);
 
     this._shadowLink = this.querySelector('a');
@@ -147,8 +147,8 @@ class BoltNavLink extends withLitHtml() {
     }
   }
 
-  disconnecting() {
-    super.disconnecting && super.disconnecting();
+  disconnectedCallback() {
+    super.disconnectedCallback && super.disconnectedCallback();
     this.removeEventListener('click', this.onClick);
   }
 }

packages/components/bolt-placeholder/placeholder.standalone.js

@@ -20,7 +20,7 @@ class BoltPlaceholder extends withLitHtml() {
   // https://github.com/WebReflection/document-register-element#upgrading-the-constructor-context
   constructor(self) {
     self = super(self);
-    this.useShadow = hasNativeShadowDomSupport;
+    self.useShadow = hasNativeShadowDomSupport;
     return self;
   }
 

packages/components/bolt-ratio/src/ratio.js

@@ -33,8 +33,8 @@ class BoltRatio extends BoltElement {
     };
   }
 
-  constructor() {
-    super();
+  connectedCallback() {
+    super.connectedCallback && super.connectedCallback();
     this.noCssVars = supportsCSSVars ? false : true;
   }
 

packages/components/bolt-stack/src/stack.js

@@ -20,13 +20,6 @@ class BoltStack extends withLitHtml() {
     },
   };
 
-  // https://github.com/WebReflection/document-register-element#upgrading-the-constructor-context
-  constructor(self) {
-    self = super(self);
-    self.useShadow = hasNativeShadowDomSupport;
-    return self;
-  }
-
   render() {
     // validate the original prop data passed along -- returns back the validated data w/ added default values
     const { disabled } = this.validateProps(this.props);

packages/components/bolt-text/src/text.js

@@ -47,7 +47,7 @@ class BoltText extends withLitHtml() {
 
   constructor(self) {
     self = super(self);
-    this.useShadow = hasNativeShadowDomSupport;
+    self.useShadow = hasNativeShadowDomSupport;
     return self;
   }
 

packages/components/bolt-video/src/video.standalone.js

@@ -49,27 +49,26 @@ class BoltVideo extends withPreact() {
     self = super(self);
     self.useShadow = false;
 
-    this.defaultPlugins = ['playback'];
+    self.defaultPlugins = ['playback'];
 
     index += 1;
 
     // These bindings are necessary to make `this` work in the callback
-    this.onPlay = this.onPlay.bind(this);
-    this.onPause = this.onPause.bind(this);
-    this.onEnded = this.onEnded.bind(this);
-    this.onDurationChange = this.onDurationChange.bind(this);
-    this.onSeeked = this.onSeeked.bind(this);
-    this.handleClose = this.handleClose.bind(this);
-    this.collapseOnClickAway = this.collapseOnClickAway.bind(this);
+    self.onPlay = self.onPlay.bind(self);
+    self.onPause = self.onPause.bind(self);
+    self.onEnded = self.onEnded.bind(self);
+    self.onDurationChange = self.onDurationChange.bind(self);
+    self.onSeeked = self.onSeeked.bind(self);
+    self.handleClose = self.handleClose.bind(self);
+    self.collapseOnClickAway = self.collapseOnClickAway.bind(self);
 
-    // BoltVideo.globalErrors.forEach(this.props.onError);
+    // BoltVideo.globalErrors.forEach(self.props.onError);
 
-    this.shareDescription = this.shareDescription || 'Share This Video';
+    self.shareDescription = self.shareDescription || 'Share This Video';
 
     // Ensure that 'this' inside the _onWindowResize event handler refers to <bolt-nav-link>
     // even if the handler is attached to another element (window in this case)
-    this._onWindowResize = this._onWindowResize.bind(this);
-
+    self._onWindowResize = self._onWindowResize.bind(self);
     return self;
   }
 

packages/micro-journeys/src/interactive-pathways.js

@@ -39,26 +39,26 @@ class BoltInteractivePathways extends withLitContext() {
     self._hasBeenInViewport = false;
     self._isVisible = false;
     self.dropdownActive = false;
-    self._handleClosingEvent = this._handleClosingEvent.bind(this);
+    self._handleClosingEvent = self._handleClosingEvent.bind(self);
     self._isReady = false;
 
-    this.checkChildrenAndRender = debounce(done => {
-      this.pathways = this.getPathways();
-      this.triggerUpdate();
+    self.checkChildrenAndRender = debounce(done => {
+      self.pathways = self.getPathways();
+      self.triggerUpdate();
       // using callback since debounced promises require a different library that's not already in Bolt
       if (done) setTimeout(done, 0);
     }, 150);
 
     self.addEventListener(
       'bolt-interactive-pathway:connected',
-      this.handlePathwayConnect,
+      self.handlePathwayConnect,
     );
     self.addEventListener(
       'bolt-interactive-pathway:disconnected',
-      this.handlePathwayDisconnect,
+      self.handlePathwayDisconnect,
     );
     self.addEventListener('bolt-interactive-pathway:title-updated', () => {
-      this.checkChildrenAndRender();
+      self.checkChildrenAndRender();
     });
 
     return self;

packages/micro-journeys/src/two-character-layout.js

@@ -33,7 +33,7 @@ class BoltTwoCharacterLayout extends withLitHtml() {
   constructor(self) {
     self = super(self);
     self.useShadow = hasNativeShadowDomSupport;
-    self.hasConnection = !!this.querySelector(boltConnectionIs);
+    self.hasConnection = !!self.querySelector(boltConnectionIs);
     self.requiredComponentCount = self.hasConnection ? 3 : 2;
     self.renderedComponentCount = 0;
     self.isInitialRender = true;