Fixes linting issues

.eslintrc.json

@@ -12,6 +12,7 @@
 		"wikimedia/mediawiki"
 	],
 	"rules": {
+		"es-x/no-array-prototype-includes": "off",
 		"no-jquery/variable-pattern": "off",
 		"no-implicit-globals": "off",
 		"max-len": "off",
@@ -26,6 +27,10 @@
 			"files": "**/**/*.vue",
 			"extends": "wikimedia/vue-es6",
 			"rules": {
+				"vue/no-undef-properties": "warn",
+				"es-x/no-array-prototype-includes": "off",
+				"vue/component-name-in-template-casing": "warn",
+				"vue/multi-word-component-names": "warn",
 				"no-restricted-syntax": "off",
 				"max-statements-per-line": "off",
 				"max-len": "off",

src/App.vue

@@ -1,10 +1,15 @@
 <template>
-	<router-view class="container"></router-view>
+	<RouterView class="container"></RouterView>
 </template>
 
 <script>
+import { RouterView } from 'vue-router';
+
 export default {
-	name: 'App'
+	name: 'App',
+	components: {
+		RouterView
+	}
 };
 </script>
 

src/api.js

@@ -20,12 +20,12 @@ function cachedJSONFetch( url ) {
 }
 
 function getSkinJSON( title, isAnon ) {
-	return fetch( `${HOST}/wiki/${title}?useskin=skinjson&testuser=${isAnon ? 0 : 1}` )
+	return fetch( `${ HOST }/wiki/${ title }?useskin=skinjson&testuser=${ isAnon ? 0 : 1 }` )
 		.then( ( r ) => r.json() );
 }
 
 function getDemoEnabledSkins() {
-	return cachedJSONFetch( `${HOST}w/rest.php/v1/skins` )
+	return cachedJSONFetch( `${ HOST }w/rest.php/v1/skins` )
 		.then( ( data ) => {
 			Object.keys( data.skins ).forEach( ( key ) => {
 				data.skins[ key ].author = (
@@ -72,12 +72,12 @@ function queryMediaWikiSkins( category, installedSkins, gcmcontinue = '', pages
 	const url = `https://www.mediawiki.org
 /w/api.php?action=query
 &format=json&origin=*&prop=pageviews%7Cpageimages%7Ccategories&formatversion=2&origin=*
-&clcategories=${CATEGORY_ADDITIONAL_REQUIREMENTS}%7C${CATEGORY_REQUIRE_MODIFICATION}%7C${CATEGORY_INCOMPATIBLE_WITH_MEDIAWIKI_MASTER}
-&cllimit=${MAX}
-&piprop=thumbnail&pithumbsize=400&pilimit=${MAX}
+&clcategories=${ CATEGORY_ADDITIONAL_REQUIREMENTS }%7C${ CATEGORY_REQUIRE_MODIFICATION }%7C${ CATEGORY_INCOMPATIBLE_WITH_MEDIAWIKI_MASTER }
+&cllimit=${ MAX }
+&piprop=thumbnail&pithumbsize=400&pilimit=${ MAX }
 &pvipmetric=pageviews&pvipdays=60
-&generator=categorymembers&gcmlimit=${MAX}&gcmtitle=${encodeURIComponent( category )}&gcmnamespace=106
-&${gcmcontinue}`.replace( /\n/g, '' );
+&generator=categorymembers&gcmlimit=${ MAX }&gcmtitle=${ encodeURIComponent( category ) }&gcmnamespace=106
+&${ gcmcontinue }`.replace( /\n/g, '' );
 
 	return cachedJSONFetch( url ).then( ( r ) => {
 		if ( r ) {
@@ -100,13 +100,33 @@ function queryMediaWikiSkins( category, installedSkins, gcmcontinue = '', pages
 
 						const score = () => {
 							let s = 0;
-							if ( mightBreak ) { s--; }
-							if ( src ) { s++; }
-							if ( isCompatible ) { s++; } else { s--; }
-							if ( !hasDependencies ) { s++; } else if ( !requiresModification ) { s++; } else { s--; }
-							if ( beta ) { s--; }
-							if ( unmaintained ) { s -= 100; }
-							if ( !experimental ) { s++; }
+							if ( mightBreak ) {
+								s--;
+							}
+							if ( src ) {
+								s++;
+							}
+							if ( isCompatible ) {
+								s++;
+							} else {
+								s--;
+							}
+							if ( !hasDependencies ) {
+								s++;
+							} else if ( !requiresModification ) {
+								s++;
+							} else {
+								s--;
+							}
+							if ( beta ) {
+								s--;
+							}
+							if ( unmaintained ) {
+								s -= 100;
+							}
+							if ( !experimental ) {
+								s++;
+							}
 							return s;
 						};
 
@@ -138,7 +158,7 @@ function queryMediaWikiSkins( category, installedSkins, gcmcontinue = '', pages
 			}
 
 			if ( r.continue ) {
-				const continueKey = Object.keys( r.continue ).map( ( key ) => `${key}=${r.continue[ key ]}` ).join( '&' );
+				const continueKey = Object.keys( r.continue ).map( ( key ) => `${ key }=${ r.continue[ key ] }` ).join( '&' );
 				return queryMediaWikiSkins( category, installedSkins, continueKey, pages );
 			} else {
 				return pages;
@@ -174,7 +194,7 @@ function populateSkinIndexAfter( skinPages ) {
 		const isVariant = skin.name.indexOf( '/' ) > -1;
 		const parentSkin = isVariant ? skin.name.split( '/' )[ 0 ] : null;
 		skins[ skin.key ] = Object.assign( skin, {
-			parentSkinUrl: isVariant ? `https://mediawiki.org/wiki/Skin:${parentSkin}` : null,
+			parentSkinUrl: isVariant ? `https://mediawiki.org/wiki/Skin:${ parentSkin }` : null,
 			parentSkinKey: isVariant ? getSkinKeyFromName( parentSkin ) : null,
 			isVariant
 		} );
@@ -248,12 +268,12 @@ function fetchSkinInfo( key ) {
 		if ( !skin ) {
 			return Promise.reject();
 		}
-		const title = `Skin%3A${skin.name}`;
+		const title = `Skin%3A${ skin.name }`;
 		const revisionsQuery = 'rvdir=newer&rvlimit=1&rvprop=timestamp';
 		return Promise.all( [
 			// https://www.mediawiki.org/wiki/Special:ApiSandbox#action=query&format=json&prop=categories%7Cextracts%7Cextlinks&titles=Skin%3AMinerva_Neue&redirects=1&formatversion=2&cllimit=max&exsentences=3&exlimit=max&exintro=1&explaintext=1&ellimit=max
-			cachedJSONFetch( `https://www.mediawiki.org/w/api.php?action=query&format=json&${revisionsQuery}&prop=revisions%7Ccategories%7Cextlinks&redirects=1&formatversion=2&cllimit=max&origin=*&titles=${title}` ),
-			cachedJSONFetch( `https://www.mediawiki.org/w/api.php?action=parse&format=json&origin=*&page=${title}&section=0` )
+			cachedJSONFetch( `https://www.mediawiki.org/w/api.php?action=query&format=json&${ revisionsQuery }&prop=revisions%7Ccategories%7Cextlinks&redirects=1&formatversion=2&cllimit=max&origin=*&titles=${ title }` ),
+			cachedJSONFetch( `https://www.mediawiki.org/w/api.php?action=parse&format=json&origin=*&page=${ title }&section=0` )
 		] )
 			.then( ( responseObjects ) => {
 				const result = responseObjects[ 0 ];
@@ -274,7 +294,7 @@ function fetchSkinInfo( key ) {
 					categories = ( p.categories || [] ).map( ( c ) => c.title );
 					links.push( {
 						text: 'View on mediawiki.org',
-						href: info.title ? `https://mediawiki.org/wiki/${info.title}` : ''
+						href: info.title ? `https://mediawiki.org/wiki/${ info.title }` : ''
 					} );
 					const firstRevision = info.revisions[ 0 ];
 					if ( skin.parentSkinUrl ) {
@@ -339,13 +359,9 @@ function fetchSkinInfo( key ) {
 }
 
 function fetchSkinsRemote() {
-	return getSkinIndex().then( () => {
-		return {
-			skins: Object.keys( skins ).map( ( key ) => {
-				return Object.assign( {}, skins[ key ] );
-			} )
-		};
-	} );
+	return getSkinIndex().then( () => ( {
+		skins: Object.keys( skins ).map( ( key ) => Object.assign( {}, skins[ key ] ) )
+	} ) );
 }
 
 function fetchSkins() {

src/components/ArticleChanger.vue

@@ -1,13 +1,14 @@
 <template>
 	<span class="article-changer">
 		<label for="article-title">article: </label>
-		<custom-select>
+		<CustomSelect>
 			<select name="article-title" @change="changeArticle">
-				<option v-for="(a,i) in articles"
+				<option
+					v-for="( a, i ) in articles"
 					:key="i"
 					:value="a.title">{{ a.name }}</option>
 			</select>
-		</custom-select>
+		</CustomSelect>
 	</span>
 </template>
 
@@ -22,7 +23,6 @@ export default {
 	},
 	data() {
 		return {
-			mobile: !!localStorage.getItem( 'mobile' ),
 			articles: TEST_ARTICLES,
 			testArticle: TEST_ARTICLES[ 0 ]
 		};

src/components/Btn.vue

@@ -1,5 +1,5 @@
 <template>
-	<button :class="classList" @click="$emit('click')">
+	<button :class="classList" @click="$emit( 'click' )">
 		<slot></slot>
 	</button>
 </template>

src/components/ColorChart.vue

@@ -1,11 +1,12 @@
 <template>
 	<div class="color-chart">
-		<span v-for="(c, i) in colors"
+		<span
+			v-for="( c, i ) in colors"
 			:key="'color' + i"
 			class="color-chart__blot"
 			:style="'background: ' + c.color + ';'"
 			:title="c.key + ' : ' + c.color"
-			@click="$emit('toggleColor', c.key)">
+			@click="$emit( 'toggleColor', c.key )">
 			&nbsp;
 		</span>
 	</div>

src/components/CustomCheckbox.vue

@@ -1,6 +1,7 @@
 <template>
 	<div class="custom-checkbox">
-		<input type="checkbox"
+		<input
+			type="checkbox"
 			:name="name"
 			:checked="checked"
 			@change="changeEvent.stopPropagation"

src/components/Preview.vue

@@ -1,13 +1,15 @@
 <template>
 	<div class="preview">
 		<div v-if="enabled" class="preview__area">
-			<a :href="href"
+			<a
+				:href="href"
 				class="link--new-window"
 				target="_blank"
 				@click="openNewWindow">
 				View in new window
 			</a>
-			<iframe ref="iframe"
+			<iframe
+				ref="iframe"
 				sandbox="allow-same-origin allow-scripts"
 				:class="iframeClass"
 				:style="iframeStyle"
@@ -18,15 +20,16 @@
 		<div v-else class="preview__area preview__area--unavailable">
 			Preview unavailable.
 		</div>
-		<warning-box v-if="!enabled">
+		<WarningBox v-if="!enabled">
 			If you are the maintainer of the skin you can request preview is enabled
-			by creating an <a target="_blank"
+			by creating an <a
+				target="_blank"
 				:href="createIssue">issue</a>.
-		</warning-box>
+		</WarningBox>
 		<div class="preview__panel">
-			<article-changer @changeArticle="changeArticle"></article-changer>
+			<ArticleChanger @change-article="changeArticle"></ArticleChanger>
 			<div class="medium-selector">
-				<custom-select>
+				<CustomSelect>
 					<select @change="changeMedium">
 						<option value="d">
 							desktop
@@ -38,8 +41,8 @@
 							mobile
 						</option>
 					</select>
-				</custom-select>
-				<custom-select v-if="language">
+				</CustomSelect>
+				<CustomSelect v-if="language">
 					<select @change="changeLanguage">
 						<option value="en">
 							English
@@ -51,15 +54,16 @@
 							中文
 						</option>
 					</select>
-				</custom-select>
+				</CustomSelect>
 			</div>
 			<div class="loggedin-selector">
-				<custom-checkbox v-if="showAnon"
+				<CustomCheckbox
+					v-if="showAnon"
 					:checked="anon"
 					name="anon"
 					@input="changeAnon">
 					Anonymous
-				</custom-checkbox>
+				</CustomCheckbox>
 			</div>
 		</div>
 	</div>
@@ -115,7 +119,7 @@ export default {
 	},
 	computed: {
 		createIssue() {
-			return `https://github.com/jdlrobson/skins.wmflabs.org/issues/new?assignees=&labels=&template=enable-preview-for-${this.name}-on-skins-wmflabs-org.md&title=Please+enable+my+skin+for+live+preview+option`;
+			return `https://github.com/jdlrobson/skins.wmflabs.org/issues/new?assignees=&labels=&template=enable-preview-for-${ this.name }-on-skins-wmflabs-org.md&title=Please+enable+my+skin+for+live+preview+option`;
 		},
 		iframeStyle() {
 			const offset = ( this.windowWidth - 768 ) / 2;
@@ -125,7 +129,7 @@ export default {
 					return '';
 				default:
 					// center
-					return `translate: ${offset}px;`;
+					return `translate: ${ offset }px;`;
 			}
 		},
 		iframeClass() {

src/components/PreviewLauncher.vue

@@ -1,25 +1,27 @@
 <template>
 	<div class="preview-launcher">
-		<div v-if="previewInactive"
+		<div
+			v-if="previewInactive"
 			:class="previewScreenshotClass"
 			@click="activatePreview"
 		>
 			<img :src="src">
-			<no-preview v-if="!available">
+			<NoPreview v-if="!available">
 				<p v-if="!available">
 					Preview unavailable
 				</p>
 				<p v-if="!maintained">
 					This skin appears to be <strong>unmaintained</strong>
 				</p>
-			</no-preview>
+			</NoPreview>
 		</div>
-		<preview v-else
+		<Preview
+			v-else
 			:href="href"
 			:name="name"
 			language="en"
-			@changeLanguage="changeLanguage"
-			@changeArticle="changeArticle"></preview>
+			@change-language="changeLanguage"
+			@change-article="changeArticle"></Preview>
 	</div>
 </template>
 
@@ -65,7 +67,7 @@ export default {
 	},
 	computed: {
 		href() {
-			return this.available ? `${HOST}/wiki/${this.testArticle}?useformat=desktop&uselang=${this.language}&useskin=${this.skinkey}` :
+			return this.available ? `${ HOST }/wiki/${ this.testArticle }?useformat=desktop&uselang=${ this.language }&useskin=${ this.skinkey }` :
 				undefined;
 		},
 		previewScreenshotClass() {