Comments (5)
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.
from vue-types.
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. :)
from vue-types.
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?).
from vue-types.
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.
from vue-types.
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.
from vue-types.
Related Issues (20)
- Review shim implementation HOT 1
- Dependency Dashboard
- custom validation does not run inside shape HOT 5
- eslint vue/require-default-prop warning HOT 8
- using `.def()` with `oneOfType` throws error HOT 3
- isRequired has unexpected behaviour with func HOT 2
- Question:Use defineProps has ESLint Error HOT 2
- Add `null` in possible generic types of `object` HOT 6
- Validator not works HOT 2
- Migrate to vitest HOT 1
- validateType throw an error when used with shape HOT 2
- Set the def attribute, the props received by the component are still the default type HOT 12
- Wrong documentation for number prop default HOT 2
- `validateType` not working with shim..? HOT 4
- `validateType(String, undefined) === true`? HOT 6
- validateType does not treat `null` the same as Vue does HOT 2
- func cannot recognize async functions for validation. HOT 2
- validate can't determine param type HOT 2
- Could not find a declaration file for module 'vue-types' HOT 6
- How to update VueTypes.extend? HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-types.