react-tracking

What's Changed

• Fix compatibility issue with React Native environment by @kimskovhusandersen in https://github.com/nytimes/react-tracking/pull/220

New Contributors

• @kimskovhusandersen made their first contribution in https://github.com/nytimes/react-tracking/pull/220

Full Changelog: https://github.com/nytimes/react-tracking/compare/v9.3.1...v9.3.2

What's Changed

• Re-enable support for Node 16.9+ by @nathanchapman in https://github.com/nytimes/react-tracking/pull/215

New Contributors

• @nathanchapman made their first contribution in https://github.com/nytimes/react-tracking/pull/215

Full Changelog: https://github.com/nytimes/react-tracking/compare/v9.3.0...v9.3.1

New Features

• feat: Add mergeOptions config option by @BenLorantfy in https://github.com/nytimes/react-tracking/pull/187

You can now pass in mergeOptions as part of your config option to control exactly how react-tracking merges your tracking objects.

Example using isMergeableObject:

const { Track } = useTracking({}, { mergeOptions: { isMergeableObject: obj => !(obj instanceof Error) } });

Thanks @BenLorantfy for the implementation in #187 and @tizmagik for the documentation in #212

What's Changed

• chore: create .nvmrc, add engines field by @glebpigulevsky in https://github.com/nytimes/react-tracking/pull/205
• chore: upgrade husky@8 and lint-staged@13 by @chimurai in https://github.com/nytimes/react-tracking/pull/206
• test: Enhance e2e test suite by @tizmagik in https://github.com/nytimes/react-tracking/pull/208
• chore: Drop node 12, add node 18 by @tizmagik in https://github.com/nytimes/react-tracking/pull/210
• chore: Update dependencies by @tizmagik in https://github.com/nytimes/react-tracking/pull/209
• docs: Document mergeOptions by @tizmagik in https://github.com/nytimes/react-tracking/pull/212

New Contributors

• @glebpigulevsky made their first contribution in https://github.com/nytimes/react-tracking/pull/205
• @chimurai made their first contribution in https://github.com/nytimes/react-tracking/pull/206
• @BenLorantfy made their first contribution in https://github.com/nytimes/react-tracking/pull/187

Full Changelog: https://github.com/nytimes/react-tracking/compare/v9.2.1...v9.3.0

Added React 18 as an acceptable peerDep, thanks @AnthonyCrowcroft in https://github.com/nytimes/react-tracking/pull/203

Thanks to @tizmagik in #196 we now re-export deepmerge for convenience. (This is especially useful when you want to lazily attach additional tracking data on the dispatch call, for example).

import { deepmerge } from 'react-tracking';

Notable: New Debug Feature

🎉 Thanks to @bgergen in #193 we now display a useful debug value when inspecting tracked components in the React Devtools

What's Changed

• Update drone yml to reference main by @bgergen in https://github.com/nytimes/react-tracking/pull/184
• Add options.process caveat to readme by @bgergen in https://github.com/nytimes/react-tracking/pull/192
• Take advantage of useDebugValue to display data in devtools by @bgergen in https://github.com/nytimes/react-tracking/pull/193

Full Changelog: https://github.com/nytimes/react-tracking/compare/v9.0.0...v9.1.0

No new features but this version drops core-js for a smaller build. Now polyfills are left up to userland which follows community best practices. See #167

Many thanks to @adi518 for kicking off this work 🎉 and the support from @antciccone @gedeagas and @bgergen 🙏

Thanks to @bgergen in #168 and #171 (testing support from @tizmagik in #165 and #170 ) react-tracking now fully supports React Hooks for all features (e.g. Hooks can be used completely instead of, or in addition to, the HoC/decorator API).

import { useTracking } from 'react-tracking';

const FooPage = () => {
  const { Track, trackEvent } = useTracking({ page: 'FooPage' });

  return (
    <Track>
      <div
        onClick={() => {
          trackEvent({ action: 'click' });
        }}
      />
    </Track>
  );
};

See the full docs in the main README starting here.

Added forwardRef support in #153 thanks to @ParadeTo 🎉 . If you'd like to access the internal ref of a tracked component, just add the forwardRef option as part of the second param options object:

@track({}, { forwardRef: true })

Technically the API surface has not changed, we just added a new forwardRef: bool option. But React docs recommend bumping semver major when introducing such a change.

