The devDependency eslint-config-airbnb was updated from 17.1.0 to 17.1.1.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

eslint-config-airbnb is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

https://github.com/yahoo/react-i13n/blob/master/src/utils/clickHandler.js#L15-L17 we use props to check new window, actually we should use a common way like currentTarget to do that

provide clearer debug message tool, to show where the i13n data comes from, itself or from parent

The devDependency grunt-contrib-connect was updated from 2.0.0 to 2.1.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

grunt-contrib-connect is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

Version 10 of Node.js (code name Dubnium) has been released! 🎊

To see what happens to your code in Node.js 10, Greenkeeper has created a branch with the following changes:

• Added the new Node.js version to your .travis.yml

If you’re interested in upgrading this repo to Node.js 10, you can open a PR with these changes. Please note that this issue is just intended as a friendly reminder and the PR as a possible starting point for getting your code running on Node.js 10.

Your Greenkeeper Bot 🌴

@kaesonho

It is 5mb in size and only used for event listening. Can you port to use subscribe-ui-event instead?

The devDependency eslint-plugin-jsx-a11y was updated from 6.2.1 to 6.2.2.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

eslint-plugin-jsx-a11y is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

Version 2.6.0 of webpack-dev-server just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As webpack-dev-server is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

The devDependency babel-loader was updated from 8.0.2 to 8.0.3.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

babel-loader is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

