Vue-form-generator: update docs

[icebob]

• [x] autocomplete attr #63
• [x] custom fields example #65

[lionel-bijaoui]

I have updated the doc and completed some stuff. Please tell me if you find some problem. I tried to sort properties alphabetically but it is not yet consistent (some field are not sorted yet).
I will now finish the test for #63

[icebob]

Thanks! I will check it.

[lionel-bijaoui]

I just realized fieldStaticMap is not in the doc...
EDIT : I created the entry, can you fill in information ? https://www.gitbook.com/book/icebob/vueformgenerator/edit#/edit/master/fields/staticmap.md

[icebob]

Hmm, it was a quick test field only. But it stay. I fill the docs, thanks.

[icebob]

:tada: v0.4.1 released
https://github.com/icebob/vue-form-generator/releases/tag/v0.4.1

[lionel-bijaoui]

Sorry about the pressure. If you want I can help with the custom fields if you give me a topo.

[icebob]

It would be good.

For custom fields:
Write some sentences about if you need an extra custom field. you can create it yourself.
Main points:

• use VueFormGenerator.abstractField as a mixins for your field
• register the new field as a global components
• and use it on your schema

And add some code snippet from dev as a sample:
Example custom field: https://github.com/icebob/vue-form-generator/blob/master/dev/fieldAwesome.vue
Register globally: https://github.com/icebob/vue-form-generator/blob/master/dev/app.vue#L44
Use in the schema: https://github.com/icebob/vue-form-generator/blob/master/dev/schema.js#L183

[lionel-bijaoui]

This is very powerful. How about we make it possible to choose which fields to load ? For example Keen UI does that.
You can choose to load all or individual components. That would reduce the size of the plugin (right now it is bigger than Vue.js once build with Webpack).

[icebob]

I think it is not neccessary. Because the code of fields is tiny. Check this webpack stat:

You can see, the code of fields is only 1.8% of the whole size. The full src folder is only 2%.
The big parts is vue, moment, and lodash.

[icebob]

You can check too, if you make a build and drop the stat.json file to https://chrisbateman.github.io/webpack-visualizer/

[lionel-bijaoui]

why is lodash so big ? It seem like we only use some functions from it.
How about we unpack Moment.js ? Make it a dependency of vue form generator ?
For example, I will use Moment.js (and maybe lodash) in my project alongside vfg. Will Webpack understand that there is common chunks (I don't think so because it is minified) ?
After all, using it inside vfg is not magically removing the dependency it have from those libs. It just doesn't allow for optimized bundling later on and space lost for no good reason.

[icebob]

I think, this stats made before Dedupe, so it contains unused parts too. I think it, because stats.json said the full size is 1.2MB, but the bundle size is only ~400kB after build.

In a separated branch we can try to remove these dependencies and use as external deps. But I don't know, how we do that, Because if we set these libs to externals in webpack config, it will try to load from global var. But it won't work if you are try to using vfg from other webpack project. More information: https://webpack.github.io/docs/library-and-externals.html

[lionel-bijaoui]

I'm going to test it. A very modularized version of the app would be a plus.
My goal is:

• a simple, all in one (except for CSS of course) bundled JS.
  The user only need to include the lib with a script tag and it work as expected (like today build).
• a commonjs version with dependency and the possibility to load individual fields or not (some fields have dependency that other don't so it could save some space in the end).

The link you provided give me everything I need to make it work.
EDIT: I opened a new issue for that #67

[lionel-bijaoui]

@icebob can I merge the doc with master ?
https://www.gitbook.com/book/icebob/vueformgenerator/edit#/edit/custom-fields/fields/custom_fields.md

[icebob]

Yes please. Thank you!

[Rchanger]

how can i provide the schema through json file .