Externalize babel helpers using @babel/runtime

[petermikitsh]

tl,dr:

This reduces the ES module size from 10664 to 9274 bytes (~13%) by externalizing babel runtime helper functions.

Many people are using these helper functions elsewhere. By externalizing them, folks can take advantage of only including a single copy (as opposed to the additional copy that was inlined by react-final-form-arrays).

Details

react-final-form-arrays.es.js goes from something like this:

import { Component, createElement } from 'react';
import { polyfill } from 'react-lifecycles-compat';
import { fieldSubscriptionItems, version, ARRAY_ERROR } from 'final-form';
import { version as version$1, withReactFinalForm } from 'react-final-form';

function _objectWithoutPropertiesLoose(source, excluded) {
  if (source == null) return {};
  var target = {};
  var sourceKeys = Object.keys(source);
  var key, i;

  for (i = 0; i < sourceKeys.length; i++) {
    key = sourceKeys[i];
    if (excluded.indexOf(key) >= 0) continue;
    target[key] = source[key];
  }

  return target;
}

// Lots of other babel helpers (not shown).

to this:

import _extends from '@babel/runtime/helpers/extends';
import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
import { Component, createElement } from 'react';
import _inheritsLoose from '@babel/runtime/helpers/inheritsLoose';
import _assertThisInitialized from '@babel/runtime/helpers/assertThisInitialized';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import { polyfill } from 'react-lifecycles-compat';
import { fieldSubscriptionItems, version, ARRAY_ERROR } from 'final-form';
import { version as version$1, withReactFinalForm } from 'react-final-form';

//      
function diffSubscription (a, b, keys) {
  if (a) {
    if (b) {
      // $FlowFixMe
      return keys.some(function (key) {
        return a[key] !== b[key];
      });
    } else {
      return true;
    }
  } else {
    return !!b;
  }
}

Question for maintainers:

When I ran nps build, I noticed this console output:

[build.umd.main] (!) Missing global variable names
[build.umd.main] Use output.globals to specify browser global variable names corresponding to external modules
[build.umd.main] @babel/runtime/helpers/extends (guessing '_extends')
[build.umd.main] @babel/runtime/helpers/objectWithoutPropertiesLoose (guessing '_objectWithoutPropertiesLoose')
[build.umd.main] @babel/runtime/helpers/inheritsLoose (guessing '_inheritsLoose')
[build.umd.main] @babel/runtime/helpers/assertThisInitialized (guessing '_assertThisInitialized')
[build.umd.main] @babel/runtime/helpers/defineProperty (guessing '_defineProperty')
[build.umd.main] created dist/react-final-form-arrays.umd.js in 855ms
[build.umd.main] nps build.umd.main exited with code 0

It appears that output.globals in the rollup config maybe should be updated, but I'm not sure so I've left it unchanged.

[codecov]

Codecov Report

Merging #60 into master will not change coverage.
The diff coverage is n/a.

@@          Coverage Diff          @@
##           master    #60   +/-   ##
=====================================
  Coverage     100%   100%           
=====================================
  Files           3      3           
  Lines          74     74           
  Branches       17     17           
=====================================
  Hits           74     74

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 1754789...be06679. Read the comment docs.

[erikras]

Awesome!

[erikras]

Published in v2.0.2.