Vue.js 2.0 support #56

lionel-bijaoui · 2016-08-30T09:51:22Z

I guess it going to be hard to do, but this is something necessary.
2.0 changes

No more `.sync`

My first analysis point to one real problem, the disappearance of .sync.
so instead of:

:model.sync="model", :schema.sync="field"

We should do:

:model="model", :schema="field", @model-updated="modelUpdated", @schema-updated="schemaUpdated"

and inside the fields (abstractField.js)

props: ["model", "schema"],
watch: {
    model(newVal) {
        this.$emit('model-updated', newValue)
    },
    schema(newVal) {
        this.$emit('schema-updated', newValue)
    }
}

Also change formGenerator.vue:

watch: {
    // new model loaded
    model: function(newModel, oldModel) {
        if (oldModel == newModel) // model got a new property
            return;

        //console.log("Model changed!");
        if (this.options.validateAfterLoad === true && this.isNewModel !== true)
            this.validate();
        else
            this.clearValidationErrors();
    }
}

to

methods: {
    modelUpdated: function(newModel){
        if (this.model == newModel) // model got a new property
            return;

        //console.log("Model changed!");
        if (this.options.validateAfterLoad === true && this.isNewModel !== true)
            this.validate();
        else
            this.clearValidationErrors();
    }
}

This need to be tested.

Change in hook

Another thing could be related to ready becoming mounted. There's no longer the guarantee to be in-document and could break most js dependent fields.
We should test if the component is in document ourself now. I have no idea how to do that.
Maybe check if vm.$el have a parent ? And if not use a small setTimeout to lauch the test again soon ?

I'm sure I'm missing a lot of problem, but this seem achievable.
What are your thought ?

The text was updated successfully, but these errors were encountered:

icebob · 2016-08-30T10:06:23Z

Currently I hate the new v2.0 version of vue :) Evan killed the best features of VueJS what I like. 😠

By the way, I don't think, it is a neccessary feature. Because we publish a bundle version what contains the vuejs too. So (I think, but need to test) vue-form-generator can be used in a Vue 2.0 project. Do you feel like to test it?

lionel-bijaoui · 2016-08-30T10:28:35Z

I think this new version is awesome. Most change come from good reasons and
also help with server side rendering. I'm sad that you don't like it :(
I'm not sure about what you are saying about the bundle. What do you mean
exactly ?

Le 30 août 2016 12:06, "Icebob" notifications@github.com a écrit :

Currently I hate the new v2.0 version of vue :) Evan killed the best
features of VueJS what I like. 😠

By the way, I don't think, it is a neccessary feature. Because we publish
a bundle version what contains the vuejs too. So (I think, but need to
test) vue-form-generator can be used in a Vue 2.0 project. Do you feel like
to test it?

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
#56 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ADT81E-R_Esjn36uBJhjyZeKLH_YV9YRks5qlACfgaJpZM4JwWAq
.

icebob · 2016-08-30T10:41:24Z

SSR is a good feature, but the filters, formatters, two-way binding are too. With them the development is very quick. Vue 2.0 will be a React copy. But this is only my opinion.

So I think you can use vue-form-generator in a Vue 2.0 project. The lib won't use Vue 2, because bundle contains the Vue 1.0.26. Check here.

If you want to test it, fork the example fiddle and change the vue external link to v2 and change the js code to be compatible with v2.
(But maybe my thinking is wrong)

lionel-bijaoui · 2016-08-30T11:39:04Z

Filter are back ! Usage is limited to interpolation only, but it is were they should be used (syntax changed for the better too). Also, converting from .sync to @event is more work, I totally agree, but it helps clarify where the change come from. I'm not sure what formatters are. I'm a bit busy right now, but I will try to test things out.

icebob · 2016-08-30T12:20:54Z

My thinking was wrong. 😞 It doesn't work. https://jsfiddle.net/icebob/8neaa2vo/1/

lionel-bijaoui · 2016-10-03T08:37:56Z

It's here : https://medium.com/the-vue-point/vue-2-0-is-here-ef1f26acf4b8

lionel-bijaoui · 2016-10-04T14:08:38Z

@icebob We are switching to vuejs 2.0 at my company so I need to adapt vue form generator to it.
We have two option (taking into account how other plugins have done it):

create a branch 2.0 and develop the new version on it
create a branch 1.0 and master become 2.0 compatible (this is the preferred solution by vue-router, vuex and vue)

