Skip to content

Commit 2b3d6ff

Browse files
HaroenvHaroenv
authored
feat(vue): update vue template for vue-instantsearch 3 (#452)
* feat(vue): update vue template for vue-instantsearch 3 not much is different, except the version of the library and the compatibility with algoliasearch@4 * update unit test
1 parent 1ce212b commit 2b3d6ff

File tree

17 files changed

+607
-6
lines changed

17 files changed

+607
-6
lines changed

‎e2e/__image_snapshots__/vue-instantsearch-2.x/public/favicon.png-snap.png

1.6 KB
Loading

‎e2e/__snapshots__/templates.test.js.snap

Lines changed: 303 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5199,6 +5199,308 @@ Array [
51995199
]
52005200
`;
52015201

5202+
exports[`Templates Vue InstantSearch 2 File content: .editorconfig 1`] = `
5203+
"root = true
5204+
5205+
[*]
5206+
charset = utf-8
5207+
indent_style = space
5208+
indent_size = 2
5209+
end_of_line = lf
5210+
insert_final_newline = true
5211+
trim_trailing_whitespace = true"
5212+
`;
5213+
5214+
exports[`Templates Vue InstantSearch 2 File content: .eslintrc.js 1`] = `
5215+
"module.exports = {
5216+
// extends from 'prettier/vue' until we update the Algolia configuration
5217+
extends: ['algolia/vue', 'prettier/vue'],
5218+
rules: {
5219+
'import/no-commonjs': 'off',
5220+
// enable the rule until we update the Algolia configuration
5221+
'vue/component-name-in-template-casing': ['error', 'kebab-case'],
5222+
},
5223+
};"
5224+
`;
5225+
5226+
exports[`Templates Vue InstantSearch 2 File content: .gitignore 1`] = `
5227+
".DS_Store
5228+
node_modules
5229+
/dist
5230+
5231+
# local env files
5232+
.env.local
5233+
.env.*.local
5234+
5235+
# Log files
5236+
npm-debug.log*
5237+
yarn-debug.log*
5238+
yarn-error.log*
5239+
5240+
# Editor directories and files
5241+
.idea
5242+
.vscode
5243+
*.suo
5244+
*.ntvs*
5245+
*.njsproj
5246+
*.sln
5247+
*.sw?"
5248+
`;
5249+
5250+
exports[`Templates Vue InstantSearch 2 File content: .prettierrc 1`] = `
5251+
"{
5252+
\\"singleQuote\\": true,
5253+
\\"proseWrap\\": \\"never\\",
5254+
\\"trailingComma\\": \\"es5\\"
5255+
}"
5256+
`;
5257+
5258+
exports[`Templates Vue InstantSearch 2 File content: README.md 1`] = `
5259+
"# vue-instantsearch-app
5260+
5261+
_This project was generated with [create-instantsearch-app](https://github.com/algolia/create-instantsearch-app) by [Algolia](https://algolia.com)._
5262+
5263+
## Get started
5264+
5265+
To run this project locally, install the dependencies and run the local server:
5266+
5267+
\`\`\`sh
5268+
npm install
5269+
npm start
5270+
\`\`\`
5271+
5272+
Alternatively, you may use [Yarn](https://http://yarnpkg.com/):
5273+
5274+
\`\`\`sh
5275+
yarn
5276+
yarn start
5277+
\`\`\`
5278+
5279+
Open http://localhost:3000 to see your app."
5280+
`;
5281+
5282+
exports[`Templates Vue InstantSearch 2 File content: babel.config.js 1`] = `
5283+
"module.exports = {
5284+
presets: ['@vue/app'],
5285+
};"
5286+
`;
5287+
5288+
exports[`Templates Vue InstantSearch 2 File content: package.json 1`] = `
5289+
"{
5290+
\\"name\\": \\"vue-instantsearch-app\\",
5291+
\\"version\\": \\"1.0.0\\",
5292+
\\"private\\": true,
5293+
\\"scripts\\": {
5294+
\\"start\\": \\"vue-cli-service serve --port 3000\\",
5295+
\\"build\\": \\"vue-cli-service build\\",
5296+
\\"lint\\": \\"vue-cli-service lint\\",
5297+
\\"lint:fix\\": \\"npm run lint -- --fix\\"
5298+
},
5299+
\\"browserslist\\": [
5300+
\\"> 1%\\",
5301+
\\"last 2 versions\\",
5302+
\\"not ie <= 8\\"
5303+
],
5304+
\\"partialDependencies\\": {
5305+
\\"vue-instantsearch\\": \\"2.0.0\\"
5306+
}
5307+
}"
5308+
`;
5309+
5310+
exports[`Templates Vue InstantSearch 2 File content: public/index.html 1`] = `
5311+
"<!DOCTYPE html>
5312+
<html lang=\\"en\\">
5313+
<head>
5314+
<meta charset=\\"utf-8\\">
5315+
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"IE=edge\\">
5316+
<meta name=\\"viewport\\" content=\\"width=device-width,initial-scale=1.0\\">
5317+
<link rel=\\"icon\\" href=\\"<%= BASE_URL %>favicon.png\\">
5318+
<!--
5319+
Do not use @7 in production, use a complete version like x.x.x, see website for latest version:
5320+
https://www.algolia.com/doc/guides/building-search-ui/installation/react/#load-the-style
5321+
-->
5322+
<link rel=\\"stylesheet\\" href=\\"https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/algolia-min.css\\">
5323+
<title>vue-instantsearch-app</title>
5324+
</head>
5325+
<body>
5326+
<noscript>
5327+
<strong>We're sorry but vue-instantsearch-app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
5328+
</noscript>
5329+
<div id=\\"app\\"></div>
5330+
<!-- built files will be auto injected -->
5331+
</body>
5332+
</html>"
5333+
`;
5334+
5335+
exports[`Templates Vue InstantSearch 2 File content: src/App.vue 1`] = `
5336+
"<template>
5337+
<div>
5338+
<header class=\\"header\\">
5339+
<h1 class=\\"header-title\\">
5340+
<a href=\\"/\\">
5341+
vue-instantsearch-app
5342+
</a>
5343+
</h1>
5344+
<p class=\\"header-subtitle\\">
5345+
using
5346+
<a href=\\"https://github.com/algolia/vue-instantsearch\\">
5347+
Vue InstantSearch
5348+
</a>
5349+
</p>
5350+
</header>
5351+
5352+
<div class=\\"container\\">
5353+
<ais-instant-search :search-client=\\"searchClient\\" index-name=\\"indexName\\">
5354+
<div class=\\"search-panel\\">
5355+
<div class=\\"search-panel__filters\\">
5356+
<ais-refinement-list attribute=\\"facet1\\" />
5357+
<ais-refinement-list attribute=\\"facet2\\" />
5358+
</div>
5359+
5360+
<div class=\\"search-panel__results\\">
5361+
<div class=\\"searchbox\\">
5362+
<ais-search-box placeholder=\\"Search placeholder\\" />
5363+
</div>
5364+
<ais-hits>
5365+
<template slot=\\"item\\" slot-scope=\\"{ item }\\">
5366+
<article>
5367+
<h1>
5368+
<ais-highlight :hit=\\"item\\" attribute=\\"attribute1\\" />
5369+
</h1>
5370+
<p>
5371+
<ais-highlight :hit=\\"item\\" attribute=\\"attribute2\\" />
5372+
</p>
5373+
</article>
5374+
</template>
5375+
</ais-hits>
5376+
5377+
<div class=\\"pagination\\">
5378+
<ais-pagination />
5379+
</div>
5380+
</div>
5381+
</div>
5382+
</ais-instant-search>
5383+
</div>
5384+
</div>
5385+
</template>
5386+
5387+
<script>
5388+
import algoliasearch from 'algoliasearch/lite';
5389+
5390+
export default {
5391+
data() {
5392+
return {
5393+
searchClient: algoliasearch('appId', 'apiKey'),
5394+
};
5395+
},
5396+
};
5397+
</script>
5398+
5399+
<style>
5400+
body,
5401+
h1 {
5402+
margin: 0;
5403+
padding: 0;
5404+
}
5405+
5406+
body {
5407+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
5408+
Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
5409+
}
5410+
5411+
em {
5412+
background: cyan;
5413+
font-style: normal;
5414+
}
5415+
5416+
.header {
5417+
display: flex;
5418+
align-items: center;
5419+
min-height: 50px;
5420+
padding: 0.5rem 1rem;
5421+
background-image: linear-gradient(to right, #4dba87, #2f9088);
5422+
color: #fff;
5423+
margin-bottom: 1rem;
5424+
}
5425+
5426+
.header a {
5427+
color: #fff;
5428+
text-decoration: none;
5429+
}
5430+
5431+
.header-title {
5432+
font-size: 1.2rem;
5433+
font-weight: normal;
5434+
}
5435+
5436+
.header-title::after {
5437+
content: ' ▸ ';
5438+
padding: 0 0.5rem;
5439+
}
5440+
5441+
.header-subtitle {
5442+
font-size: 1.2rem;
5443+
}
5444+
5445+
.container {
5446+
max-width: 1200px;
5447+
margin: 0 auto;
5448+
padding: 1rem;
5449+
}
5450+
5451+
.search-panel {
5452+
display: flex;
5453+
}
5454+
5455+
.search-panel__filters {
5456+
flex: 1;
5457+
}
5458+
5459+
.search-panel__results {
5460+
flex: 3;
5461+
}
5462+
5463+
.searchbox {
5464+
margin-bottom: 2rem;
5465+
}
5466+
5467+
.pagination {
5468+
margin: 2rem auto;
5469+
text-align: center;
5470+
}
5471+
</style>"
5472+
`;
5473+
5474+
exports[`Templates Vue InstantSearch 2 File content: src/main.js 1`] = `
5475+
"import Vue from 'vue';
5476+
import InstantSearch from 'vue-instantsearch';
5477+
import App from './App.vue';
5478+
5479+
Vue.config.productionTip = false;
5480+
5481+
Vue.use(InstantSearch);
5482+
5483+
new Vue({
5484+
render: h => h(App),
5485+
}).$mount('#app');"
5486+
`;
5487+
5488+
exports[`Templates Vue InstantSearch 2 Folder structure: contains the right files 1`] = `
5489+
Array [
5490+
".editorconfig",
5491+
".eslintrc.js",
5492+
".gitignore",
5493+
".prettierrc",
5494+
"README.md",
5495+
"babel.config.js",
5496+
"package.json",
5497+
"public/favicon.png",
5498+
"public/index.html",
5499+
"src/App.vue",
5500+
"src/main.js",
5501+
]
5502+
`;
5503+
52025504
exports[`Templates Vue InstantSearch File content: .editorconfig 1`] = `
52035505
"root = true
52045506
@@ -5302,7 +5604,7 @@ exports[`Templates Vue InstantSearch File content: package.json 1`] = `
53025604
\\"not ie <= 8\\"
53035605
],
53045606
\\"partialDependencies\\": {
5305-
\\"vue-instantsearch\\": \\"2.0.0\\"
5607+
\\"vue-instantsearch\\": \\"3.0.0\\"
53065608
}
53075609
}"
53085610
`;

‎src/api/__tests__/__snapshots__/index.test.js.snap

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,10 @@ exports[`Options with invalid name throws 1`] = `
66
- name can only contain URL-friendly characters"
77
`;
88

9-
exports[`Options with unknown template throws 1`] = `"The template directory must contain a configuration file \`.template.js\` or must be one of those: Angular InstantSearch, Autocomplete.js, InstantSearch Android, InstantSearch iOS, InstantSearch.js, InstantSearch.js 2, JavaScript Client, JavaScript Helper, JavaScript Helper 2, React InstantSearch, React InstantSearch Native, Vue InstantSearch, Vue InstantSearch 1"`;
9+
exports[`Options with unknown template throws 1`] = `"The template directory must contain a configuration file \`.template.js\` or must be one of those: Angular InstantSearch, Autocomplete.js, InstantSearch Android, InstantSearch iOS, InstantSearch.js, InstantSearch.js 2, JavaScript Client, JavaScript Helper, JavaScript Helper 2, React InstantSearch, React InstantSearch Native, Vue InstantSearch, Vue InstantSearch 1, Vue InstantSearch 2"`;
1010

11-
exports[`Options with wrong template path throws 1`] = `"The template directory must contain a configuration file \`.template.js\` or must be one of those: Angular InstantSearch, Autocomplete.js, InstantSearch Android, InstantSearch iOS, InstantSearch.js, InstantSearch.js 2, JavaScript Client, JavaScript Helper, JavaScript Helper 2, React InstantSearch, React InstantSearch Native, Vue InstantSearch, Vue InstantSearch 1"`;
11+
exports[`Options with wrong template path throws 1`] = `"The template directory must contain a configuration file \`.template.js\` or must be one of those: Angular InstantSearch, Autocomplete.js, InstantSearch Android, InstantSearch iOS, InstantSearch.js, InstantSearch.js 2, JavaScript Client, JavaScript Helper, JavaScript Helper 2, React InstantSearch, React InstantSearch Native, Vue InstantSearch, Vue InstantSearch 1, Vue InstantSearch 2"`;
1212

1313
exports[`Options without path throws 1`] = `"The option \`path\` is required."`;
1414

15-
exports[`Options without template throws 1`] = `"The template directory must contain a configuration file \`.template.js\` or must be one of those: Angular InstantSearch, Autocomplete.js, InstantSearch Android, InstantSearch iOS, InstantSearch.js, InstantSearch.js 2, JavaScript Client, JavaScript Helper, JavaScript Helper 2, React InstantSearch, React InstantSearch Native, Vue InstantSearch, Vue InstantSearch 1"`;
15+
exports[`Options without template throws 1`] = `"The template directory must contain a configuration file \`.template.js\` or must be one of those: Angular InstantSearch, Autocomplete.js, InstantSearch Android, InstantSearch iOS, InstantSearch.js, InstantSearch.js 2, JavaScript Client, JavaScript Helper, JavaScript Helper 2, React InstantSearch, React InstantSearch Native, Vue InstantSearch, Vue InstantSearch 1, Vue InstantSearch 2"`;

‎src/templates/Vue InstantSearch 2/.editorconfig

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
root = true
2+
3+
[*]
4+
charset = utf-8
5+
indent_style = space
6+
indent_size = 2
7+
end_of_line = lf
8+
insert_final_newline = true
9+
trim_trailing_whitespace = true

‎src/templates/Vue InstantSearch 2/.eslintrc.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
module.exports = {
2+
// extends from 'prettier/vue' until we update the Algolia configuration
3+
extends: ['algolia/vue', 'prettier/vue'],
4+
rules: {
5+
'import/no-commonjs': 'off',
6+
// enable the rule until we update the Algolia configuration
7+
'vue/component-name-in-template-casing': ['error', 'kebab-case'],
8+
},
9+
};

‎src/templates/Vue InstantSearch 2/.gitignore.template

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
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+
14+
# Editor directories and files
15+
.idea
16+
.vscode
17+
*.suo
18+
*.ntvs*
19+
*.njsproj
20+
*.sln
21+
*.sw?

‎src/templates/Vue InstantSearch 2/.prettierrc

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"singleQuote": true,
3+
"proseWrap": "never",
4+
"trailingComma": "es5"
5+
}

‎src/templates/Vue InstantSearch 2/.template.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
const install = require('../../tasks/node/install');
2+
const teardown = require('../../tasks/node/teardown');
3+
4+
module.exports = {
5+
category: 'Web',
6+
libraryName: 'vue-instantsearch',
7+
templateName: 'vue-instantsearch-2.x',
8+
supportedVersion: '>= 2.0.0 < 3.0.0',
9+
appName: 'vue-instantsearch-app',
10+
keywords: ['algolia', 'InstantSearch', 'Vue', 'vue-instantsearch'],
11+
tasks: {
12+
install,
13+
teardown,
14+
},
15+
};

0 commit comments

Comments
 (0)