Skip to content

Commit 90f4480

Browse files
flevi29flevi29
committed
autocomplete and local-react to typescript
1 parent 67c9478 commit 90f4480

File tree

26 files changed

+345
-149
lines changed

26 files changed

+345
-149
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
"test:watch": "yarn build && vitest",
3232
"instant-meilisearch:test:watch": "vitest --project \"@meilisearch/instant-meilisearch\"",
3333
"autocomplete:test:watch": "vitest --project \"@meilisearch/autocomplete-client\"",
34-
"test:types": "yarn build && tsc --noEmit",
34+
"test:types": "turbo test:types",
3535
"version-packages": "changeset version && turbo version",
3636
"release": "yarn build && changeset publish"
3737
},

‎packages/autocomplete-client/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@
88
},
99
"scripts": {
1010
"build": "vite build && tsc -p tsconfig.json",
11-
"version": "node scripts/update_version.cjs"
11+
"version": "node scripts/update_version.cjs",
12+
"test:types": "tsc --noEmit"
1213
},
1314
"type": "module",
1415
"types": "./dist/types/index.d.ts",

‎packages/instant-meilisearch/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,8 @@
2525
],
2626
"scripts": {
2727
"build": "vite build && tsc -p tsconfig.json",
28-
"version": "node scripts/update_version.cjs"
28+
"version": "node scripts/update_version.cjs",
29+
"test:types": "tsc --noEmit"
2930
},
3031
"type": "module",
3132
"types": "./dist/types/index.d.ts",

‎playgrounds/autocomplete/index.html‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,13 @@
1-
<!DOCTYPE html>
2-
<html>
1+
<!doctype html>
2+
<html lang="en">
33
<head>
4-
<meta charset="utf-8" />
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6-
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<title>Demo of Meilisearch + autocomplete.js</title>
8-
<div id="autocomplete"></div>
98
</head>
10-
119
<body>
1210
<div id="app"></div>
13-
<script type="module" src="./main.js"></script>
14-
<script type="module" src="./src/app.js"></script>
11+
<script type="module" src="/src/main.ts"></script>
1512
</body>
1613
</html>

‎playgrounds/autocomplete/main.js‎

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎playgrounds/autocomplete/package.json‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,14 @@
33
"version": "0.0.0",
44
"private": true,
55
"description": "Javascript playground for autocomplete",
6+
"type": "module",
67
"scripts": {
7-
"predev": "node setup.mjs",
8+
"predev": "node setup.js",
89
"dev": "vite",
910
"setup": "node setup.mjs",
1011
"test:e2e": "concurrently --kill-others -s first \"yarn dev\" \"cypress run --env playground=local\"",
11-
"test:e2e:watch": "concurrently --kill-others -s first \"yarn dev\" \"cypress open --env playground=local\""
12+
"test:e2e:watch": "concurrently --kill-others -s first \"yarn dev\" \"cypress open --env playground=local\"",
13+
"test:types": "tsc"
1214
},
1315
"keywords": [
1416
"autocomplete"

‎playgrounds/autocomplete/setup.mjs‎ renamed to ‎playgrounds/autocomplete/setup.js‎

File renamed without changes.

‎playgrounds/autocomplete/src/app.js‎

Lines changed: 0 additions & 92 deletions
This file was deleted.

‎playgrounds/autocomplete/src/app.ts‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
import { autocomplete } from '@algolia/autocomplete-js'
2+
import {
3+
meilisearchAutocompleteClient,
4+
getMeilisearchResults,
5+
} from '@meilisearch/autocomplete-client'
6+
import '@algolia/autocomplete-theme-classic'
7+
8+
const client = meilisearchAutocompleteClient({
9+
url: 'http://localhost:7700',
10+
apiKey: 'masterKey',
11+
})
12+
13+
export function setupAutocomplete(element: HTMLElement): void {
14+
autocomplete({
15+
container: element,
16+
placeholder: 'Search for games',
17+
openOnFocus: true,
18+
debug: true,
19+
getSources({ query }) {
20+
return [
21+
{
22+
sourceId: 'steam-video-games',
23+
getItems() {
24+
const description = getMeilisearchResults({
25+
searchClient: client,
26+
queries: [
27+
{
28+
indexName: 'steam-video-games',
29+
query,
30+
params: {
31+
hitsPerPage: 10,
32+
attributesToSnippet: ['name:10', 'description:5'],
33+
snippetEllipsisText: '..',
34+
},
35+
},
36+
],
37+
})
38+
39+
return description
40+
},
41+
templates: {
42+
item({ item, components, html }) {
43+
return html`<div class="aa-ItemWrapper">
44+
<div class="aa-ItemContent">
45+
<div class="aa-ItemIcon aa-ItemIcon--alignTop">
46+
<img
47+
src="${item.image}"
48+
alt="${item.name}"
49+
width="40"
50+
height="40"
51+
/>
52+
</div>
53+
<div class="aa-ItemContentBody">
54+
<div class="aa-ItemContentTitle">
55+
${components.Highlight({
56+
hit: item,
57+
attribute: 'name',
58+
tagName: 'test',
59+
})}
60+
</div>
61+
<div class="aa-ItemContentDescription">
62+
${components.Snippet({
63+
hit: item,
64+
attribute: 'description',
65+
})}
66+
</div>
67+
</div>
68+
<div class="aa-ItemActions">
69+
<button
70+
class="aa-ItemActionButton aa-DesktopOnly aa-ActiveOnly"
71+
type="button"
72+
title="Select"
73+
>
74+
<svg
75+
viewBox="0 0 24 24"
76+
width="20"
77+
height="20"
78+
fill="currentColor"
79+
>
80+
<path
81+
d="M18.984 6.984h2.016v6h-15.188l3.609 3.609-1.406 1.406-6-6 6-6 1.406 1.406-3.609 3.609h13.172v-4.031z"
82+
/>
83+
</svg>
84+
</button>
85+
</div>
86+
</div>
87+
</div>`
88+
},
89+
},
90+
},
91+
]
92+
},
93+
})
94+
}

‎playgrounds/autocomplete/src/main.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import './style.css'
2+
import { setupAutocomplete } from './app.js'
3+
4+
document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
5+
<div>
6+
<div id="autocomplete"></div>
7+
</div>
8+
`
9+
10+
setupAutocomplete(document.querySelector<HTMLButtonElement>('#autocomplete')!)

0 commit comments

Comments
 (0)