Setting sensibleDefaults globally before they're used in components

[fourpixels]

In our current project we stumbled upon a problem with setting the sensible defaults before they are being used. It's a bit deeper (as we're building a library), but simplified it's about setting the defaults before they are actually used.

Imports (ESM) are executed before the logic itself. Therefore in our case we're importing some specific components (even in App.vue) that are using VueTypes (even more complex as our models are in separate files). Our code of setting sensibleDefaults comes as a first line of actual code after the imports in main.js, but as you can guess, App is already imported, so other child components are imported as well, and their exports return VueTypes without newest sensible defaults.

In the most basic scenario we were able to load the root component (App.vue) asynchronously and fix this issue. But talking about building a library and importing a single component out of it, as there is no main.js, the only solution we had is to wrap VueTypes and execute setting sensible defaults inside the wrapper.

Is there any more elegant solution you could think of? 😄

Thanks in advance!

[dwightjack]

Hi,

That's a problem indeed. I'm not sure whether there could be an elegant solution to it.

As you already suggested dynamically importing the entry-point component (App) solves the problem on an application level.

As for your library scenario I think your best option is indeed wrapping VueTypes in a local module where you import the library, define your defaults and export the library again:

// ./src/types.js
import VueTypes from 'vue-types';

VueTypes.sensibleDefaults = {...};

export default VueTypes;

Then you could even alias that module with webpack or another build tool for easy access.

In the meantime I will see if I can come up with a better option on VueTypes side.

[fourpixels]

We were thinking about using it as a plugin (unfortunately wrapping it again), but we had some issues doing so, maybe with mixins I think. I'm just sharing some thoughts :)

[dwightjack]

You mean by using it through the Vue.use() API?

I cannot check it out right now, but I guess you'd attach it to the Vue main object (something like Vue.types.bool), right?

I will check it out tomorrow. If you have any snippet feel free to share it. This is a pretty interesting use case, anyway sorry for the issues it's causing to you and your project.

[dwightjack]

Hi,

I've made some tests and I think that as a plugin it won't work properly because props are evaluated at component definition, so a static property attached to Vue (like Vue.types) won't be available when loading a component.

Your best bet is to go for the local wrapper module:

import VueTypes from 'vue-types'; 

VueTypes.sensibleDefaults = {...}; 

export default VueTypes;

If your component library is composed by multiple npm modules you could place that wrapper into a config, utils or environment shared package.

I was thinking that, library-wise, it could be a cleaner API to provide a method to create a completely new instance of the VueTypes object. This could give a cleaner way to provide defaults and (once #35 gets implemented) even custom types. Something like this:

import VueTypes from 'vue-types';

export default VueTypes.create({
  ...VueTypes.sensibleDefaults,
  string: 'Hello!'
}).extend({
  ... // still WIP
});

[dwightjack]

It took longer than I expected, but in the end, this feature is available in v2.0.0. Here is the relevant documentation: https://dwightjack.github.io/vue-types/advanced/custom-instance.html#introducing-createtypes

I'm going to close this for now. Feel free to open a new issue if you have any issues or suggestions related to the new API.