Skip to content

chore(vue3): update filtered search to support @vue/compat

Illya Klymov requested to merge xanf-road2vue3-filtered-search into main

What does this MR do?

This MR adds compatibility with @vue/compat to ~"component:filter"

This is forward-compatible change to support @vue/compat #1981 (closed)

1️⃣ Reactivity of component passed as props

~"component:filter" receives availableTokens props, which is an array of structures, where token field represent a component. In Vue3 prop is immediately made reactive, and warning is raised that "hey, you're making component type reactive, this is bad, please use markRaw" to avoid that.

Unfortunately, there is no known sane way to wrap token into markRaw in the component - it should be done externally. Since this is super weird, I'm adding validator for availableTokens prop to give hint what is happening

Also we heed some hops and hooves in our tests to make sure our codebase is compatible

2️⃣ detecting if slot is empty

Until https://github.com/vuejs/rfcs/discussions/453 is merged there is no easy way to detect if slot is empty (this is because Vue3 renders comment nodes when v-if is false). Luckily we do not need complex logic, so the minimal sufficient detection was added

3️⃣ (minor) relaxed attributes checks in tests

Vue3 changed it's behavior with "boolean" attributes in html. If previously it was adding disabled="disabled" in code, now it will just add disabled. We are relaxing our assertions in tests to mimic browser expectations

I've tested filtered search in storybook for Vue2 and these changes do not affect any functionality (and should not)

Conformity

  • Code review guidelines.
  • GitLab UI's contributing guidlines.
  • If it changes a Pajamas-compliant component's look & feel, the MR has been reviewed by a UX designer.
  • If it changes GitLab UI's documentation guidelines, the MR has been reviewed by a Technical Writer.
  • If the MR changes a component's API, integration MR(s) have been opened in the following projects to ensure that the @gitlab/ui package can be upgraded quickly after the changes are released:
  • Added the ~"component:*" label(s) if applicable.
Edited by Illya Klymov

Merge request reports