Skip to content
This repository was archived by the owner on Dec 16, 2022. It is now read-only.

Commit 117067e

Browse files
dhayabdhayab
authored
feat(vue): add vue3 template (#558)
1 parent f16af97 commit 117067e

File tree

14 files changed

+578
-3
lines changed

14 files changed

+578
-3
lines changed

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

1.6 KB
Loading

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

Lines changed: 286 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7591,3 +7591,289 @@ Array [
75917591
"src/main.js",
75927592
]
75937593
`;
7594+
7595+
exports[`Templates Vue InstantSearch with Vue 3 File content: .editorconfig 1`] = `
7596+
"root = true
7597+
7598+
[*]
7599+
charset = utf-8
7600+
indent_style = space
7601+
indent_size = 2
7602+
end_of_line = lf
7603+
insert_final_newline = true
7604+
trim_trailing_whitespace = true"
7605+
`;
7606+
7607+
exports[`Templates Vue InstantSearch with Vue 3 File content: .gitignore 1`] = `
7608+
"# Logs
7609+
logs
7610+
*.log
7611+
npm-debug.log*
7612+
yarn-debug.log*
7613+
yarn-error.log*
7614+
pnpm-debug.log*
7615+
lerna-debug.log*
7616+
7617+
node_modules
7618+
dist
7619+
dist-ssr
7620+
*.local
7621+
7622+
# Editor directories and files
7623+
.vscode
7624+
.idea
7625+
.DS_Store
7626+
*.suo
7627+
*.ntvs*
7628+
*.njsproj
7629+
*.sln
7630+
*.sw?"
7631+
`;
7632+
7633+
exports[`Templates Vue InstantSearch with Vue 3 File content: .prettierrc 1`] = `
7634+
"{
7635+
\\"singleQuote\\": true,
7636+
\\"proseWrap\\": \\"never\\",
7637+
\\"trailingComma\\": \\"es5\\"
7638+
}"
7639+
`;
7640+
7641+
exports[`Templates Vue InstantSearch with Vue 3 File content: README.md 1`] = `
7642+
"# vue-instantsearch-app
7643+
7644+
_This project was generated with [create-instantsearch-app](https://github.com/algolia/create-instantsearch-app) by [Algolia](https://algolia.com)._
7645+
7646+
## Get started
7647+
7648+
To run this project locally, install the dependencies and run the local server:
7649+
7650+
\`\`\`sh
7651+
npm install
7652+
npm run dev
7653+
\`\`\`
7654+
7655+
Alternatively, you may use [Yarn](https://http://yarnpkg.com/):
7656+
7657+
\`\`\`sh
7658+
yarn
7659+
yarn dev
7660+
\`\`\`
7661+
7662+
Open http://localhost:3000 to see your app."
7663+
`;
7664+
7665+
exports[`Templates Vue InstantSearch with Vue 3 File content: index.html 1`] = `
7666+
"<!DOCTYPE html>
7667+
<html lang=\\"en\\">
7668+
<head>
7669+
<meta charset=\\"UTF-8\\" />
7670+
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\">
7671+
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
7672+
<link rel=\\"icon\\" href=\\"/favicon.png\\" />
7673+
<!--
7674+
Do not use @7 in production, use a complete version like x.x.x, see website for latest version:
7675+
https://www.algolia.com/doc/guides/building-search-ui/installation/react/#load-the-style
7676+
-->
7677+
<link rel=\\"stylesheet\\" href=\\"https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/algolia-min.css\\">
7678+
<title>vue-instantsearch-app</title>
7679+
</head>
7680+
<body>
7681+
<div id=\\"app\\"></div>
7682+
<script type=\\"module\\" src=\\"/src/main.js\\"></script>
7683+
</body>
7684+
</html>"
7685+
`;
7686+
7687+
exports[`Templates Vue InstantSearch with Vue 3 File content: package.json 1`] = `
7688+
"{
7689+
\\"name\\": \\"vue-instantsearch-app\\",
7690+
\\"version\\": \\"1.0.0\\",
7691+
\\"private\\": true,
7692+
\\"scripts\\": {
7693+
\\"dev\\": \\"vite\\",
7694+
\\"build\\": \\"vite build\\",
7695+
\\"preview\\": \\"vite preview\\"
7696+
},
7697+
\\"partialDependencies\\": {
7698+
\\"vue-instantsearch\\": \\"4.3.3\\"
7699+
}
7700+
}"
7701+
`;
7702+
7703+
exports[`Templates Vue InstantSearch with Vue 3 File content: src/App.vue 1`] = `
7704+
"<template>
7705+
<div>
7706+
<header class=\\"header\\">
7707+
<h1 class=\\"header-title\\">
7708+
<a href=\\"/\\">vue-instantsearch-app</a>
7709+
</h1>
7710+
<p class=\\"header-subtitle\\">
7711+
using
7712+
<a href=\\"https://github.com/algolia/vue-instantsearch\\">
7713+
Vue InstantSearch
7714+
</a>
7715+
</p>
7716+
</header>
7717+
7718+
<div class=\\"container\\">
7719+
<ais-instant-search :search-client=\\"searchClient\\" index-name=\\"indexName\\">
7720+
<div class=\\"search-panel\\">
7721+
<div class=\\"search-panel__filters\\">
7722+
<ais-dynamic-widgets>
7723+
<ais-refinement-list attribute=\\"facet1\\" />
7724+
<ais-refinement-list attribute=\\"facet2\\" />
7725+
</ais-dynamic-widgets>
7726+
</div>
7727+
7728+
<div class=\\"search-panel__results\\">
7729+
<div class=\\"searchbox\\">
7730+
<ais-search-box placeholder=\\"Search placeholder\\" />
7731+
</div>
7732+
<ais-hits>
7733+
<template v-slot:item=\\"{ item }\\">
7734+
<article>
7735+
<h1>
7736+
<ais-highlight :hit=\\"item\\" attribute=\\"attribute1\\" />
7737+
</h1>
7738+
<p>
7739+
<ais-highlight :hit=\\"item\\" attribute=\\"attribute2\\" />
7740+
</p>
7741+
</article>
7742+
</template>
7743+
</ais-hits>
7744+
7745+
<div class=\\"pagination\\">
7746+
<ais-pagination />
7747+
</div>
7748+
</div>
7749+
</div>
7750+
</ais-instant-search>
7751+
</div>
7752+
</div>
7753+
</template>
7754+
7755+
<script>
7756+
import algoliasearch from 'algoliasearch/lite';
7757+
7758+
export default {
7759+
data() {
7760+
return {
7761+
searchClient: algoliasearch('appId', 'apiKey'),
7762+
};
7763+
},
7764+
};
7765+
</script>
7766+
7767+
<style>
7768+
body,
7769+
h1 {
7770+
margin: 0;
7771+
padding: 0;
7772+
}
7773+
7774+
body {
7775+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
7776+
Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
7777+
}
7778+
7779+
h1 {
7780+
font-size: 1rem;
7781+
}
7782+
7783+
em {
7784+
background: cyan;
7785+
font-style: normal;
7786+
}
7787+
7788+
.header {
7789+
display: flex;
7790+
align-items: center;
7791+
min-height: 50px;
7792+
padding: 0.5rem 1rem;
7793+
background-image: linear-gradient(to right, #4dba87, #2f9088);
7794+
color: #fff;
7795+
margin-bottom: 1rem;
7796+
}
7797+
7798+
.header a {
7799+
color: #fff;
7800+
text-decoration: none;
7801+
}
7802+
7803+
.header-title {
7804+
font-size: 1.2rem;
7805+
font-weight: normal;
7806+
}
7807+
7808+
.header-title::after {
7809+
content: ' ▸ ';
7810+
padding: 0 0.5rem;
7811+
}
7812+
7813+
.header-subtitle {
7814+
font-size: 1.2rem;
7815+
}
7816+
7817+
.container {
7818+
max-width: 1200px;
7819+
margin: 0 auto;
7820+
padding: 1rem;
7821+
}
7822+
7823+
.search-panel {
7824+
display: flex;
7825+
}
7826+
7827+
.search-panel__filters {
7828+
flex: 1;
7829+
}
7830+
7831+
.search-panel__results {
7832+
flex: 3;
7833+
}
7834+
7835+
.searchbox {
7836+
margin-bottom: 2rem;
7837+
}
7838+
7839+
.pagination {
7840+
margin: 2rem auto;
7841+
text-align: center;
7842+
}
7843+
</style>"
7844+
`;
7845+
7846+
exports[`Templates Vue InstantSearch with Vue 3 File content: src/main.js 1`] = `
7847+
"import { createApp } from 'vue';
7848+
import InstantSearch from 'vue-instantsearch/vue3/es';
7849+
import App from './App.vue';
7850+
7851+
const app = createApp(App);
7852+
app.use(InstantSearch);
7853+
app.mount('#app');"
7854+
`;
7855+
7856+
exports[`Templates Vue InstantSearch with Vue 3 File content: vite.config.js 1`] = `
7857+
"import { defineConfig } from 'vite'
7858+
import vue from '@vitejs/plugin-vue'
7859+
7860+
// https://vitejs.dev/config/
7861+
export default defineConfig({
7862+
plugins: [vue()]
7863+
})"
7864+
`;
7865+
7866+
exports[`Templates Vue InstantSearch with Vue 3 Folder structure: contains the right files 1`] = `
7867+
Array [
7868+
".editorconfig",
7869+
".gitignore",
7870+
".prettierrc",
7871+
"README.md",
7872+
"index.html",
7873+
"package.json",
7874+
"public/favicon.png",
7875+
"src/App.vue",
7876+
"src/main.js",
7877+
"vite.config.js",
7878+
]
7879+
`;

‎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, Autocomplete.js 0, InstantSearch Android, InstantSearch iOS, InstantSearch.js, InstantSearch.js 2, InstantSearch.js widget, JavaScript Client, JavaScript Helper, JavaScript Helper 2, React InstantSearch, React InstantSearch Native, React InstantSearch widget, Vue InstantSearch, Vue InstantSearch 1, Vue InstantSearch 2"`;
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, Autocomplete.js 0, InstantSearch Android, InstantSearch iOS, InstantSearch.js, InstantSearch.js 2, InstantSearch.js widget, JavaScript Client, JavaScript Helper, JavaScript Helper 2, React InstantSearch, React InstantSearch Native, React InstantSearch widget, Vue InstantSearch, Vue InstantSearch 1, Vue InstantSearch 2, Vue InstantSearch with Vue 3"`;
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, Autocomplete.js 0, InstantSearch Android, InstantSearch iOS, InstantSearch.js, InstantSearch.js 2, InstantSearch.js widget, JavaScript Client, JavaScript Helper, JavaScript Helper 2, React InstantSearch, React InstantSearch Native, React InstantSearch widget, Vue InstantSearch, Vue InstantSearch 1, Vue InstantSearch 2"`;
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, Autocomplete.js 0, InstantSearch Android, InstantSearch iOS, InstantSearch.js, InstantSearch.js 2, InstantSearch.js widget, JavaScript Client, JavaScript Helper, JavaScript Helper 2, React InstantSearch, React InstantSearch Native, React InstantSearch widget, Vue InstantSearch, Vue InstantSearch 1, Vue InstantSearch 2, Vue InstantSearch with Vue 3"`;
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, Autocomplete.js 0, InstantSearch Android, InstantSearch iOS, InstantSearch.js, InstantSearch.js 2, InstantSearch.js widget, JavaScript Client, JavaScript Helper, JavaScript Helper 2, React InstantSearch, React InstantSearch Native, React InstantSearch widget, Vue InstantSearch, Vue InstantSearch 1, Vue InstantSearch 2"`;
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, Autocomplete.js 0, InstantSearch Android, InstantSearch iOS, InstantSearch.js, InstantSearch.js 2, InstantSearch.js widget, JavaScript Client, JavaScript Helper, JavaScript Helper 2, React InstantSearch, React InstantSearch Native, React InstantSearch widget, Vue InstantSearch, Vue InstantSearch 1, Vue InstantSearch 2, Vue InstantSearch with Vue 3"`;

‎src/templates/Vue InstantSearch with Vue 3/.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 with Vue 3/.gitignore.template‎

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

‎src/templates/Vue InstantSearch with Vue 3/.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 with Vue 3/.template.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
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+
supportedVersion: '>= 4.3.3 < 5.0.0',
8+
flags: {
9+
dynamicWidgets: '>=4.2.0',
10+
},
11+
templateName: 'vue-instantsearch-vue3',
12+
appName: 'vue-instantsearch-app',
13+
keywords: ['algolia', 'InstantSearch', 'Vue', 'vue-instantsearch'],
14+
tasks: {
15+
install,
16+
teardown,
17+
},
18+
};

‎src/templates/Vue InstantSearch with Vue 3/README.md‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# {{name}}
2+
3+
_This project was generated with [create-instantsearch-app](https://github.com/algolia/create-instantsearch-app) by [Algolia](https://algolia.com)._
4+
5+
## Get started
6+
7+
To run this project locally, install the dependencies and run the local server:
8+
9+
```sh
10+
npm install
11+
npm run dev
12+
```
13+
14+
Alternatively, you may use [Yarn](https://http://yarnpkg.com/):
15+
16+
```sh
17+
yarn
18+
yarn dev
19+
```
20+
21+
Open http://localhost:3000 to see your app.

0 commit comments

Comments
 (0)