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

Commit 6fa13b7

Browse files
authored
refactor(templates): use Vue CLI for 1.x.x (#403)
* refactor(templates): use Vue CLI for 1.x.x * update name in noscript
1 parent 4a14b81 commit 6fa13b7

File tree

15 files changed

+192
-345
lines changed

15 files changed

+192
-345
lines changed

e2e/__snapshots__/templates.test.js.snap

Lines changed: 100 additions & 175 deletions
Original file line numberDiff line numberDiff line change
@@ -4566,15 +4566,6 @@ Array [
45664566
]
45674567
`;
45684568

4569-
exports[`Templates Vue InstantSearch 1 File content: .babelrc 1`] = `
4570-
"{
4571-
\\"presets\\": [
4572-
[\\"env\\", { \\"modules\\": false }],
4573-
\\"stage-3\\"
4574-
]
4575-
}"
4576-
`;
4577-
45784569
exports[`Templates Vue InstantSearch 1 File content: .editorconfig 1`] = `
45794570
"root = true
45804571
@@ -4589,19 +4580,46 @@ trim_trailing_whitespace = true"
45894580

45904581
exports[`Templates Vue InstantSearch 1 File content: .eslintrc.js 1`] = `
45914582
"module.exports = {
4592-
extends: 'algolia/vue',
4583+
// extends from 'prettier/vue' until we update the Algolia configuration
4584+
extends: ['algolia/vue', 'prettier/vue'],
45934585
rules: {
45944586
'import/no-commonjs': 'off',
4587+
// enable the rule until we update the Algolia configuration
4588+
'vue/component-name-in-template-casing': ['error', 'kebab-case'],
45954589
},
45964590
};"
45974591
`;
45984592

45994593
exports[`Templates Vue InstantSearch 1 File content: .gitignore 1`] = `
4600-
"node_modules/
4601-
npm-debug.log
4602-
yarn-debug.log
4603-
yarn-error.log
4604-
dist/"
4594+
".DS_Store
4595+
node_modules
4596+
/dist
4597+
4598+
# local env files
4599+
.env.local
4600+
.env.*.local
4601+
4602+
# Log files
4603+
npm-debug.log*
4604+
yarn-debug.log*
4605+
yarn-error.log*
4606+
4607+
# Editor directories and files
4608+
.idea
4609+
.vscode
4610+
*.suo
4611+
*.ntvs*
4612+
*.njsproj
4613+
*.sln
4614+
*.sw?"
4615+
`;
4616+
4617+
exports[`Templates Vue InstantSearch 1 File content: .prettierrc 1`] = `
4618+
"{
4619+
\\"singleQuote\\": true,
4620+
\\"proseWrap\\": \\"never\\",
4621+
\\"trailingComma\\": \\"es5\\"
4622+
}"
46054623
`;
46064624

46074625
exports[`Templates Vue InstantSearch 1 File content: README.md 1`] = `
@@ -4628,56 +4646,10 @@ yarn start
46284646
Open http://localhost:3000 to see your app."
46294647
`;
46304648

4631-
exports[`Templates Vue InstantSearch 1 File content: index.html 1`] = `
4632-
"<!DOCTYPE html>
4633-
<html lang=\\"en\\">
4634-
4635-
<head>
4636-
<meta charset=\\"utf-8\\">
4637-
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1, shrink-to-fit=no\\">
4638-
<meta name=\\"theme-color\\" content=\\"#000000\\">
4639-
4640-
<link rel=\\"manifest\\" href=\\"manifest.json\\">
4641-
<link rel=\\"shortcut icon\\" href=\\"favicon.png\\">
4642-
4643-
<!--
4644-
Do not use @7 in production, use a complete version like x.x.x, see website for latest version:
4645-
https://www.algolia.com/doc/guides/building-search-ui/installation/react/#load-the-style
4646-
-->
4647-
<link rel=\\"stylesheet\\" href=\\"https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/algolia-min.css\\">
4648-
4649-
<title>vue-instantsearch-app</title>
4650-
</head>
4651-
4652-
<body>
4653-
<noscript>
4654-
You need to enable JavaScript to run this app.
4655-
</noscript>
4656-
4657-
<div id=\\"app\\"></div>
4658-
4659-
<script src=\\"/dist/build.js\\"></script>
4660-
</body>
4661-
4662-
</html>"
4663-
`;
4664-
4665-
exports[`Templates Vue InstantSearch 1 File content: manifest.json 1`] = `
4666-
"{
4667-
\\"short_name\\": \\"vue-instantsearch-app\\",
4668-
\\"name\\": \\"vue-instantsearch-app Sample\\",
4669-
\\"icons\\": [
4670-
{
4671-
\\"src\\": \\"favicon.png\\",
4672-
\\"sizes\\": \\"64x64 32x32 24x24 16x16\\",
4673-
\\"type\\": \\"image/x-icon\\"
4674-
}
4675-
],
4676-
\\"start_url\\": \\"./index.html\\",
4677-
\\"display\\": \\"standalone\\",
4678-
\\"theme_color\\": \\"#000000\\",
4679-
\\"background_color\\": \\"#ffffff\\"
4680-
}"
4649+
exports[`Templates Vue InstantSearch 1 File content: babel.config.js 1`] = `
4650+
"module.exports = {
4651+
presets: ['@vue/app'],
4652+
};"
46814653
`;
46824654

46834655
exports[`Templates Vue InstantSearch 1 File content: package.json 1`] = `
@@ -4686,17 +4658,47 @@ exports[`Templates Vue InstantSearch 1 File content: package.json 1`] = `
46864658
\\"version\\": \\"1.0.0\\",
46874659
\\"private\\": true,
46884660
\\"scripts\\": {
4689-
\\"start\\": \\"cross-env NODE_ENV=development webpack-dev-server --port 3000 --hot\\",
4690-
\\"build\\": \\"cross-env NODE_ENV=production webpack --progress --hide-modules\\",
4691-
\\"lint\\": \\"eslint --ext .js,.vue .\\",
4661+
\\"start\\": \\"vue-cli-service serve --port 3000\\",
4662+
\\"build\\": \\"vue-cli-service build\\",
4663+
\\"lint\\": \\"vue-cli-service lint\\",
46924664
\\"lint:fix\\": \\"npm run lint -- --fix\\"
46934665
},
4666+
\\"browserslist\\": [
4667+
\\"> 1%\\",
4668+
\\"last 2 versions\\",
4669+
\\"not ie <= 8\\"
4670+
],
46944671
\\"partialDependencies\\": {
46954672
\\"vue-instantsearch\\": \\"1.0.0\\"
46964673
}
46974674
}"
46984675
`;
46994676

