mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-16 20:28:24 +00:00
5dee570cb2
Port the initialization code for the Vue search to use Vue.createMwApp() instead of new Vue( ... ). The former mimicks Vue 3's API for mounting components. Without this change, this code breaks in Vue 3 (even in compatibility mode) because the compat support for new Vue(...) is imperfect. By the time renderFn is called, the searchForm container has already been emptied by Vue's internal mounting code. Instead, inspect searchForm and generate the prop list before mounting, then pass the props to createMwApp() and mount the component. Bug: T294476 Depends-On: I1fcdcf7bf87f5af2deb9763a231f2c360ea45b23 Change-Id: I5b6e66051d97e75f8f03b8258894daba22525797
53 lines
1.4 KiB
JavaScript
53 lines
1.4 KiB
JavaScript
/** @module search */
|
|
|
|
var
|
|
Vue = require( 'vue' ).default || require( 'vue' ),
|
|
App = require( './App.vue' ),
|
|
config = require( './config.json' );
|
|
|
|
/**
|
|
* @param {Element} searchForm
|
|
* @return {void}
|
|
*/
|
|
function initApp( searchForm ) {
|
|
var
|
|
titleInput = /** @type {HTMLInputElement|null} */ (
|
|
searchForm.querySelector( 'input[name=title]' )
|
|
),
|
|
search = /** @type {HTMLInputElement|null} */ ( searchForm.querySelector( 'input[name="search"]' ) ),
|
|
searchPageTitle = titleInput && titleInput.value;
|
|
|
|
if ( !search || !titleInput ) {
|
|
throw new Error( 'Attempted to create Vue search element from an incompatible element.' );
|
|
}
|
|
|
|
// @ts-ignore
|
|
Vue.createMwApp(
|
|
App, $.extend( {
|
|
id: searchForm.id,
|
|
autofocusInput: search === document.activeElement,
|
|
action: searchForm.getAttribute( 'action' ),
|
|
searchAccessKey: search.getAttribute( 'accessKey' ),
|
|
searchPageTitle: searchPageTitle,
|
|
searchTitle: search.getAttribute( 'title' ),
|
|
searchPlaceholder: search.getAttribute( 'placeholder' ),
|
|
searchQuery: search.value
|
|
// Pass additional config from server.
|
|
}, config )
|
|
)
|
|
.mount( searchForm );
|
|
}
|
|
/**
|
|
* @param {Document} document
|
|
* @return {void}
|
|
*/
|
|
function main( document ) {
|
|
var
|
|
searchForms = document.querySelectorAll( '.vector-search-box-form' );
|
|
|
|
searchForms.forEach( function ( searchForm ) {
|
|
initApp( searchForm );
|
|
} );
|
|
}
|
|
main( document );
|