prop-types
prop-types copied to clipboard
Question: should typed arrays be supported?
Hey. In my app I make heavy use of typed arrays. If I recall correctly, PropTypes treats them as objects, and having to say that my components required an object when they only took typed arrays felt like a bug-due-to-bad-documentation waiting to happen. So I made my own validation for it (see below).
However, I was wondering if typed array support shouldn't be part of the main package? I mean, I'm not really requesting it since I already fixed it for myself, and I know that their usage is relatively rare, but on the other hand: they are a core part of the language, so it feels a bit different from making custom validators for your own specific objects.
(And hey, even if you don't want to add it to the main prop-types
package, at least the next person to look for typed array support can use something based on the code below)
export const TypedArrayProp = {
any: (props, propName, componentName) => {
let obj = props[propName];
if (!(obj instanceof Float64Array ||
obj instanceof Float32Array ||
obj instanceof Int32Array ||
obj instanceof Int16Array ||
obj instanceof Int8Array ||
obj instanceof Uint32Array ||
obj instanceof Uint16Array ||
obj instanceof Uint8Array ||
obj instanceof Uint8ClampedArray)) {
return new Error(
'Invalid prop `' + propName + '` supplied to' +
' `' + componentName + '`. Expected a typed array.'
);
}
},
float64: (props, propName, componentName) => {
if (!(props[propName] instanceof Float64Array)) {
return new Error(
'Invalid prop `' + propName + '` supplied to' +
' `' + componentName + '`. Expected a Float64Array.'
);
}
},
float32: (props, propName, componentName) => {
if (!(props[propName] instanceof Float32Array)) {
return new Error(
'Invalid prop `' + propName + '` supplied to' +
' `' + componentName + '`. Expected a Float32Array.'
);
}
},
float: (props, propName, componentName) => {
if (!(props[propName] instanceof Float64Array ||
props[propName] instanceof Float32Array)) {
return new Error(
'Invalid prop `' + propName + '` supplied to' +
' `' + componentName + '`. Expected a Float32Array or Float64Array.'
);
}
},
int32: (props, propName, componentName) => {
if (!(props[propName] instanceof Int32Array)) {
return new Error(
'Invalid prop `' + propName + '` supplied to' +
' `' + componentName + '`. Expected an Int32Array.'
);
}
},
int16: (props, propName, componentName) => {
if (!(props[propName] instanceof Int16Array)) {
return new Error(
'Invalid prop `' + propName + '` supplied to' +
' `' + componentName + '`. Expected an In16Array.'
);
}
},
int8: (props, propName, componentName) => {
if (!(props[propName] instanceof Int8Array)) {
return new Error(
'Invalid prop `' + propName + '` supplied to' +
' `' + componentName + '`. Expected an Int8Array.'
);
}
},
int: (props, propName, componentName) => {
if (!(props[propName] instanceof Int32Array ||
props[propName] instanceof Int16Array ||
props[propName] instanceof Int8Array)) {
return new Error(
'Invalid prop `' + propName + '` supplied to' +
' `' + componentName + '`. Expected an Int32Array, In16Array, or Int8Array.'
);
}
},
uint32: (props, propName, componentName) => {
if (!(props[propName] instanceof Uint32Array)) {
return new Error(
'Invalid prop `' + propName + '` supplied to' +
' `' + componentName + '`. Expected a Uint32Array.'
);
}
},
uint16: (props, propName, componentName) => {
if (!(props[propName] instanceof Uint16Array)) {
return new Error(
'Invalid prop `' + propName + '` supplied to' +
' `' + componentName + '`. Expected a Uint16Array.'
);
}
},
uint8: (props, propName, componentName) => {
if (!(props[propName] instanceof Uint8Array)) {
return new Error(
'Invalid prop `' + propName + '` supplied to' +
' `' + componentName + '`. Expected a Uint8Array.'
);
}
},
uint8clamped: (props, propName, componentName) => {
if (!(props[propName] instanceof Uint8ClampedArray)) {
return new Error(
'Invalid prop `' + propName + '` supplied to' +
' `' + componentName + '`. Expected a Uint8ClampedArray.'
);
}
},
uint: (props, propName, componentName) => {
if (!(props[propName] instanceof Uint32Array ||
props[propName] instanceof Uint16Array ||
props[propName] instanceof Uint8Array ||
props[propName] instanceof Uint8ClampedArray)) {
return new Error(
'Invalid prop `' + propName + '` supplied to' +
' `' + componentName + '`. Expected a Uint32Array, Uint16Array, Uint8Array, or Uint8ClampedArray.'
);
}
},
};
export { TypedArrayProp as default };
cc @hzoo could this be related to the removal of babel-plugin-transform-runtime
(#310)?
yes it won't polyfill symbol, promise, etc (a breaking change)
but that is the transform itself so seems unrelated
@peterdivvito Any chance you could put together a small reproduction? Happy to debug this if it's reproducible.
F*CK!! this runtime lib use symbol lib breaking change . with babel runtime