refactor(js): move types to folder

packages/autocomplete-js/src/autocomplete.ts

@@ -1,90 +1,25 @@
 import {
   createAutocomplete,
-  AutocompleteSetters,
-  AutocompleteSource as AutocompleteCoreSource,
-  AutocompleteState,
-  GetSourcesParams,
-  PublicAutocompleteOptions as PublicAutocompleteCoreOptions,
+  AutocompleteState as AutocompleteCoreState,
 } from '@algolia/autocomplete-core';
 
 import { debounce } from './debounce';
 import { getDropdownPositionStyle } from './getDropdownPositionStyle';
 import { getHTMLElement } from './getHTMLElement';
 import { renderTemplate } from './renderTemplate';
 import { setProperties, setPropertiesWithoutEvents } from './setProperties';
+import {
+  AutocompleteOptions,
+  AutocompleteApi,
+  AutocompleteSource,
+} from './types';
 
 function defaultRender({ root, sections }) {
   for (const section of sections) {
     root.appendChild(section);
   }
 }
 
-type Template<TParams> = (params: TParams) => string | void;
-
-type AutocompleteSource<TItem> = AutocompleteCoreSource<TItem> & {
-  templates: {
-    item: Template<{
-      root: HTMLElement;
-      item: TItem;
-      state: AutocompleteState<TItem>;
-    }>;
-    header?: Template<{ root: HTMLElement; state: AutocompleteState<TItem> }>;
-    footer?: Template<{ root: HTMLElement; state: AutocompleteState<TItem> }>;
-  };
-};
-
-type GetSources<TItem> = (
-  params: GetSourcesParams<TItem>
-) => Promise<Array<AutocompleteSource<TItem>>>;
-
-export interface AutocompleteOptions<TItem>
-  extends PublicAutocompleteCoreOptions<TItem> {
-  /**
-   * The container for the autocomplete search box.
-   *
-   * You can either pass a [CSS selector](https://developer.mozilla.org/docs/Web/CSS/CSS_Selectors) or an [Element](https://developer.mozilla.org/docs/Web/API/HTMLElement). The first element matching the provided selector will be used as container.
-   */
-  container: string | HTMLElement;
-  getSources: GetSources<TItem>;
-  /**
-   * The dropdown horizontal position.
-   *
-   * @default "input-wrapper-width"
-   */
-  dropdownPlacement?: 'start' | 'end' | 'full-width' | 'input-wrapper-width';
-  /**
-   * Function called to render the autocomplete results. It is useful for rendering sections in different row or column layouts.
-   * The default implementation appends all the sections to the root:
-   *
-   * ```js
-   * autocomplete({
-   *   // ...
-   *   render({ root, sections }) {
-   *     for (const section of sections) {
-   *       root.appendChild(section);
-   *     }
-   *   },
-   * });
-   * ```
-   */
-  render?(params: {
-    root: HTMLElement;
-    sections: HTMLElement[];
-    state: AutocompleteState<TItem>;
-  }): void;
-}
-
-export interface AutocompleteApi<TItem> extends AutocompleteSetters<TItem> {
-  /**
-   * Triggers a search to refresh the state.
-   */
-  refresh(): Promise<void>;
-  /**
-   * Cleans up the DOM mutations and event listeners.
-   */
-  destroy(): void;
-}
-
 export function autocomplete<TItem>({
   container,
   render: renderDropdown = defaultRender,
@@ -183,7 +118,7 @@ export function autocomplete<TItem>({
     class: 'aa-Dropdown',
   });
 
-  function render(state: AutocompleteState<TItem>) {
+  function render(state: AutocompleteCoreState<TItem>) {
     setPropertiesWithoutEvents(root, autocomplete.getRootProps());
     setPropertiesWithoutEvents(
       input,

packages/autocomplete-js/src/getDropdownPositionStyle.ts

@@ -1,4 +1,4 @@
-import { AutocompleteOptions } from './autocomplete';
+import { AutocompleteOptions } from './types';
 
 export function getDropdownPositionStyle({
   dropdownPlacement,

packages/autocomplete-js/src/index.ts

@@ -4,3 +4,4 @@ export {
   getAlgoliaResults,
   getAlgoliaHits,
 } from '@algolia/autocomplete-preset-algolia';
+export * from './types';

packages/autocomplete-js/src/types/index.ts

@@ -0,0 +1,93 @@
+import {
+  AutocompleteSetters as AutocompleteCoreSetters,
+  PublicAutocompleteOptions as PublicAutocompleteCoreOptions,
+  AutocompleteState as AutocompleteCoreState,
+  AutocompleteSource as AutocompleteCoreSource,
+  GetSourcesParams,
+} from '@algolia/autocomplete-core';
+
+type Template<TParams> = (params: TParams) => string | void;
+
+export type AutocompleteSource<TItem> = AutocompleteCoreSource<TItem> & {
+  /**
+   * Templates to display in the autocomplete dropdown.
+   *
+   * A template can either return a string, or perform DOM mutations (manipulating DOM elements with JavaScript and attaching events) without returning a string.
+   */
+  templates: {
+    /**
+     * The template for the suggestion item.
+     */
+    item: Template<{
+      root: HTMLElement;
+      item: TItem;
+      state: AutocompleteCoreState<TItem>;
+    }>;
+    /**
+     * The template for the section header.
+     */
+    header?: Template<{
+      root: HTMLElement;
+      state: AutocompleteCoreState<TItem>;
+    }>;
+    /**
+     * The template for the section footer.
+     */
+    footer?: Template<{
+      root: HTMLElement;
+      state: AutocompleteCoreState<TItem>;
+    }>;
+  };
+};
+
+type GetSources<TItem> = (
+  params: GetSourcesParams<TItem>
+) => Promise<Array<AutocompleteSource<TItem>>>;
+
+export interface AutocompleteOptions<TItem>
+  extends PublicAutocompleteCoreOptions<TItem> {
+  /**
+   * The container for the autocomplete search box.
+   *
+   * You can either pass a [CSS selector](https://developer.mozilla.org/docs/Web/CSS/CSS_Selectors) or an [Element](https://developer.mozilla.org/docs/Web/API/HTMLElement). The first element matching the provided selector will be used as container.
+   */
+  container: string | HTMLElement;
+  getSources: GetSources<TItem>;
+  /**
+   * The dropdown horizontal position.
+   *
+   * @default "input-wrapper-width"
+   */
+  dropdownPlacement?: 'start' | 'end' | 'full-width' | 'input-wrapper-width';
+  /**
+   * Function called to render the autocomplete results. It is useful for rendering sections in different row or column layouts.
+   * The default implementation appends all the sections to the root:
+   *
+   * ```js
+   * autocomplete({
+   *   // ...
+   *   render({ root, sections }) {
+   *     for (const section of sections) {
+   *       root.appendChild(section);
+   *     }
+   *   },
+   * });
+   * ```
+   */
+  render?(params: {
+    root: HTMLElement;
+    sections: HTMLElement[];
+    state: AutocompleteCoreState<TItem>;
+  }): void;
+}
+
+export interface AutocompleteApi<TItem> extends AutocompleteCoreSetters<TItem> {
+  /**
+   * Triggers a search to refresh the state.
+   */
+  refresh(): Promise<void>;
+  /**
+   * Cleans up the DOM mutations and event listeners.
+   */
+  destroy(): void;
+}