fix(js): rely on environment instead of window

algolia · Feb 15, 2021 · 0bc15e9 · 0bc15e9
1 parent 971305a
commit 0bc15e9
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 10 deletions.
diff --git a/packages/autocomplete-core/src/getDefaultProps.ts b/packages/autocomplete-core/src/getDefaultProps.ts
@@ -1,19 +1,19 @@
 import { getItemsCount } from '@algolia/autocomplete-shared';
 
 import {
+  AutocompleteEnvironment,
   AutocompleteOptions,
+  AutocompleteSubscribers,
   BaseItem,
   InternalAutocompleteOptions,
-  AutocompleteSubscribers,
 } from './types';
 import { generateAutocompleteId, getNormalizedSources, flatten } from './utils';
 
 export function getDefaultProps<TItem extends BaseItem>(
   props: AutocompleteOptions<TItem>,
   pluginSubscribers: AutocompleteSubscribers<TItem>
 ): InternalAutocompleteOptions<TItem> {
-  const environment: InternalAutocompleteOptions<TItem>['environment'] = (typeof window !==
-  'undefined'
+  const environment: AutocompleteEnvironment = (typeof window !== 'undefined'
     ? window
     : {}) as typeof window;
   const plugins = props.plugins || [];

diff --git a/packages/autocomplete-js/src/autocomplete.ts b/packages/autocomplete-js/src/autocomplete.ts
@@ -37,7 +37,10 @@ export function autocomplete<TItem extends BaseItem>(
   >(undefined);
   const props = reactive(() => getDefaultOptions(optionsRef.current));
   const isDetached = reactive(
-    () => window.matchMedia(props.value.renderer.detachedMediaQuery).matches
+    () =>
+      props.value.core.environment.matchMedia(
+        props.value.renderer.detachedMediaQuery
+      ).matches
   );
   const autocomplete = reactive(() =>
     createAutocomplete<TItem>({
@@ -159,11 +162,11 @@ export function autocomplete<TItem extends BaseItem>(
       inputElement: dom.value.input,
     });
 
-    setProperties(window as any, environmentProps);
+    setProperties(props.value.core.environment as any, environmentProps);
 
     return () => {
       setProperties(
-        window as any,
+        props.value.core.environment as any,
         Object.keys(environmentProps).reduce((acc, key) => {
           return {
             ...acc,
@@ -231,7 +234,7 @@ export function autocomplete<TItem extends BaseItem>(
   runEffect(() => {
     const onResize = debounce<Event>(() => {
       const previousisDetached = isDetached.value;
-      isDetached.value = window.matchMedia(
+      isDetached.value = props.value.core.environment.matchMedia(
         props.value.renderer.detachedMediaQuery
       ).matches;
 
@@ -241,10 +244,10 @@ export function autocomplete<TItem extends BaseItem>(
         requestAnimationFrame(setPanelPosition);
       }
     }, 20);
-    window.addEventListener('resize', onResize);
+    props.value.core.environment.addEventListener('resize', onResize);
 
     return () => {
-      window.removeEventListener('resize', onResize);
+      props.value.core.environment.removeEventListener('resize', onResize);
     };
   });
 

diff --git a/packages/autocomplete-js/src/getDefaultOptions.ts b/packages/autocomplete-js/src/getDefaultOptions.ts
@@ -108,6 +108,11 @@ export function getDefaultOptions<TItem extends BaseItem>(
           '--aa-detached-media-query'
         ),
     },
-    core,
+    core: {
+      ...core,
+      environment: (typeof window !== 'undefined'
+        ? window
+        : {}) as typeof window,
+    },
   };
 }