Migrate to Vue.js 3

[kleinfreund]

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.

  • Upstream bug report: vue-jest#285: Vue 3: ERROR: Unable to load the module "typescript". Using "ts-jest" requires this package to be installed.
  • Workaround: Install the typescript package
  • Fixed version: vue-jest@5.0.0-alpha.8 (via vue-jest#307: fix: do not require ts-jest and 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).

  • Upstream bug report: rollup-plugin-vue#364: Needs an extra plugin for .css/.scss/.sass (with Vue.js 3 beta)
  • Upstream bug report: rollup-plugin-vue#410: How to inject CSS in JavaScript? (6.0.0-beta.10)
  • Workaround: A possible solution is using the rollup-plugin-postcss package to process the style block of a Vue SFC file as described in Needs an extra plugin for .css/.scss/.sass (with Vue.js 3 beta) vuejs/rollup-plugin-vue#364 (comment).

• 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 vue@3.x) 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]

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.