npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-i13n

v3.2.0

Published

React I13n provides a performant and scalable solution to application instrumentation.

Downloads

4,509

Readme

react-i13n

npm version Build Status Coverage Status

react-i13n provides a performant, scalable and pluggable approach to instrumenting your React application.

Typically, you have to manually add instrumentation code throughout your application, e.g., hooking up onClick handlers to the links you want to track. react-i13n provides a simplified approach by letting you define the data model you want to track and handling the beaconing for you.

react-i13n does this by building an instrumentation tree that mirrors your applications React component hierarchy. All you have to do is leverage our React component to denote which components should fire the tracking events.

Features

  • i13n tree - Automated instrumentation tree creation that mirrors your applications React component hierarchy.
  • React integration - Provides a createI13nNode component that easily integrate with your application.
  • Pluggable - A pluggable interface lets you integrate any data analytics library (i.e. Google Analytics, Segment, etc). Take a look at the available plugins.
  • Performant - Tracking data (i13nModel) can be a plain JS object or custom function. This means you can dynamically change tracking data without causing unnecessary re-renders.
  • Adaptable - If you are using an isomorphic framework (e.g. Fluxible) to build your app, you can easily change the tracking implementation on the server and client side. For example, to track page views, you can fire an http request on server and xhr request on the client.
  • Optimizable - We provide an option to enable viewport (integrating subscribe-ui-event) checking for each I13nNode. Which means that data will only be beaconed when the node is in the viewport. This reduces the network usage for the user and provides better tracking details.
  • Auto Scan Links - Support auto scan links for the cases you are not able to replace the component you are using to get it tracked, e.g., if you have dependencies or you are using dangerouslySetInnerHTML. We scan the tags you define on client side, track them and build nodes for them in i13n tree.

Install

npm install react-i13n --save

Runtime Compatibility

react-i13n is written with ES2015 in mind and should be used along with polyfills for features like Promise and Object.assign in order to support all browsers and older versions of Node.js. We recommend using Babel.

Usage

import React, { Component } from 'react';
import {
  ReactI13n,
  createI13nNode,
  setupI13n
} from 'react-i13n';
import somePlugin from 'some-i13n-plugin'; // a plugin for a certain instrumentation mechanism

// create a i13n anchor for link tracking
const I13nAnchor = createI13nNode('a', {
  isLeafNode: true,
  bindClickEvent: true,
  follow: true
});

class DemoApp extends Component {
  componentDidMount () {
    // fire a custom event
    this.props.i13n.executeEvent('pageview', {});
  }

  render() {
    <span>
      <I13nAnchor
        href="http://foo.bar"
        i13nModel={{
          action: 'click',
          label: 'foo'
        }}
      >
        ...
      </I13nAnchor>
      // this link will be tracked, and the click event handlers provided by the plugin will get the model data as
      // {site: 'foo', action: 'click', label: 'foo'}
    </span>
  }
};


const I13nDempApp = setupI13n(DemoApp, {
  rootModelData: { site: 'foo' },
  isViewportEnabled: true
}, [somePlugin]);

// then you could use I13nDemoApp to render you app

Available Plugins

Or follow our guide and create your own.

I13n Tree

I13n Tree

react-i13n builds the instrumentation tree by leveraging the React context feature. Each component can define a i13nModel prop that defines the data it needs to track. This approach is more performant, as it means you do not need additional DOM manipulation when you want to collect the tracking data values for sending out beacons.

Since the i13n data is defined at each level. Whenever you want to get the i13nModel for a certain node, react-i13n will traverse back up the tree to merge all the i13nModel information in the hierarchy. Since the tree is already built, you do not need extra DOM access, which is cheap and efficient.

Performance

The performance has always been a topic we are working on, and yes it's an overhead to create an additional react component wrapping the link, the performance benchmark as below:

link-without-react-component x 131,232 ops/sec ±1.08% (82 runs sampled)
link-wrapped-with-react-component x 111,056 ops/sec ±1.55% (88 runs sampled)
link-wrapped-with-react-component-with-i13n-high-order-component x 64,422 ops/sec ±1.95% (84 runs sampled)

Presentation

Take a look at Rafael Martins' slides from a recent React meetup to understand more.

Debugging

Add i13n_debug=1 to the request url, you will get the i13n model for each i13n node directly shown on the page. It shows the information for each model data and where the data inherits from.

Examples

Set ENV during CI process

We check process.env.NODE_ENV !== 'production' to determine if we should do some action like print out warning message, that means it's recommended to use tools like envify as part of your build process to strip out non-production code for production build.

With Webpack

Use DefinePlugin to define the value for process.env.

// Example of the webpack configuration:

plugins: [
  new webpack.DefinePlugin({
    'process.env': {
        NODE_ENV: JSON.stringify('production')
    }
  }),
  ...
]

With Browserify

Similar to webpack, you can also use envify to set process.env.NODE_ENV to the desired environment

$ browserify index.js -t [ envify --NODE_ENV production  ] | uglifyjs -c > bundle.js

Testing

Unit

  • grunt unit to run unit tests
  • grunt cover to generate the istanbul coverage report

Functional

  • debug locally:
    • grunt functional-debug
    • check functional testing result on http://127.0.0.1:9999/tests/functional/page.html
  • run functional test on saucelabs:
    • make sure you have a saucelab account setup, get the user id ane the access key
    • setup sauce-connect
    • SAUCE_USERNAME={id} SAUCE_ACCESS_KEY={accessKey} grunt functional

License

This software is free to use under the Yahoo Inc. BSD license. See the LICENSE file for license text and copyright information.