Lodash and moment.js really necessary?

[DotCoyote]

We just managed to integrate vuex-orm in our project, but had to determine that it adds ~1mb in vendor-files by adding complete lodash.js and moment.js.
Is this really necessary?

[kiaking]

Hi! Thank you so much for using Vuex ORM!

Vuex ORM uses lodash and moment but I too agree that it doesn't need complete lodash.js and moment.js.

The reason why this is happening is because me lacking the knowledge of bundling TypeScript...

Do you know any way to add only required functions from lodash or moment? Or would it make difference if I move those library to peer dependencies in package.json?

[DotCoyote]

Thanks for your reply.
I never touched TypeScript, so i can't help you with that.

For lodash in ES6, you could just use import debounce from 'lodash/debounce' to only get debounce and required additional functions.

The problem with moment.js is mainly, that it adds all localizations, even if you need only one. For your project, that might be necessary, since you need to support all languages as well, but i might ask, if you need that date-mutation at all, or if you could handle the developer such things?
For examle, we already use date-fns in our project to parse and transform dates...

[kiaking]

For lodash in ES6, you could just use import debounce from 'lodash/debounce' to only get debounce and required additional functions.

Ahah. That is easy. OK I'll do that.

if you need that date-mutation at all, or if you could handle the developer such things? For examle, we already use date-fns in our project to parse and transform dates...

You have good point. date-mutation is just "nice to have" feature and definitely not the must. I wasn't thinking so deeply about this but I agree that Vuex ORM should have little dependencies as possible.

So, I'm thinking to add more general mutation feature and remove moment from this package. Something like below.

import Model from 'vuex-orm/lib/Model'
import moment from 'moment'

class Post extends Model {
  static entity = 'posts'

  static fields () {
    return {
      // Pass callback to the attribute to mutate data.
      published_at: this.attr('1985-10-10', value => moment(value))
    }
  }

  // Or we could add such thing as a method separately...?
  static mutations () {
    return {
      published_at (value) {
        return moment(value)
      }
    }
  }
}

The above will do same as current this.date but now mutation behavior is up to developer. This way maybe you could use date-fns in similar way too.

So I'll first fix lodash issue and then remove moment from the project. Let me know if you have any advise on general mutator approach (the example of new API above).

[kiaking]

@CinKon Just wanted to let you know that I released v0.9.0 which includes breaking change on import syntax. From version 0.9.0, you must use following syntax.

// Instead of these...
import Database from 'vuex-orm/lib/Database'
import Model from 'vuex-orm/lib/Model'

// Now you have to...
import { Database } from 'vuex-orm'
import { Model } from 'vuex-orm'

Also you must call install method when registering Vuex ORM as a plugin to the Vuex.

import VuexORM from 'vuex-orm'

store = new Vuex.Store({
  plugin: [VuexORM.install(database)]
})

I've updated the docs as well. Sorry for the inconvenience.

[DotCoyote]

Please take care of your documentation ;)

store = new Vuex.Store({
  plugin: [VuexORM.install(database)]
})

This wont work.

Either

store = new Vuex.Store({
  plugin: VuexORM.install(database)
})

Or

store = new Vuex.Store({
  plugins: [VuexORM.install(database)]
})

I found this inconsistency in your gitbook as well.

[DotCoyote]

But thanks for the update 👍

[DotCoyote]

import { install as VuexORMInstall, Database } from 'vuex-orm'

const database = new Database()
database.register(User, user)

store = new Vuex.Store({
  plugins: [VuexORMInstall(database)]
})

For completeness ;)

With this, eslint goes crazy (Caution: 'VuexORM' also has a named export 'install'. Check if you meant to write "import {install} from 'vuex-orm'" instead):

import VuexORM, { Database } from 'vuex-orm'

store = new Vuex.Store({
  plugins: [VuexORM.install(database)]
})

[kiaking]

Wow, thank you for the fix! (as always). I've updated the doc and published.

[kiaking]

OK, I've removed moment and introduced a new way to define mutator and released 0.10.0! You can find docs at https://revolver-app.gitbooks.io/vuex-orm/model/mutators.html.

This has reduced the bundle size to about half before moment. I hope it helps reducing your project bundle size as well :)

[DotCoyote]

Thanks for your fast fixes!