Option to transform code before instrumentation

[webuniverseio]

Hi I run into a problem in Chrome due to 'use strict' statement at the top of function in my code. It seems to be a bug (or feature) in Chrome. My code sample is shown below:

function __H2(React) {
    'use strict';

    return React.createClass({
        displayName: 'H2',
        propTypes: {
            modifier: React.PropTypes.string,
            extraClasses: React.PropTypes.string,
            children: React.PropTypes.any
        },
        render: function render() {
            var modifier = this.props.modifier;
            var className = 'h2';
            if (modifier) {
                className += '--' + modifier;
            }
            var extraClasses = this.props.extraClasses;
            if (extraClasses) {
                className += ' ' + extraClasses;
            }
            return (
                <h2 className={className}>{this.props.children}</h2>
            );
        }
    });
}

if (typeof window === 'undefined' && typeof process === 'undefined') {
    /*eslint-disable*/
    var H2 = __H2(React);
    /*eslint-enable*/
} else if (typeof global !== 'undefined' && global.app) {
    module.exports = __H2;
} else {
    define(['react'], function initModule(React) {
        /*eslint strict:0*/
        return __H2(React);
    });
}

Instrumented code looks like:

var __cov_dG63v_OiDiC1PmGMQ7$7Rw = (Function('return this'))();
if (!__cov_dG63v_OiDiC1PmGMQ7$7Rw.__coverage__) { __cov_dG63v_OiDiC1PmGMQ7$7Rw.__coverage__ = {}; }
__cov_dG63v_OiDiC1PmGMQ7$7Rw = __cov_dG63v_OiDiC1PmGMQ7$7Rw.__coverage__;
if (!(__cov_dG63v_OiDiC1PmGMQ7$7Rw['./live-style-guide/specs/RewardsCentre/Shared/headline/jsx/H2.jsx'])) {
   __cov_dG63v_OiDiC1PmGMQ7$7Rw['./live-style-guide/specs/RewardsCentre/Shared/headline/jsx/H2.jsx'] = {"path":"./live-style-guide/specs/RewardsCentre/Shared/headline/jsx/H2.jsx","s":{"1":1,"2":0,"3":0,"4":0,"5":0,"6":0,"7":0,"8":0,"9":0,"10":0,"11":0,"12":0,"13":0,"14":0,"15":0,"16":0},"b":{"1":[0,0],"2":[0,0],"3":[0,0],"4":[0,0],"5":[0,0],"6":[0,0]},"f":{"1":0,"2":0,"3":0},"fnMap":{"1":{"name":"__H2","line":1,"loc":{"start":{"line":1,"column":-15},"end":{"line":1,"column":6}}},"2":{"name":"render","line":11,"loc":{"start":{"line":11,"column":16},"end":{"line":11,"column":34}}},"3":{"name":"initModule","line":35,"loc":{"start":{"line":35,"column":22},"end":{"line":35,"column":49}}}},"statementMap":{"1":{"start":{"line":1,"column":-15},"end":{"line":26,"column":1}},"2":{"start":{"line":4,"column":4},"end":{"line":25,"column":7}},"3":{"start":{"line":12,"column":12},"end":{"line":12,"column":47}},"4":{"start":{"line":13,"column":12},"end":{"line":13,"column":33}},"5":{"start":{"line":14,"column":12},"end":{"line":16,"column":13}},"6":{"start":{"line":15,"column":16},"end":{"line":15,"column":45}},"7":{"start":{"line":17,"column":12},"end":{"line":17,"column":55}},"8":{"start":{"line":18,"column":12},"end":{"line":20,"column":13}},"9":{"start":{"line":19,"column":16},"end":{"line":19,"column":48}},"10":{"start":{"line":21,"column":12},"end":{"line":23,"column":14}},"11":{"start":{"line":28,"column":0},"end":{"line":39,"column":1}},"12":{"start":{"line":30,"column":4},"end":{"line":30,"column":25}},"13":{"start":{"line":32,"column":7},"end":{"line":39,"column":1}},"14":{"start":{"line":33,"column":4},"end":{"line":33,"column":26}},"15":{"start":{"line":35,"column":4},"end":{"line":38,"column":7}},"16":{"start":{"line":37,"column":8},"end":{"line":37,"column":27}}},"branchMap":{"1":{"line":14,"type":"if","locations":[{"start":{"line":14,"column":12},"end":{"line":14,"column":12}},{"start":{"line":14,"column":12},"end":{"line":14,"column":12}}]},"2":{"line":18,"type":"if","locations":[{"start":{"line":18,"column":12},"end":{"line":18,"column":12}},{"start":{"line":18,"column":12},"end":{"line":18,"column":12}}]},"3":{"line":28,"type":"if","locations":[{"start":{"line":28,"column":0},"end":{"line":28,"column":0}},{"start":{"line":28,"column":0},"end":{"line":28,"column":0}}]},"4":{"line":28,"type":"binary-expr","locations":[{"start":{"line":28,"column":4},"end":{"line":28,"column":33}},{"start":{"line":28,"column":37},"end":{"line":28,"column":67}}]},"5":{"line":32,"type":"if","locations":[{"start":{"line":32,"column":7},"end":{"line":32,"column":7}},{"start":{"line":32,"column":7},"end":{"line":32,"column":7}}]},"6":{"line":32,"type":"binary-expr","locations":[{"start":{"line":32,"column":11},"end":{"line":32,"column":40}},{"start":{"line":32,"column":44},"end":{"line":32,"column":54}}]}}};
}
__cov_dG63v_OiDiC1PmGMQ7$7Rw = __cov_dG63v_OiDiC1PmGMQ7$7Rw['./live-style-guide/specs/RewardsCentre/Shared/headline/jsx/H2.jsx'];
function __H2(React){'use strict';__cov_dG63v_OiDiC1PmGMQ7$7Rw.f['1']++;__cov_dG63v_OiDiC1PmGMQ7$7Rw.s['2']++;return React.createClass({displayName:'H2',propTypes:{modifier:React.PropTypes.string,extraClasses:React.PropTypes.string,children:React.PropTypes.any},render:function render(){__cov_dG63v_OiDiC1PmGMQ7$7Rw.f['2']++;__cov_dG63v_OiDiC1PmGMQ7$7Rw.s['3']++;var modifier=this.props.modifier;__cov_dG63v_OiDiC1PmGMQ7$7Rw.s['4']++;var className='h2';__cov_dG63v_OiDiC1PmGMQ7$7Rw.s['5']++;if(modifier){__cov_dG63v_OiDiC1PmGMQ7$7Rw.b['1'][0]++;__cov_dG63v_OiDiC1PmGMQ7$7Rw.s['6']++;className+='--'+modifier;}else{__cov_dG63v_OiDiC1PmGMQ7$7Rw.b['1'][1]++;}__cov_dG63v_OiDiC1PmGMQ7$7Rw.s['7']++;var extraClasses=this.props.extraClasses;__cov_dG63v_OiDiC1PmGMQ7$7Rw.s['8']++;if(extraClasses){__cov_dG63v_OiDiC1PmGMQ7$7Rw.b['2'][0]++;__cov_dG63v_OiDiC1PmGMQ7$7Rw.s['9']++;className+=' '+extraClasses;}else{__cov_dG63v_OiDiC1PmGMQ7$7Rw.b['2'][1]++;}__cov_dG63v_OiDiC1PmGMQ7$7Rw.s['10']++;return React.createElement('h2',{className:className},this.props.children);}});}__cov_dG63v_OiDiC1PmGMQ7$7Rw.s['11']++;if((__cov_dG63v_OiDiC1PmGMQ7$7Rw.b['4'][0]++,typeof window==='undefined')&&(__cov_dG63v_OiDiC1PmGMQ7$7Rw.b['4'][1]++,typeof process==='undefined')){__cov_dG63v_OiDiC1PmGMQ7$7Rw.b['3'][0]++;__cov_dG63v_OiDiC1PmGMQ7$7Rw.s['12']++;var H2=__H2(React);}else{__cov_dG63v_OiDiC1PmGMQ7$7Rw.b['3'][1]++;__cov_dG63v_OiDiC1PmGMQ7$7Rw.s['13']++;if((__cov_dG63v_OiDiC1PmGMQ7$7Rw.b['6'][0]++,typeof global!=='undefined')&&(__cov_dG63v_OiDiC1PmGMQ7$7Rw.b['6'][1]++,global.app)){__cov_dG63v_OiDiC1PmGMQ7$7Rw.b['5'][0]++;__cov_dG63v_OiDiC1PmGMQ7$7Rw.s['14']++;module.exports=__H2;}else{__cov_dG63v_OiDiC1PmGMQ7$7Rw.b['5'][1]++;__cov_dG63v_OiDiC1PmGMQ7$7Rw.s['15']++;define(['react'],function initModule(React){__cov_dG63v_OiDiC1PmGMQ7$7Rw.f['3']++;__cov_dG63v_OiDiC1PmGMQ7$7Rw.s['16']++;return __H2(React);});}}

