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

Migrate to Vue.js 3 #4

Closed
2 of 4 tasks
kleinfreund opened this issue Nov 22, 2020 · 1 comment
Closed
2 of 4 tasks

Migrate to Vue.js 3 #4

kleinfreund opened this issue Nov 22, 2020 · 1 comment
Labels
feature New feature or request released

Comments

@kleinfreund
Copy link
Owner

kleinfreund commented Nov 22, 2020

The vue-accessible-color-picker package should use Vue.js 3. Since this change is not backwards-compatible, a new major version should be released when making the changes for the migration.

Known or outstanding issues

  • The vue-jest package requires the package typescript to be installed as a dependency even though the project doesn’t use TypeScript.

  • The vue-test-utils package is unable to find a wrapper object via wrapper.findComponent({ ref: 'colorSpace' }).

    When using Wrapper.findComponent like this, the test errors unexpectedly with:

    TypeError: Cannot read property 'subTree' of undefined
    
    • Upstream bug report: not filed.

    • Workaround: Use wrapper.find('.vacp-color-space') where vacp-color-space is a class name used on the element that is using ref="colorSpace".

    • Solution: This is not supposed to work according to vue-test-utils API reference: findComponent:

      ref - findComponent({ ref: 'dropdown' }) - Can be used only on direct ref children of mounted component

  • The rollup-plugin-vue package is unable to compile the distribution bundles in the same way it does for the current version of the vue-accessible-color-picker package (see Needs an extra plugin for .css/.scss/.sass (with Vue.js 3 beta) vuejs/rollup-plugin-vue#364 (comment) for more details).

  • Testing the vue-accessible-color-picker package via npm link doesn’t work because of a difference in behavior compared with an actual npm installed dependency: Since the vue-accessible-color-picker package lists vue as a development dependency, it will be installed in its project directory and thus it’ll be part of the packages in that directory’s node_modules directory. A project consuming the npm linked dependency via npm link vue-accessible-color-picker will behave different than it would have with an npm installed dependency because code (e.g. vue) may resolve packages from the dependency rather than from itself. In essence, using npm install, a dependency’s development dependencies are not installed, but with npm link, they’re effectively installed.

    Now, when testing the package using npm link in the package and npm link vue-accessible-color-picker in a consuming project (e.g. vue-accessible-color-picker-website), two different instances of the Vue.js packages are being used. This causes unexpected rendering errors due to the use of Symbols in Vue.js. The package vue should be declared as a peer dependency (i.e. as [email protected]) instead of a development dependency because no development processes in the package itself actually require Vue to be installed at all. Unfortunately, vue-test-utils start to fail when removing the vue package.

    • Workaround: Not available.

      There is one cumbersome way to get this working temporarily for plugins which have no production dependencies whatsoever by npm-linking the plugin and then removing its node_modules directory. This will require you to re-install you plugin package’s dependencies again each time.

      # Link package
      cd vue-accessible-color-picker
      npm run build
      npm link
      rm -rf node_modules
      # Reference linked package
      cd ../../sites/vue-accessible-color-picker-website
      npm install
      npm link vue-accessible-color-picker
      npm start
@kleinfreund
Copy link
Owner Author

I decided to release v2.0.0 by relying on the various workarounds for the issues described in the original post and will therefor close this issue.

@kleinfreund kleinfreund added the feature New feature or request label Jul 10, 2021
@kleinfreund kleinfreund self-assigned this Feb 19, 2022
@kleinfreund kleinfreund removed their assignment Aug 29, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature New feature or request released
Projects
None yet
Development

No branches or pull requests

1 participant