T260065 provided an initial integration of WVUI into Vector with the component available at the time, wvui-input. The complete search component is nearing completion in T256041 and must be reintegrated. The final mocks show a complete search form, not just an input and dropdown.

This integration faces many of the same challenges identified in T260065:

• The server-rendered HTML is generated with PHP, not Vue.js. Client hydration is very delicate and expects an exact version of the client HTML to be provided in the server-side render.
• The searchSatisfaction client instrumentation loads on every pageview and alters the DOM whenever the form is submitted.
• Per T249306, the search experience does not load until the user focus on the search form which means the user is likely to be actively typing their query when dependency loading completes. In other words, focus state, selection state, and input value must be preserved. If the DOM changes, the CSS transition styles cause the focus to flicker.
• Per T254695, we want the transition to be seamless and perceived as prompt.
• Other JavaScript, such as UniversalLanguageSelector's Input Methods (also called "input tools") load by default on some wiki (on user input focus!) and bind to the inputs. Another example is the DWIM gadget which is a default on hewiki.
• Input value and focus states must be persisted on hydration.
• Search input and results are Vue.js powered. The input has a submit button and the results are generated on the fly. The structure of the input itself differs from Vector's SSR and requires multiple elements.
• The styling of the component before (SSR) and after client hydration (JavaScript) must be correct:

This is how the search input currently looks like before the wvui component is lazy-loaded:

But this is how the wvui component currently looks like:

In order to make the transition from old to WVUI search as seamless as possible, we will need to reconcile the styling differences (e.g. magnifying glass needs to be in same location in both, input box should be same size, etc.).

The implementation provided in T256041 can be modified as wanted but the expected that the final implementation in Vector will at least directly include either the whole search form, wvui-search-form (the input, dropdown, button and hidden form elements in a single component), or a composition of the pieces wanted including wvui-typeahead-search (the input and dropdown in a single component) and wvui-button depending on any difficulties encountered in integration.

Acceptance criteria

• Fallback component is looking exactly the same to hydrated component.
• The server rendered HTML is updated to the new client HTML. This will likely require splitting the Legacy and Latest Mustache templates. This is probably a good distinct patch to write if the approach makes sense.
• The state of the SSR form is passed to the client rendered form. This includes the button label and input field value. The focus state should be retained automatically by the Vue.js renderer if client hydration is performed without error.
• The needed WVUI client styles for the search form are made available for the server rendered experience. These styles are currently bundled into skins.vector.search.css but skin.json needs to be revised to actually include them on SSR. All WVUI styles should be well isolated by classname so there shouldn't be a conflict. This is probably another distinct patch if the approach makes sense.
• Legacy mode only needs to support Legacy search but Latest mode must support Legacy and Latest (Vue.js) search so as to allow for rollback as needed.
• searchSatisfaction client instrumentation doesn't explode.
• The pre-library loading indicator (T254695) functionality is preserved.