I'm taking care of the changes and I will do a PR later.

icebob · 2016-10-04T14:16:07Z

I prefer to make a vue-next branch. The master stay for v1.x.x while the v2 implementation won't be stable.

lionel-bijaoui · 2016-10-06T13:54:37Z

I had such a hard time, bugs everywhere nothing was working, it was hell...
But I finally found the problem, and it is so simple it hurt: Jade was messing the conversion of special characters inside attributes.
For example, it was converting :multiple="selected.length > 1" to :multiple="selected.length > 1" and webpack was failing.
I'm so happy I find this problem, but it raise a question. Should we keep writing in Jade (or Pug as it is now called) ?
It is pretty easy to convert from/to html/jade so it is not a big problem. I'm personally not fond of Jade (or other minimalist pre-processor like haml, Sass (I love SCSS though)). The reliance on indentation only always make me nervous I will make a mistake. If you use Emmet, writing html is as easy and you get no bad surprise.

For now I will not get trigger happy and change everything, but having two way of writing is inconsistent. The risk of other bad surprises demand a decision in the long run.

Other than that, I'm fixing bugs, updating libs and adapting everything. I will need your help to update the dev app (the one that save and load fake profiles).
I will do the PR soon so you can take a look.

lionel-bijaoui · 2016-10-06T14:45:15Z

@icebob can you create the branch next please ?

icebob · 2016-10-06T19:45:34Z

I created: https://github.com/icebob/vue-form-generator/tree/next

icebob · 2016-10-06T19:47:56Z

I don't understand why has problem with jade. Currently has similar expressions in jade and there is no problem with webpack. You are only change VueJS v1.0 to v2.0, aren't you?

lionel-bijaoui · 2016-10-06T20:46:48Z

The loader are updated too. Vuejs v2.0 transform the template into render functions with webpack.
For now I'm trying to make everything work, once it's done, we can try to find why it is not working.
I may have done something wrong, but I don't care for now.
I need to get everything up to speed (for work). It is a lot of work. I hope you will be able to help me.

lionel-bijaoui · 2016-10-06T20:53:28Z

I have problem with noUiSlider, selectEx, and vue multiselect. Also, the dev app is not working well, and the validator is weird. Some behavior have changed and things update faster which may or may not be the cause.
A lot of this is hard for me because I have to review all the code (which was not needed when I was just adding fields), and understand how it work, then adapt it for vuejs 2.
Also, maybe we could simplify some stuff with ES6 (instead of lodash).
All of this at the same time, while I do other stuff too. 😨
Did I mentioned that I was sick ? 😷
EDIT: the PR is coming first thing tomorrow morning, thanks for the new branch! Sorry that I'm complaining so much, I need to 😌

icebob · 2016-10-06T21:44:54Z

I think it is a bigger project to rewrite all codes to v2. And tonight I added some commits to both branches, so you need to merge them too 😞

Are there any other solution, that you can use the current version of VFG in your Vue2 project without rewrite all stuffs? Because I don't know that I will have enough time to help you to fix all v2 issues quickly.

Other question: Can we make the migration that it will working with Vue1 & Vue2 the same code? Because I don't plan yet to change Vue to v2 in my projects.

icebob · 2016-10-06T21:45:26Z

P.S: Get well soon!

icebob · 2016-12-07T22:59:05Z

@lionel-bijaoui Today I fixed validators and unit tests. Now test is green 🎉, but there are 10 skipped.
(range, pikaday, vuemultiselect)
I will continue fixing.

https://github.com/icebob/vue-form-generator/commits/next

lionel-bijaoui · 2016-12-08T06:29:48Z

@icebob wow congratulations ! Keep up the good work !

icebob · 2016-12-12T19:56:12Z

First beta release for Vue 2.x for testing

xumx · 2016-12-23T08:09:24Z

Just tried 2.0.0 beta. multi-level object doesn't seem to be working.

amanpatel · 2016-12-23T22:06:10Z

I am using the beta 2.0 for a project. Thanks for the updates. Would like to mention that the validation didn't seem to work for me.

pikaday also didn't work.

icebob · 2016-12-27T15:41:38Z

@amanpatel What is the problem with validation?

amanpatel · 2016-12-27T15:45:00Z

Just didn't do anything. I had set required:true in the schema, and upon submission no flags came up, (or even onBlur when value was empty).

icebob · 2016-12-27T16:07:58Z

And do you set validators in schema, like here ?
If yes, could you show me your schema?

