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
algolia · Nov 9, 2020 · 2b3d6ff · 2b3d6ff
1 parent 1ce212b
commit 2b3d6ff
Show file tree

Hide file tree

Showing 17 changed files with 607 additions and 6 deletions.
diff --git a/e2e/__image_snapshots__/vue-instantsearch-2.x/public/favicon.png-snap.png b/e2e/__image_snapshots__/vue-instantsearch-2.x/public/favicon.png-snap.png
diff --git a/e2e/__snapshots__/templates.test.js.snap b/e2e/__snapshots__/templates.test.js.snap
@@ -5199,6 +5199,308 @@ Array [
 ]
 `;
 
+exports[`Templates Vue InstantSearch 2 File content: .editorconfig 1`] = `
+"root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true"
+`;
+
+exports[`Templates Vue InstantSearch 2 File content: .eslintrc.js 1`] = `
+"module.exports = {
+  // extends from 'prettier/vue' until we update the Algolia configuration
+  extends: ['algolia/vue', 'prettier/vue'],
+  rules: {
+    'import/no-commonjs': 'off',
+    // enable the rule until we update the Algolia configuration
+    'vue/component-name-in-template-casing': ['error', 'kebab-case'],
+  },
+};"
+`;
+
+exports[`Templates Vue InstantSearch 2 File content: .gitignore 1`] = `
+".DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?"
+`;
+
+exports[`Templates Vue InstantSearch 2 File content: .prettierrc 1`] = `
+"{
+  \\"singleQuote\\": true,
+  \\"proseWrap\\": \\"never\\",
+  \\"trailingComma\\": \\"es5\\"
+}"
+`;
+
+exports[`Templates Vue InstantSearch 2 File content: README.md 1`] = `
+"# vue-instantsearch-app
+
+_This project was generated with [create-instantsearch-app](https://github.com/algolia/create-instantsearch-app) by [Algolia](https://algolia.com)._
+
+## Get started
+
+To run this project locally, install the dependencies and run the local server:
+
+\`\`\`sh
+npm install
+npm start
+\`\`\`
+
+Alternatively, you may use [Yarn](https://http://yarnpkg.com/):
+
+\`\`\`sh
+yarn
+yarn start
+\`\`\`
+
+Open http://localhost:3000 to see your app."
+`;
+
+exports[`Templates Vue InstantSearch 2 File content: babel.config.js 1`] = `
+"module.exports = {
+  presets: ['@vue/app'],
+};"
+`;
+
+exports[`Templates Vue InstantSearch 2 File content: package.json 1`] = `
+"{
+  \\"name\\": \\"vue-instantsearch-app\\",
+  \\"version\\": \\"1.0.0\\",
+  \\"private\\": true,
+  \\"scripts\\": {
+    \\"start\\": \\"vue-cli-service serve --port 3000\\",
+    \\"build\\": \\"vue-cli-service build\\",
+    \\"lint\\": \\"vue-cli-service lint\\",
+    \\"lint:fix\\": \\"npm run lint -- --fix\\"
+  },
+  \\"browserslist\\": [
+    \\"> 1%\\",
+    \\"last 2 versions\\",
+    \\"not ie <= 8\\"
+  ],
+  \\"partialDependencies\\": {
+    \\"vue-instantsearch\\": \\"2.0.0\\"
+  }
+}"
+`;
+
+exports[`Templates Vue InstantSearch 2 File content: public/index.html 1`] = `
+"<!DOCTYPE html>
+<html lang=\\"en\\">
+  <head>
+    <meta charset=\\"utf-8\\">
+    <meta http-equiv=\\"X-UA-Compatible\\" content=\\"IE=edge\\">
+    <meta name=\\"viewport\\" content=\\"width=device-width,initial-scale=1.0\\">
+    <link rel=\\"icon\\" href=\\"<%= BASE_URL %>favicon.png\\">
+     <!--
+      Do not use @7 in production, use a complete version like x.x.x, see website for latest version:
+      https://www.algolia.com/doc/guides/building-search-ui/installation/react/#load-the-style
+    -->
+    <link rel=\\"stylesheet\\" href=\\"https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/algolia-min.css\\">
+    <title>vue-instantsearch-app</title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but vue-instantsearch-app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id=\\"app\\"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>"
+`;
+
+exports[`Templates Vue InstantSearch 2 File content: src/App.vue 1`] = `
+"<template>
+  <div>
+    <header class=\\"header\\">
+      <h1 class=\\"header-title\\">
+        <a href=\\"/\\">
+          vue-instantsearch-app
+        </a>
+      </h1>
+      <p class=\\"header-subtitle\\">
+        using
+        <a href=\\"https://github.com/algolia/vue-instantsearch\\">
+          Vue InstantSearch
+        </a>
+      </p>
+    </header>
+
+    <div class=\\"container\\">
+      <ais-instant-search :search-client=\\"searchClient\\" index-name=\\"indexName\\">
+        <div class=\\"search-panel\\">
+          <div class=\\"search-panel__filters\\">
+            <ais-refinement-list attribute=\\"facet1\\" />
+            <ais-refinement-list attribute=\\"facet2\\" />
+          </div>
+
+          <div class=\\"search-panel__results\\">
+            <div class=\\"searchbox\\">
+              <ais-search-box placeholder=\\"Search placeholder\\" />
+            </div>
+            <ais-hits>
+              <template slot=\\"item\\" slot-scope=\\"{ item }\\">
+                <article>
+                  <h1>
+                    <ais-highlight :hit=\\"item\\" attribute=\\"attribute1\\" />
+                  </h1>
+                  <p>
+                    <ais-highlight :hit=\\"item\\" attribute=\\"attribute2\\" />
+                  </p>
+                </article>
+              </template>
+            </ais-hits>
+
+            <div class=\\"pagination\\">
+              <ais-pagination />
+            </div>
+          </div>
+        </div>
+      </ais-instant-search>
+    </div>
+  </div>
+</template>
+
+<script>
+import algoliasearch from 'algoliasearch/lite';
+
+export default {
+  data() {
+    return {
+      searchClient: algoliasearch('appId', 'apiKey'),
+    };
+  },
+};
+</script>
+
+<style>
+body,
+h1 {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
+    Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+}
+
+em {
+  background: cyan;
+  font-style: normal;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  min-height: 50px;
+  padding: 0.5rem 1rem;
+  background-image: linear-gradient(to right, #4dba87, #2f9088);
+  color: #fff;
+  margin-bottom: 1rem;
+}
+
+.header a {
+  color: #fff;
+  text-decoration: none;
+}
+
+.header-title {
+  font-size: 1.2rem;
+  font-weight: normal;
+}
+
+.header-title::after {
+  content: ' ▸ ';
+  padding: 0 0.5rem;
+}
+
+.header-subtitle {
+  font-size: 1.2rem;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 1rem;
+}
+
+.search-panel {
+  display: flex;
+}
+
+.search-panel__filters {
+  flex: 1;
+}
+
+.search-panel__results {
+  flex: 3;
+}
+
+.searchbox {
+  margin-bottom: 2rem;
+}
+
+.pagination {
+  margin: 2rem auto;
+  text-align: center;
+}
+</style>"
+`;
+
+exports[`Templates Vue InstantSearch 2 File content: src/main.js 1`] = `
+"import Vue from 'vue';
+import InstantSearch from 'vue-instantsearch';
+import App from './App.vue';
+
+Vue.config.productionTip = false;
+
+Vue.use(InstantSearch);
+
+new Vue({
+  render: h => h(App),
+}).$mount('#app');"
+`;
+
+exports[`Templates Vue InstantSearch 2 Folder structure: contains the right files 1`] = `
+Array [
+  ".editorconfig",
+  ".eslintrc.js",
+  ".gitignore",
+  ".prettierrc",
+  "README.md",
+  "babel.config.js",
+  "package.json",
+  "public/favicon.png",
+  "public/index.html",
+  "src/App.vue",
+  "src/main.js",
+]
+`;
+
 exports[`Templates Vue InstantSearch File content: .editorconfig 1`] = `
 "root = true
 
@@ -5302,7 +5604,7 @@ exports[`Templates Vue InstantSearch File content: package.json 1`] = `
     \\"not ie <= 8\\"
   ],
   \\"partialDependencies\\": {
-    \\"vue-instantsearch\\": \\"2.0.0\\"
+    \\"vue-instantsearch\\": \\"3.0.0\\"
   }
 }"
 `;

diff --git a/src/api/__tests__/__snapshots__/index.test.js.snap b/src/api/__tests__/__snapshots__/index.test.js.snap
@@ -6,10 +6,10 @@ exports[`Options with invalid name throws 1`] = `
   - name can only contain URL-friendly characters"
 `;
 
-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"`;
+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"`;
 
