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

Commit 4a14b81

Browse files
samousssamouss
authored
refactor(templates): use Vue CLI for 2.x.x (#402)
* refactor(templates): use Vue CLI * fix(templates): use port 3000 for Vue * update name in noscript
1 parent ec7db42 commit 4a14b81

File tree

16 files changed

+172
-337
lines changed

16 files changed

+172
-337
lines changed

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

4.19 KB
Loading

‎src/templates/Vue InstantSearch/favicon.png‎ renamed to ‎e2e/__image_snapshots__/vue-instantsearch/public/favicon.png-snap.png‎

File renamed without changes.

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

Lines changed: 88 additions & 175 deletions
Original file line numberDiff line numberDiff line change
@@ -4963,15 +4963,6 @@ Array [
49634963
]
49644964
`;
49654965

4966-
exports[`Templates Vue InstantSearch File content: .babelrc 1`] = `
4967-
"{
4968-
\\"presets\\": [
4969-
[\\"env\\", { \\"modules\\": false }],
4970-
\\"stage-3\\"
4971-
]
4972-
}"
4973-
`;
4974-
49754966
exports[`Templates Vue InstantSearch File content: .editorconfig 1`] = `
49764967
"root = true
49774968
@@ -4986,19 +4977,46 @@ trim_trailing_whitespace = true"
49864977

49874978
exports[`Templates Vue InstantSearch File content: .eslintrc.js 1`] = `
49884979
"module.exports = {
4989-
extends: 'algolia/vue',
4980+
// extends from 'prettier/vue' until we update the Algolia configuration
4981+
extends: ['algolia/vue', 'prettier/vue'],
49904982
rules: {
49914983
'import/no-commonjs': 'off',
4984+
// enable the rule until we update the Algolia configuration
4985+
'vue/component-name-in-template-casing': ['error', 'kebab-case'],
49924986
},
49934987
};"
49944988
`;
49954989

49964990
exports[`Templates Vue InstantSearch File content: .gitignore 1`] = `
4997-
"node_modules/
4998-
npm-debug.log
4999-
yarn-debug.log
5000-
yarn-error.log
5001-
dist/"
4991+
".DS_Store
4992+
node_modules
4993+
/dist
4994+
4995+
# local env files
4996+
.env.local
4997+
.env.*.local
4998+
4999+
# Log files
5000+
npm-debug.log*
5001+
yarn-debug.log*
5002+
yarn-error.log*
5003+
5004+
# Editor directories and files
5005+
.idea
5006+
.vscode
5007+
*.suo
5008+
*.ntvs*
5009+
*.njsproj
5010+
*.sln
5011+
*.sw?"
5012+
`;
5013+
5014+
exports[`Templates Vue InstantSearch File content: .prettierrc 1`] = `
5015+
"{
5016+
\\"singleQuote\\": true,
5017+
\\"proseWrap\\": \\"never\\",
5018+
\\"trailingComma\\": \\"es5\\"
5019+
}"
50025020
`;
50035021

50045022
exports[`Templates Vue InstantSearch File content: README.md 1`] = `
@@ -5025,56 +5043,10 @@ yarn start
50255043
Open http://localhost:3000 to see your app."
50265044
`;
50275045

