support for Vue 2.6 #445

farfromrefug · 2019-03-04T09:47:19Z

No description provided.

… (like Vue components)

https://github.com/vuejs/vue/blob/7d19b8d70e133fdb8f0877482bee23c8f36116e7/types/vnode.d.ts#L9

tralves · 2019-03-06T13:43:18Z

Hi @farfromrefug! Awesome work! This PR looks ok and I need 2.6 in my project, but there are lots of changes here.
Can you please describe in more detail what you did and why? I think it will help @rigor789 review and accept it.

@rigor789, please review and accept it 😛 I am going to test this on my projects to see if I find any issues.

farfromrefug · 2019-03-06T13:48:55Z

Basically i did 3 things:

fixed the build process. It was broken and the nativescript-vue-template-compiler was not building anymore. Mostly this was due to registerElement being needed within webpack. Because of that when doing require('nativescript-vue-template-compiler') within your webpack config you were trying to import tns-core-modules which can't work. So i had to refactor things a bit and create a different elementRegistry for webpack/runtime (though they can actually be merge, i know how to do it).
update the runtime to work with vue 2.6. It broke a few things within the nativescript-vue and i am not even sure i have seen them all yet. For now i saw that the view directive and the listview patchTemplate were broken.
remove the console.log override as it was creating crash within my apps with complex object logging

Already using that branch within my project without error

rigor789 · 2019-03-06T19:33:03Z

@tralves @farfromrefug it's on my todo list to go over this as soon as I can - but I can't promise anything...

rigor789

I've left a few comments that I'd like to know more about before merging.

@farfromrefug you said you can refactor the element-registry to be unified - can you please do that?
With this PR, we'd have one element-register and two element-registry's which seems unnecessary and likely to cause issues in the future, as both need to be updated simultaneously.

build/config.js

rigor789 · 2019-03-18T13:22:27Z

build/config.js

@@ -17,6 +17,12 @@ const banner = (name, version) => `
 * Released under the MIT license.
 */
 `
