Vue-form-generator: Vue.js 2.0 support

Created on 30 Aug 2016 · 30Comments · Source: vue-generators/vue-form-generator

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();
    }
}

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 ?

enhancement hard in progress

Source

lionel-bijaoui

Most helpful comment

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

icebob on 10 Feb 2017

🎉2 ❤1 👍1

All 30 comments

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

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?

icebob on 30 Aug 2016

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" [email protected] 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
https://github.com/icebob/vue-form-generator/issues/56#issuecomment-243393769,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ADT81E-R_Esjn36uBJhjyZeKLH_YV9YRks5qlACfgaJpZM4JwWAq
.

lionel-bijaoui on 30 Aug 2016

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)

icebob on 30 Aug 2016

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.

lionel-bijaoui on 30 Aug 2016

👍1

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

icebob on 30 Aug 2016

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

lionel-bijaoui on 3 Oct 2016

@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.

lionel-bijaoui on 4 Oct 2016

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

icebob on 4 Oct 2016

👍2

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 on 6 Oct 2016

@icebob can you create the branch next please ?

lionel-bijaoui on 6 Oct 2016

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

icebob on 6 Oct 2016

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?

icebob on 6 Oct 2016

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 on 6 Oct 2016

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 😌

lionel-bijaoui on 6 Oct 2016

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 :disappointed:

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 on 6 Oct 2016

P.S: Get well soon!

icebob on 6 Oct 2016

❤1

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

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

icebob on 7 Dec 2016

👍1

@icebob wow congratulations ! Keep up the good work !

lionel-bijaoui on 8 Dec 2016

👍1

First beta release for Vue 2.x for testing

icebob on 12 Dec 2016

👍1

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