Page MenuHomePhabricator

Integrate WVUI into Vector for Vue.js search
Closed, ResolvedPublic5 Estimated Story Points

Description

WVUI is now built as a standard, universally usable NPM package. This task is to start using it in Vector for Vue.js search.

The Vue.js runtime can be built in directly until available as a runtime module in Core. The initial integration can use a WVUI development pre-release (npm i -D @wikimedia/wvui@next).

Acceptance criteria

  • The patch is merged to the feat/search branch.
  • WVUI JavaScript is consumable.
  • WVUI CSS is consumable.
  • The new client search experience is distinct from the old. It should be possible to choose between them once a configuration is available. This patch should leave the Legacy experience intact but provide any ResourceLoader modules needed for the new experience.
  • An NVM configuration is added that matches MobileFrontend (yes, it's a one line file).
  • A new Vue instance is created that mounts a component (any component).
  • Linters and TypeScript configuration are updated as needed. Spawn new tasks if necessary.
  • Test the npm link-based workflow and update the documentation as needed.
  • The wiki is updated to describe the steps needed to integrate a pre-compilation build of WVUI. It should include at least a checklist of what's needed that could be followed by another skin or extension such as NearbyPages. --Please see build step and Webpack wiki pages. These can use further revision but are a decent start for the scope of this task.

Developer notes

  • Use Popups and MobileFrontend as a reference implementation.
  • Avoid too much scope creep and open new tasks as needed. Client hydration is tracked in T260065.
  • Extremely hacky example patch.

Event Timeline

ovasileva triaged this task as Medium priority.Jul 20 2020, 6:44 PM

Change 616309 had a related patch set uploaded (by Niedzielski; owner: Stephen Niedzielski):
[mediawiki/skins/Vector@master] [build] Add NVM configuration

https://gerrit.wikimedia.org/r/616309

Change 616311 had a related patch set uploaded (by Niedzielski; owner: Stephen Niedzielski):
[mediawiki/skins/Vector@feat/search] [WIP][build] Integrate Wikimedia Vue User Interface components

https://gerrit.wikimedia.org/r/616311

Change 616312 had a related patch set uploaded (by Niedzielski; owner: Stephen Niedzielski):
[mediawiki/skins/Vector@feat/search] [WIP] Render WVUI search

https://gerrit.wikimedia.org/r/616312

ovasileva set the point value for this task to 5.Jul 28 2020, 5:22 PM

Change 617586 had a related patch set uploaded (by Niedzielski; owner: Stephen Niedzielski):
[mediawiki/skins/Vector@master] [build] Fold NPM build script into test

https://gerrit.wikimedia.org/r/617586

Change 617587 had a related patch set uploaded (by Niedzielski; owner: Stephen Niedzielski):
[mediawiki/skins/Vector@master] [WIP][build] Integrate Wikimedia Vue User Interface components

https://gerrit.wikimedia.org/r/617587

Change 617588 had a related patch set uploaded (by Niedzielski; owner: Stephen Niedzielski):
[mediawiki/skins/Vector@master] [WIP] Render WVUI search

https://gerrit.wikimedia.org/r/617588

Change 617587 abandoned by Niedzielski:
[mediawiki/skins/Vector@master] [WIP][build] Integrate Wikimedia Vue User Interface components

Reason:

https://gerrit.wikimedia.org/r/617587

Change 617588 abandoned by Niedzielski:
[mediawiki/skins/Vector@master] [WIP] Render WVUI search

Reason:

https://gerrit.wikimedia.org/r/617588

Change 617592 had a related patch set uploaded (by Niedzielski; owner: Stephen Niedzielski):
[mediawiki/skins/Vector@master] [build] Make the pre-commit hook optional

https://gerrit.wikimedia.org/r/617592

Change 616309 merged by jenkins-bot:
[mediawiki/skins/Vector@master] [build] Add NVM configuration

https://gerrit.wikimedia.org/r/616309

Change 617592 merged by jenkins-bot:
[mediawiki/skins/Vector@master] [build] Make the pre-commit hook optional

https://gerrit.wikimedia.org/r/617592

Change 617586 merged by jenkins-bot:
[mediawiki/skins/Vector@master] [build] Fold NPM build script into test

https://gerrit.wikimedia.org/r/617586

Change 616311 merged by jenkins-bot:
[mediawiki/skins/Vector@feat/search] [build] Integrate Wikimedia Vue User Interface components

https://gerrit.wikimedia.org/r/616311

Change 616312 merged by jenkins-bot:
[mediawiki/skins/Vector@feat/search] Hydrate WVUI search

https://gerrit.wikimedia.org/r/616312

Moving to needs more work to address the folder structure. Apart from that I have a few questions and information from my sign off.

A new Vue instance is created that mounts a component (any component).

I'm assuming the only Vue component I should be seeing is the search input. Can you confirm?

I'm seeing autocomplete behaviour on the search input. Is that intentional?

Screen Shot 2020-09-02 at 3.27.06 PM.png (178×632 px, 20 KB)

The folder structure is very confusing. The resources folder is typically used for assets shipped to the end user, however resources/skins.vector.search/App.vue and resources/skins.vector.search/index.js are assets that are built via webpack. Let's use a src folder like we do in MobileFrontend and Popups to distinguish these files from the rest of Vector. As we've seen in the past this can cause confusion.

The wiki is updated to describe the steps needed to integrate a pre-compilation build of WVUI.

The new docs are great - https://www.mediawiki.org/wiki/Build_step https://www.mediawiki.org/wiki/Webpack - I've folded in a link to the documentation we did earlier for Popups and MobileFrontend - https://www.mediawiki.org/wiki/User:Jdlrobson/Developing_with_Webpack_and_ResourceLoader. I've also made a few edits, most importantly around how "build product validation" is not optional (from our previous chats with security). Please review at your leisure.

npm link-based workflow and update the documentation as needed.

I'm just wondering if git submodules would help in any way?

Change 624068 had a related patch set uploaded (by Niedzielski; owner: Stephen Niedzielski):
[mediawiki/skins/Vector@feat/search] [Search] Disable autocomplete for JavaScript search

https://gerrit.wikimedia.org/r/624068

I'm assuming the only Vue component I should be seeing is the search input. Can you confirm?

Correct. That's all that is wired up right now.

I'm seeing autocomplete behaviour on the search input. Is that intentional?

Good catch. This was the SSR behavior but it only makes sense when JS is unavailable. Fixed in I6cec89be8e13b84a37d8788badff857dd7726dd1.

The folder structure is very confusing. The resources folder is typically used for assets shipped to the end user, however resources/skins.vector.search/App.vue and resources/skins.vector.search/index.js are assets that are built via webpack. Let's use a src folder like we do in MobileFrontend and Popups to distinguish these files from the rest of Vector. As we've seen in the past this can cause confusion.

Do you mind making a new ticket for this with the proposed structure? I anticipate there will be opinions and discourse wanted to pick the final set up. For example, do build products drop into resources/dist/module.name.js or resources/module.name.js/module.name.js?

I've also made a few edits, most importantly around how "build product validation" is not optional (from our previous chats with security).

I'm not sure I feel quite as strongly about it but I suppose it can't hurt. Maybe further down the road we'll feel more confident in our configurations.

npm link-based workflow and update the documentation as needed.

You mean add WVUI to Vector as a Git submodule? I guess one benefit is that you don't need to npm link / npm unlink but one con is that you need to manage the submodule. That also might imply that WVUI needs to version build products for now as well. The submodule can be configured to always point to WVUI master. I personally don't see a clear win over the NPM-based workflow, as Git submodules tend to be practical but a little clumsy in my experience. It's something we can explore in detail if you wish.

Change 624068 merged by jenkins-bot:
[mediawiki/skins/Vector@feat/search] [Search] Disable autocomplete for JavaScript search

https://gerrit.wikimedia.org/r/624068

Have created T261984 for the folder organization.

git submodule was just a suggestion. No need to explore in detail.