feat: Capture metrics for usage of MooTools and certain polyfills

babel.config.js

@@ -62,7 +62,8 @@ module.exports = function (api) {
         [
           './tools/scripts/babel-plugin-transform-import',
           {
-            '(constants/)env$': '$1env.cdn'
+            '(constants/)env$': '$1env.cdn',
+            'polyfill-detection$': 'polyfill-detection.es5'
           }
         ]
       ]

jest.config.js

@@ -8,6 +8,7 @@ module.exports = {
   testEnvironment: 'jsdom',
   testMatch: ['<rootDir>/src/**/?(*.)+(spec|test).[tj]s?(x)'],
   transform: {
-    '\\.[jt]sx?$': 'babel-jest'
-  }
+    '\\.m?[jt]sx?$': 'babel-jest'
+  },
+  setupFilesAfterEnv: ['<rootDir>/tools/jest-matchers/index.mjs']
 }

package.json

@@ -192,6 +192,7 @@
     "husky": "^8.0.0",
     "jest": "^28.1.1",
     "jest-environment-jsdom": "28.1.1",
+    "jest-extended": "^3.2.4",
     "jquery": "1.11.3",
     "jung": "^2.1.0",
     "just-debounce": "^1.0.0",

src/common/url/protocol.test.js

@@ -1,4 +1,3 @@
-import { faker } from '@faker-js/faker'
 import { isFileProtocol } from './protocol'
 
 test('should return true when location url contains file protocol', () => {

src/features/metrics/aggregate/framework-detection.js

@@ -0,0 +1,73 @@
+import { isBrowserScope } from '../../../common/util/global-scope'
+
+const FRAMEWORKS = {
+  REACT: 'React',
+  ANGULAR: 'Angular',
+  ANGULARJS: 'AngularJS',
+  BACKBONE: 'Backbone',
+  EMBER: 'Ember',
+  VUE: 'Vue',
+  METEOR: 'Meteor',
+  ZEPTO: 'Zepto',
+  JQUERY: 'Jquery',
+  MOOTOOLS: 'MooTools'
+}
+
+export function getFrameworks () {
+  if (!isBrowserScope) return [] // don't bother detecting frameworks if not in the main window context
+
+  const frameworks = []
+  try {
+    if (detectReact()) frameworks.push(FRAMEWORKS.REACT)
+    if (detectAngularJs()) frameworks.push(FRAMEWORKS.ANGULARJS)
+    if (detectAngular()) frameworks.push(FRAMEWORKS.ANGULAR)
+    if (Object.prototype.hasOwnProperty.call(window, 'Backbone')) frameworks.push(FRAMEWORKS.BACKBONE)
+    if (Object.prototype.hasOwnProperty.call(window, 'Ember')) frameworks.push(FRAMEWORKS.EMBER)
+    if (Object.prototype.hasOwnProperty.call(window, 'Vue')) frameworks.push(FRAMEWORKS.VUE)
+    if (Object.prototype.hasOwnProperty.call(window, 'Meteor')) frameworks.push(FRAMEWORKS.METEOR)
+    if (Object.prototype.hasOwnProperty.call(window, 'Zepto')) frameworks.push(FRAMEWORKS.ZEPTO)
+    if (Object.prototype.hasOwnProperty.call(window, 'jQuery')) frameworks.push(FRAMEWORKS.JQUERY)
+    if (Object.prototype.hasOwnProperty.call(window, 'MooTools')) frameworks.push(FRAMEWORKS.MOOTOOLS)
+  } catch (err) {
+    // Possibly not supported
+  }
+  return frameworks
+}
+
+function detectReact () {
+  try {
+    return Object.prototype.hasOwnProperty.call(window, 'React') ||
+      Object.prototype.hasOwnProperty.call(window, 'ReactDOM') ||
+      Object.prototype.hasOwnProperty.call(window, 'ReactRedux') ||
+      document.querySelector('[data-reactroot], [data-reactid]') ||
+      (() => {
+        const divs = document.querySelectorAll('body > div')
+        for (let i = 0; i < divs.length; i++) {
+          if (Object.prototype.hasOwnProperty.call(divs[i], '_reactRootContainer')) {
+            return true
+          }
+        }
+      })()
+  } catch (err) {
+    return false
+  }
+}
+
+function detectAngularJs () {
+  try {
+    return Object.prototype.hasOwnProperty.call(window, 'angular') ||
+      document.querySelector('.ng-binding, [ng-app], [data-ng-app], [ng-controller], [data-ng-controller], [ng-repeat], [data-ng-repeat]') ||
+      document.querySelector('script[src*="angular.js"], script[src*="angular.min.js"]')
+  } catch (err) {
+    return false
+  }
+}
+
+function detectAngular () {
+  try {
+    return Object.prototype.hasOwnProperty.call(window, 'ng') ||
+      document.querySelector('[ng-version]')
+  } catch (err) {
+    return false
+  }
+}