Skip to content

[WIP] feat: upgrade to vue 2.6 #487

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.

Sign up for GitHub

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

Jump to bottom
Merged
merged 10 commits into from
May 31, 2019
Merged

[WIP] feat: upgrade to vue 2.6 #487

merged 10 commits into from
May 31, 2019

Conversation

rigor789
Copy link
Member

@rigor789 rigor789 commented May 4, 2019 •
edited by msaelices
Loading

This PR brings nativescript-vue up to date with vue 2.6.10.

Updates all dependencies, and pins them to finer control of their versions in the future.

Based on changes in #445 and #486

Some things left to do:

@rigor789 rigor789 requested a review from msaelices May 4, 2019 15:21
@codecov-io
Copy link

codecov-io commented May 4, 2019 •
edited
Loading

Codecov Report

Merging #487 into master will increase coverage by 0.62%.
The diff coverage is 4.91%.

Impacted file tree graph

@@            Coverage Diff             @@
##           master     #487      +/-   ##
==========================================
+ Coverage    12.8%   13.42%   +0.62%     
==========================================
  Files          47       45       -2     
  Lines        1289     1229      -60     
  Branches      306      306              
==========================================
  Hits          165      165              
+ Misses        889      833      -56     
+ Partials      235      231       -4
Impacted Files Coverage Δ
platform/nativescript/util/index.js 0% <ø> (ø) ⬆️
platform/nativescript/renderer/ViewNode.js 96.15% <ø> (ø) ⬆️
...latform/nativescript/runtime/components/android.js 0% <0%> (ø) ⬆️
platform/nativescript/plugins/modal-plugin.js 0% <0%> (ø) ⬆️
platform/nativescript/framework.js 0% <0%> (ø) ⬆️
...tform/nativescript/runtime/components/list-view.js 0% <0%> (ø) ⬆️
platform/nativescript/runtime/components/ios.js 0% <0%> (ø) ⬆️
platform/nativescript/constants.js 0% <0%> (ø)
...tform/nativescript/hooks/before-checkForChanges.js 0% <0%> (ø) ⬆️
platform/nativescript/compiler/modules/view.js 0% <0%> (ø) ⬆️
... and 43 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 867e5f8...973b750. Read the comment docs.

@rigor789 rigor789 requested review from tralves and removed request for msaelices May 13, 2019 18:37
@rigor789
Copy link
Member Author

@tralves Please, when you get the chance, can you review my changes? I believe everything is OK - just want to make sure I haven't missed anything / messed something up in the process.

tralves
tralves approved these changes May 17, 2019
View reviewed changes
Copy link

@tralves tralves left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry for taking so long. I was testing this version in a project with other issues that I wanted to make sure had nothing to with it.

The code seems ok and worked as expected.

The only problem I found is that the new 2.6 <v-slot> syntax still doesn't work. I pointed out that issue in the original PR thread. I'd say it's still worth merging this PR as it brings other Vue 2.6 features and then I'll open an issue about the slots.

@rigor789
Copy link
Member Author

@tralves Have you rebuilt the project? I have tested the new slot syntax (samples/app/445.js) and it was working!

@tralves
Copy link

tralves commented May 17, 2019 •
edited
Loading

I dug a little deeper and found out that it doesn't work when using .vue components. E.g:

App.vue (doesn't work):

<template>
  <Frame>
    <Page>
      <ActionBar title="Vue 2.6 - v-slot #445" />
      <CurrentUser>
        <template v-slot="scope">
          <Label :text="scope.counter" />
        </template>
      </CurrentUser>
    </Page>
  </Frame>
</template>

<script >
import CurrentUser from "~/components/CurrentUser";

export default {
  components: { CurrentUser }
};
</script>

Appjs.js (works!!)

import Vue from 'nativescript-vue';
import CurrentUser from './CurrentUser';

export default Vue.component('Appjs', {
  components: { CurrentUser },
  template: `
      <Page>
        <ActionBar title="Vue 2.6 - v-slot #445" />
        <CurrentUser>
          <template v-slot="scope">
            <Label :text="scope.counter" />
          </template>
        </CurrentUser>
      </Page>
  `
});

Template compiler?

@msaelices
Samples refactoring to use a bundle app with webpack and support HMR …
3e8dd2f 
…and .vue files (#476)

* feat (samples): Run the samples using a webpack bundle. Closer to real-world NS-vue apps. Allow any aditional parameters to the tns command like --hmr or whatever.

* feat (samples): Add a sample with a Vue component to check the HMR feature.

* Change NPM dev script to build to dist/index.js. Remove the dev:dist script as it is not useful now. Document new features

* feat (samples): Fix live reload when changing the NS-vue code

* feat (sample): Adapt all the import to nativescript-vue

* feat (samples): Separate the details page into a new .vue component for better UX

* fix (samples): Fix the 455.js sample which is now adapted to the new samples infrastructure

* chore (v-slot): Add sample (currently failing) for testing v-slot in a .vue component
@msaelices
Copy link

@rigor789, I've just merged #476 into this branch (see #476). As the #476 PR adds support to have .vue samples, I've also created a new .vue sample which checks the new v-slot syntax (see 0a98c01). I can confirm that this sample is not working right now, so @tralves is right.

@rigor789
Copy link
Member Author

@tralves @msaelices Fixed it - the issue was that webpack was using a published version rather than the local version that has been updated to support the v-slot syntax. I've ran the .vue sample now - and it is working fine.

@tralves
Copy link

tralves commented May 29, 2019

@rigor789 @msaelices yup! it's working!

rosen-vladimirov and others added 5 commits May 31, 2019 13:37
@rosen-vladimirov @rigor789
fix(hooks): make hooks compatible with CLI's 6.0.0 changes (#500)
95aeab4 
In NativeScript CLI 6.0.0 release the bundle workflow will be the only one available. Currently, the nativescript-vue has some hooks that verify bundle is passed. There's no need of them for 6.0.0 release.
Implement a check based on the CLI's version and skip the validation in case CLI is 6.x.x or newer.
@elie-g @rigor789
fix(ListView): allow ObservableArray items in ListView (Fixes #464) (#…
9ba14d5 
…498)

* fix(listview): fix ObservableArray items in ListView (#464)

fix #464

* fix(samples): add sample for issue #464

ref #464
@rigor789
refactor(modals): rely on NS defaults rather than NSVue ones
592d7c5
@rigor789
fix(listview): only require tns module at runtime
bde8b0b 
the template compiler needs to be able to run in a node environment (webpack), so we need to make
sure to not rely on tns modules directly, and only require them in runtime contexts
@rigor789
chore(samples): update samples to 5.4
973b750
@rigor789 rigor789 merged commit b008d14 into master May 31, 2019
@rigor789 rigor789 mentioned this pull request May 31, 2019
Closed
@msaelices msaelices mentioned this pull request Sep 13, 2019
Closed
7 tasks
@rigor789 rigor789 deleted the dev branch December 5, 2022 17:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@tralves tralves tralves approved these changes

Assignees
No one assigned
Labels
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
6 participants
@rigor789 @codecov-io @tralves @msaelices @rosen-vladimirov @elie-g