fix(js): fix internal state type

packages/autocomplete-js/src/autocomplete.ts

@@ -1,13 +1,14 @@
-import {
-  createAutocomplete,
-  AutocompleteState,
-} from '@algolia/autocomplete-core';
+import { createAutocomplete } from '@algolia/autocomplete-core';
 
 import { createAutocompleteDom } from './createAutocompleteDom';
 import { createEffectWrapper } from './createEffectWrapper';
 import { getPanelPositionStyle } from './getPanelPositionStyle';
 import { render } from './render';
-import { AutocompleteApi, AutocompleteOptions } from './types';
+import {
+  AutocompleteApi,
+  AutocompleteOptions,
+  AutocompleteState,
+} from './types';
 import { debounce, getHTMLElement, setProperties } from './utils';
 
 function defaultRenderer({ root, sections }) {
@@ -27,7 +28,7 @@ export function autocomplete<TItem>({
   const autocomplete = createAutocomplete<TItem>({
     ...props,
     onStateChange(options) {
-      onStateChange(options.state as any);
+      onStateChange(options.state);
 
       if (props.onStateChange) {
         props.onStateChange(options);

packages/autocomplete-js/src/render.ts

@@ -1,7 +1,4 @@
-import {
-  AutocompleteState as AutocompleteCoreState,
-  AutocompleteApi as AutocompleteCoreApi,
-} from '@algolia/autocomplete-core';
+import { AutocompleteApi as AutocompleteCoreApi } from '@algolia/autocomplete-core';
 
 import {
   SourceContainer,
@@ -15,12 +12,12 @@ import {
   AutocompleteClassNames,
   AutocompleteDom,
   AutocompleteRenderer,
-  InternalAutocompleteSource,
+  AutocompleteState,
 } from './types';
 import { setProperties, setPropertiesWithoutEvents } from './utils';
 
 type RenderProps<TItem> = {
-  state: AutocompleteCoreState<TItem>;
+  state: AutocompleteState<TItem>;
   classNames: AutocompleteClassNames;
 } & AutocompleteCoreApi<TItem> &
   AutocompleteDom;
@@ -57,10 +54,7 @@ export function render<TItem>(
     panel.classList.remove('aa-Panel--stalled');
   }
 
-  const sections = state.collections.map((collection) => {
-    const items = collection.items;
-    const source = collection.source as InternalAutocompleteSource<TItem>;
-
+  const sections = state.collections.map(({ source, items }) => {
     const sectionElement = SourceContainer({ classNames });
 
     if (source.templates.header) {

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

@@ -1,54 +1,69 @@
 import {
-  GetSourcesParams,
-  AutocompleteSetters as AutocompleteCoreSetters,
-  InternalAutocompleteSource as InternalAutocompleteCoreSource,
-  AutocompleteState as AutocompleteCoreState,
   AutocompleteOptions as AutocompleteCoreOptions,
+  AutocompleteSetters as AutocompleteCoreSetters,
   AutocompleteSource as AutocompleteCoreSource,
+  AutocompleteState as AutocompleteCoreState,
+  GetSourcesParams,
+  InternalAutocompleteSource as InternalAutocompleteCoreSource,
 } from '@algolia/autocomplete-core';
 import { MaybePromise } from '@algolia/autocomplete-shared';
 
 type Template<TParams> = (params: TParams) => string | void;
 
+/**
+ * Templates to display in the autocomplete panel.
+ *
+ * A template can either return a string, or perform DOM mutations (manipulating DOM elements with JavaScript and attaching events) without returning a string.
+ */
 export type SourceTemplates<TItem> = {
   /**
-   * Templates to display in the autocomplete panel.
-   *
-   * A template can either return a string, or perform DOM mutations (manipulating DOM elements with JavaScript and attaching events) without returning a string.
+   * The template for the suggestion item.
    */
-  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>;
-    }>;
-  };
+  item: Template<{
+    root: HTMLElement;
+    item: TItem;
+    state: AutocompleteState<TItem>;
+  }>;
+  /**
+   * The template for the section header.
+   */
+  header?: Template<{
+    root: HTMLElement;
+    state: AutocompleteState<TItem>;
+  }>;
+  /**
+   * The template for the section footer.
+   */
+  footer?: Template<{
+    root: HTMLElement;
+    state: AutocompleteState<TItem>;
+  }>;
 };
 
-export type AutocompleteSource<TItem> = AutocompleteCoreSource<TItem> &
-  SourceTemplates<TItem>;
+type WithTemplates<TType, TItem> = TType & {
+  templates: SourceTemplates<TItem>;
+};
 
-export type InternalAutocompleteSource<TItem> = InternalAutocompleteCoreSource<
+export type AutocompleteSource<TItem> = WithTemplates<
+  AutocompleteCoreSource<TItem>,
+  TItem
+>;
+export type InternalAutocompleteSource<TItem> = WithTemplates<
+  InternalAutocompleteCoreSource<TItem>,
   TItem
-> &
-  SourceTemplates<TItem>;
+>;
+
+interface AutocompleteCollection<TItem> {
+  source: InternalAutocompleteSource<TItem>;
+  items: TItem[];
+}
+
+export type AutocompleteState<TItem> = Omit<
+  AutocompleteCoreState<TItem>,
+  'collections'
+> & {
+  collections: Array<AutocompleteCollection<TItem>>;
+};
 
 export type AutocompleteClassNames = Partial<{
   root: string;
@@ -78,7 +93,7 @@ export type AutocompleteDom = {
 export type AutocompleteRenderer<TItem> = (params: {
   root: HTMLElement;
   sections: HTMLElement[];
-  state: AutocompleteCoreState<TItem>;
+  state: AutocompleteState<TItem>;
 }) => void;
 
 export interface AutocompleteOptions<TItem>

packages/autocomplete-plugin-query-suggestions/src/createQuerySuggestionsPlugin.ts

@@ -15,9 +15,7 @@ export type CreateQuerySuggestionsPluginParams<
   searchClient: SearchClient;
   indexName: string;
   getSearchParams?(): SearchOptions;
-  getTemplates?(
-    params: GetTemplatesParams<TItem>
-  ): SourceTemplates<TItem>['templates'];
+  getTemplates?(params: GetTemplatesParams<TItem>): SourceTemplates<TItem>;
 };
 
 export function createQuerySuggestionsPlugin<

packages/autocomplete-plugin-query-suggestions/src/getTemplates.ts

@@ -9,7 +9,7 @@ export type GetTemplatesParams<TItem extends QuerySuggestionsHit> = {
 
 export function getTemplates<TItem extends QuerySuggestionsHit>({
   onTapAhead,
-}: GetTemplatesParams<TItem>): SourceTemplates<TItem>['templates'] {
+}: GetTemplatesParams<TItem>): SourceTemplates<TItem> {
   return {
     item({ item, root }) {
       const content = document.createElement('div');

packages/autocomplete-plugin-recent-searches/src/createRecentSearchesPlugin.ts

@@ -22,9 +22,7 @@ export type CreateRecentSearchesPluginParams<
   TItem extends RecentSearchesItem
 > = {
   storage: RecentSearchesStorage<TItem>;
-  getTemplates?(
-    params: GetTemplatesParams
-  ): SourceTemplates<TItem>['templates'];
+  getTemplates?(params: GetTemplatesParams): SourceTemplates<TItem>;
 };
 
 export function createRecentSearchesPlugin<TItem extends RecentSearchesItem>({

packages/autocomplete-plugin-recent-searches/src/getTemplates.ts

@@ -9,7 +9,7 @@ export type GetTemplatesParams = {
 
 export function getTemplates<TItem extends RecentSearchesItem>({
   onRemove,
-}: GetTemplatesParams): SourceTemplates<TItem>['templates'] {
+}: GetTemplatesParams): SourceTemplates<TItem> {
   return {
     item({ item, root }) {
       const content = document.createElement('div');