Vue 3 compatibility

[mariusa]

Description

Would like to use this component in a Vue 3 project generated by https://github.com/vitejs/vite

Note, this is just about being usable, not porting the component to Vue 3 composition APIs.

Steps to Reproduce

$ npm init vite-app <project-name>
$ cd <project-name>
$ npm install
$ npm install vue-hotel-datepicker --save
$ npm run dev

Add component to App.vue as noted in https://github.com/krystalcampioni/vue-hotel-datepicker

Expected behavior: [What you expected to happen]

component to work

Actual behavior: [What actually happened]

Error in browser console:

vue.js:1228 TypeError: Cannot read property '_c' of undefined
    at Proxy.a (vue-hotel-datepicker.js:22)
    at renderComponentRoot (vue.js:1481)
    at componentEffect (vue.js:4317)
    at reactiveEffect (vue.js:295)
    at effect (vue.js:270)
    at setupRenderEffect (vue.js:4309)
    at mountComponent (vue.js:4267)
    at processComponent (vue.js:4223)
    at patch (vue.js:3883)
    at mountChildren (vue.js:4039)

Datepicker Version

3.0.10

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[matiasperrone]

Check v4.0.0-beta.2

[mariusa]

Would you please publish to npm so we can start using it?
https://www.npmjs.com/package/vue-hotel-datepicker

Also, the README here points to another repo with an old version, very confusing:
https://github.com/krystalcampioni/vue-hotel-datepicker/tree/v4.0.0-dev

[matiasperrone]

I rewrite the Readme so... check that out

[matiasperrone]

Please check the v4 version, we are deprecating the v3 version.

[mariusa]

V4 version doesn't work with vue3. https://github.com/vuejs/vue-next

[superbiche]

I think what's best would be:

