@algolia/wizard 0.9.0-rc.96.109 → 0.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -10,8 +10,8 @@ InstantSearch).
|
|
|
10
10
|
- `algoliasearch` v5 (install `^5`)
|
|
11
11
|
- `react-instantsearch` v7 (install `^7`)
|
|
12
12
|
- `vue-instantsearch` v4 (install `^4`)
|
|
13
|
-
- `instantsearch.js` v4 (install `^4`) — also the choice for
|
|
14
|
-
|
|
13
|
+
- `instantsearch.js` v4 (install `^4`) — also the recommended choice for Angular
|
|
14
|
+
- `angular-instantsearch` — DEPRECATED/archived (Sep 2024); do not use, prefer `instantsearch.js`
|
|
15
15
|
|
|
16
16
|
Always install the **latest stable** within the major (use a caret range like `^5` /
|
|
17
17
|
`^7`); never pin an exact patch.
|
|
@@ -30,7 +30,7 @@ Always install the **latest stable** within the major (use a caret range like `^
|
|
|
30
30
|
|
|
31
31
|
## Files
|
|
32
32
|
|
|
33
|
-
- `instantsearch-setup
|
|
34
|
-
vanilla
|
|
33
|
+
- `instantsearch-setup.md` — framework-specific InstantSearch wiring (React, Vue,
|
|
34
|
+
Angular, vanilla). Use this for the in-app search UI.
|
|
35
35
|
- `search-single-index.md` — direct/manual search via the core client
|
|
36
36
|
(`searchSingleIndex`), for cases where InstantSearch is not used.
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
# InstantSearch setup
|
|
2
|
+
|
|
3
|
+
Install `instantsearch.js` (v4)
|
|
4
|
+
|
|
5
|
+
## Search client: always use the lite client
|
|
6
|
+
|
|
7
|
+
Import the client from `algoliasearch/lite` and alias it to `algoliasearch`
|
|
8
|
+
|
|
9
|
+
```ts
|
|
10
|
+
import { liteClient as algoliasearch } from 'algoliasearch/lite'
|
|
11
|
+
|
|
12
|
+
// Instantiate ONCE, outside components, with a stable reference.
|
|
13
|
+
const searchClient = algoliasearch(APP_ID, SEARCH_ONLY_KEY)
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
## Angular (use `instantsearch.js`)
|
|
17
|
+
|
|
18
|
+
Do NOT use `angular-instantsearch`: it is deprecated and archived (last release
|
|
19
|
+
v4.4.3, Sep 2024), not compatible with Ivy / modern Angular (v13+), and receives no
|
|
20
|
+
security fixes. Algolia recommends driving `instantsearch.js` directly from an Angular
|
|
21
|
+
component instead.
|
|
22
|
+
|
|
23
|
+
```ts
|
|
24
|
+
import {
|
|
25
|
+
Component,
|
|
26
|
+
ElementRef,
|
|
27
|
+
OnDestroy,
|
|
28
|
+
OnInit,
|
|
29
|
+
ViewChild,
|
|
30
|
+
} from '@angular/core'
|
|
31
|
+
import { liteClient as algoliasearch } from 'algoliasearch/lite'
|
|
32
|
+
import instantsearch from 'instantsearch.js'
|
|
33
|
+
import { searchBox, hits } from 'instantsearch.js/es/widgets'
|
|
34
|
+
|
|
35
|
+
@Component({
|
|
36
|
+
selector: 'app-search',
|
|
37
|
+
template: `<div #searchbox></div>
|
|
38
|
+
<div #hits></div>`,
|
|
39
|
+
})
|
|
40
|
+
export class SearchComponent implements OnInit, OnDestroy {
|
|
41
|
+
@ViewChild('searchbox', { static: true }) searchbox!: ElementRef
|
|
42
|
+
@ViewChild('hits', { static: true }) hits!: ElementRef
|
|
43
|
+
|
|
44
|
+
private search = instantsearch({
|
|
45
|
+
indexName: 'INDEX_NAME',
|
|
46
|
+
searchClient: algoliasearch(APP_ID, SEARCH_ONLY_KEY),
|
|
47
|
+
})
|
|
48
|
+
|
|
49
|
+
ngOnInit() {
|
|
50
|
+
this.search.addWidgets([
|
|
51
|
+
searchBox({ container: this.searchbox.nativeElement }),
|
|
52
|
+
hits({ container: this.hits.nativeElement }),
|
|
53
|
+
])
|
|
54
|
+
this.search.start()
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
ngOnDestroy() {
|
|
58
|
+
this.search.dispose()
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
## Vanilla (`instantsearch.js` v4)
|
|
64
|
+
|
|
65
|
+
```js
|
|
66
|
+
import { liteClient as algoliasearch } from 'algoliasearch/lite'
|
|
67
|
+
import instantsearch from 'instantsearch.js'
|
|
68
|
+
import { searchBox, hits } from 'instantsearch.js/es/widgets'
|
|
69
|
+
|
|
70
|
+
const searchClient = algoliasearch(APP_ID, SEARCH_ONLY_KEY)
|
|
71
|
+
|
|
72
|
+
const search = instantsearch({ indexName: 'INDEX_NAME', searchClient })
|
|
73
|
+
|
|
74
|
+
search.addWidgets([
|
|
75
|
+
searchBox({ container: '#searchbox' }),
|
|
76
|
+
hits({ container: '#hits' }),
|
|
77
|
+
])
|
|
78
|
+
|
|
79
|
+
search.start()
|
|
80
|
+
```
|
|
@@ -31,14 +31,3 @@ search.addWidgets([
|
|
|
31
31
|
|
|
32
32
|
search.start()
|
|
33
33
|
```
|
|
34
|
-
|
|
35
|
-
## Frameworks without their own flavor
|
|
36
|
-
|
|
37
|
-
Only React and Vue have a maintained InstantSearch wrapper. For any other
|
|
38
|
-
framework — Angular, Svelte, Solid — drive `instantsearch.js` directly from a
|
|
39
|
-
component, mounting widgets against element refs and calling `search.dispose()`
|
|
40
|
-
on teardown.
|
|
41
|
-
|
|
42
|
-
Do NOT install `angular-instantsearch` or a community `*-instantsearch` package:
|
|
43
|
-
`angular-instantsearch` is deprecated and archived (last release v4.4.3, Sep 2024),
|
|
44
|
-
is incompatible with Angular v13+, and receives no security fixes.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@algolia/wizard",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.10.0",
|
|
4
4
|
"description": "Magically implement Algolia functionality in your codebase",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"engines": {
|
|
@@ -51,7 +51,6 @@
|
|
|
51
51
|
"@hono/node-server": "^2.0.10",
|
|
52
52
|
"@segment/analytics-node": "^3.1.0",
|
|
53
53
|
"ai": "^6.0.190",
|
|
54
|
-
"cross-keychain": "^1.1.0",
|
|
55
54
|
"dotenv": "^17.4.2",
|
|
56
55
|
"hono": "^4.12.27",
|
|
57
56
|
"ink": "^7.0.5",
|