4677+
exports[`Templates Vue InstantSearch 1 File content: public/index.html 1`] = `
4678+
"<!DOCTYPE html>
4679+
<html lang=\\"en\\">
4680+
<head>
4681+
<meta charset=\\"utf-8\\">
4682+
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"IE=edge\\">
4683+
<meta name=\\"viewport\\" content=\\"width=device-width,initial-scale=1.0\\">
4684+
<link rel=\\"icon\\" href=\\"<%= BASE_URL %>favicon.png\\">
4685+
<!--
4686+
Do not use @7 in production, use a complete version like x.x.x, see website for latest version:
4687+
https://www.algolia.com/doc/guides/building-search-ui/installation/react/#load-the-style
4688+
-->
4689+
<link rel=\\"stylesheet\\" href=\\"https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/algolia-min.css\\">
4690+
<title>vue-instantsearch-app</title>
4691+
</head>
4692+
<body>
4693+
<noscript>
4694+
<strong>We're sorry but vue-instantsearch-app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
4695+
</noscript>
4696+
<div id=\\"app\\"></div>
4697+
<!-- built files will be auto injected -->
4698+
</body>
4699+
</html>"
4700+
`;
4701+
47004702
exports[`Templates Vue InstantSearch 1 File content: src/App.vue 1`] = `
47014703
"<template>
47024704
<div>
@@ -4713,30 +4715,29 @@ exports[`Templates Vue InstantSearch 1 File content: src/App.vue 1`] = `
47134715
</header>
47144716
47154717
<div class=\\"container\\">
4716-
<ais-index
4717-
app-id=\\"appId\\"
4718-
api-key=\\"apiKey\\"
4719-
index-name=\\"indexName\\"
4720-
>
4718+
<ais-index app-id=\\"appId\\" api-key=\\"apiKey\\" index-name=\\"indexName\\">
47214719
<div class=\\"search-panel\\">
47224720
<div class=\\"search-panel__filters\\">
47234721
<ais-refinement-list attribute-name=\\"facet1\\"></ais-refinement-list>
47244722
<ais-refinement-list attribute-name=\\"facet2\\"></ais-refinement-list>
47254723
</div>
47264724
47274725
<div class=\\"search-panel__results\\">
4728-
<ais-search-box
4729-
placeholder=\\"Search placeholder\\"
4730-
class=\\"ais-SearchBox-form\\"
4731-
:class-names=\\"{
4732-
'ais-search-box': 'ais-SearchBox',
4733-
'ais-input': 'ais-SearchBox-input',
4734-
'ais-clear': 'ais-SearchBox-reset',
4735-
'ais-clear--disabled': 'ais-SearchBox-reset--disabled',
4736-
'ais-search-box__submit': 'ais-SearchBox-submit',
4737-
'ais-search-box__loading-indicator': 'ais-SearchBox-loadingIndicator',
4738-
}\\"
4739-
/>
4726+
<div class=\\"searchbox\\">
4727+
<ais-search-box
4728+
placeholder=\\"Search placeholder\\"
4729+
class=\\"ais-SearchBox-form\\"
4730+
:class-names=\\"{
4731+
'ais-search-box': 'ais-SearchBox',
4732+
'ais-input': 'ais-SearchBox-input',
4733+
'ais-clear': 'ais-SearchBox-reset',
4734+
'ais-clear--disabled': 'ais-SearchBox-reset--disabled',
4735+
'ais-search-box__submit': 'ais-SearchBox-submit',
4736+
'ais-search-box__loading-indicator':
4737+
'ais-SearchBox-loadingIndicator',
4738+
}\\"
4739+
/>
4740+
</div>
47404741
47414742
<ais-results class=\\"ais-Hits-list\\">
47424743
<template slot-scope=\\"{ result }\\">
@@ -4762,9 +4763,13 @@ exports[`Templates Vue InstantSearch 1 File content: src/App.vue 1`] = `
47624763
:class-names=\\"{
47634764
'ais-pagination': 'ais-Pagination-list',
47644765
'ais-pagination__item': 'ais-Pagination-item',
4766+
'ais-pagination__item--active':
4767+
'ais-Pagination-item--selected',
47654768
'ais-pagination__item--next': 'ais-Pagination-item--next',
4766-
'ais-pagination__item--previous': 'ais-Pagination-item--previous',
4767-
'ais-pagination__item--disabled': 'ais-Pagination-item--disabled',
4769+
'ais-pagination__item--previous':
4770+
'ais-Pagination-item--previous',
4771+
'ais-pagination__item--disabled':
4772+
'ais-Pagination-item--disabled',
47684773
'ais-pagination__item--first': 'ais-Pagination-item--first',
47694774
'ais-pagination__item--last': 'ais-Pagination-item--last',
47704775
'ais-pagination__link': 'ais-Pagination-link',
@@ -4855,111 +4860,31 @@ em {
48554860

48564861
exports[`Templates Vue InstantSearch 1 File content: src/main.js 1`] = `
48574862
"import Vue from 'vue';
4858-
import App from './App.vue';
48594863
import InstantSearch from 'vue-instantsearch';
4864+
import App from './App.vue';
4865+
4866+
Vue.config.productionTip = false;
48604867
48614868
Vue.use(InstantSearch);
48624869
4863-
// eslint-disable-next-line no-new
48644870
new Vue({
4865-
el: '#app',
48664871
render: h => h(App),
4867-
});"
4868-
`;
4869-
4870-
exports[`Templates Vue InstantSearch 1 File content: webpack.config.js 1`] = `
4871-
"const path = require('path');
4872-
const webpack = require('webpack');
4873-
4874-
module.exports = {
4875-
entry: './src/main.js',
4876-
output: {
4877-
path: path.resolve(__dirname, './dist'),
4878-
publicPath: '/dist/',
4879-
filename: 'build.js',
4880-
},
4881-
module: {
4882-
rules: [
4883-
{
4884-
test: /\\\\.css$/,
4885-
use: ['vue-style-loader', 'css-loader'],
4886-
},
4887-
{
4888-
test: /\\\\.vue$/,
4889-
loader: 'vue-loader',
4890-
options: {
4891-
loaders: {},
4892-
// other vue-loader options go here
4893-
},
4894-
},
4895-
{
4896-
test: /\\\\.js$/,
4897-
loader: 'babel-loader',
4898-
exclude: /node_modules/,
4899-
},
4900-
{
4901-
test: /\\\\.(png|jpg|gif|svg)$/,
4902-
loader: 'file-loader',
4903-
options: {
4904-
name: '[name].[ext]?[hash]',
4905-
},
4906-
},
4907-
],
4908-
},
4909-
resolve: {
4910-
alias: {
4911-
vue$: 'vue/dist/vue.esm.js',
4912-
},
4913-
extensions: ['*', '.js', '.vue', '.json'],
4914-
},
4915-
devServer: {
4916-
historyApiFallback: true,
4917-
noInfo: true,
4918-
overlay: true,
4919-
port: 3000,
4920-
},
4921-
performance: {
4922-
hints: false,
4923-
},
4924-
devtool: '#eval-source-map',
4925-
};
4926-
4927-
if (process.env.NODE_ENV === 'production') {
4928-
module.exports.devtool = '#source-map';
4929-
// http://vue-loader.vuejs.org/en/workflow/production.html
4930-
module.exports.plugins = (module.exports.plugins || []).concat([
4931-
new webpack.DefinePlugin({
4932-
'process.env': {
4933-
NODE_ENV: '\\"production\\"',
4934-
},
4935-
}),
4936-
new webpack.optimize.UglifyJsPlugin({
4937-
sourceMap: true,
4938-
compress: {
4939-
warnings: false,
4940-
},
4941-
}),
4942-
new webpack.LoaderOptionsPlugin({
4943-
minimize: true,
4944-
}),
4945-
]);
4946-
}"
4872+
}).$mount('#app');"
49474873
`;
49484874

49494875
exports[`Templates Vue InstantSearch 1 Folder structure: contains the right files 1`] = `
49504876
Array [
4951-
".babelrc",
49524877
".editorconfig",
49534878
".eslintrc.js",
49544879
".gitignore",
4880+
".prettierrc",
49554881
"README.md",
4956-
"favicon.png",
4957-
"index.html",
4958-
"manifest.json",
4882+
"babel.config.js",
49594883
"package.json",
4884+
"public/favicon.png",
4885+
"public/index.html",
49604886
"src/App.vue",
49614887
"src/main.js",
4962-
"webpack.config.js",
49634888
]
49644889
`;
49654890

src/templates/Vue InstantSearch 1/.babelrc.template

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

0 commit comments

Comments
 (0)