Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add @vue/compat initial support #698

Merged
merged 2 commits into from
Jun 28, 2021

Conversation

xanf
Copy link
Collaborator

@xanf xanf commented Jun 27, 2021

Vue 3.1 brings compat build, which is extremely important milestone in migrating huge codebases to Vue3.
@vue/test-utils plays surprisingly well with compat build and codebase in compat mode with only few changes required in code

Why changes are required? Migration guide suggests enabling features via configureCompat as part of certain migration steps. If RENDER_FUNCTION feature is enabled, signature of render function will be similar to Vue2, so our stubs will not render slots. Luckily, we can override it, by explicitly setting compatConfig on our stub components (this has no effect if no compat build is in play).

Additionally a few magic hops are required for example for finding components declared with Vue.extend.

Please, take a note - this is not a complete changes list (for example setValue should take into account that model event might be set back to legacy "input" if COMPONENT_V_MODEL flag is in play), but is a foundation introducing testing compat build to CI and a couple of fixes

Copy link
Member

@lmiller1990 lmiller1990 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome, great to hear things mostly work with the compat build. Just one question!

): FindAllComponentsSelector {
if (
typeof selector === 'function' &&
selector.name === 'SubVue' &&
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not super familiar with how the compat build works - what is SubVue? Where does this come from?

Copy link
Collaborator Author

@xanf xanf Jun 28, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It comes from here: https://github.com/vuejs/vue-next/blob/51d2be20386d4dc59006d31a1cc96676871027ce/packages/runtime-core/src/compat/global.ts#L229

Basically as a result of Vue.extend in compat build you will always have function with name SubVue

Unfortunately there is no 100% reliable way to check that "component is coming from legacy extend" but I find SubVue name matching reliable enough to work in 99.9% cases (come-on, if you name your functional component SubVue you're in trouble :))

Forget about it. Found a better way to build assertion, thank you for your question

const fakeCmp = Vue.extend({})

// @ts-ignore TypeScript does not allow access of properties on functions
return fakeCmp.super === selector.super ? selector.options : selector
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice

@lmiller1990 lmiller1990 merged commit 85c2b1b into vuejs:master Jun 28, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants