Wrapping existing connectedCallback and disconnectedCall

Wrapping existing connectedCallback and disconnectedCall for establishing state management.

Author: Sheeshpaul Kamboj

Diff for: package-lock.json

@@ -35,29 +35,29 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "@babel/core": "^7.8.4",
+    "@babel/core": "^7.8.7",
     "@babel/plugin-proposal-class-properties": "^7.8.3",
     "@babel/plugin-proposal-object-rest-spread": "^7.8.3",
-    "@babel/preset-env": "^7.8.4",
+    "@babel/preset-env": "^7.8.7",
     "@babel/preset-typescript": "^7.8.3",
-    "@types/jest": "^25.1.3",
-    "@typescript-eslint/eslint-plugin": "^2.20.0",
-    "@typescript-eslint/parser": "^2.20.0",
+    "@types/jest": "^25.1.4",
+    "@typescript-eslint/eslint-plugin": "^2.23.0",
+    "@typescript-eslint/parser": "^2.23.0",
     "babel-jest": "^25.1.0",
     "eslint": "^6.8.0",
     "eslint-config-prettier": "^6.10.0",
     "eslint-plugin-prettier": "^3.1.2",
     "jest": "^25.1.0",
     "prettier": "^1.19.1",
-    "rimraf": "^3.0.1",
-    "rollup": "^1.30.1",
-    "rollup-plugin-babel": "^4.3.3",
+    "rimraf": "^3.0.2",
+    "rollup": "^2.0.6",
+    "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-replace": "^2.2.0",
     "rollup-plugin-uglify-es": "0.0.1",
