feat(vue 3): migrate from Vue.default.version to a fallback

[Haroenv]

In Vue 3 version is an explicit export, while in Vue 2 it's a property of the default export.

This way does give a warning ⚠️ when using Vue 2: "export 'version' (imported as 'A') was not found in 'vue'. I'm not too sure how to avoid that

see: https://v3.vuejs.org/guide/migration/global-api-treeshaking.html

[eunjae-lee]

When this file is transpiled, it becomes

import Vue__default, { version } from 'vue';

In Vue 3, there is no default export. So we get errors like this:

 > node_modules/vue-instantsearch/es/src/util/createInstantSearchComponent.js:4:7: error: No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "default"
    4 │ import Vue__default, { version } from 'vue';
      ╵        ~~~~~~~~~~~~

Not sure how to fix it yet.

[Kocal]

I think it would be great to use vue-demi which provide compatibility layers between Vue 2 and 3 for plugins, something like this:

import { isVue2, isVue3 } from 'vue-demi'

// ...

searchClient.addAlgoliaAgent(
  `Vue (${isVue2() ? 2 : 3 })`
);

[Haroenv]

That could be interesting, but the real version we are looking for there is 2.x.x / 3.x.x to better gauge how far we should continue to support. Thanks for your input though @Kocal, maybe a dynamic import at that point could work?

[Kocal]

Yeah, I suppose you can do something like this which seems to work for Vue 2 and Vue 3:

searchClient.addAlgoliaAgent(
  `Vue (${require('vue').version})`
);

• Vue 2: https://codesandbox.io/s/nice-frost-j8clm?file=/src/main.js
• Vue 3: https://codesandbox.io/s/hungry-pare-4dcoy?file=/src/main.js:63-100

[eunjae-lee]

function getVueVersion() {
  if (typeof window !== 'undefined' && typeof window.Vue !== 'undefined') {
    return window.Vue.version; // for umd
  } else {
    return require('vue').version;
  }
}

What do you think?

• umd in vue@v2: https://codesandbox.io/s/patient-moon-7gs4b?file=/src/index.js
• umd in vue@v3: https://codesandbox.io/s/magical-cannon-gm2wm?file=/src/index.js

[Kocal]

That's even better! 😄

[Haroenv]

are you sure mixing require/import will not cause issues in other platforms / bundlers?

[eunjae-lee]

are you sure mixing require/import will not cause issues in other platforms / bundlers?

nope, not at all 😅
I think at a little later phase, we need to run it on major platforms / bundlers to see if everything works fine.

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 74272f3:

Sandbox	Source
vue-instantsearch-e-commerce	Configuration

[eunjae-lee]

Apparently, in one of my sandboxes, I'm seeing an issue with (probably) this require. I'm adding vue-demi in this PR to see if it works.