fix: remove component from DOM on unmount

appbaseio · Dec 16, 2022 · fb18f0d · fb18f0d
1 parent 2262913
commit fb18f0d
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 12 deletions.
diff --git a/packages/vue/src/components/Provider.js b/packages/vue/src/components/Provider.js
@@ -7,16 +7,16 @@ export default {
 			validator(store) {
 				if (!store.dispatch && !store.subscribe && !store.getState) {
 					throw new Error(
-						'[reactivesearch-vue] - store provided is not a valid redux store'
+						'[reactivesearch-vue] - store provided is not a valid redux store',
 					);
 				}
 				return true;
-			}
+			},
 		},
 		analyticsRef: {
 			type: Object,
-			required: true,
-		}
+			required: false,
+		},
 	},
 	provide() {
 		return {
@@ -29,5 +29,5 @@ export default {
 			return h('div', this.$slots.default);
 		}
 		return this.$slots.default[0];
-	}
+	},
 };
diff --git a/packages/vue/src/components/basic/ComponentWrapper.jsx b/packages/vue/src/components/basic/ComponentWrapper.jsx
@@ -34,8 +34,9 @@ const ComponentWrapper = (
 	},
 ) => ({
 	name: 'ComponentWrapper',
+	$timestamp: null,
 	props: {
-		destroyOnUnmount: VueTypes.bool.def(false),
+		destroyOnUnmount: VueTypes.bool.def(true),
 	},
 	created() {
 		// clone the props for component it is needed because attrs gets changed on time
@@ -48,6 +49,7 @@ const ComponentWrapper = (
 		this.componentProps = parsedProps;
 		this.componentId = this.componentProps.componentId;
 		this.react = this.componentProps.react;
+		this.$timestamp = new Date().getTime();
 	},
 	beforeMount() {
 		let components = [];
@@ -100,10 +102,16 @@ const ComponentWrapper = (
 	},
 	beforeDestroy() {
 		if (this.destroyOnUnmount) {
+			let registeredComponentsTimestamps = {};
+			if (this.$$store) {
+				({ registeredComponentsTimestamps } = this.$$store.getState());
+			}
 			// Unregister components
-			this.removeComponent(this.componentId);
-			if (this.internalComponent) {
-				this.removeComponent(this.internalComponent);
+			if (registeredComponentsTimestamps[this.componentId] === this.$timestamp) {
+				this.removeComponent(this.componentId);
+				if (this.internalComponent) {
+					this.removeComponent(this.internalComponent);
+				}
 			}
 		}
 	},

diff --git a/packages/web/src/components/basic/ComponentWrapper.js b/packages/web/src/components/basic/ComponentWrapper.js
@@ -37,6 +37,7 @@ class ComponentWrapper extends React.Component {
 
 	constructor(props, context) {
 		super(props, context);
+		this._timestamp = new Date().getTime();
 		// Register a component only when `destroyOnUnmount` is `true`
 		// or component is not present in store
 		let components = [];
@@ -102,9 +103,16 @@ class ComponentWrapper extends React.Component {
 		// Unregister components
 		const { componentId, destroyOnUnmount } = this.props;
 		if (destroyOnUnmount) {
-			this.props.removeComponent(componentId);
-			if (this.internalComponent) {
-				this.props.removeComponent(this.internalComponent);
+			let registeredComponentsTimestamps = {};
+			if (this.context && this.context.getState) {
+				({ registeredComponentsTimestamps } = this.context.getState());
+			}
+			// Unregister components
+			if (registeredComponentsTimestamps[componentId] === this.$timestamp) {
+				this.props.removeComponent(componentId);
+				if (this.internalComponent) {
+					this.props.removeComponent(this.internalComponent);
+				}
 			}
 		}
 	}
@@ -155,6 +163,7 @@ ComponentWrapper.propTypes = {
 
 ComponentWrapper.defaultProps = {
 	setReact: true,
+	destroyOnUnmount: true,
 };
 
 const mapDispatchToProps = (dispatch, ownProps) => ({