fix(js): clean environment effects

algolia · Nov 14, 2020 · eec80d2 · eec80d2
1 parent 82e6f4e
commit eec80d2
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 22 deletions.
diff --git a/packages/autocomplete-js/src/autocomplete.ts b/packages/autocomplete-js/src/autocomplete.ts
@@ -23,7 +23,7 @@ export function autocomplete<TItem>({
   classNames = {},
   ...props
 }: AutocompleteOptions<TItem>): AutocompleteApi<TItem> {
-  const { effects, triggerEffect } = createEffectWrapper();
+  const { runEffect, cleanEffects } = createEffectWrapper();
   const autocomplete = createAutocomplete<TItem>({
     ...props,
     onStateChange(options) {
@@ -74,15 +74,33 @@ export function autocomplete<TItem>({
     });
   }
 
-  function destroy() {
-    effects.forEach((cleanUp) => cleanUp());
-  }
-
   requestAnimationFrame(() => {
     setPanelPosition();
   });
 
-  triggerEffect(() => {
+  runEffect(() => {
+    const environmentProps = autocomplete.getEnvironmentProps({
+      searchBoxElement: form,
+      panelElement: panel,
+      inputElement: input,
+    });
+
+    setProperties(window as any, environmentProps);
+
+    return () => {
+      setProperties(
+        window as any,
+        Object.keys(environmentProps).reduce((acc, key) => {
+          return {
+            ...acc,
+            [key]: undefined,
+          };
+        }, {})
+      );
+    };
+  });
+
+  runEffect(() => {
     const containerElement = getHTMLElement(container);
     containerElement.appendChild(root);
 
@@ -91,7 +109,7 @@ export function autocomplete<TItem>({
     };
   });
 
-  triggerEffect(() => {
+  runEffect(() => {
     const onResize = debounce(() => {
       setPanelPosition();
     }, 100);
@@ -111,6 +129,6 @@ export function autocomplete<TItem>({
     setStatus: autocomplete.setStatus,
     setContext: autocomplete.setContext,
     refresh: autocomplete.refresh,
-    destroy,
+    destroy: cleanEffects,
   };
 }
diff --git a/packages/autocomplete-js/src/createAutocompleteDom.ts b/packages/autocomplete-js/src/createAutocompleteDom.ts
@@ -9,7 +9,6 @@ type CreateDomProps<TItem> = AutocompleteCoreApi<TItem> & {
 };
 
 export function createAutocompleteDom<TItem>({
-  getEnvironmentProps,
   getRootProps,
   getFormProps,
   getLabelProps,
@@ -25,14 +24,6 @@ export function createAutocompleteDom<TItem>({
   const resetButton = document.createElement('button');
   const panel = document.createElement('div');
 
-  setProperties(
-    window as any,
-    getEnvironmentProps({
-      searchBoxElement: form,
-      panelElement: panel,
-      inputElement: input,
-    })
-  );
   setProperties(root, {
     ...getRootProps(),
     class: concatClassNames(['aa-Autocomplete', classNames.root]),

diff --git a/packages/autocomplete-js/src/createEffectWrapper.ts b/packages/autocomplete-js/src/createEffectWrapper.ts
@@ -1,13 +1,13 @@
 type Effect = () => void;
 type EffectWrapper = {
-  effects: Effect[];
-  triggerEffect(fn: () => Effect): void;
+  runEffect(fn: () => Effect): void;
+  cleanEffects(): void;
 };
 
 export function createEffectWrapper(): EffectWrapper {
   let effects: Effect[] = [];
 
-  const triggerEffect: EffectWrapper['triggerEffect'] = (fn: () => Effect) => {
+  const runEffect: EffectWrapper['runEffect'] = (fn: () => Effect) => {
     const unsubscribe = fn();
 
     function cleanUp() {
@@ -18,8 +18,12 @@ export function createEffectWrapper(): EffectWrapper {
     effects.push(cleanUp);
   };
 
+  function cleanEffects() {
+    effects.forEach((cleanUp) => cleanUp());
+  }
+
   return {
-    effects,
-    triggerEffect,
+    runEffect,
+    cleanEffects,
   };
 }