Skip to content

Commit fcd5c34

Browse files
renovate[bot]renovate[bot]
authored
chore(deps): update dependency @algolia/autocomplete-js to v1.0.0-alpha.45 (#267)
- use new Component API to render elements - fix theme changes
1 parent ee0cfdd commit fcd5c34

File tree

8 files changed

+95
-120
lines changed

8 files changed

+95
-120
lines changed

‎.eslintrc.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,8 @@ module.exports = {
2727
'no-console': 'off',
2828
'no-continue': 'off',
2929
'no-loop-func': 'off',
30+
// eslint-disable-next-line no-warning-comments
31+
'no-undef': 'warn', // TODO: find how to remove "ESLint: 'JSX' is not defined." errors properly
3032
'consistent-return': 'off',
3133
'@typescript-eslint/no-unused-vars': 'warn',
3234

‎frontend/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
"postinstall": "[ -d dist/ ] || npm run build"
1919
},
2020
"devDependencies": {
21-
"@algolia/autocomplete-js": "1.0.0-alpha.44",
21+
"@algolia/autocomplete-js": "1.0.0-alpha.45",
2222
"@algolia/autocomplete-preset-algolia": "1.0.0-alpha.45",
2323
"@algolia/autocomplete-theme-classic": "1.0.0-alpha.45",
2424
"@algolia/transporter": "4.8.6",

‎frontend/src/AutocompleteWrapper.ts

Lines changed: 4 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,19 @@
1-
import {
2-
autocomplete,
3-
highlightHit,
4-
snippetHit,
5-
} from '@algolia/autocomplete-js';
1+
import { autocomplete } from '@algolia/autocomplete-js';
62
import type {
7-
VNode,
83
AutocompleteApi,
94
AutocompleteSource,
105
SourceTemplates,
116
} from '@algolia/autocomplete-js';
127
import type { HighlightedHit } from '@algolia/autocomplete-preset-algolia';
138
import { getAlgoliaHits } from '@algolia/autocomplete-preset-algolia';
14-
import type { Hit } from '@algolia/client-search';
159
import algoliasearch from 'algoliasearch/lite';
1610
import type { SearchClient } from 'algoliasearch/lite';
1711

1812
// @ts-expect-error
1913
import { version } from '../package.json';
2014

2115
import { templates } from './templates';
22-
import type { Options, AlgoliaRecord, HighlightedHierarchy } from './types';
16+
import type { Options, AlgoliaRecord } from './types';
2317

2418
class AutocompleteWrapper {
2519
private options;
@@ -94,13 +88,8 @@ class AutocompleteWrapper {
9488
header() {
9589
return '';
9690
},
97-
item({ item }) {
98-
return templates.item(
99-
item,
100-
highlightHit({ hit: item, attribute: 'title' }),
101-
getSuggestionSnippet(item),
102-
getHighlightedHierarchy(item)
103-
);
91+
item({ item, components }) {
92+
return templates.item(item, components);
10493
},
10594
footer() {
10695
if (poweredBy) {
@@ -155,53 +144,6 @@ class AutocompleteWrapper {
155144
}
156145
}
157146

158-
function getSuggestionSnippet(hit: Hit<AlgoliaRecord>): Array<string | VNode> {
159-
// If they are defined as `searchableAttributes`, 'description' and 'content' are always
160-
// present in the `_snippetResult`, even if they don't match.
161-
// So we need to have 1 check on the presence and 1 check on the match
162-
const description = hit._snippetResult?.description;
163-
const content = hit._snippetResult?.content;
164-
165-
// Take in priority props that matches the search
166-
if (description && description.matchLevel === 'full') {
167-
return snippetHit({ hit, attribute: 'description' });
168-
}
169-
if (content && content.matchLevel === 'full') {
170-
return snippetHit({ hit, attribute: 'content' });
171-
}
172-
173-
// Otherwise take the prop that was at least correctly returned
174-
if (description && !content) {
175-
return snippetHit({ hit, attribute: 'description' });
176-
}
177-
if (content) {
178-
return snippetHit({ hit, attribute: 'content' });
179-
}
180-
181-
// Otherwise raw value or empty
182-
const res = hit.description || hit.content || '';
183-
return [res];
184-
}
185-
186-
function getHighlightedHierarchy(
187-
hit: Hit<AlgoliaRecord>
188-
): HighlightedHierarchy | null {
189-
if (!hit.hierarchy) {
190-
return null;
191-
}
192-
const highlightedHierarchy: HighlightedHierarchy = {};
193-
for (let i = 0; i <= 6; ++i) {
194-
if (!hit.hierarchy[`lvl${i}`]) {
195-
continue;
196-
}
197-
highlightedHierarchy[`lvl${i}`] = highlightHit({
198-
hit,
199-
attribute: ['hierarchy', `lvl${i}`],
200-
});
201-
}
202-
return highlightedHierarchy;
203-
}
204-
205147
function addCss(
206148
css: string,
207149
$mainStyle: HTMLElement | null = null

‎frontend/src/index.scss

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -40,12 +40,9 @@ $font-size: $font-size-m;
4040
.aa-Panel {
4141
min-width: 350px;
4242
z-index: 1100;
43+
margin-top: $size-xs;
4344

44-
&::after {
45-
background-image: none;
46-
}
4745
.aa-PanelLayout {
48-
margin-top: $size-xs;
4946
padding-top: 0;
5047
padding-bottom: 0;
5148
background-color: var(--color-background);
@@ -54,6 +51,10 @@ $font-size: $font-size-m;
5451
border-left: solid 1px var(--color-selected);
5552
}
5653
}
54+
55+
.aa-GradientBottom {
56+
background-image: none;
57+
}
5758
}
5859

5960
.aa-Autocomplete, .aa-DetachedFormContainer {
@@ -87,7 +88,11 @@ $font-size: $font-size-m;
8788
}
8889
}
8990
.aa-InputWrapperSuffix {
91+
height: var(--height);
92+
9093
.aa-ClearButton {
94+
padding: 0;
95+
9196
&:hover,
9297
&:focus {
9398
color: var(--color-text);

‎frontend/src/templates.tsx

Lines changed: 66 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import type { VNode } from '@algolia/autocomplete-js';
1+
import type { AutocompleteComponents, VNode } from '@algolia/autocomplete-js';
2+
import type { Hit } from '@algolia/client-search';
23

3-
import type { AlgoliaRecord, HighlightedHierarchy } from './types';
4+
import type { AlgoliaRecord } from './types';
45

56
export const templates = {
67
poweredBy: ({ hostname }: { hostname: string }): VNode => {
@@ -19,13 +20,11 @@ export const templates = {
1920
},
2021

2122
item: (
22-
record: AlgoliaRecord,
23-
title: Array<string | VNode>,
24-
description: Array<string | VNode>,
25-
hierarchy: HighlightedHierarchy | null
26-
): VNode => {
23+
hit: AlgoliaRecord,
24+
components: AutocompleteComponents
25+
): JSX.Element => {
2726
return (
28-
<a href={record.url}>
27+
<a href={hit.url}>
2928
<div className="aa-ItemContent">
3029
<div className="aa-ItemIcon">
3130
<svg width="20" height="20" viewBox="0 0 20 20">
@@ -39,15 +38,19 @@ export const templates = {
3938
</svg>
4039
</div>
4140
<div>
42-
<div className="aa-ItemTitle">{hierarchy?.lvl0 ?? title}</div>
43-
{hierarchy && (
41+
<div className="aa-ItemTitle">
42+
{hit.hierarchy?.lvl0 ?? (
43+
<components.Highlight hit={hit} attribute="title" />
44+
)}
45+
</div>
46+
{hit.hierarchy && (
4447
<div className="aa-ItemHierarchy">
45-
{hierarchyToBreadcrumbVNodes(hierarchy)}
48+
{hierarchyToBreadcrumbs(hit, components)}
4649
</div>
4750
)}
48-
{description && (
49-
<div className="aa-ItemDescription">{description}</div>
50-
)}
51+
<div className="aa-ItemDescription">
52+
{getSuggestionSnippet(hit, components)}
53+
</div>
5154
</div>
5255
</div>
5356
</a>
@@ -56,26 +59,63 @@ export const templates = {
5659
};
5760

5861
/**
59-
* Transform a highlighted hierarchy object into an array of VNode[].
62+
* Transform a highlighted hierarchy object into an array of Highlighted elements.
6063
* 3 levels max are returned.
6164
*
62-
* @param hierarchy - An highlighted hierarchy, i.e. { lvl0: (string | VNode)[], lvl1: (string | VNode)[], lvl2: (string | VNode)[], ... }.
63-
* @returns An array of VNode[], representing of the highlighted hierarchy starting from lvl1.
64-
* Between each VNode[] we insert a ' > ' character to render them as breadcrumbs eventually.
65+
* @param hit - A record with a hierarchy field ( { lvl0: string, lvl1: string, lvl2: string, ... } ).
66+
* @param components - Autocomplete components.
67+
* @returns An array of JSX.Elements | string, representing of the highlighted hierarchy starting from lvl1.
68+
* Between each element, we insert a ' > ' character to render them as breadcrumbs eventually.
6569
*/
66-
function hierarchyToBreadcrumbVNodes(
67-
hierarchy: HighlightedHierarchy
68-
): Array<string | Array<string | VNode>> {
69-
const breadcrumbVNodeArray: Array<string | Array<string | VNode>> = [];
70+
function hierarchyToBreadcrumbs(
71+
hit: Hit<AlgoliaRecord>,
72+
components: AutocompleteComponents
73+
): Array<JSX.Element | string> {
74+
const breadcrumbArray: Array<JSX.Element | string> = [];
7075
let addedLevels = 0;
76+
if (!hit.hierarchy) {
77+
return breadcrumbArray;
78+
}
7179
for (let i = 1; i < 7 && addedLevels < 3; ++i) {
72-
if (hierarchy[`lvl${i}`] && hierarchy[`lvl${i}`].length > 0) {
80+
if (hit.hierarchy[`lvl${i}`] && hit.hierarchy[`lvl${i}`].length > 0) {
7381
if (addedLevels > 0) {
74-
breadcrumbVNodeArray.push(' > ');
82+
breadcrumbArray.push(' > ');
7583
}
76-
breadcrumbVNodeArray.push(hierarchy[`lvl${i}`]);
84+
breadcrumbArray.push(
85+
<components.Highlight hit={hit} attribute="description" />
86+
);
7787
++addedLevels;
7888
}
7989
}
80-
return breadcrumbVNodeArray;
90+
return breadcrumbArray;
91+
}
92+
93+
function getSuggestionSnippet(
94+
hit: Hit<AlgoliaRecord>,
95+
components: AutocompleteComponents
96+
): JSX.Element | string {
97+
// If they are defined as `searchableAttributes`, 'description' and 'content' are always
98+
// present in the `_snippetResult`, even if they don't match.
99+
// So we need to have 1 check on the presence and 1 check on the match
100+
const description = hit._snippetResult?.description;
101+
const content = hit._snippetResult?.content;
102+
103+
// Take in priority props that matches the search
104+
if (description && description.matchLevel === 'full') {
105+
return <components.Snippet hit={hit} attribute="description" />;
106+
}
107+
if (content && content.matchLevel === 'full') {
108+
return <components.Snippet hit={hit} attribute="content" />;
109+
}
110+
111+
// Otherwise take the prop that was at least correctly returned
112+
if (description && !content) {
113+
return <components.Snippet hit={hit} attribute="description" />;
114+
}
115+
if (content) {
116+
return <components.Snippet hit={hit} attribute="content" />;
117+
}
118+
119+
// Otherwise raw value or empty
120+
return hit.description || hit.content || '';
81121
}

‎frontend/src/types/record.ts

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import type { VNode } from '@algolia/autocomplete-js';
2-
31
export type AlgoliaRecord = {
42
objectID: string;
53

@@ -25,4 +23,3 @@ export type AlgoliaRecord = {
2523
};
2624

2725
export type Hierarchy = { [lvl: string]: string };
28-
export type HighlightedHierarchy = { [lvl: string]: Array<string | VNode> };

‎public/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -179,6 +179,7 @@ <h2>Test content</h2>
179179
colorSourceIcon: '#d6d6e7'
180180
},
181181
detached: { mediaQuery: '(max-width: 900px)' },
182+
debug: true,
182183
});`
183184
.split('\n')
184185
.map((l) => l.replace(/^\s{8}/, ''))

‎yarn.lock

Lines changed: 12 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -2,42 +2,30 @@
22
# yarn lockfile v1
33

44

5-
"@algolia/[email protected].44":
6-
version "1.0.0-alpha.44"
7-
resolved "https://registry.yarnpkg.com/@algolia/autocomplete-core/-/autocomplete-core-1.0.0-alpha.44.tgz#e626dba45f5f3950d6beb0ab055395ef0f7e8bb2"
8-
integrity sha512-2iMXthldMIDXtlbg9omRKLgg1bLo2ZzINAEqwhNjUeyj1ceEyL1ck6FY0VnJpf2LsjmNthHCz2BuFk+nYUeDNA==
5+
"@algolia/[email protected].45":
6+
version "1.0.0-alpha.45"
7+
resolved "https://registry.yarnpkg.com/@algolia/autocomplete-core/-/autocomplete-core-1.0.0-alpha.45.tgz#424f8e2cfca6c4c3682fa02ce7d122ae2eb0f0d1"
8+
integrity sha512-Lol3IZSscUmZgkrq6DCcvImj1YW4NNHr8IkcARHTDsJvKo+G+mu7LrBLjUD/XEQZy2MAE0JbxrkShecdEpdjTw==
99
dependencies:
10-
"@algolia/autocomplete-shared" "1.0.0-alpha.44"
10+
"@algolia/autocomplete-shared" "1.0.0-alpha.45"
1111

12-
"@algolia/[email protected].44":
13-
version "1.0.0-alpha.44"
14-
resolved "https://registry.yarnpkg.com/@algolia/autocomplete-js/-/autocomplete-js-1.0.0-alpha.44.tgz#a252bdbf7ab662dedcc05cfe53e318d6becd7bee"
15-
integrity sha512-KmWhIvO/T5yS+kelZQrVMgAGKZKozoFHQM8VMrXK3a77i1uqTYFkg70HFIsiQ9kRGjB/EA0exNtm3/BwGkIIkw==
12+
"@algolia/[email protected].45":
13+
version "1.0.0-alpha.45"
14+
resolved "https://registry.yarnpkg.com/@algolia/autocomplete-js/-/autocomplete-js-1.0.0-alpha.45.tgz#b3835cbec368438f37637f065a11b375a92e300f"
15+
integrity sha512-HAN3HzIstVGoL+ghtXtbg0i81Wn6rXag+CCdmniUuPIVTxsGLeSu4DK6AkZRpxoR8ozW+OeUj7tMnjziUZdhqw==
1616
dependencies:
17-
"@algolia/autocomplete-core" "1.0.0-alpha.44"
18-
"@algolia/autocomplete-preset-algolia" "1.0.0-alpha.44"
19-
"@algolia/autocomplete-shared" "1.0.0-alpha.44"
17+
"@algolia/autocomplete-core" "1.0.0-alpha.45"
18+
"@algolia/autocomplete-preset-algolia" "1.0.0-alpha.45"
19+
"@algolia/autocomplete-shared" "1.0.0-alpha.45"
2020
preact "^10.0.0"
2121

22-
"@algolia/[email protected]":
23-
version "1.0.0-alpha.44"
24-
resolved "https://registry.yarnpkg.com/@algolia/autocomplete-preset-algolia/-/autocomplete-preset-algolia-1.0.0-alpha.44.tgz#0ea0b255d0be10fbe262e281472dd6e4619b62ba"
25-
integrity sha512-DCHwo5ovzg9k2ejUolGNTLFnIA7GpsrkbNJTy1sFbMnYfBmeK8egZPZnEl7lBTr27OaZu7IkWpTepLVSztZyng==
26-
dependencies:
27-
"@algolia/autocomplete-shared" "1.0.0-alpha.44"
28-
2922
"@algolia/[email protected]":
3023
version "1.0.0-alpha.45"
3124
resolved "https://registry.yarnpkg.com/@algolia/autocomplete-preset-algolia/-/autocomplete-preset-algolia-1.0.0-alpha.45.tgz#da23c1cc799893a58b23726508080a9a3f845b0e"
3225
integrity sha512-IrTwyNKAiwz59/IYsn57rR6/BD71T5xA9tZ2jeX0QMyMlMpz24wqIUe7JdGkAlhcxw3H1qundjdwFQ8kISjCDA==
3326
dependencies:
3427
"@algolia/autocomplete-shared" "1.0.0-alpha.45"
3528

36-
"@algolia/[email protected]":
37-
version "1.0.0-alpha.44"
38-
resolved "https://registry.yarnpkg.com/@algolia/autocomplete-shared/-/autocomplete-shared-1.0.0-alpha.44.tgz#db13902ad1667e455711b77d08cae1a0feafaa48"
39-
integrity sha512-2oQZPERYV+yNx/yoVWYjZZdOqsitJ5dfxXJjL18yczOXH6ujnsq+DTczSrX+RjzjQdVeJ1UAG053EJQF/FOiMg==
40-
4129
"@algolia/[email protected]":
4230
version "1.0.0-alpha.45"
4331
resolved "https://registry.yarnpkg.com/@algolia/autocomplete-shared/-/autocomplete-shared-1.0.0-alpha.45.tgz#3540dbc31f3e6f0e976409d568939783d18b948e"

0 commit comments

Comments
 (0)