-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"`;
+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"`;
 
 exports[`Options without path throws 1`] = `"The option \`path\` is required."`;
 
-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"`;
+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"`;
diff --git a/src/templates/Vue InstantSearch 2/.editorconfig b/src/templates/Vue InstantSearch 2/.editorconfig
@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
diff --git a/src/templates/Vue InstantSearch 2/.eslintrc.js b/src/templates/Vue InstantSearch 2/.eslintrc.js
@@ -0,0 +1,9 @@
+module.exports = {
+  // extends from 'prettier/vue' until we update the Algolia configuration
+  extends: ['algolia/vue', 'prettier/vue'],
+  rules: {
+    'import/no-commonjs': 'off',
+    // enable the rule until we update the Algolia configuration
+    'vue/component-name-in-template-casing': ['error', 'kebab-case'],
+  },
+};
diff --git a/src/templates/Vue InstantSearch 2/.gitignore.template b/src/templates/Vue InstantSearch 2/.gitignore.template
@@ -0,0 +1,21 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/src/templates/Vue InstantSearch 2/.prettierrc b/src/templates/Vue InstantSearch 2/.prettierrc
@@ -0,0 +1,5 @@
+{
+  "singleQuote": true,
+  "proseWrap": "never",
+  "trailingComma": "es5"
+}
diff --git a/src/templates/Vue InstantSearch 2/.template.js b/src/templates/Vue InstantSearch 2/.template.js
@@ -0,0 +1,15 @@
+const install = require('../../tasks/node/install');
+const teardown = require('../../tasks/node/teardown');
+
+module.exports = {
+  category: 'Web',
+  libraryName: 'vue-instantsearch',
+  templateName: 'vue-instantsearch-2.x',
+  supportedVersion: '>= 2.0.0 < 3.0.0',
+  appName: 'vue-instantsearch-app',
+  keywords: ['algolia', 'InstantSearch', 'Vue', 'vue-instantsearch'],
+  tasks: {
+    install,
+    teardown,
+  },
+};