+const intro = `
+if (!this['process']) {


@farfromrefug any reason you are not checking for global.process? In this case I believe it does the same thing, since we are in a global context - but still curious if there is something I'm not aware of! :)

Well to be honest i am not sure how "process" is handled in Nativescript. What i know is that VueJs checks process and not global.process. That's why i used this.

@farfromrefug process is not defined in NativeScript by default, and the reason we're adding it manually is that some vue plugins check for process.env which then causes issues since it's trying to access property env of undefined. Checking if it exists on global and then adding to it ensures that both global.process and just process are defined.

@rigor789 VueJs 2.6 also uses it. So you are saying that i should do?:

if (!global['process']) { global.process = process = {env:{}} }

@farfromrefug yeah that looks good to me, just change this['process'] to global['process']

fixed, testing global.process

rigor789 · 2019-03-18T13:24:09Z

build/config.js

@@ -72,10 +81,9 @@ const genConfig = (name) => {
            replace({
                __WEEX__: false,
                __VERSION__: VueVersion,
-                'process.env.NODE_ENV': "'development'",


@farfromrefug Does this remove all the development related help messages that vue prints? If so - can this be re-enabled while developing?

well it s the user choice by replacing within his weback config. that code was making the appear always, even in prod

@farfromrefug alright, so as far as I understand this change, this should still allow the help messages to appear unless webpack sets the env to "production"?

@rigor789 indeed it will appear by default because it checks for NODE_ENV !== 'production' which is the case as NODE_ENV is not defined.
However that change allow the user tu define NODE_ENV to production when building for production, and thus remove all the warning.
It is just moved to userland

rigor789 · 2019-03-18T13:28:49Z

platform/nativescript/compiler/modules/class.js

+  //   const expression = parseText(staticClass, options.delimiters)
+  //   if (expression) {
+  //     warn(
+  //       `class="${staticClass}": ` +


@farfromrefug any reason this has been removed? Interpolation in attributes should not be used - and should be warned about

Well it was a deprecation warning that was implying a regexp test on every transform node. Seemed like it was time to remove it. But i can bring it back if you prefer

@farfromrefug Just checked and it is still present in vue (web), so let's keep it there until even vue removes it! :)

https://github.com/vuejs/vue/blob/ebc1893faccd1a9d953a8e8feddcb49cf1b9004d/src/platforms/web/compiler/modules/class.js#L16-L22

rigor789 · 2019-03-18T13:34:05Z

platform/nativescript/compiler/modules/view.js

-    getAndRemoveAttr(el, attr)
-    addDirective(el, 'view', `v-view:${attrName}`, '', arg, modifiers)
+    getAndRemoveAttr(el, attr, true)
+    addDirective(el, 'view', `v-view:${attrName}`, '', false, arg, modifiers)


@farfromrefug what do the added args do?

The first one is removeFromMap - why is this required?

The second one seems to be mapping to arg - is this the intended parameter? Or should that be isDynamicArg instead?

export function addDirective ( el: ASTElement, name: string, rawName: string, value: string, arg: ?string, isDynamicArg: boolean, modifiers: ?ASTModifiers, range?: Range )

oh my bad i inversed the args. Maybe that's why arg was not working anymore! will fix

@farfromrefug perfect, hopefully that will fix it!

rigor789 · 2019-03-18T13:36:01Z

platform/nativescript/framework.js

-const newLineRegExp = /\\n/g
-
-console.log = (function(log, inspect, Vue) {
-  return function(...args) {


@farfromrefug I'm not too keen on removing this - I'd rather make it opt-out, as I've had a much better development experience with this in place vs. the default console.log.

@rigor789 ok i understand. Make it an opt-in then. GDPR ;) It still crashes for me + i don't really want it. And users won't understand why. If you can't recall why it was necessary then i think it really should be opt-in and not opt-out

@farfromrefug the reason I had to add it was that the built-in console.log crashed the app for anything more "complex" than a string, or a simple object { foo: "bar" }. Most notably it crashed whenever trying to log a vue observed property, which was probably 90% of the things you'd log.

Plus it adds colors - which I really like when looking at the logs, makes it a lot easier to find things (this might be just my preference, and it's disabled by default on the playground anyways)

@rigor789 those crashes do not appear anymore. Plus the contrary happens. Crashes with it.
If you use it just for the colors, should be in userland. plus it adds unecessary dependencies in production.

@rigor789 so we can keep this in userland?

platform/nativescript/framework.js

rigor789 · 2019-03-18T13:39:13Z

platform/nativescript/runtime/directives/view.js

    const parent = el.parentNode.nativeView
-
+    const arg = binding.rawName.split(":")[1];
+    const modifiers = binding.modifiers;


@farfromrefug I'm assuming this is a related change to platform/nativescript/compiler/modules/view.js, can you elaborate why this is needed?

it seems to have changed in Vue 2.6, your was not working anymore and i could not get the "arg" as before

@farfromrefug I'm assuming it's this commit that changed directives: vuejs/vue@dbc0582

wonder if changing the order in platform/nativescript/compiler/modules/view.js for the arguments would make it work without this change.

yes will try

fix working as we talked about

rigor789 · 2019-03-18T13:41:07Z

platform/nativescript/util/index.js

 import { makeMap, once } from 'shared/util'
-import { VUE_VM_REF } from '../runtime'
+ const VUE_VM_REF = '__vue_vm_ref__'


@farfromrefug Why do we need to re-declare rather than importing? Is this due to the fact that runtime/index relies on tns-core-modules and should not be referenced to avoid build issues?

@rigor789 yes indeed. May be we should have a constants.ts with the constant define ?

@farfromrefug yes, I like the idea of a constants file - should keep the codebase tidier!

tralves · 2019-04-08T20:32:52Z

I think I found another issue.
This branch doesn't seem to support the new scope slot syntax v-slot introduced in 2.6...

I get this: [Vue warn]: Failed to resolve directive: slot
I thought maybe NS-Vue is doing something weird with directives?...

farfromrefug · 2019-04-09T06:46:05Z

I think I found another issue.
This branch doesn't seem to support the new scope slot syntax v-slot introduced in 2.6...

I get this: [Vue warn]: Failed to resolve directive: slot
I thought maybe NS-Vue is doing something weird with directives?...

Is is what you use with nativescript-multi-drawer ? Cause if it is, it's working for me. Can you share an example project?

tralves · 2019-04-09T11:51:44Z

This is the example project: https://github.com/tralves/ns-vue-v-slot-test

This is the relevant part in App.Vue:

<StackLayout>
  <Label class="message" text="OLD SYNTAX (slot-scope)" col="0" row="0"/>
  <CurrentUser>
    <template slot-scope="scope">{{scope.user.firstName}} {{scope.user.lastName}}</template>
  </CurrentUser>

  <Label class="message" text="NEW SYNTAX (v-slot)" col="0" row="0"/>
  <CurrentUser>
    <template v-slot="scope">{{ scope ? scope.user.firstName : '(scope is not defined)'}}</template>
  </CurrentUser>
</StackLayout>

The old syntax slot-scope works, but the new syntax v-slot doesn't (see the docs).

That warn [Vue warn]: Failed to resolve directive: slot is not showing anymore. I think I was not using it with <template>...

farfromrefug · 2019-04-18T14:35:00Z

@tralves i see. Don't use that feature yet. Think it should be good to merge that PR first. Then implement that new feature. @rigor789 any news on this?
I need to know if you are about to merge this. Otherwise i will make my fork public under another name.

Thanks

rigor789 · 2019-04-21T19:05:31Z

@farfromrefug I will try to go over it in the next few days!

keithgulbro · 2019-04-24T16:57:38Z

Hi @tralves,

Any update on the use of v-slot? I'm attempting to use named slots and still encountering an issue, I think this feature is of significant value given VueJS is designed to use component tree's.

tralves · 2019-04-24T17:01:33Z

@keithgulbro no news here. I tried to find the cause but couldn't figure it out. But you can still use the deprecated slot syntax. That one works.

farfromrefug · 2019-04-25T06:43:21Z

@tralves think i just found why it is not working with the new syntax.
Will try and fix it.
But i think it will be in a fork.

EDIT: @tralves can you try with akylas-nativescript-vue at version 2.1.14? It might work
You might need to replace the compiler too akylas-nativescript-vue-template-compiler

rigor789 · 2019-05-31T14:11:17Z

Changes landed in #487 and v2.3.0-rc.0

farfromrefug · 2019-06-04T07:05:01Z

@rigor789 will try your rc. Thanks

farfromrefug added 11 commits March 4, 2019 10:46

updated packages

d7790ae

fix for latest rollup

75da6d3

refactoring to NOT import tns-core-modules when required from webpack

18d377d

removed deprecated test. Faster as now regex testing

7e8768e

fixed view directive for latest vue

d3bd9b3

removed custom console log as it crashes the app when complex objects…

8e0e8d7

… (like Vue components)

update for process.env to be correctly set / created.

267603f

fixed scopedFn returning array in 2.6

46c69b6

https://github.com/vuejs/vue/blob/7d19b8d70e133fdb8f0877482bee23c8f36116e7/types/vnode.d.ts#L9

actually better test

a9032f6

needs to be done on oldVnode too

3ee431c

should be a let!

26f876c

rigor789 reviewed Mar 18, 2019

View reviewed changes

farfromrefug added 6 commits March 18, 2019 14:55

bring back strict mode

85aea58

bring warning back

2b26db5

use latest vue

91b4285

fix directive reading of arg

8972f31

test for global.process

270afe8

create constants

293cb5c

tralves mentioned this pull request Apr 10, 2019

new vue.js 2.6.0 v-slot syntax not supported #478

Closed

msaelices mentioned this pull request May 3, 2019

Tests refactor for using Jest and vue-test-utils #486

Closed

7 tasks

rigor789 mentioned this pull request May 4, 2019

[WIP] feat: upgrade to vue 2.6 #487

Merged

3 tasks

rigor789 closed this May 31, 2019

support for Vue 2.6 #445

support for Vue 2.6 #445

Conversation

farfromrefug commented Mar 4, 2019

tralves commented Mar 6, 2019

farfromrefug commented Mar 6, 2019

rigor789 commented Mar 6, 2019

rigor789 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tralves commented Apr 8, 2019 • edited

farfromrefug commented Apr 9, 2019

tralves commented Apr 9, 2019

farfromrefug commented Apr 18, 2019

rigor789 commented Apr 21, 2019

keithgulbro commented Apr 24, 2019

tralves commented Apr 24, 2019

farfromrefug commented Apr 25, 2019 • edited

rigor789 commented May 31, 2019

farfromrefug commented Jun 4, 2019

tralves commented Apr 8, 2019 •

edited

farfromrefug commented Apr 25, 2019 •

edited