icebob · 2017-01-30T13:10:46Z

Next pre-release for Vue 2.x

icebob · 2017-02-10T13:35:37Z

Next pre-release (beta3) for Vue 2.x

icebob · 2017-02-10T13:37:03Z

@xumx issue is fixed in beta3

icebob · 2017-02-10T14:22:39Z

next branched merged to master. From now, master is for Vue 2.x, vue1 for Vue 1.x

lionel-bijaoui · 2017-02-10T15:40:35Z

Congratulation !! Sorry that I was not available to help.

icebob · 2017-02-10T15:50:20Z

No problem :)

icebob added difficulty: hard enhancement labels Aug 30, 2016

lionel-bijaoui added this to the v1.0.0 milestone Sep 22, 2016

icebob added the in progress label Oct 6, 2016

icebob added the vuejs2 label Oct 7, 2016

icebob modified the milestones: v2.0.0, v1.0.0 Dec 21, 2016

icebob closed this as completed Feb 10, 2017

icebob removed this from TODO in v2.0 Feb 10, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Vue.js 2.0 support #56

Vue.js 2.0 support #56

lionel-bijaoui commented Aug 30, 2016

icebob commented Aug 30, 2016

lionel-bijaoui commented Aug 30, 2016

icebob commented Aug 30, 2016 •

edited

lionel-bijaoui commented Aug 30, 2016 via email

icebob commented Aug 30, 2016

lionel-bijaoui commented Oct 3, 2016

lionel-bijaoui commented Oct 4, 2016

icebob commented Oct 4, 2016

lionel-bijaoui commented Oct 6, 2016 •

edited

lionel-bijaoui commented Oct 6, 2016

icebob commented Oct 6, 2016

icebob commented Oct 6, 2016 •

edited

lionel-bijaoui commented Oct 6, 2016

lionel-bijaoui commented Oct 6, 2016 •

edited

icebob commented Oct 6, 2016

icebob commented Oct 6, 2016

icebob commented Dec 7, 2016 •

edited

lionel-bijaoui commented Dec 8, 2016

icebob commented Dec 12, 2016

xumx commented Dec 23, 2016

amanpatel commented Dec 23, 2016 •

edited

icebob commented Dec 27, 2016

amanpatel commented Dec 27, 2016

icebob commented Dec 27, 2016

icebob commented Jan 30, 2017

icebob commented Feb 10, 2017

icebob commented Feb 10, 2017

icebob commented Feb 10, 2017

lionel-bijaoui commented Feb 10, 2017

icebob commented Feb 10, 2017

Vue.js 2.0 support #56

Vue.js 2.0 support #56

Comments

lionel-bijaoui commented Aug 30, 2016

No more .sync

Change in hook

icebob commented Aug 30, 2016

lionel-bijaoui commented Aug 30, 2016

icebob commented Aug 30, 2016 • edited

lionel-bijaoui commented Aug 30, 2016 via email

icebob commented Aug 30, 2016

lionel-bijaoui commented Oct 3, 2016

lionel-bijaoui commented Oct 4, 2016

icebob commented Oct 4, 2016

lionel-bijaoui commented Oct 6, 2016 • edited

lionel-bijaoui commented Oct 6, 2016

icebob commented Oct 6, 2016

icebob commented Oct 6, 2016 • edited

lionel-bijaoui commented Oct 6, 2016

lionel-bijaoui commented Oct 6, 2016 • edited

icebob commented Oct 6, 2016

icebob commented Oct 6, 2016

icebob commented Dec 7, 2016 • edited

lionel-bijaoui commented Dec 8, 2016

icebob commented Dec 12, 2016

xumx commented Dec 23, 2016

amanpatel commented Dec 23, 2016 • edited

icebob commented Dec 27, 2016

amanpatel commented Dec 27, 2016

icebob commented Dec 27, 2016

icebob commented Jan 30, 2017

icebob commented Feb 10, 2017

icebob commented Feb 10, 2017

icebob commented Feb 10, 2017

lionel-bijaoui commented Feb 10, 2017

icebob commented Feb 10, 2017

No more `.sync`

icebob commented Aug 30, 2016 •

edited

lionel-bijaoui commented Oct 6, 2016 •

edited

icebob commented Oct 6, 2016 •

edited

lionel-bijaoui commented Oct 6, 2016 •

edited

icebob commented Dec 7, 2016 •

edited

amanpatel commented Dec 23, 2016 •

edited