dounan

// OWNERS: dounan
// @flow

/**
 * Shallow equality comparison of the object values
 * @param  {Object} objA - Source object
 * @param  {Object} objB - Object to compare to
 * @param  {Function} customizer - Custom equality comparison. Return undefined
 *     to use the default comparator.
 * @return {Boolean} true iff objA and objB are shallowly equal

dounan

/**
 * Copyright 2013-2015, Facebook, Inc.
 * All rights reserved.
 *
 * This source code is licensed under the BSD-style license found in the
 * LICENSE file in the root directory of this source tree. An additional grant
 * of patent rights can be found in the PATENTS file in the same directory.
 *
 */

dounan

/**
 * jscodeshift -t ./transforms/puritan-pure-component.js --explicit-require=true --extensions=jsx ../flexport/webpack/assets/javascr
ipts
 */

'use strict';

const { basename, extname, dirname } = require('path');

module.exports = (file, api, options) => {

dounan

// Motivated by https://twitter.com/mjackson/status/885910553432018945

// There are two ways to apply higher-order logic to components.
// 1. Use a HOC
// 2. Use a generic component that takes a `render` callback.

// To illustrate how these work, we will use the the analogy that a
// component is just `view = fn(data)`. A HOC can then be simply seen as a
// HOF that returns another function (most likely with some partial
// application).

dounan

function wrap(obj) {
  return new Proxy(obj, {
    set: (target, property, value, receiver) => {
      if (target[property] !== value) {
        console.warn("MUTATION DETECTED!");
      }
      // Perform the normal set()
      target[property] = value;
      return true;
    },

dounan

const array = [];
const wrappedArray = wrap(array);
wrappedArray.push('oops'); // console should log "MUTATION DETECTED!"

dounan

function foo(obj) {
  bar(obj);
}

function bar(obj) {
  obj.value = "oops";
}

const obj = {};
const wrappedObj = wrap(obj);

dounan

import makeSentinel from 'mutation-sentinel';

const obj = {array: [{}]};
const wrappedObj = makeSentinel(obj);
wrappedObj.array[0].value = "oops"; // MUTATION DETECTED BY SENTINEL!

dounan

import {configureSentinel} from "mutation-sentinel";
...

// Called on initial app load, and when route changes.
function updateConfig(route) {
  if (/* mutation-sentinel enabled for route */) {
    configureSentinel({shouldIgnore, mutationHandler});
  } else {
    configureSentinel({shouldIgnore, mutationHandler: () => {}});
  }

dounan

const obj = {nested: {}};
const wrappedObj = makeSentinel(obj);

// copiedObj is not a sentinel
const copiedObj = {...wrappedObj};
copiedObj.value = "oops"; // mutation is NOT detected

// copiedObj.nested is a sentinel because it was copied from wrappedObj
copiedObj.nested.value = "oops"; // MUTATION DETECTED!