prop-types icon indicating copy to clipboard operation
prop-types copied to clipboard

Question: should typed arrays be supported?

Open JobLeonard opened this issue 7 years ago • 0 comments

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 };

JobLeonard avatar Jun 02 '17 08:06 JobLeonard

cc @hzoo could this be related to the removal of babel-plugin-transform-runtime (#310)?

benjamn avatar Sep 18 '17 22:09 benjamn

yes it won't polyfill symbol, promise, etc (a breaking change)

but that is the transform itself so seems unrelated

hzoo avatar Sep 18 '17 23:09 hzoo

@peterdivvito Any chance you could put together a small reproduction? Happy to debug this if it's reproducible.

benjamn avatar Sep 18 '17 23:09 benjamn

F*CK!! this runtime lib use symbol lib breaking change . with babel runtime

DemonCloud avatar Oct 14 '19 01:10 DemonCloud