CURATE-584: Updated angular-instantsearch packages and fixed errors

Author: Adetunji Oyebanji

apps/e-commerce/src/app/app.component.ts

@@ -1,5 +1,5 @@
 import { Component, AfterViewInit } from '@angular/core';
-import algoliasearch from 'algoliasearch/lite';
+import { liteClient } from 'algoliasearch/lite';
 
 @Component({
     selector: 'app-root',
@@ -8,7 +8,7 @@ import algoliasearch from 'algoliasearch/lite';
 })
 export class AppComponent implements AfterViewInit {
   config = {
-    searchClient: algoliasearch('latency', '6be0576ff61c053d5f9a3225e2a90f76'),
+    searchClient: liteClient('latency', '6be0576ff61c053d5f9a3225e2a90f76'),
     indexName: 'instant_search',
     routing: true,
   };

apps/e-commerce/src/app/no-results/no-results.component.ts

@@ -113,9 +113,7 @@ export type NoResultsState = {
   `,
     standalone: false
 })
-export class NoResults extends BaseWidget {
-  public state: NoResultsState = {};
-
+export class NoResults extends BaseWidget<NoResultsState> {
   constructor(
     @Inject(forwardRef(() => NgAisIndex))
     @Optional()

apps/e-commerce/src/app/rating-menu/rating-menu.component.ts

@@ -85,7 +85,7 @@ export type RatingMenuState = {
   `,
     standalone: false
 })
