Merge "search: Prepare for Vue 3 migration"

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

@@ -1,17 +1,15 @@
 /** @module search */
+
 var
 	Vue = require( 'vue' ).default || require( 'vue' ),
 	App = require( './App.vue' ),
 	config = require( './config.json' );
 
 /**
- * @param {Function} createElement
  * @param {Element} searchForm
- * @return {Vue.VNode}
- * @throws {Error} if the searchForm does not
- *  contain input[name=title] and input[name="search"] elements.
+ * @return {void}
  */
-function renderFn( createElement, searchForm ) {
+function initApp( searchForm ) {
 	var
 		titleInput = /** @type {HTMLInputElement|null} */ (
 			searchForm.querySelector( 'input[name=title]' )
@@ -23,8 +21,9 @@ function renderFn( createElement, searchForm ) {
 		throw new Error( 'Attempted to create Vue search element from an incompatible element.' );
 	}
 
-	return createElement( App, {
-		props: $.extend( {
+	// @ts-ignore
+	Vue.createMwApp(
+		App, $.extend( {
 			id: searchForm.id,
 			autofocusInput: search === document.activeElement,
 			action: searchForm.getAttribute( 'action' ),
@@ -33,27 +32,10 @@ function renderFn( createElement, searchForm ) {
 			searchTitle: search.getAttribute( 'title' ),
 			searchPlaceholder: search.getAttribute( 'placeholder' ),
 			searchQuery: search.value
-		},
 		// Pass additional config from server.
-		config
-		)
-	} );
-}
-
-/**
- * @param {NodeList} searchForms
- * @return {void}
- */
-function initApp( searchForms ) {
-	searchForms.forEach( function ( searchForm ) {
-		// eslint-disable-next-line no-new
-		new Vue( {
-			el: /** @type {Element} */ ( searchForm ),
-			render: function ( createElement ) {
-				return renderFn( createElement, /** @type {Element} */ ( searchForm ) );
-			}
-		} );
-	} );
+		}, config )
+	)
+		.mount( searchForm );
 }
 /**
  * @param {Document} document
@@ -63,6 +45,8 @@ function main( document ) {
 	var
 		searchForms = document.querySelectorAll( '.vector-search-box-form' );
 
-	initApp( searchForms );
+	searchForms.forEach( function ( searchForm ) {
+		initApp( searchForm );
+	} );
 }
 main( document );