The latest build breaks our testing pipeline by throwing addComponentAsRefTo(...): Only a ReactOwner can have refs. (https://gist.github.com/jimfb/4faa6cbfb1ef476bd105)

Downgrading to v2.0.4 meanwhile.

I have a use case where the react components are within a scrollable div, and using window as the target won't work.

It looks like the capability to set different targets was recently added to the "subscribe-ui-event" module (13 days ago). So I tried changing subscribeViewportEvents to supply an options object just to see if it would work:

    subscribeViewportEvents: function () {
      this.subscription =
        subscribe('scrollEnd', this._detectViewport,
                  {target: document.getElementById('scrollable-div')});
    },

At the moment it actually won't work because there seems to be an issue with "scrollEnd" -- but I guess once that's resolved, would it be possible to have a way to specify a different target?

For my use case, I was able to get it working by modifying "subscribe-ui-events" (as mentioned in the link).

Hi! If I wrap a component for which I have set a ref, how can I reference the 'original' component?

e.g., with...

const I13nInput = createI13nNode(MyCustomInput);
<I13nInput ref="someRef" />

...refs.someRef now points to the I13nInput component and not to the 'underlying' MyCustomInput component. It seems to me the only way around this is if this was possible:

<I13nComponent>
  <MyCustomInput ref="someRef" />
</I13nComponent>

Or am I missing something?

Thanks for your help!

Is there any way to subscribe to the onExitViewport event? I'd like to track the "view" of a component, but only if it's stayed on-screen for more than X seconds.

Would it be possible to make it so the createI13nNode function has an option for a displayName prefix? So instead of forcing the displayName to be 'I13n' + componentName, the user could specify whatever they want -- including a blank string.

The reason I'm asking is because I ran into some 3rd party code that uses the displayName to determine certain behaviors (which seems like bad practice, but the easiest fix to this seems to be not changing the displayName).

I might be approaching this all wrong but if I try something like this:

import { createI13nNode } from 'react-i13n';
import { NavLink } from 'fluxible-router';

var I13nNavLink = createI13nNode(NavLink, {
    isLeafNode: true,
    bindClickEvent: true,
    follow: false
});

export default I13nNavLink;

And use it like this:

<I13nNavLink i13nModel={{category: 'Homepage', action: 'click', label: 'Skip Tool'}} href="/products" preserveScrollPosition={false} className="link link--inline">Link</I13nNavLink>

The i13n props are passed down to NavLink which results in the error: Unknown props i13n, i13nModel, isLeafNode, bindClickEvent, follow, scanLinks on <a> tag. Remove these props from the element.

I'm I doing something I'm not supposed to do?

Relevant package versions:

    "fluxible": "1.2.0",
    "fluxible-addons-react": "0.2.8",
    "fluxible-router": "^1.0.0-alpha.7",
    "react": "^15.0.0",
    "react-addons-create-fragment": "^15.0.0",
    "react-dom": "^15.0.0",
    "react-i13n": "2.1.2",
    "react-i13n-ga": "0.2.5",

The devDependency eslint-plugin-import was updated from 2.18.0 to 2.18.1.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

eslint-plugin-import is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

we use pure js to render debug message tool because we are allow users to use mixin, and we cannot control render function,
if we don't expose it and users always have to do it with createI13nNode, we should be able to use pure react component to render it.

currently we only hook click event, support touch events like tap

I am tracing a checksum mismatch warning and noticed the props' key ordering is changed here:

I only see the issue happening in chrome and on certain executions of that object assign code. Technically the key ordering is not something we should rely on because it's unspecified according to the spec, but it seems that's what react is using to render the attribute when using the spread operator. Should we play it safe here to not use object.assign but a for in loop to preserve the original ordering?

The dependency subscribe-ui-event was updated from 2.0.5 to 2.0.6.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

subscribe-ui-event is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Your Greenkeeper Bot 🌴

https://github.com/yahoo/subscribe-ui-event

Version 3.2.0 of debug was just published.

This version is covered by your current version range and after updating it in your project the build failed.

debug is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Your Greenkeeper Bot 🌴

There have been updates to the react monorepo:

• • The devDependency react was updated from 16.6.1 to 16.6.2.

• The devDependency react-dom was updated from 16.6.1 to 16.6.2.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

This monorepo update includes releases of one or more dependencies which all belong to the react group definition.

react is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

☝️ Important announcement: Greenkeeper will be saying goodbye 👋 and passing the torch to Snyk on June 3rd, 2020! Find out how to migrate to Snyk and more at greenkeeper.io

The devDependency minimist was updated from 1.2.0 to 1.2.1.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

minimist is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

The devDependency coveralls was updated from 3.0.4 to 3.0.5.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

coveralls is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

The devDependency promise was updated from 8.0.3 to 8.1.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

promise is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

The devDependency eslint-plugin-react was updated from 7.14.0 to 7.14.1.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

eslint-plugin-react is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

The devDependency babel-plugin-add-module-exports was updated from 1.0.0 to 1.0.1.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

babel-plugin-add-module-exports is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

we will need to replace links/button with I13nAnchor/I13nButton or other customized components, which is the better way for link tracking,

while we still have some cases like if we use dangerouslySetInnerHTML, we cannot do the above things, so will need to provide a options to scan all the links inside the i13nNode, and build them in the tree in client.

remove async apply promise and provide a global option to set the global event handling timeout, e.g., if beacons didn't finish in 500ms, still redirect users to the destination pages.

We will need to

1. use new Context API
2. remove the deprecated lifecycle, e.g., componentWillMount, the reason we use componentWillMount is we want to make sure it happens in sequence and align with the react tree order, so probably move it to render function ? or move to componentDidMount but we will implement some stack to get the order we want.

Does this support redux? I don't see any reason not to, but how can I use it with combination of react-redux.Provider and react-router.
Simple Example would be

ReactDOM.render(
  <Provider store={store}>
    <div>
      <Router history={browserHistory} routes={routes} />
      {showDevTools}
    </div>
  </Provider>,
  document.getElementById('app')
);

The devDependency babel-eslint was updated from 10.0.2 to 10.0.3.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

babel-eslint is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

The dependency hoist-non-react-statics was updated from 3.2.0 to 3.2.1.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

hoist-non-react-statics is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Your Greenkeeper Bot 🌴

We could probably try to integrate intersection observer and fallback to the original logic if the browser doesnt support it.

https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

Also there is issue that currently the scroll event is attached on window, so it might cause issue if the we are using overflow scroll

Support
https://caniuse.com/#feat=intersectionobserver

How do you think?

Would be easier for people to understand how to use, if there was an example React application that integrated the various components, mixins and libraries.

The devDependency mocha was updated from 6.1.4 to 6.2.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

mocha is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

Certainly possible I'm misinterpreting the code, but it appears as if _onEnterViewport is purposefully triggered if/when the tracked element does not exist. See https://github.com/yahoo/react-i13n/blob/master/src/libs/ViewportDetector.js#L56

In practice, I'm also noticing that components who's render return value ends up as null are being tracked as entering the viewport, but this seems counterintuitive.

contrived example:

const ConditionalComponent = (props) => {
    return props.shouldRender ? <div>Yay!</div> : null;
};

const i13nConditionalComponent = createI13nNode(ConditionalComponent);

// triggers viewport as intended when in view
<ConditionalComponent shouldRender />

// still triggers viewport as maybe(?) unintended on init
<ConditionalComponent shouldRender={false} />

create a plugin for providing better interface for action

Since version 2.4.x, instrumented clicks (bindClickEvent is set to true using createI13nNode) are causing the page to reload -- i.e. the app no longer behaves as a single page app (this can be confirmed by looking at the downloads in Chrome's network tab and also by noticing that the browser window refreshes). This is happening when using redux and react-router, but I'm not sure what the root cause is.

I was able to reproduce the issue using the React Redux Starter Kit and adding click instrumentation to the existing links. I made a fork of the project with a single additional commit here that reproduces the issue. Also, if you downgrade the react-i13n version to 2.3.2, you'll see that the issue no longer occurs.

Hi, since React v15.2.0 warnings are logged in the console about unknown props: react#unknown-prop.

To reproduce:

import { render } from 'react-dom';
import { createI13nNode } from 'react-i13n';
import React from 'react';

const I13nButton = createI13nNode('button', {
  isLeafNode: true,
  bindClickEvent: true,
  follow: true
});
const i13nModel = {
  // some i13n model
};

render(<I13nButton i13nModel={i13nModel} />, document.getElementById('content'));

Use as a master tracker for 3.0.0 release.

Enhancement:

• [3.0.0-alpha.0] Modernize package, publishing ES module and CJS
• Move to new React context API #190
• Use new React forward ref API
• Modernize build, and make sure test run reliably
• Replace deprecated React lifecycle
• Update documentation and tests

Good to have enhancement

• [3.0.0-alpha.1] React.lazy Dashboard so better code spilt if the feature is not enabled.
• [3.0.0-alpha.1] Use component to write DebugMessage #23
• Remove proptypes for production build
• Rewrite viewport detect logic using intersection observer #182 #103
• Use React to render DebugDashboard root component

Breaking Changes

• [3.0.0-alpha.0] Drop mixin usage
• [3.0.0-alpha.0] Drop deprecated props followLink
• [3.0.0-alpha.0] Remove Node 6 supports (EOL 2019-04-30)
• [3.0.0-alpha.1] Require React 16.6
• [3.0.0-alpha.5] require intersection-observer polyfill if you are need to support browsers doesnt have the function
• [3.0.0-alpha.5] Switch to hook so server side won't behave the same as before

[3.0.0-alpha.0] #218
[3.0.0-alpha.1] #226
[3.0.0-alpha.2] #228
[3.0.0-alpha.3] #229
[3.0.0-alpha.5] #259

The devDependency es5-shim was updated from 4.5.11 to 4.5.12.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

es5-shim is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

I'm curious if we could require that Promise be available in the runtime like we do for Fluxible so that way this package doesn't have to have an npm dependency on the promise package.

Promise is in all evergreen browsers and Safari now: http://caniuse.com/#search=promise so it would just be needed for older browsers and older versions of Node.js.

@kaesonho I haven't been able to find out exact steps to reproduce this one yet but I've seen it happen a few times from here:

Currently, there are 3 separate version trees:
0.xx
1.xx
2.xx

What's the difference between them? Which one is recommended? I could only find info that 2.xx removed Object.assign polyfills, etc. But anything else which is different?

Also, by default, running npm install --save react-i13n gets the 0.xx branch, and that just doesn't work with react-0.14. Can you update the readme (atleast in the v2.xx/v1.xx branches) to reflect this?

The devDependency webpack was updated from 4.35.0 to 4.35.1.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

webpack is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

We'd like to share an instrumented button class across our application, but there are many instance when we don't want the button to send a beacon, yet still share the same class. We can either

1. create two classes and choose in the application code, or
2. have the wrapper component inside createI13nNode check whether i13nModel is undefined and fire a beacon only if it isn't

If firing a beacon with an empty leaf payload is an actual valid use-case (??), then maybe an optional parameter in createI13nNode could preserver the backward-compatibility.

for example context.i13n.parentNode, shouldn't be accessed directly, add _ to this.

The dependency eslint was updated from 5.15.3 to 5.16.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

eslint is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Your Greenkeeper Bot 🌴