Bug/Feature: Support ES6 constructs about react-fast-compare HOT 10 CLOSED

@chrisbolin -- I've got the start of a branch with initial failing regression tests at https://github.com/FormidableLabs/react-fast-compare/compare/feature/es6-datatypes

I'll be back from parental leave in a week and may be able to div in. I think our work is something like:

• Set support
• Map support
• Typed arrays support
• Regression tests for all
• Make sure the library correctly detects / permissively handles browsers / environments without those constructs.
• WeakMap support
• WeakSet support

from react-fast-compare.

Yeah, i'd like to also put a PR into fast-deep-equal for the added support - they currently don't have it: https://github.com/epoberezkin/fast-deep-equal/blob/master/index.js. then if/when they merge we can pull in their code so we haven't strayed too far

from react-fast-compare.

As an update for this, there is now es6 supported upstream (see https://github.com/epoberezkin/fast-deep-equal/blob/master/src/index.jst#L20-L65), but they went a weird route and implemented it by templating the ultimate source file and macro-ing/building out es5 and es6 versions. I think we might be able to just feature detect Map, Set, etc. and keep everything within just one file without too much bloat using upstream as the implementation guide...

from react-fast-compare.

thanks for the heads up, @ryan-roemer! I'll check that out

from react-fast-compare.

@ryan-roemer what do you think of this plan

• make a v3 beta for react-fast-compare
• make our fork from the built es6 file: https://runpkg.com/[email protected]/es6/index.js
• if our users like v3beta and fast-deep-equal releases their v3beta, we release a version 3 that only supports es6. if users cannot use es6 or polyfill, they have react-fast-compare v2 to use

This plan has a few benefits...

• no complex JS templating or build process
• direct fork of fast-deep-equal, so we aren't adding and maintaining too much
• support for modern systems only. WeakMap, etc is part of ES6 and has support in 95% of global browsers and in node all the way back to 6.5.0 (August 2016)

from react-fast-compare.

I think that generally all sounds good, except I was thinking of making failures more permissive for these constructs... Not sure what React or Victory or Formik (out biggest users) support, but we might want to track them.

And all I'm thinking of for permissive is taking something like:

    if (a instanceof Map) {
      // STUFF
    }

and making it:

    if (typeof Map === "function" && a instanceof Map) {
      // STUFF
    }

for all of Map, WeakMap, Set, WeakSet as applicable (forget what they support upstream).

For:

    if (a.constructor.BYTES_PER_ELEMENT && (
      a instanceof Int8Array ||
      a instanceof Uint8Array ||
      a instanceof Uint8ClampedArray ||
      a instanceof Int16Array ||
      a instanceof Uint16Array ||
      a instanceof Int32Array ||
      a instanceof Uint32Array ||
      a instanceof Float32Array ||
      a instanceof Float64Array ||
      a instanceof BigInt64Array ||
      a instanceof BigUint64Array
    )) {
      // STUFF
    }

I think we can just leave that as-is as the check for BYTES_PER_ELEMENT will avoid parse errors for old browsers...

from react-fast-compare.

Oh, haha, WeakSet and WeakMap are not iterable, which I think means we're out of luck.

Should we now close this one as complete @chrisbolin ?

from react-fast-compare.

good call. Weak* support would be (1) very hard and (2) probably pointless. I haven't see Weak* being passed as props, or really used at all.

from react-fast-compare.

I stand corrected 😂

https://github.com/jaredpalmer/formik/blob/ae06d2b384d7395bf756d631327d2dfdb0dbd3dc/packages/formik/src/utils.ts#L155

from react-fast-compare.

But the fact still stands that it would be very hard (or impossible) to implement, based on the very design of the Weak objects:

there is no list of current objects stored in the collection. WeakSets are not enumerable.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakSet

from react-fast-compare.