5028-
exports[`Templates Vue InstantSearch File content: index.html 1`] = `
5029-
"<!DOCTYPE html>
5030-
<html lang=\\"en\\">
5031-
5032-
<head>
5033-
<meta charset=\\"utf-8\\">
5034-
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1, shrink-to-fit=no\\">
5035-
<meta name=\\"theme-color\\" content=\\"#000000\\">
5036-
5037-
<link rel=\\"manifest\\" href=\\"manifest.json\\">
5038-
<link rel=\\"shortcut icon\\" href=\\"favicon.png\\">
5039-
5040-
<!--
5041-
Do not use @7 in production, use a complete version like x.x.x, see website for latest version:
5042-
https://www.algolia.com/doc/guides/building-search-ui/installation/react/#load-the-style
5043-
-->
5044-
<link rel=\\"stylesheet\\" href=\\"https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/algolia-min.css\\">
5045-
5046-
<title>vue-instantsearch-app</title>
5047-
</head>
5048-
5049-
<body>
5050-
<noscript>
5051-
You need to enable JavaScript to run this app.
5052-
</noscript>
5053-
5054-
<div id=\\"app\\"></div>
5055-
5056-
<script src=\\"/dist/build.js\\"></script>
5057-
</body>
5058-
5059-
</html>"
5060-
`;
5061-
5062-
exports[`Templates Vue InstantSearch File content: manifest.json 1`] = `
5063-
"{
5064-
\\"short_name\\": \\"vue-instantsearch-app\\",
5065-
\\"name\\": \\"vue-instantsearch-app Sample\\",
5066-
\\"icons\\": [
5067-
{
5068-
\\"src\\": \\"favicon.png\\",
5069-
\\"sizes\\": \\"64x64 32x32 24x24 16x16\\",
5070-
\\"type\\": \\"image/x-icon\\"
5071-
}
5072-
],
5073-
\\"start_url\\": \\"./index.html\\",
5074-
\\"display\\": \\"standalone\\",
5075-
\\"theme_color\\": \\"#000000\\",
5076-
\\"background_color\\": \\"#ffffff\\"
5077-
}"
5046+
exports[`Templates Vue InstantSearch File content: babel.config.js 1`] = `
5047+
"module.exports = {
5048+
presets: ['@vue/app'],
5049+
};"
50785050
`;
50795051

50805052
exports[`Templates Vue InstantSearch File content: package.json 1`] = `
@@ -5083,23 +5055,55 @@ exports[`Templates Vue InstantSearch File content: package.json 1`] = `
50835055
\\"version\\": \\"1.0.0\\",
50845056
\\"private\\": true,
50855057
\\"scripts\\": {
5086-
\\"start\\": \\"cross-env NODE_ENV=development webpack-dev-server --port 3000 --hot\\",
5087-
\\"build\\": \\"cross-env NODE_ENV=production webpack --progress --hide-modules\\",
5088-
\\"lint\\": \\"eslint --ext .js,.vue .\\",
5058+
\\"start\\": \\"vue-cli-service serve --port 3000\\",
5059+
\\"build\\": \\"vue-cli-service build\\",
5060+
\\"lint\\": \\"vue-cli-service lint\\",
50895061
\\"lint:fix\\": \\"npm run lint -- --fix\\"
50905062
},
5063+
\\"browserslist\\": [
5064+
\\"> 1%\\",
5065+
\\"last 2 versions\\",
5066+
\\"not ie <= 8\\"
5067+
],
50915068
\\"partialDependencies\\": {
50925069
\\"vue-instantsearch\\": \\"2.0.0\\"
50935070
}
50945071
}"
50955072
`;
50965073