-export class RatingMenu extends BaseWidget {
+export class RatingMenu extends BaseWidget<RatingMenuState> {
   // rendering options
   @ContentChild('starSvg', { read: true, static: true })
   starSvg: TemplateRef<ElementRef>;

apps/e-commerce/src/app/reset-filters-mobile/reset-filters-mobile.component.ts

@@ -21,7 +21,7 @@ import { connectClearRefinements } from 'instantsearch.js/es/connectors';
   `,
     standalone: false
 })
-export class ResetFiltersMobile extends BaseWidget {
+export class ResetFiltersMobile extends BaseWidget<any> {
   public state = {
     hasRefinements: false,
     refine: () => {},

libs/angular-instantsearch/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@carnegie-learning/angular-instantsearch",
-  "version": "5.0.1",
+  "version": "6.0.0",
   "peerDependencies": {
-    "@angular/common": "^17.0.0",
-    "@angular/core": "^17.0.0",
-    "algoliasearch": "^4.22.1",
+    "@angular/common": ">=17.0.0 <20.0.0",
+    "@angular/core": ">=17.0.0 <20.0.0",
+    "algoliasearch": "^5.1.1",
     "algoliasearch-helper": "^3.16.3",
-    "instantsearch.js": "^4.48.1",
+    "instantsearch.js": "^4.75.7",
     "nouislider": "^10.0.0",
     "querystring-es3": "^0.2.1"
   },

libs/angular-instantsearch/src/__mocks__/base-widget.ts

@@ -11,7 +11,7 @@ export type Connector = (
 export class BaseWidget implements OnInit, OnDestroy {
   public widget?: Widget;
   public state?: object;
-  public cx?: ReturnType<typeof bem>;
+  public cx: ReturnType<typeof bem>;
 
   constructor(widgetName: string) {
     this.cx = bem(widgetName);

libs/angular-instantsearch/src/base-widget.ts

@@ -12,7 +12,7 @@ export type Widget = W | IndexWidget;
 // since non-ts connectors can't have generics like Connector has,
 // as well as sometimes being not accurate enough / missing keys.
 export type Connector = (
-  renderFn: (state: object, isFirstRendering: boolean) => void,
+  renderFn: (state: Record<any, any>, isFirstRendering: boolean) => void,
   unmountFn: () => void
 ) => (widgetOptions?: object) => Widget;
 
@@ -51,12 +51,15 @@ export abstract class BaseWidget<TState extends Record<string, unknown>>
   }
 
   public ngOnInit() {
-    this.parent.addWidgets([this.widget]);
+    if (!this.widget) {
+      throw new Error('Widget has not been created');
+    }
+    this.parent.addWidgets([this.widget as W]);
   }
 
   public ngOnDestroy() {
     if (isPlatformBrowser(this.instantSearchInstance.platformId)) {
-      this.parent.removeWidgets([this.widget]);
+      this.parent.removeWidgets([this.widget as W]);
     }
   }
 

libs/angular-instantsearch/src/create-ssr-search-client.ts

@@ -1,4 +1,4 @@
-import * as algoliasearchProxy from 'algoliasearch/lite';
+import { liteClient as algoliasearchProxy, SearchTypeDefault } from 'algoliasearch/lite';
 import * as encodeProxy from 'querystring-es3/encode';
 import {
   VERSION as AngularVersion,
@@ -30,14 +30,7 @@ type RequestOptions = {
 // compatibility with different typescript settings:
 // - esModuleInterop
 // - allowSyntheticDefaultImports
-const algoliasearch = (
-  typeof algoliasearchProxy.default === 'function'
-    ? algoliasearchProxy.default
-    : algoliasearchProxy
-// eslint-disable-next-line @typescript-eslint/ban-types
-) as typeof algoliasearchProxy.default extends Function
-  ? typeof algoliasearchProxy.default
-  : typeof algoliasearchProxy;
+const algoliasearch = algoliasearchProxy;
 
 const encode = encodeProxy.default || encodeProxy;
 

libs/angular-instantsearch/src/hits-per-page/hits-per-page.ts

@@ -44,6 +44,7 @@ export class NgAisHitsPerPage extends TypedBaseWidget<
     refine: noop,
     hasNoResults: true, // TODO: disable <select> when true
     canRefine: false,
+    createURL: () => '#',
   };
 
   get isHidden(): boolean {

libs/angular-instantsearch/src/hits/hits.ts

@@ -49,8 +49,9 @@ export class NgAisHits extends TypedBaseWidget<
   public state: HitsRenderState = {
     hits: [],
     results: undefined,
-    bindEvent: undefined,
-    sendEvent: undefined,
+    items: [],
+    sendEvent: () => {},
+    bindEvent: () => '',
   };
 
   constructor(

libs/angular-instantsearch/src/index-widget/index-widget.ts

@@ -55,10 +55,16 @@ export class NgAisIndex implements OnInit, OnDestroy {
   }
 
   public addWidgets(widgets: Widget[]) {
+    if (!this.widget) {
+      throw new Error('Widget has not been created');
+    }
     this.widget.addWidgets(widgets);
   }
 
   public removeWidgets(widgets: Widget[]) {
+    if (!this.widget) {
+      throw new Error('Widget has not been created');
+    }
     this.widget.removeWidgets(widgets);
   }
 

libs/angular-instantsearch/src/infinite-hits/infinite-hits.ts

@@ -82,6 +82,7 @@ export class NgAisInfiniteHits extends TypedBaseWidget<
     currentPageHits: [],
     isFirstPage: false,
     isLastPage: false,
+    items: [],
     showMore: noop,
     showPrevious: noop,
     sendEvent: noop,

libs/angular-instantsearch/src/instantsearch/instantsearch.ts

@@ -12,7 +12,7 @@ import {
   VERSION as AngularVersion,
 } from '@angular/core';
 
-import * as algoliasearchProxy from 'algoliasearch/lite';
+import { liteClient } from 'algoliasearch/lite';
 import instantsearch from 'instantsearch.js/es';
 
 import { Widget } from '../typed-base-widget';
@@ -22,7 +22,7 @@ export { SearchClient, Hit } from 'instantsearch.js/es/types';
 export { PlainSearchParameters as SearchParameters } from 'algoliasearch-helper';
 
 // this is needed for different webpack/typescript configurations
-const _algoliasearch = algoliasearchProxy.default || algoliasearchProxy;
+const _algoliasearch = liteClient;
 
 export type FacetSortByStringOptions =
   | 'count'

libs/angular-instantsearch/src/sort-by/sort-by.ts

@@ -51,7 +51,7 @@ export class NgAisSortBy extends TypedBaseWidget<
   public transformItems?: <U extends SortByItem>(items: SortByItem[]) => U[];
 
   public state: SortByRenderState = {
-    currentRefinement: null,
+    currentRefinement: '',
     options: [],
     refine: noop,
     hasNoResults: false,