Skip to content

Commit f5b0ebc

Browse files
curquizacurquiza
authored
Fix replaceAll and upgrade to MeilISearch v0.13.0 (#22)
* Update meilisearch-js * Update README * Fix replaceAll * Add basic playground in vue to test * Update tests
1 parent 24abbec commit f5b0ebc

File tree

14 files changed

+8651
-13
lines changed

14 files changed

+8651
-13
lines changed

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ In `app.js`:
8888

8989
```js
9090
const search = instantsearch({
91-
indexName: "codesandbox-IS",
91+
indexName: "steam-video-games",
9292
searchClient: instantMeiliSearch(
9393
"https://demos.meilisearch.com",
9494
"dc3fedaf922de8937fdea01f0a7d59557f1fd31832cb8440ce94231cfdde7f25",
@@ -134,7 +134,7 @@ search.start();
134134

135135
This package is compatible with the following MeiliSearch versions:
136136

137-
- `v0.12.X`
137+
- `v0.13.X`
138138

139139
## Development Workflow and Contributing
140140

‎examples/express/tests/client.test.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ describe('Instant MeiliSearch Browser test', () => {
55

66
it('Should have generated a instant-meiisearch client and displayed', async () => {
77
await expect(page).toMatch(
8-
'{"client":{"cancelTokenSource":{"token":{"promise":{}}},"config":{"host":"http://localhost:7700","apiKey":"masterKey"}},"hitsPerPage":10,"limitPerRequest":50,"attributesToHighlight":"*"}'
8+
'{"client":{"cancelTokenSource":{"token":{"promise":{}}},"config":{"host":"http://localhost:7700","apiKey":"masterKey"}},"hitsPerPage":10,"limitPerRequest":50,"attributesToHighlight":["*"]}'
99
)
1010
})
1111
})

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@meilisearch/instant-meilisearch",
3-
"version": "0.1.1",
3+
"version": "0.1.2",
44
"private": false,
55
"description": "The search client to use MeiliSearch with InstantSearch.",
66
"scripts": {
@@ -25,7 +25,7 @@
2525
"author": "Clementine Urquizar",
2626
"license": "MIT",
2727
"dependencies": {
28-
"meilisearch": "^0.11.3"
28+
"meilisearch": "^0.12.0"
2929
},
3030
"devDependencies": {
3131
"@babel/cli": "^7.10.5",

‎playgrounds/vue/.gitignore‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
.DS_Store
2+
node_modules
3+
/dist
4+
5+
# local env files
6+
.env.local
7+
.env.*.local
8+
9+
# Log files
10+
npm-debug.log*
11+
yarn-debug.log*
12+
yarn-error.log*
13+
pnpm-debug.log*
14+
15+
# Editor directories and files
16+
.idea
17+
.vscode
18+
*.suo
19+
*.ntvs*
20+
*.njsproj
21+
*.sln
22+
*.sw?

‎playgrounds/vue/README.md‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# vue
2+
3+
## Project setup
4+
```
5+
yarn install
6+
```
7+
8+
### Compiles and hot-reloads for development
9+
```
10+
yarn serve
11+
```
12+
13+
### Compiles and minifies for production
14+
```
15+
yarn build
16+
```
17+
18+
### Lints and fixes files
19+
```
20+
yarn lint
21+
```
22+
23+
### Customize configuration
24+
See [Configuration Reference](https://cli.vuejs.org/config/).

‎playgrounds/vue/babel.config.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
presets: [
3+
'@vue/cli-plugin-babel/preset'
4+
]
5+
}

‎playgrounds/vue/package.json‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
{
2+
"name": "vue",
3+
"version": "0.1.0",
4+
"private": true,
5+
"scripts": {
6+
"serve": "vue-cli-service serve",
7+
"build": "vue-cli-service build",
8+
"lint": "vue-cli-service lint"
9+
},
10+
"dependencies": {
11+
"core-js": "^3.6.5",
12+
"instantsearch.css": "^7.4.2",
13+
"vue": "^2.6.11",
14+
"vue-instantsearch": "^3.1.0"
15+
},
16+
"devDependencies": {
17+
"@vue/cli-plugin-babel": "~4.4.0",
18+
"@vue/cli-plugin-eslint": "~4.4.0",
19+
"@vue/cli-service": "~4.4.0",
20+
"babel-eslint": "^10.1.0",
21+
"eslint": "^6.7.2",
22+
"eslint-plugin-vue": "^6.2.2",
23+
"vue-template-compiler": "^2.6.11"
24+
},
25+
"eslintConfig": {
26+
"root": true,
27+
"env": {
28+
"node": true
29+
},
30+
"extends": [
31+
"plugin:vue/essential",
32+
"eslint:recommended"
33+
],
34+
"parserOptions": {
35+
"parser": "babel-eslint"
36+
},
37+
"rules": {}
38+
},
39+
"browserslist": [
40+
"> 1%",
41+
"last 2 versions",
42+
"not dead"
43+
]
44+
}

‎playgrounds/vue/public/index.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<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" />
7+
<title>Demo of MeiliSearch + Vue InstantSearch usage</title>
8+
</head>
9+
<body>
10+
<noscript>
11+
<strong>You need to enable JavaScript to run this app.</strong>
12+
</noscript>
13+
<div id="app"></div>
14+
</body>
15+
</html>

‎playgrounds/vue/src/App.vue‎

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
<template>
2+
<div>
3+
<header class="header">
4+
<h1 class="header-title">MeiliSearch + Vue InstantSearch</h1>
5+
<p class="header-subtitle">Search in Steam video games 🎮</p>
6+
</header>
7+
<p class="disclaimer">
8+
This is not the official Steam dataset but only for demo purpose.
9+
Enjoy searching with MeiliSearch!
10+
</p>
11+
<div class="container">
12+
<ais-instant-search :search-client="searchClient" index-name="steam-video-games">
13+
<div class="search-panel__filters">
14+
<ais-clear-refinements>
15+
<span slot="resetLabel">Clear all filters</span>
16+
</ais-clear-refinements>
17+
<h2>Genres</h2>
18+
<ais-refinement-list attribute="genres"/>
19+
<h2>Players</h2>
20+
<ais-refinement-list attribute="players"/>
21+
<h2>Platforms</h2>
22+
<ais-refinement-list attribute="platforms"/>
23+
<h2>Misc</h2>
24+
<ais-refinement-list attribute="misc"/>
25+
</div>
26+
27+
<div class="search-panel__results">
28+
<ais-search-box placeholder="Search here…"/>
29+
30+
<ais-hits>
31+
<template slot="item" slot-scope="{ item }">
32+
<div>
33+
<div class="hit-name">
34+
<ais-highlight :hit="item" attribute="name"/>
35+
</div>
36+
<img :src="item.image" align="left" :alt="item.image">
37+
<div class="hit-info">price: {{item.price}}</div>
38+
<div class="hit-info">release date: {{item.releaseDate}}</div>
39+
</div>
40+
</template>
41+
</ais-hits>
42+
43+
<ais-pagination/>
44+
</div>
45+
</ais-instant-search>
46+
</div>
47+
</div>
48+
</template>
49+
50+
<script>
51+
import "instantsearch.css/themes/algolia-min.css";
52+
import instantMeiliSearch from "../../../src/index.js";
53+
54+
export default {
55+
data() {
56+
return {
57+
searchClient: instantMeiliSearch(
58+
"https://demos.meilisearch.com",
59+
"dc3fedaf922de8937fdea01f0a7d59557f1fd31832cb8440ce94231cfdde7f25"
60+
)
61+
};
62+
}
63+
};
64+
</script>
65+
66+
<style>
67+
body,
68+
h1 {
69+
margin: 0;
70+
padding: 0;
71+
}
72+
73+
body {
74+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
75+
Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
76+
}
77+
78+
.ais-Hits-item {
79+
margin-bottom: 1em;
80+
width: calc(50% - 1rem);
81+
}
82+
83+
.ais-Hits-item img {
84+
margin-right: 1em;
85+
width: 100%;
86+
height: 100%;
87+
margin-bottom: 0.5em;
88+
}
89+
90+
.ais-Highlight-highlighted {
91+
background: cyan;
92+
font-style: normal;
93+
}
94+
95+
.disclaimer {
96+
margin-left: 1em;
97+
}
98+
99+
.hit-name {
100+
margin-bottom: 0.5em;
101+
}
102+
103+
.hit-info {
104+
font-size: 90%;
105+
}
106+
107+
.header {
108+
display: flex;
109+
align-items: center;
110+
min-height: 50px;
111+
padding: 0.5rem 1rem;
112+
background-image: linear-gradient(to right, #4dba87, #2f9088);
113+
color: #fff;
114+
margin-bottom: 1rem;
115+
}
116+
117+
.header-title {
118+
font-size: 1.2rem;
119+
font-weight: normal;
120+
}
121+
122+
.header-title::after {
123+
content: " ▸ ";
124+
padding: 0 0.5rem;
125+
}
126+
127+
.header-subtitle {
128+
font-size: 1.2rem;
129+
}
130+
131+
.container {
132+
padding: 1rem;
133+
}
134+
135+
.ais-InstantSearch {
136+
max-width: 960px;
137+
overflow: hidden;
138+
margin: 0;
139+
}
140+
141+
.search-panel__filters {
142+
float: left;
143+
width: 200px;
144+
}
145+
146+
.search-panel__results {
147+
margin-left: 210px;
148+
}
149+
150+
.ais-SearchBox {
151+
margin-bottom: 2rem;
152+
}
153+
154+
.ais-Pagination {
155+
margin: 2rem auto;
156+
text-align: center;
157+
}
158+
</style>

‎playgrounds/vue/src/main.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import Vue from "vue";
2+
import App from "./App.vue";
3+
import InstantSearch from "vue-instantsearch";
4+
5+
Vue.use(InstantSearch);
6+
Vue.config.productionTip = false;
7+
8+
new Vue({
9+
render: h => h(App)
10+
}).$mount("#app");

0 commit comments

Comments
 (0)