add detection of popular frameworks, with tests to validate (#171)

* add detection of popular frameworks, with tests to validate

* fixed problem with url subpath that broke tests in old safari versions, and moved framework-detection lib to aggregator to ensure that the dom had been populated before execution

* change architecture to fix broken tests

* update test to run on more platforms, and remove code that may not be universally supported

.eslintignore

@@ -3,4 +3,5 @@ tools/scripts/*.js
 **/node_modules/*
 **/vendor/*
 sandbox
-post-installer.js
+post-installer.js
+tests/assets/frameworks/*

agent/index.js

@@ -12,6 +12,8 @@ var loader = require('loader')
 var drain = require('./drain')
 var navCookie = require('./nav-cookie')
 var config = require('config')
+var frameworks = require('framework-detection')
+var metrics = require('metrics')
 
 // api loads registers several event listeners, but does not have any exports
 require('./api')
@@ -39,6 +41,11 @@ drain('api')
 
 if (autorun) harvest.sendRUM(loader)
 
+setTimeout(function() {
+  for (var i = 0; i < frameworks.length; i++) {
+    metrics.recordSupportability('Framework/' + frameworks[i] + '/Detected')
+  } }, 0)
+
 // Set a cookie when the page unloads. Consume this cookie on the next page to get a 'start time'.
 // The navigation start time cookie is removed when the browser supports the web timing API.
 function finalHarvest (e) {

lib/versionify.js

@@ -8,7 +8,7 @@ var fs = require('fs')
 var path = require('path')
 
 var version = 'DEVELOPMENT'
-var subPath = '/'
+var subPath = ''
 var buildNumberFile = path.resolve(__dirname, '../build/build_number')
 var gitCommitFile = path.resolve(__dirname, '../build/git_commit')
 

loader/framework-detection.js

@@ -0,0 +1,53 @@
+var FRAMEWORKS = {
+  REACT: 'React',
+  ANGULAR: 'Angular',
+  ANGULARJS: 'AngularJS',
+  BACKBONE: 'Backbone',
+  EMBER: 'Ember',
+  VUE: 'Vue',
+  METEOR: 'Meteor',
+  ZEPTO: 'Zepto',
+  JQUERY: 'Jquery'
+}
+
+function getFrameworks() {
+  var frameworks = []
+  try {
+    if (detectReact()) frameworks.push(FRAMEWORKS.REACT)
+    if (detectAngularJs()) frameworks.push(FRAMEWORKS.ANGULARJS)
+    if (detectAngular()) frameworks.push(FRAMEWORKS.ANGULAR)
+    if (window.Backbone) frameworks.push(FRAMEWORKS.BACKBONE)
+    if (window.Ember) frameworks.push(FRAMEWORKS.EMBER)
+    if (window.Vue) frameworks.push(FRAMEWORKS.VUE)
+    if (window.Meteor) frameworks.push(FRAMEWORKS.METEOR)
+    if (window.Zepto) frameworks.push(FRAMEWORKS.ZEPTO)
+    if (window.jQuery) frameworks.push(FRAMEWORKS.JQUERY)
+    return frameworks
+  } catch (err) {
+    // not supported?
+  }
+}
+
+function detectReact() {
+  if (!!window.React || !!window.ReactDOM || !!window.ReactRedux) return true
+  if (document.querySelector('[data-reactroot], [data-reactid]')) return true
+  var divs = document.querySelectorAll('body > div')
+  for (var i = 0; i < divs.length; i++) {
+    if (Object.keys(divs[i]).indexOf('_reactRootContainer') >= 0) return true
+  }
+  return false
+}
+
+function detectAngularJs() {
+  if (window.angular) return true
+  if (document.querySelector('.ng-binding, [ng-app], [data-ng-app], [ng-controller], [data-ng-controller], [ng-repeat], [data-ng-repeat]')) return true
+  if (document.querySelector('script[src*="angular.js"], script[src*="angular.min.js"]')) return true
+  return false
+}
+
+function detectAngular() {
+  if (window.hasOwnProperty('ng') && window.ng.hasOwnProperty('coreTokens') && window.ng.coreTokens.hasOwnProperty('NgZone')) return true
+  return !!document.querySelectorAll('[ng-version]').length
+}
+
+module.exports = getFrameworks()

loader/index.js

@@ -39,7 +39,7 @@ var origin = '' + location
 var defInfo = {
   beacon: 'bam.nr-data.net',
   errorBeacon: 'bam.nr-data.net',
-  agent: 'js-agent.newrelic.com<PATH>nr<EXTENSION>.js'
+  agent: 'js-agent.newrelic.com/<PATH>nr<EXTENSION>.js'
 }
 
 var xhrWrappable = XHR &&

package.json

@@ -63,6 +63,7 @@
     "api": "./loader/api.js",
     "config": "./loader/config.js",
     "metrics": "./loader/metrics.js",
+    "framework-detection": "./loader/framework-detection.js",
     "ds": "./loader/data-size.js",
     "ee": "./contextual-ee/index.js",
     "event-listener-opts": "./loader/event-listener-opts.js",

tests/assets/frameworks/angular/simple-app/assets/shipping.json

@@ -0,0 +1,14 @@
+[
+  {
+    "type": "Overnight",
+    "price": 25.99
+  },
+  {
+    "type": "2-Day",
+    "price": 9.99
+  },
+  {
+    "type": "Postal",
+    "price": 2.99
+  }
+]

tests/assets/frameworks/angular/simple-app/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    {init}
+    {loader}
+    {config}
+    <meta charset="utf-8"/>
+    <title>Angular Getting Started</title>
+    <base href ="./index.html"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <link rel="icon" type="image/x-icon" href="favicon.ico"/>
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
+  <link rel="stylesheet" href="styles.css"></head>
+  <body>
+    <app-root></app-root>
+  <script src="runtime-es5.js"></script><script src="polyfills-es5.js"></script><script src="vendor-es5.js"></script><script src="main-es5.js" ></script>
+</body>
+</html>