-    "tslib": "^1.10.0",
-    "typescript": "^3.8.2"
+    "tslib": "^1.11.1",
+    "typescript": "^3.8.3"
   },
   "npmName": "webcomponents-redux",
   "npmFileMap": [

Diff for: package.json

@@ -31,13 +31,11 @@ export function connect(className: Function, mixinStore: object): void {
 
     Object.assign(className.prototype, mixinWebcomponent);
 
-    if (!className.prototype.hasOwnProperty('connectedCallback')) {
-        Object.assign(className.prototype, mixinConnectedCallback);
-    }
+    className.prototype.mixinExistingConnectedCallback = className.prototype.connectedCallback;
+    Object.assign(className.prototype, mixinConnectedCallback);
 
-    if (!className.prototype.hasOwnProperty('disconnectedCallback')) {
-        Object.assign(className.prototype, mixinDisconnectedCallback);
-    }
+    className.prototype.mixinExistingDisconnectedCallback = className.prototype.disconnectedCallback;
+    Object.assign(className.prototype, mixinDisconnectedCallback);
 
     className.prototype.mixinStore = mixinStore;
 }

Diff for: src/connect.ts

@@ -6,21 +6,17 @@ interface MixinConnectedCallback {
 }
 
 /**
- * The mixin for generic connectedCallback implementation.
+ * The mixin for connectedCallback implementation.
  */
 export const mixinConnectedCallback: MixinConnectedCallback = {
     /**
-     * Generic implementation for Web Component connectedCallback lifecycle event.
-     * Calls the super and connects to Redux store.
+     * Calls the existing connectedCallback lifecycle event when present, and connects to Redux store.
      */
     connectedCallback() {
-        // Issue is super is not present here
-        // Walking the prototype chain to call the connectedCallback on parent (super)
-
         // @ts-ignore
-        this.__proto__.__proto__.connectedCallback.call(this);
+        this.mixinExistingConnectedCallback && this.mixinExistingConnectedCallback();
 
         // @ts-ignore
-        this.connectState();
+        this.mixinConnectState();
     },
 };

Diff for: src/mixin-connectedcallback.ts

@@ -6,21 +6,17 @@ interface MixinDisconnectedCallback {
 }
 
 /**
- * The mixin for generic disconnectedCallback implementation.
+ * The mixin for disconnectedCallback implementation.
  */
 export const mixinDisconnectedCallback: MixinDisconnectedCallback = {
     /**
-     * Generic implementation for Web Component disconnectedCallback lifecycle event.
-     * Calls the super and disconnect with Redux store.
+     * Calls the existing disconnectedCallback lifecycle event, and disconnect with Redux store.
      */
     disconnectedCallback() {
-        // Issue is super is not present here
-        // Walking the prototype chain to call the connectedCallback on parent (super)
+        // @ts-ignore
+        this.mixinExistingDisconnectedCallback && this.mixinExistingDisconnectedCallback();
 
         //@ts-ignore
-        this.__proto__.__proto__.disconnectedCallback.call(this);
-
-        //@ts-ignore
-        this.disconnectState();
+        this.mixinDisconnectState();
     },
 };

Diff for: src/mixin-disconnectedcallback.ts

@@ -14,9 +14,11 @@ interface MixinWebComponent {
     mixinStore: null | Store;
     mixinState: undefined | object;
     mixinUnsubscribeStore: null | Function;
-    connectState: Function;
-    disconnectState: Function;
-    onMixinStateChange: Function;
+    mixinExistingConnectedCallback: null | Function;
+    mixinExistingDisconnectedCallback: null | Function;
+    mixinConnectState: Function;
+    mixinDisconnectState: Function;
+    mixinOnStateChange: Function;
     mapDispatchToProps?: Function;
     mapStateToProps?: Function;
 }
@@ -40,10 +42,20 @@ export const mixinWebcomponent: MixinWebComponent = {
      */
     mixinUnsubscribeStore: null,
 
+    /**
+     * The existing connectedCallback function.
+     */
+    mixinExistingConnectedCallback: null,
+
+    /**
+     * The existing disconnectedCallback function.
+     */
+    mixinExistingDisconnectedCallback: null,
+
     /**
      * Sets up state change and dispatch functionality.
      */
-    connectState() {
+    mixinConnectState() {
         // Step 1: To the instance add dispatch functions as properties
         if (this.mapDispatchToProps) {
             const obj = this.mapDispatchToProps(this.mixinStore!.dispatch);
@@ -64,15 +76,15 @@ export const mixinWebcomponent: MixinWebComponent = {
         // Step 3: Save the current state and subscribe to store change event
         this.mixinState = nextState;
 
-        this.onMixinStateChange = this.onMixinStateChange.bind(this);
+        this.mixinOnStateChange = this.mixinOnStateChange.bind(this);
 
-        this.mixinUnsubscribeStore = this.mixinStore!.subscribe(this.onMixinStateChange);
+        this.mixinUnsubscribeStore = this.mixinStore!.subscribe(this.mixinOnStateChange);
     },
 
     /**
      * Unsubscribe from store change events.
      */
-    disconnectState() {
+    mixinDisconnectState() {
         if (this.mixinUnsubscribeStore) {
             this.mixinUnsubscribeStore();
             this.mixinUnsubscribeStore = null;
@@ -82,7 +94,7 @@ export const mixinWebcomponent: MixinWebComponent = {
     /**
      * Upon state change, call mapStateToProps, only when next state is different than current state.
      */
-    onMixinStateChange() {
+    mixinOnStateChange() {
         const nextState = this.mixinStore!.getState();
 
         if (nextState === this.mixinState) {

Diff for: src/mixin-webcomponent.ts

@@ -9,16 +9,20 @@ describe('connect', () => {
         connect(Component, {});
 
         // Verify
-        const hasConnectState = Component.prototype.hasOwnProperty('connectState');
-        const hasDisconnectState = Component.prototype.hasOwnProperty('disconnectState');
-        const hasOnMixinStateChange = Component.prototype.hasOwnProperty('onMixinStateChange');
+        const hasMixinConnectState = Component.prototype.hasOwnProperty('mixinConnectState');
+        const hasMixinDisconnectState = Component.prototype.hasOwnProperty('mixinDisconnectState');
+        const hasMixinOnStateChange = Component.prototype.hasOwnProperty('mixinOnStateChange');
+        const hasConnectedCallback = Component.prototype.hasOwnProperty('connectedCallback');
+        const hasDisconnectedCallback = Component.prototype.hasOwnProperty('disconnectedCallback');
 
-        expect(hasConnectState).toBe(true);
-        expect(hasDisconnectState).toBe(true);
-        expect(hasOnMixinStateChange).toBe(true);
+        expect(hasMixinConnectState).toBe(true);
+        expect(hasMixinDisconnectState).toBe(true);
+        expect(hasMixinOnStateChange).toBe(true);
+        expect(hasConnectedCallback).toBe(true);
+        expect(hasDisconnectedCallback).toBe(true);
     });
 
-    it('should add connectedCallback', () => {
+    it('should add connectedCallback, when there is no existing connectedCallback', () => {
         // Setup
         class Component {}
 
@@ -27,30 +31,34 @@ describe('connect', () => {
 
         // Verify
         const hasConnectedCallback = Component.prototype.hasOwnProperty('connectedCallback');
-
         expect(hasConnectedCallback).toBe(true);
+
+        // @ts-ignore
+        expect(Component.prototype.mixinExistingConnectedCallback).toBe(undefined);
     });
 
-    it('should not add connectedCallback', () => {
+    it('should add connectedCallback keeping the existing connectedCallback', () => {
         // Setup
         class Component {
             connectedCallback(): void {
                 // The empty implementation
             }
         }
 
-        const before = Component.prototype.connectedCallback;
+        const existingConnectedCallback = Component.prototype.connectedCallback;
 
         // Act
         connect(Component, {});
 
         // Verify
-        const after = Component.prototype.connectedCallback;
+        const hasConnectedCallback = Component.prototype.hasOwnProperty('connectedCallback');
+        expect(hasConnectedCallback).toBe(true);
 
-        expect(after).toBe(before);
+        // @ts-ignore
+        expect(Component.prototype.mixinExistingConnectedCallback).toBe(existingConnectedCallback);
     });
 
-    it('should add disconnectedCallback', () => {
+    it('should add disconnectedCallback, when there is no existing disconnectedCallback', () => {
         // Setup
         class Component {}
 
@@ -59,26 +67,30 @@ describe('connect', () => {
 
         // Verify
         const hasDisconnectedCallback = Component.prototype.hasOwnProperty('disconnectedCallback');
-
         expect(hasDisconnectedCallback).toBe(true);
+
+        // @ts-ignore
+        expect(Component.prototype.mixinExistingDisconnectedCallback).toBe(undefined);
     });
 
-    it('should not add disconnectedCallback', () => {
+    it('should add disconnectedCallback keeping the exsiting disconnectedCallback', () => {
         // Setup
         class Component {
             disconnectedCallback(): void {
                 // The empty implementation
             }
         }
 
-        const before = Component.prototype.disconnectedCallback;
+        const existingDisconnectedCallback = Component.prototype.disconnectedCallback;
 
         // Act
         connect(Component, {});
 
         // Verify
-        const after = Component.prototype.disconnectedCallback;
+        const hasDisconnectedCallback = Component.prototype.hasOwnProperty('disconnectedCallback');
+        expect(hasDisconnectedCallback).toBe(true);
 
-        expect(after).toBe(before);
+        // @ts-ignore
+        expect(Component.prototype.mixinExistingDisconnectedCallback).toBe(existingDisconnectedCallback)
     });
 });