Example:

    const focusFn = () => {};

    @track({}, { forwardRef: true })
    class Child extends React.Component {
      focus = focusFn;

      render() {
        return 'child';
      }
    }

    class Parent extends React.Component {
      componentDidMount() {
        this.child.focus();
      }

      render() {
        return (
          <Child
            ref={el => {
              this.child = el;
            }}
          />
        );
      }
    }

Fixed

2 closely related fixed having to do with decorating async methods:

Fixed by @rickh18 in #147 we now correctly return the underlying decorated method when decorating async functions (or functions that return promises).

Fixed by @tizmagik in #149 we now call trackEvent with an empty object {} instead of null so as not to throw TypeErrors in case userland is destructuring on the decorator, e.g. this method signature works fine now, even in the event of an error:

@track((props, state, methodArgs, [{ value }, err]) => {
  return {
    status: err || value,
  };
})
handleAsyncAction = async () => {
  return Math.random() > 0.5
    ? Promise.resolve({ value: 'some value' })
    : Promise.reject(new Error('some error'));
};

Minor changes

Fixed by @bgergen in #146 we now no longer export TrackingContextType since we switched to the new React Context API. This export was unlikely to be used in userland anyway so we kept this a semver minor instead of semver major.

Patch update in #143 by @tizmagik and #144 by @bgergen to follow React Hooks lint rules

Thanks to @bgergen in #142 react-tracking now uses React Hooks under the hood 🎉

This means better compatibility with libraries that use the Legacy Context API and helps pave the way for more advanced feature support in the useTracking() hook (E.g. allowing for adding to the tracking context via the hook without having to use the higher-order component/decorator, #138 ).

Performance upgrade

Thanks to @BRKalow and @jacekradko in #129 react-tracking now makes better use of the context API to avoid unnecessary re-renders. If you're on v6 or above, be sure to upgrade! 🔥

Other changes in this release:

In #130 by @tizmagik

• We no longer export ReactTrackingContext, user-land shouldn't need this export given the useTracking hook and track higher-order component (please open an issue if you have a use case!)
• In addition to the default export, you can now also import { track } from 'react-tracking';

Patch release, setting sideEffects: false in package.json

Move core-js@3 to a direct dependency. This means a +40KB reported in bundlephobia, although that's a bit misleading because we don't use all of core-js.

Better approach TK, follow along in: https://github.com/nytimes/react-tracking/issues/127

2 Breaking Changes, although the syntax/API has not changed:

New Feature: React Hooks

Thanks to @damassi in #124 we now support React Hooks 🎉

import { useTracking } from 'react-tracking';

const SomeChild = () => {
  const tracking = useTracking();

  return (
    <div
      onClick={() => {
        tracking.trackEvent({ action: 'click' });
      }}
    />
  );
};

useTracking returns the same { getTrackingData, trackEvent } methods that the @track() wrapper injects into props (as props.tracking). For now, you still need to use the wrapper in order to add contextual tracking data.

Technically the syntax is backwards compatible, but because of our use of React Hooks we now require React > v16.8, hence the breaking change.

peerDependencies Update: core-js@3

Thanks to @mckernanin in #125 we've upgraded our babel and core-js dependencies.

For more on this upgrade and how this might affect your app's build/configuration, please see: https://github.com/zloirock/core-js/blob/master/docs/2019-03-19-core-js-3-babel-and-a-look-into-the-future.md

Again, syntax is backwards compatible, but peerDeps now specified an update to core-js@3 if you didn't already have it.

There are no breaking API changes, but we now use the new React Context API under the hood so the minimum React version is now 16.3+

• #118 by @tizmagik

If you're on an old version of React (<16.3) you can still use react-tracking v5.7.x

Just a dependency update, #117

Thanks to @williardx in #105 we now avoid dispatching a tracking event when your decorated class member tracking call returns a falsy value:

@track({ module: 'button' })
class Thing extends Component {
  @track(() => {
    // some logic that eventually returns:
    return false; // won't dispatch
  })
  handleClick = () => { ... }

  render() {
    return <button onClick={this.handleClick}>Click me</button>
  }
}

In #103 fixes { dispatchOnMount: true } behavior when process() function returns a falsey value (it will now always dispatch when the component mounts, as expected).