• Make the minimum adjustments for v4.y to be compatible with Vue 3 (not a priority, so probably in a minor version, as Vue 3 isn't ready nor is the ecosystem)
• Plan a full rewrite for an upcoming major version where we could use Composition API and make the components way more maintainable.

If @matiasperrone agrees I'll reopen this one and we'll work on it as soon as Vue 3 lands (maybe before depending on how complicated the changes are).

[matiasperrone]

Vue 3 just landed... 😅

[superbiche]

Yup, saw that. They are playing with my nerves 😅 . I'll try to give it some time next week

[matiasperrone]

@mariusa Thank you very much for the feedback!! It's very important!!

[matiasperrone]

Can we give v3 support on 4.1? and close this issue?

[mariusa]

Can we give v3 support on 4.1?

That's a good plan.

and close this issue?

After it's done :)

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[matiasperrone]

Still don't know, in the next few days I am going to start checking the changes needed, but there are many improvements to be made to the code. I will focus on this from now on. Think more in one month or more, the other collaborators are occupied.

[bzd2000]

@matiasperrone , I'm available if you need help

[matiasperrone]

Sure! I just created the v5 branch so we may start working on the code.
There are several not very good practices (not my fault) within... I would say that we should fix that before start.
Also we should separate the javascript with different responsabilities: Month, Day, DatePicker, to make the maintance easier.

[bzd2000]

@matiasperrone ,

When I run the unit tests it fails:

vue-hotel-datepicker git:(v5) ✗ npm run test:unit

> [email protected] test:unit /Users/filipdelperdange/Projects/stuff/cotly/vue-hotel-datepicker
> vue-cli-service test:unit

 FAIL  tests/unit/datepickerDay.spec.js
  ● Test suite failed to run

    Cannot find module '@/DatePicker/components/Day.vue' from 'datepickerDay.spec.js'

      2 | import { expect } from 'chai'
      3 | 
    > 4 | import Day from '@/DatePicker/components/Day.vue'
        | ^
      5 | 
      6 | describe('Datepicker Day', () => {
      7 |   let wrapper

      at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:259:17)
      at Object.<anonymous> (tests/unit/datepickerDay.spec.js:4:1)

 FAIL  tests/unit/datepicker.spec.js
  ● Test suite failed to run

    Cannot find module '@/DatePicker/HotelDatePicker.vue' from 'datepicker.spec.js'

      2 | import { mount } from '@vue/test-utils'
      3 | 
    > 4 | import Datepicker from '@/DatePicker/HotelDatePicker.vue'
        | ^
      5 | 
      6 | describe('Datepicker Calendar', () => {
      7 |   const wrapper = mount(Datepicker)

      at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:259:17)
      at Object.<anonymous> (tests/unit/datepicker.spec.js:4:1)

 PASS  tests/unit/datepickerHelpers.spec.js

Test Suites: 2 failed, 1 passed, 3 total
Tests:       9 passed, 9 total
Snapshots:   0 total
Time:        2.688s
Ran all test suites.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] test:unit: `vue-cli-service test:unit`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] test:unit script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/filipdelperdange/.npm/_logs/2021-02-18T08_00_00_526Z-debug.log

Is there a build procedure I should follow?

Thx,
Filip.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[newbie2005]

I use "vue": "^3.0.0", "vue-hotel-datepicker": "^4.4.2"

and still found error
runtime-core.esm-bundler.js?5c40:218 Uncaught TypeError: Cannot read property '_c' of undefined
at Proxy.render (vueHotelDatepicker.common.js?ffea:1473)
at renderComponentRoot (runtime-core.esm-bundler.js?5c40:1168)
at componentEffect (runtime-core.esm-bundler.js?5c40:5214)
at reactiveEffect (reactivity.esm-bundler.js?a1e9:42)
at effect (reactivity.esm-bundler.js?a1e9:17)
at setupRenderEffect (runtime-core.esm-bundler.js?5c40:5167)
at mountComponent (runtime-core.esm-bundler.js?5c40:5126)
at processComponent (runtime-core.esm-bundler.js?5c40:5084)
at patch (runtime-core.esm-bundler.js?5c40:4690)
at componentEffect (runtime-core.esm-bundler.js?5c40:5221)

[matiasperrone]

We don't support Vue3 at the moment...

[matiasperrone]

I'll be actively working on this in two months, it probably will take 2 weeks or maybe more. We are committed to this package so rest assure that this year will be resolved

[bzd2000]

@matiasperrone, Any news?

[matiasperrone]

Hi, sorry not yet. I may be working on this feature along with the rewrite by the end of 2021, I least is what I hope for.
@superbiche you?

[matiasperrone]

Hi guys and gals! (and others! why not?)
I am going to move this project to a different namespace for the v3... more new I hope soon...

My current day job and some topics in my personal life didn't allow me to pursue the Vue 3 development and the team is a little bit offline now... so I hope to push it to 2022 with some hardwork.

I'll be searching for devs to push this to the next level, so I'll be asking those who help me to help once again to be part of something bigger that yourselves.

[ahmedshaheen201400721]

any news

[matiasperrone]

No news on this. Do you want to help me building the Vue3 version in a new repo?

[matiasperrone]

I didn't have the time... too much work on my daily paid work.

[matiasperrone]

still in the same situation. Sorry

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[adnanashraf1]

Any news on this???

[matiasperrone]

Hi... I think I am going to open a donations box... because I can't work on this right now...

I have bills to pay... BUT I think I'll start some time this year.

But probably I move this repo to global-innovation organization.

[matiasperrone]

I am the only one maintaining this...
I am pretty swamped... sorry guys

I used to use time from my former work to work on this. I believe that a lot of the work needs to be redone.

I am going to seek for another package that is in the same as this one and maybe we can accomplish something.

[cornelRaiu]

I can probably have a go at this.

There's a project I am working on where we started using this package on Vue2 and then, when we upgraded to Vue3, I had to make this code Vue3 compatible.

I will have some time in the next couple of weeks.

[matiasperrone]

Good news!! I am going to be working in the v5, this version I hope will be Vue 3 compatible! :D 🥇

[matiasperrone]

Finally I decided to use a new repo, maybe it will be merged to this one, but it is very early yet to know.

If anyone wants to help you're welcome!!