Limit WVUI search to ES6 browsers

Rather than test for fetch, limit the code to ES6 browsers.

Depends-On: I96a03796628a74ace93579d45a582711400c09c1
Change-Id: I4ca10182491118e61e155f99c713d4cb1b4fc7f0

.eslintrcEs6.json

@@ -0,0 +1,21 @@
+{
+	"root": true,
+	"extends": [
+		"wikimedia/client-es6",
+		"wikimedia/jquery",
+		"wikimedia/mediawiki"
+	],
+	"env": {
+		"browser": true
+	},
+	"parserOptions": {
+		"sourceType": "module"
+	},
+	"settings": {
+		"jsdoc": {
+			"preferredTypes": {
+				"VectorHeaderObserver": "VectorHeaderObserver"
+			}
+		}
+	}
+}

resources/skins.vector.es6/.eslintrc.json

@@ -1,21 +1,5 @@
 {
-	"root": true,
 	"extends": [
-		"wikimedia/client-es6",
+		"../../.eslintrcEs6.json"
-		"wikimedia/jquery",
+	]
-		"wikimedia/mediawiki"
-	],
-	"env": {
-		"browser": true
-	},
-	"parserOptions": {
-		"sourceType": "module"
-	},
-	"settings": {
-		"jsdoc": {
-			"preferredTypes": {
-				"VectorHeaderObserver": "VectorHeaderObserver"
-			}
-		}
-	}
 }

resources/skins.vector.js/searchLoader.js

@@ -152,12 +152,10 @@ function initSearchLoader( document ) {
 	}
 
 	/**
-	 * 1. If we are in a browser that doesn't support fetch fall back to non-JS version.
+	 * 1. If we are in a browser that doesn't support ES6 fall back to non-JS version.
-	 *   The check for window.fetch
-	 *    can be removed when IE11 support is finally officially dropped.
 	 * 2. Disable on Wikidata per T281318 until the REST API is ready.
 	 **/
-	if ( isWikidata || !window.fetch ) {
+	if ( isWikidata || mw.loader.getState( 'skins.vector.search' ) === null ) {
 		document.body.classList.remove(
 			'skin-vector-search-vue'
 		);

resources/skins.vector.search/.eslintrc.json

@@ -0,0 +1,5 @@
+{
+	"extends": [
+		"../../.eslintrcEs6.json"
+	]
+}

resources/skins.vector.search/App.vue

@@ -41,16 +41,16 @@
 
 <script>
 /* global SubmitEvent */
-var wvui = require( 'wvui-search' ),
+const wvui = require( 'wvui-search' ),
 	instrumentation = require( './instrumentation.js' );
 
 module.exports = {
 	name: 'App',
 	components: wvui,
-	mounted: function () {
+	mounted() {
 		// access the element associated with the wvui-typeahead-search component
 		// eslint-disable-next-line no-jquery/variable-pattern
-		var wvuiSearchForm = this.$refs.searchForm.$el;
+		const wvuiSearchForm = this.$refs.searchForm.$el;
 
 		if ( this.autofocusInput ) {
 			// TODO: The wvui-typeahead-search component does not accept an autofocus parameter
@@ -64,13 +64,13 @@ module.exports = {
 		 *
 		 * @return {void|Object}
 		 */
-		getClient: function () {
+		getClient: () => {
 			return mw.config.get( 'wgVectorSearchClient', undefined );
 		},
-		language: function () {
+		language: () => {
 			return mw.config.get( 'wgUserLanguage' );
 		},
-		domain: function () {
+		domain: () => {
 			// It might be helpful to allow this to be configurable in future.
 			return mw.config.get( 'wgVectorSearchHost', location.host );
 		}
@@ -128,7 +128,7 @@ module.exports = {
 			default: false
 		}
 	},
-	data: function () {
+	data() {
 		return {
 			// -1 here is the default "active suggestion index" defined in the
 			// `wvui-typeahead-search` component (see
@@ -142,7 +142,7 @@ module.exports = {
 		/**
 		 * @param {SubmitEvent} event
 		 */
-		onSubmit: function ( event ) {
+		onSubmit( event ) {
 			this.wprov = instrumentation.getWprovFromResultIndex( event.index );
 
 			instrumentation.listeners.onSubmit( event );

resources/skins.vector.search/instrumentation.js

@@ -7,7 +7,7 @@
  *
  * @see https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/skins/Vector/+/refs/heads/master/includes/Constants.php
  */
-var INPUT_LOCATION_MOVED = 'header-moved',
+const INPUT_LOCATION_MOVED = 'header-moved',
 	wgScript = mw.config.get( 'wgScript' ),
 	// T251544: Collect search performance metrics to compare Vue search with
 	// mediawiki.searchSuggest performance. Marks and Measures will only be
@@ -143,7 +143,7 @@ function getWprovFromResultIndex( index ) {
  * @return {string}
  */
 function generateUrl( suggestion, meta ) {
-	var result = new mw.Uri( wgScript );
+	const result = new mw.Uri( wgScript );
 
 	if ( typeof suggestion !== 'string' ) {
 		suggestion = suggestion.title;
@@ -158,9 +158,9 @@ function generateUrl( suggestion, meta ) {
 
 module.exports = {
 	listeners: {
-		onFetchStart: onFetchStart,
+		onFetchStart,
-		onFetchEnd: onFetchEnd,
+		onFetchEnd,
-		onSuggestionClick: onSuggestionClick,
+		onSuggestionClick,
 
 		// As of writing (2020/12/08), both the "click-result" and "submit-form" kind of
 		// mediawiki.searchSuggestion events result in a "click" SearchSatisfaction event being
@@ -177,6 +177,6 @@ module.exports = {
 		// [1] https://phabricator.wikimedia.org/T257698#6416826
 		onSubmit: onSuggestionClick
 	},
-	getWprovFromResultIndex: getWprovFromResultIndex,
+	getWprovFromResultIndex,
-	generateUrl: generateUrl
+	generateUrl
 };

resources/skins.vector.search/skins.vector.search.js

@@ -1,6 +1,6 @@
 /** @module search */
 
-var
+const
 	Vue = require( 'vue' ).default || require( 'vue' ),
 	App = require( './App.vue' ),
 	config = require( './config.json' );
@@ -10,7 +10,7 @@ var
  * @return {void}
  */
 function initApp( searchBox ) {
-	var searchForm = searchBox.querySelector( '.vector-search-box-form' ),
+	const searchForm = searchBox.querySelector( '.vector-search-box-form' ),
 		titleInput = /** @type {HTMLInputElement|null} */ (
 			searchBox.querySelector( 'input[name=title]' )
 		),
@@ -43,9 +43,9 @@ function initApp( searchBox ) {
  * @return {void}
  */
 function main( document ) {
-	var searchBoxes = document.querySelectorAll( '.vector-search-box' );
+	const searchBoxes = document.querySelectorAll( '.vector-search-box' );
 
-	searchBoxes.forEach( function ( searchBox ) {
+	searchBoxes.forEach( ( searchBox ) => {
 		initApp( searchBox );
 	} );
 }

skin.json

@@ -133,6 +133,7 @@
 			"class": "Vector\\ResourceLoader\\VectorResourceLoaderUserStylesModule"
 		},
 		"skins.vector.search": {
+			"es6": true,
 			"dependencies": [
 				"mediawiki.Uri",
 				"wvui-search"