fix(vue) make compatible with vue 2 & 3 #609

MichaelFedora · 2022-05-27T21:19:41Z

I was able to make it compatible with both versions, except for typings. I don't know how to run your tests / they were not able to be run, but it theoretically should work. If you could run them that would be great!

I'm also not entirely sure the typings will work but they should.

Changes

add typings for vue3
move computed items to ~~data~~ just be assigned in mounted() because they don't change and don't need reactivity
expose recalculate
add props to be more vue-y
add type checking
add docs to props
update package.json for vue3 whatnot
(forgot to add to the commit) scroll just directly $emits instead of a weird pass-through
get attributes via $attrs instead of $refs.element.attributes or $el.attributes

Supersedes #578 , closes #557, #600, and #588.

- add typings for vue3 - move computed items to data because they don't change - expose recalculate - add props to be more vue-y - add type checking - add docs to props - update package.json for vue3 whatnot

- remove excess methods

renatodeleao · 2022-07-28T15:25:56Z

@Grsmto any reason to hold or not reviewing this? I was about to make a PR myself, but this covers it and add some extra good stuff namely the props API.

@MichaelFedora if you allow me to review, the only things I would tweak:

Remove initialisation of the non-reactive variables in data, doing them directly at mounted() is enough and that way prevents vue to attach reactive handlers to the objects. It's a minor perf thing
remove the installation of vue3 and friends as devDependencies, that's why tests are failing: if you want to make tests work in vue3, there's more stuff to do as @vue/test-utils have a few breaking changes
Since this is supposed to be cross-compatible, if we want to have both vue2 and 3 tests at the same time there's a bit of work required to make it happen: installing vue3 packages with npm alias, have a swap-script like vuelidate, etc. --> check out this PR for "inspiration" if i may suggest.

- also add descriptive type comments

MichaelFedora · 2022-07-29T19:01:06Z

Hey @renatodeleao ! I honestly have no idea what I'm doing with the testing libraries (it's my weakest skill), I simply copied some stuff from #578 . If you want to fork my branch and make your own PR I'll gladly close in favor of yours?

I adjusted the reactive data definitions and added some more type comments. I've tested in Vue2 by using this exact element in a professional project (along with adding import 'simplebar/dist/simplebar.min.css'; to it), but that's all I have.

Grsmto · 2022-07-30T17:32:54Z

@Grsmto any reason to hold or not reviewing this?

Hey @renatodeleao I'm currently on vacations but I'll be able to review this soon. I would be happy to let you review it since I'm not using Vue at all I'm probably not the best person to do it anyway!

renatodeleao · 2022-08-01T09:35:32Z

@Grsmto no problem, enjoy your vacations! 🏖️

I'm a bit short on time, but I'll try to squeeze this into the work agenda.

anburocky3 · 2022-10-07T13:16:37Z

@renatodeleao Any update on this?

MichaelFedora · 2022-10-07T17:32:40Z

@anburocky3 if you do need this ASAP I do recommend just copying the file and using it locally, it's what I've been doing for the past few months.

anburocky3 · 2022-10-07T17:35:01Z

@anburocky3 if you do need this ASAP I do recommend just copying the file and using it locally, it's what I've been doing for the past few months.

It is using vue2 right? I'm looking for latest vue3.

MichaelFedora · 2022-10-07T18:10:46Z

It should work in both.

i could not setup the project using latest node 16, sharp package failed to build because of some native bindings. Not sure if related with my m1, but though i would add this. Tested with 12 and 14 and installed fine.

We can now run same tests as vue 2.6, 2.7 (composition-apo) and 3.x from a single file test file. Note we still need to adjust the mountingOptions signature because vue-test-utils has some breaking changes from 1 to 2. If tests get better (more complext) an isomorphic wrapper around mount/shallowMount should be added to test-utils/.js. - adds swap-vue.js script and vue-demi: this is straight from vuelidate codebase - adds aliased vue versions of core, compilers and vue-jest. swap-vue and vue demi will set the proper versions beforehand - using isVue3 flag from vue-demi we conditionally re-export @vue-test/utils from the appropriate version - called html() before snapshots, because jest-serializer-vue is not yet compatible with vue3 eddyerburgh/jest-serializer-vue#56 -

- it's a breaking change to remove it, because $refs are exposed and consumers might be expecting its presence - this.$attrs in vue3 contains class, style and event listeners altogether. Also, Simplebar.getOptions only works it NamedNodeMap not a plain object like $attrs: and now that tests are working you could actually see it failing before this fix.

Simplebar was not unMount when component is destroyed, which in conditionally loading scenarios potentially could lead to memory/event leaks.

renatodeleao · 2022-11-17T15:02:38Z

Folks update: I've patched this PR with isomorphic testing and a couple of fixes to make this work on both vue versions!
MichaelFedora#1

I'm sorry for the delay and the kind of ghosting but life happened and I had a baby 🎉... so didn't have much free time for OSS... neither have now but got some employer sponsor time for this so here it is!

@MichaelFedora didn't push directly to your fork because don't have write access but merge the PR when you can. Then you might have to sync this with master and hopefully nothing will break 🤞 — I had some trouble setting up the project because of node versions and some existent dependencies.

Cheers everyone!

and original 'test' to 'jest', this way we keep ci happy, since it's expecting this name

it's not necessary, i've added while bashing my head against the wall trying to make this work

feat: isomorphic testing for vue 2 and 3 and relevant fixes

MichaelFedora · 2022-11-21T23:35:30Z

Merged and congratulations @renatodeleao ! 🎉

The yarn.lock might be screwed up but otherwise I was able to get it up-to-date. Might have to abandon testing for it otherwise, as it's such a simple wrapper 😬 oh well. Travis CI seems to have liked it though.