5074+
exports[`Templates Vue InstantSearch File content: public/index.html 1`] = `
5075+
"<!DOCTYPE html>
5076+
<html lang=\\"en\\">
5077+
<head>
5078+
<meta charset=\\"utf-8\\">
5079+
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"IE=edge\\">
5080+
<meta name=\\"viewport\\" content=\\"width=device-width,initial-scale=1.0\\">
5081+
<link rel=\\"icon\\" href=\\"<%= BASE_URL %>favicon.png\\">
5082+
<!--
5083+
Do not use @7 in production, use a complete version like x.x.x, see website for latest version:
5084+
https://www.algolia.com/doc/guides/building-search-ui/installation/react/#load-the-style
5085+
-->
5086+
<link rel=\\"stylesheet\\" href=\\"https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/algolia-min.css\\">
5087+
<title>vue-instantsearch-app</title>
5088+
</head>
5089+
<body>
5090+
<noscript>
5091+
<strong>We're sorry but vue-instantsearch-app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
5092+
</noscript>
5093+
<div id=\\"app\\"></div>
5094+
<!-- built files will be auto injected -->
5095+
</body>
5096+
</html>"
5097+
`;
5098+
50975099
exports[`Templates Vue InstantSearch File content: src/App.vue 1`] = `
50985100
"<template>
50995101
<div>
51005102
<header class=\\"header\\">
51015103
<h1 class=\\"header-title\\">
5102-
<a href=\\"/\\">vue-instantsearch-app</a>
5104+
<a href=\\"/\\">
5105+
vue-instantsearch-app
5106+
</a>
51035107
</h1>
51045108
<p class=\\"header-subtitle\\">
51055109
using
@@ -5110,32 +5114,25 @@ exports[`Templates Vue InstantSearch File content: src/App.vue 1`] = `
51105114
</header>
51115115
51125116
<div class=\\"container\\">
5113-
<ais-instant-search
5114-
:search-client=\\"searchClient\\"
5115-
index-name=\\"indexName\\"
5116-
>
5117+
<ais-instant-search :search-client=\\"searchClient\\" index-name=\\"indexName\\">
51175118
<div class=\\"search-panel\\">
51185119
<div class=\\"search-panel__filters\\">
51195120
<ais-refinement-list attribute=\\"facet1\\" />
51205121
<ais-refinement-list attribute=\\"facet2\\" />
51215122
</div>
51225123
51235124
<div class=\\"search-panel__results\\">
5124-
<ais-search-box placeholder=\\"Search placeholder\\" />
5125+
<div class=\\"searchbox\\">
5126+
<ais-search-box placeholder=\\"Search placeholder\\" />
5127+
</div>
51255128
<ais-hits>
51265129
<template slot=\\"item\\" slot-scope=\\"{ item }\\">
51275130
<article>
51285131
<h1>
5129-
<ais-highlight
5130-
:hit=\\"item\\"
5131-
attribute=\\"attribute1\\"
5132-
/>
5132+
<ais-highlight :hit=\\"item\\" attribute=\\"attribute1\\" />
51335133
</h1>
51345134
<p>
5135-
<ais-highlight
5136-
:hit=\\"item\\"
5137-
attribute=\\"attribute2\\"
5138-
/>
5135+
<ais-highlight :hit=\\"item\\" attribute=\\"attribute2\\" />
51395136
</p>
51405137
</article>
51415138
</template>
@@ -5157,16 +5154,12 @@ import algoliasearch from 'algoliasearch/lite';
51575154
export default {
51585155
data() {
51595156
return {
5160-
searchClient: algoliasearch(
5161-
'appId',
5162-
'apiKey'
5163-
),
5157+
searchClient: algoliasearch('appId', 'apiKey'),
51645158
};
51655159
},
51665160
};
51675161
</script>
51685162
5169-
51705163
<style>
51715164
body,
51725165
h1 {
@@ -5244,110 +5237,30 @@ em {
52445237

52455238
exports[`Templates Vue InstantSearch File content: src/main.js 1`] = `
52465239
"import Vue from 'vue';
5247-
import App from './App.vue';
52485240
import InstantSearch from 'vue-instantsearch';
5241+
import App from './App.vue';
5242+
5243+
Vue.config.productionTip = false;
52495244
52505245
Vue.use(InstantSearch);
52515246
5252-
// eslint-disable-next-line no-new
52535247
new Vue({
5254-
el: '#app',
52555248
render: h => h(App),
5256-
});"
5257-
`;
5258-
5259-
exports[`Templates Vue InstantSearch File content: webpack.config.js 1`] = `
5260-
"const path = require('path');
5261-
const webpack = require('webpack');
5262-
5263-
module.exports = {
5264-
entry: './src/main.js',
5265-
output: {
5266-
path: path.resolve(__dirname, './dist'),
5267-
publicPath: '/dist/',
5268-
filename: 'build.js',
5269-
},
5270-
module: {
5271-
rules: [
5272-
{
5273-
test: /\\\\.css$/,
5274-
use: ['vue-style-loader', 'css-loader'],
5275-
},
5276-
{
5277-
test: /\\\\.vue$/,
5278-
loader: 'vue-loader',
5279-
options: {
5280-
loaders: {},
5281-
// other vue-loader options go here
5282-
},
5283-
},
5284-
{
5285-
test: /\\\\.js$/,
5286-
loader: 'babel-loader',
5287-
exclude: /node_modules/,
5288-
},
5289-
{
5290-
test: /\\\\.(png|jpg|gif|svg)$/,
5291-
loader: 'file-loader',
5292-
options: {
5293-
name: '[name].[ext]?[hash]',
5294-
},
5295-
},
5296-
],
5297-
},
5298-
resolve: {
5299-
alias: {
5300-
vue$: 'vue/dist/vue.esm.js',
5301-
},
5302-
extensions: ['*', '.js', '.vue', '.json'],
5303-
},
5304-
devServer: {
5305-
historyApiFallback: true,
5306-
noInfo: true,
5307-
overlay: true,
5308-
port: 3000,
5309-
},
5310-
performance: {
5311-
hints: false,
5312-
},
5313-
devtool: '#eval-source-map',
5314-
};
5315-
5316-
if (process.env.NODE_ENV === 'production') {
5317-
module.exports.devtool = '#source-map';
5318-
// http://vue-loader.vuejs.org/en/workflow/production.html
5319-
module.exports.plugins = (module.exports.plugins || []).concat([
5320-
new webpack.DefinePlugin({
5321-
'process.env': {
5322-
NODE_ENV: '\\"production\\"',
5323-
},
5324-
}),
5325-
new webpack.optimize.UglifyJsPlugin({
5326-
sourceMap: true,
5327-
compress: {
5328-
warnings: false,
5329-
},
5330-
}),
5331-
new webpack.LoaderOptionsPlugin({
5332-
minimize: true,
5333-
}),
5334-
]);
5335-
}"
5249+
}).$mount('#app');"
53365250
`;
53375251

53385252
exports[`Templates Vue InstantSearch Folder structure: contains the right files 1`] = `
53395253
Array [
5340-
".babelrc",
53415254
".editorconfig",
53425255
".eslintrc.js",
53435256
".gitignore",
5257+
".prettierrc",
53445258
"README.md",
5345-
"favicon.png",
5346-
"index.html",
5347-
"manifest.json",
5259+
"babel.config.js",
53485260
"package.json",
5261+
"public/favicon.png",
5262+
"public/index.html",
53495263
"src/App.vue",
53505264
"src/main.js",
5351-
"webpack.config.js",
53525265
]
53535266
`;

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

Lines changed: 0 additions & 6 deletions
This file was deleted.

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

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)