Funny enough issue is happening only when dev tools are closed. When you open them you can see something like:

If you'll refresh the page, it will work just fine and those errors will not show up anymore.

If I take 'use strict' away, coverage starts to work. Also my code works fine without coverage. So, I was experimenting with code and figured that it is enough to just add a semicolon (or anything valid) in front on 'use strict' statement to make code work - instrumented code now will look like:

var __cov_dG63v_OiDiC1PmGMQ7$7Rw = (Function('return this'))();
if (!__cov_dG63v_OiDiC1PmGMQ7$7Rw.__coverage__) { __cov_dG63v_OiDiC1PmGMQ7$7Rw.__coverage__ = {}; }
__cov_dG63v_OiDiC1PmGMQ7$7Rw = __cov_dG63v_OiDiC1PmGMQ7$7Rw.__coverage__;
if (!(__cov_dG63v_OiDiC1PmGMQ7$7Rw['./live-style-guide/specs/RewardsCentre/Shared/headline/jsx/H2.jsx'])) {
   __cov_dG63v_OiDiC1PmGMQ7$7Rw['./live-style-guide/specs/RewardsCentre/Shared/headline/jsx/H2.jsx'] = {"path":"./live-style-guide/specs/RewardsCentre/Shared/headline/jsx/H2.jsx","s":{"1":1,"2":0,"3":0,"4":0,"5":0,"6":0,"7":0,"8":0,"9":0,"10":0,"11":0,"12":0,"13":0,"14":0,"15":0,"16":0,"17":0},"b":{"1":[0,0],"2":[0,0],"3":[0,0],"4":[0,0],"5":[0,0],"6":[0,0]},"f":{"1":0,"2":0,"3":0},"fnMap":{"1":{"name":"__H2","line":1,"loc":{"start":{"line":1,"column":-15},"end":{"line":1,"column":6}}},"2":{"name":"render","line":11,"loc":{"start":{"line":11,"column":16},"end":{"line":11,"column":34}}},"3":{"name":"initModule","line":35,"loc":{"start":{"line":35,"column":22},"end":{"line":35,"column":49}}}},"statementMap":{"1":{"start":{"line":1,"column":-15},"end":{"line":26,"column":1}},"2":{"start":{"line":2,"column":5},"end":{"line":2,"column":18}},"3":{"start":{"line":4,"column":4},"end":{"line":25,"column":7}},"4":{"start":{"line":12,"column":12},"end":{"line":12,"column":47}},"5":{"start":{"line":13,"column":12},"end":{"line":13,"column":33}},"6":{"start":{"line":14,"column":12},"end":{"line":16,"column":13}},"7":{"start":{"line":15,"column":16},"end":{"line":15,"column":45}},"8":{"start":{"line":17,"column":12},"end":{"line":17,"column":55}},"9":{"start":{"line":18,"column":12},"end":{"line":20,"column":13}},"10":{"start":{"line":19,"column":16},"end":{"line":19,"column":48}},"11":{"start":{"line":21,"column":12},"end":{"line":23,"column":14}},"12":{"start":{"line":28,"column":0},"end":{"line":39,"column":1}},"13":{"start":{"line":30,"column":4},"end":{"line":30,"column":25}},"14":{"start":{"line":32,"column":7},"end":{"line":39,"column":1}},"15":{"start":{"line":33,"column":4},"end":{"line":33,"column":26}},"16":{"start":{"line":35,"column":4},"end":{"line":38,"column":7}},"17":{"start":{"line":37,"column":8},"end":{"line":37,"column":27}}},"branchMap":{"1":{"line":14,"type":"if","locations":[{"start":{"line":14,"column":12},"end":{"line":14,"column":12}},{"start":{"line":14,"column":12},"end":{"line":14,"column":12}}]},"2":{"line":18,"type":"if","locations":[{"start":{"line":18,"column":12},"end":{"line":18,"column":12}},{"start":{"line":18,"column":12},"end":{"line":18,"column":12}}]},"3":{"line":28,"type":"if","locations":[{"start":{"line":28,"column":0},"end":{"line":28,"column":0}},{"start":{"line":28,"column":0},"end":{"line":28,"column":0}}]},"4":{"line":28,"type":"binary-expr","locations":[{"start":{"line":28,"column":4},"end":{"line":28,"column":33}},{"start":{"line":28,"column":37},"end":{"line":28,"column":67}}]},"5":{"line":32,"type":"if","locations":[{"start":{"line":32,"column":7},"end":{"line":32,"column":7}},{"start":{"line":32,"column":7},"end":{"line":32,"column":7}}]},"6":{"line":32,"type":"binary-expr","locations":[{"start":{"line":32,"column":11},"end":{"line":32,"column":40}},{"start":{"line":32,"column":44},"end":{"line":32,"column":54}}]}}};
}
__cov_dG63v_OiDiC1PmGMQ7$7Rw = __cov_dG63v_OiDiC1PmGMQ7$7Rw['./live-style-guide/specs/RewardsCentre/Shared/headline/jsx/H2.jsx'];
function __H2(React){__cov_dG63v_OiDiC1PmGMQ7$7Rw.f['1']++;;__cov_dG63v_OiDiC1PmGMQ7$7Rw.s['2']++;'use strict';__cov_dG63v_OiDiC1PmGMQ7$7Rw.s['3']++;return React.createClass({displayName:'H2',propTypes:{modifier:React.PropTypes.string,extraClasses:React.PropTypes.string,children:React.PropTypes.any},render:function render(){__cov_dG63v_OiDiC1PmGMQ7$7Rw.f['2']++;__cov_dG63v_OiDiC1PmGMQ7$7Rw.s['4']++;var modifier=this.props.modifier;__cov_dG63v_OiDiC1PmGMQ7$7Rw.s['5']++;var className='h2';__cov_dG63v_OiDiC1PmGMQ7$7Rw.s['6']++;if(modifier){__cov_dG63v_OiDiC1PmGMQ7$7Rw.b['1'][0]++;__cov_dG63v_OiDiC1PmGMQ7$7Rw.s['7']++;className+='--'+modifier;}else{__cov_dG63v_OiDiC1PmGMQ7$7Rw.b['1'][1]++;}__cov_dG63v_OiDiC1PmGMQ7$7Rw.s['8']++;var extraClasses=this.props.extraClasses;__cov_dG63v_OiDiC1PmGMQ7$7Rw.s['9']++;if(extraClasses){__cov_dG63v_OiDiC1PmGMQ7$7Rw.b['2'][0]++;__cov_dG63v_OiDiC1PmGMQ7$7Rw.s['10']++;className+=' '+extraClasses;}else{__cov_dG63v_OiDiC1PmGMQ7$7Rw.b['2'][1]++;}__cov_dG63v_OiDiC1PmGMQ7$7Rw.s['11']++;return React.createElement('h2',{className:className},this.props.children);}});}__cov_dG63v_OiDiC1PmGMQ7$7Rw.s['12']++;if((__cov_dG63v_OiDiC1PmGMQ7$7Rw.b['4'][0]++,typeof window==='undefined')&&(__cov_dG63v_OiDiC1PmGMQ7$7Rw.b['4'][1]++,typeof process==='undefined')){__cov_dG63v_OiDiC1PmGMQ7$7Rw.b['3'][0]++;__cov_dG63v_OiDiC1PmGMQ7$7Rw.s['13']++;var H2=__H2(React);}else{__cov_dG63v_OiDiC1PmGMQ7$7Rw.b['3'][1]++;__cov_dG63v_OiDiC1PmGMQ7$7Rw.s['14']++;if((__cov_dG63v_OiDiC1PmGMQ7$7Rw.b['6'][0]++,typeof global!=='undefined')&&(__cov_dG63v_OiDiC1PmGMQ7$7Rw.b['6'][1]++,global.app)){__cov_dG63v_OiDiC1PmGMQ7$7Rw.b['5'][0]++;__cov_dG63v_OiDiC1PmGMQ7$7Rw.s['15']++;module.exports=__H2;}else{__cov_dG63v_OiDiC1PmGMQ7$7Rw.b['5'][1]++;__cov_dG63v_OiDiC1PmGMQ7$7Rw.s['16']++;define(['react'],function initModule(React){__cov_dG63v_OiDiC1PmGMQ7$7Rw.f['3']++;__cov_dG63v_OiDiC1PmGMQ7$7Rw.s['17']++;return __H2(React);});}}

So my suggestion is to add an option to transform code before instrumentation via instrumenterOptions. Something like a callback function would be perfect. What do you think? If you like idea I can create a PR.

[srn]

It seems like it's a problem with scopes while running eval. Is it working if you move 'use strict'; from the __H2 method to the very top of the file?

[webuniverseio]

Hey @srn, it works. I'm not sure if I can do that to my code though. Once jsx code will be transformed to js, I'll end with global 'use strict', which could break some legacy code if I understand things correctly.

[srn]

Alright, would be great if you could come up with a PR then 👍