Grsmto · 2022-11-22T22:52:57Z

Thanks for the work on this! Let me know when you think this is ready for merge and I will happily do it.

renatodeleao · 2022-11-24T10:46:45Z

@MichaelFedora thanks for the merge!

The yarn.lock might be screwed up but otherwise I was able to get it up-to-date.

Fetching your branch, and running yarn does update yarn.lock, so when you have the time please run it and then commit/push the changes to the branch so that @Grsmto can finally merge this.

When you're at it, one last favour:

simplebar/package.json

Lines 6 to 8 in 62103fe

    
           "engines": { 
        
             "node" : "<16.0.0" 
        
           },

remove these 3 lines, after the master sync they're no longer necessary.

Might have to abandon testing for it

Why? Testing is running fine locally and on CI.

- fix missing semicolons and set SimpleBar to undefined instead of null - update yarn.lock - remove "engines" from package.json

MichaelFedora · 2022-11-25T16:34:03Z

@renatodeleao

Fetching your branch, and running yarn does update yarn.lock, so when you have the time please run it

I was trying to avoid this with the 18k dependencies but, done 😅

remove these 3 lines, after the master sync they're no longer necessary.

Done!

Why? Testing is running fine locally and on CI.

Yeah I was saying this if it kept failing, but seems to be fine!

MichaelFedora · 2022-11-25T17:31:03Z

@Grsmto Seems we're good to go!

anburocky3 · 2022-11-27T21:11:41Z

@Grsmto When will next branch merge into main branch?

Grsmto · 2022-11-27T22:53:52Z

This has been release in simplebar-vue@1.7.0.

MichaelFedora · 2022-11-29T16:01:42Z

Did something break that caused this to be reverted?

renatodeleao · 2022-11-29T18:24:12Z

Yup, see #630 which is another attempt.

MichaelFedora added 2 commits May 27, 2022 17:13

fix(vue) make compatible with vue 2 & 3

e03fb0f

- add typings for vue3 - move computed items to data because they don't change - expose recalculate - add props to be more vue-y - add type checking - add docs to props - update package.json for vue3 whatnot

fix typings

d6c4c67

- remove excess methods

remove reactive data

c456dc3

- also add descriptive type comments

renatodeleao added 5 commits November 17, 2022 13:22

chore: add engines to package.json

b610be2

i could not setup the project using latest node 16, sharp package failed to build because of some native bindings. Not sure if related with my m1, but though i would add this. Tested with 12 and 14 and installed fine.

fix: add emits property and assert it is working

ee2e977

fix: memory/event leaking

256a9a5

Simplebar was not unMount when component is destroyed, which in conditionally loading scenarios potentially could lead to memory/event leaks.

renatodeleao mentioned this pull request Nov 17, 2022

feat: isomorphic testing for vue 2 and 3 and relevant fixes MichaelFedora/simplebar#1

Merged

renatodeleao and others added 4 commits November 17, 2022 15:08

chore: rename test:all to test

6a56f97

and original 'test' to 'jest', this way we keep ci happy, since it's expecting this name

chore(deps): remove vue-loader

4f5a8d7

it's not necessary, i've added while bashing my head against the wall trying to make this work

Merge pull request #1 from renatodeleao/vue-3

b64cc84

feat: isomorphic testing for vue 2 and 3 and relevant fixes

Merge branch 'master' into vue-3

62103fe

minor vue fixes

4f52662

- fix missing semicolons and set SimpleBar to undefined instead of null - update yarn.lock - remove "engines" from package.json

Grsmto merged commit b567f41 into Grsmto:master Nov 27, 2022

Grsmto added a commit that referenced this pull request Nov 27, 2022

Merge #609 into next

0227e0e

MichaelFedora deleted the vue-3 branch November 27, 2022 18:34

Grsmto added a commit that referenced this pull request Nov 28, 2022

chore(vue): revert #609

540c198

MichaelFedora restored the vue-3 branch November 29, 2022 16:02

renatodeleao mentioned this pull request Nov 29, 2022

[simplebar-vue] another attempt to deliver the promised vue2 and 3 cross compatibilty #630

Merged

Uh oh!

fix(vue) make compatible with vue 2 & 3 #609

fix(vue) make compatible with vue 2 & 3 #609

Uh oh!

Conversation

MichaelFedora commented May 27, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

Uh oh!

renatodeleao commented Jul 28, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

MichaelFedora commented Jul 29, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Grsmto commented Jul 30, 2022

Uh oh!

renatodeleao commented Aug 1, 2022

Uh oh!

anburocky3 commented Oct 7, 2022

Uh oh!

MichaelFedora commented Oct 7, 2022

Uh oh!

anburocky3 commented Oct 7, 2022

Uh oh!

MichaelFedora commented Oct 7, 2022

Uh oh!

renatodeleao commented Nov 17, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

MichaelFedora commented Nov 21, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Grsmto commented Nov 22, 2022

Uh oh!

renatodeleao commented Nov 24, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

MichaelFedora commented Nov 25, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

MichaelFedora commented Nov 25, 2022

Uh oh!

anburocky3 commented Nov 27, 2022

Uh oh!

Grsmto commented Nov 27, 2022

Uh oh!

MichaelFedora commented Nov 29, 2022

Uh oh!

renatodeleao commented Nov 29, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

MichaelFedora commented May 27, 2022 •

edited

Loading

renatodeleao commented Jul 28, 2022 •

edited

Loading

MichaelFedora commented Jul 29, 2022 •

edited

Loading

renatodeleao commented Nov 17, 2022 •

edited

Loading

MichaelFedora commented Nov 21, 2022 •

edited

Loading

renatodeleao commented Nov 24, 2022 •

edited

Loading

MichaelFedora commented Nov 25, 2022 •

edited

Loading