VueTypes.extends is broken

[micha-vb]

Hi,

either the extends feature is broken or I don't get it right. The following vue-component demonstrates my issue:

<template>
	<div>
		<a :href="link.url">{{ link.text }}</a>
		<a :href="linkAlt.url">{{ linkAlt.text }}</a>
	</div>
</template>

<script>
import VueTypes from 'vue-types'

const VueTypeLink = VueTypes.shape({
	text: VueTypes.string.isRequired,
	url: VueTypes.string.isRequired,
})

VueTypes.extend({
	name: 'link',
	getter: true,
	type: Object,
	validator: (v) => VueTypes.utils.validate(v, VueTypeLink),
})

console.log('VueTypes', VueTypes);

export default {
	name: 'SomeComponent',
	props: {
		link: VueTypes.link,
		linkAlt: VueTypes.link,
	}
}
</script>

Am I doing something wrong here or should that work? I'm getting the following error:

Uncaught TypeError: Cannot redefine property: isRequired
    at Function.defineProperty (<anonymous>)
    at withRequired (utils.js?732b:109)
    at toType (utils.js?732b:151)
    at Object.get [as link] (index.js?5397:85)
    at eval (Teaser.vue?715f:26)

If I remove the link and linkAlt items from the prop-object (no prop-validation is done) the console.log will output the VueTypes-Object with a "link"-object on it (as expected). That link object seems to be similar to all the default types on VueTypes (string, number etc.). So far, so good.

But as soon as I add only one type-check (just the "link"-prop) back to the prop-object, that link-object on VueTypes-console-output becomes that error message. The app itself will throw no error yet. So it seems, that the type-check works one time and only after that, the link-object becomes the error-message.

Because when I then add the second prop (linkAlt) to the props-object, the error is thrown in the console.

Thanks

[dwightjack]

My bad! Made a silly mistake causing this bug.

Should be fixed in version 1.5.6. Let me know if it works for you.

[micha-vb]

Hey, thanks for the quick work! :)

It seems to have worked a little, but now I get the error TypeError: Right-hand side of 'instanceof' is not an object. But I didn't find out what exactly in my code is causing this issue yet. It seems to be the one instanceof-line in the utils => valid = value instanceof typeToCheck.type where typeToCheck.type is undefined sometimes.

This is my code:

import VueTypes from 'vue-types'

// A Vue-Router Location Object
if (!VueTypes['routeLocation']) {
  VueTypes.extend({
    name: 'routeLocation',
    getter: true,
    type: Object,
    validator: v => VueTypes.utils.validate(v, VueTypes.oneOfType([
      VueTypes.shape({
        path: VueTypes.string.isRequired,
        query: VueTypes.object,
      }).loose,
      VueTypes.shape({
        name: VueTypes.string.isRequired,
        params: VueTypes.object,
      }).loose,
    ]))
  })
}

// A Vue-Router to-prop for router-links
// See: https://router.vuejs.org/api/#to
if (!VueTypes['routerTo']) {
  VueTypes.extend({
    name: 'routerTo',
    getter: true,
    type: [String, Object],
    validator: v => VueTypes.utils.validate(v, VueTypes.oneOfType([
      String,
      VueTypes.routerLocation,
    ]))
  })
}

// A Vue-Component
if (!VueTypes['vueComponent']) {
  VueTypes.extend({
    name: 'vueComponent',
    getter: true,
    type: Object,
    validator: v => VueTypes.utils.validate(v, VueTypes.shape({
      name: VueTypes.string.isRequired,
    }).loose)
  })
}

// A key used for the key-prop on v-for loops.
// See: https://vuejs.org/v2/api/#key
if (!VueTypes['key']) {
  VueTypes.extend({
    name: 'key',
    getter: true,
    type: [String, Number],
    required: true,
  })
}

And as an aside question: Is extending VueTypes with VueTypes-Objects (opposed to native Objects like String, Boolean, Object etc.) supposed to be done like above or is it rather something like:

VueTypes.extend({
  name: 'vueComponent',
  getter: true,
  type: VueTypes.shape({
    name: VueTypes.string.isRequired,
  }).loose,
})

Another seemingly hacky variant I tried in my debugging-adventures was:

VueTypes.extend({
  ...VueTypes.shape({
    name: VueTypes.string.isRequired,
  }).loose,
  name: 'vueComponent',
  getter: true,
})

One extra example in the README.md for this would be very helpful i think. :)

[dwightjack]

Hi,

glad we made some progress.

I've tried your code and noticed that while you're defining a routeLocation type, you're referring to a routerLocation (note the r) on the routerTo type.

This means you're testing for a value of type undefined. The checks breaks at this line in the validateType internal function because it's testing something like:

v instanceof undefined

On my side I should correct this behaviour and catch earlier undefined and null and maybe have some more meaningful logs. Will try to work on this on the next few days, but since I'm pretty busy I'm cannot assure a fast release. Of course if you feel to contribute with a pull request don't hesitate on it.

As for the best pattern to implement those types, I must admit that when I developed .extend() I was thinking about more primitives types like checking for a Date instance.

You current pattern is correct but I see it's pretty verbose and a different approach would be a good thing, allowing for a nicer type composability.
Since there's nothing already in place I'm open to proposals. My current ideas are:

1. Using the type property

This is one of your tests. Right now it doesn't work but the idea of accepting a VueTypes type and internally trigger some cloning and spreading magic looks logical. I should check if there are some side-effects but should be pretty safe.

2. adding a new validateAs property

Adding a new property to which pass the "reference" VueTypes type could make the intent more explicit, but then we'd still need the set the type and think what to do with the validator function (we ignore it? run it after the reference type validator?).

[micha-vb]

Well, I feel stupid..

Of course it was my fault. It works perfectly now. Thanks!

As a user, I think 1. Using the type propery is more intuitive. It was one of the first things I tried (before I even continued reading the docs and learned about the VueTypes.utils.validate function). But my knowlege of vue-types still is very superficial. Maybe there are reasons not to do so.

[dwightjack]

No problem, it happens.
As I said I should come up with some more checks to prevent those kind of errors or at least make them more debug friendly.

Ok cool, let's try with option 1. I will keep you posted on my progress.

I'm closing this for now and will open a new feature issue later.

Feel free to re-open should other problems pop out.