Merge pull request #76 from Azure/typescript-rewrite

Move typescript rewrite (3.0-rc version) to master branch

.gitignore

@@ -4,6 +4,7 @@ logs
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+test-report.xml
 
 # Runtime data
 pids
@@ -36,6 +37,8 @@ build/Release
 node_modules/
 jspm_packages/
 
+# TypeScript v1 declaration files
+typings/
 
 # Optional npm cache directory
 .npm
@@ -52,6 +55,12 @@ jspm_packages/
 # Yarn Integrity file
 .yarn-integrity
 
+# dotenv environment variables file
+.env
+
+# next.js build output
+.next
+
 # built output
 dist
 dist-*

.npmignore

@@ -1,4 +1,5 @@
 dist-esm/test
 test
 test-browser
-test-dist
+test-dist
+legacy

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "printWidth": 120,
+  "tabWidth": 2
+}

.vscode/launch.json

@@ -0,0 +1,39 @@
+{
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "Jest All",
+            "program": "${workspaceFolder}/node_modules/.bin/jest",
+            "args": [
+                "--runInBand",
+                "--config",
+                "jestconfig.json"
+            ],
+            "console": "integratedTerminal",
+            "internalConsoleOptions": "neverOpen",
+            "disableOptimisticBPs": true,
+            "windows": {
+                "program": "${workspaceFolder}/node_modules/jest/bin/jest",
+            }
+        },
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "Jest Current File",
+            "program": "${workspaceFolder}/node_modules/.bin/jest",
+            "args": [
+                "${relativeFile}",
+                "--config",
+                "jestconfig.json"
+            ],
+            "console": "integratedTerminal",
+            "internalConsoleOptions": "neverOpen",
+            "disableOptimisticBPs": true,
+            "windows": {
+                "program": "${workspaceFolder}/node_modules/jest/bin/jest",
+            }
+        }
+    ]
+}

.vscode/settings.json

@@ -0,0 +1,11 @@
+{
+  "editor.codeActionsOnSave": {
+    "source.organizeImports": true
+  },
+  "prettier.printWidth": 120,
+  "typescript.updateImportsOnFileMove.enabled": "always",
+  "editor.formatOnSave": true,
+  "[markdown]": {
+    "editor.formatOnSave": false
+  }
+}

CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project are documented in this file.  
 The format is based on [Keep a Changelog](http://keepachangelog.com/) and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## [3.0.0] beta branch
+
+### Change
+ - rewrite in Typescript
+ - support for Application Insights Javascript SDK
+
 ## [Unreleased]
 
 ## [2.0.2] - 2019-01-20
@@ -48,3 +54,4 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 [2.0.0]: https://github.com/Azure/react-appinsights/compare/v1.0.4...v2.0.0
 [2.0.1]: https://github.com/Azure/react-appinsights/compare/v2.0.0...v2.0.1
 [2.0.2]: https://github.com/Azure/react-appinsights/compare/v2.0.1...v2.0.2
+[3.0.0]: https://github.com/Azure/react-appinsights/compare/v2.0.1...typescript-rewrite

README.md

@@ -1,49 +1,75 @@
 # react-appinsights
 
-[![Build Status](https://dev.azure.com/azure-public/react-appinsights/_apis/build/status/Azure.react-appinsights)](https://dev.azure.com/azure-public/react-appinsights/_build/latest?definitionId=16)
-[![npm](https://img.shields.io/npm/v/react-appinsights.svg)](https://www.npmjs.com/package/react-appinsights)
-[![Downloads per month](https://img.shields.io/npm/dm/react-appinsights.svg)](https://www.npmjs.com/package/react-appinsights)
-[![dependencies](https://david-dm.org/Azure/react-appinsights.svg)](https://david-dm.org/Azure/react-appinsights)
-[![Greenkeeper badge](https://badges.greenkeeper.io/Azure/react-appinsights.svg)](https://greenkeeper.io/)
-
-Javascript module to include [Application Insights][appinsights-js] in applications built with [React][react].  
-It extends Application Insights with additional React-specific features:
- * tracking of router changes
- * React components usage statistics
- * API to extend the standard telemetry with additional dimensions
+[![npm](https://img.shields.io/npm/v/react-appinsights.svg)](https://www.npmjs.com/package/react-appinsights) [![Build Status](https://dev.azure.com/azure-public/react-appinsights/_apis/build/status/Azure.react-appinsights)](https://dev.azure.com/azure-public/react-appinsights/_build/latest?definitionId=16) [![Greenkeeper badge](https://badges.greenkeeper.io/Azure/react-appinsights.svg)](https://greenkeeper.io/) [![Downloads per month](https://img.shields.io/npm/dm/react-appinsights.svg)](https://www.npmjs.com/package/react-appinsights) 
+
+Javascript library to integrate [Application Insights][appinsights-js] in applications built with [React][react].  
+`react-appinsights` extends Application Insights with additional React-specific features:
+
+- tracking of router changes
+- React components usage statistics
+- API to extend the standard telemetry with additional dimensions
 
 ## Installation
 
-With npm:
+Using npm:
+
 ```bash
-npm install --save react-appinsights
+npm install --save react-appinsights@beta
 ```
 
 ## Usage
 
-To initialize Application Insights add the following to the entry point 
-file of your application (e.g. index.js):
+To initialize Application Insights, add the following to the entry point
+file of your application (e.g. `index.js`):
 
 ```javascript
-import ReactAI from 'react-appinsights';
-ReactAI.init({instrumentationKey:'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxx'});
+import { reactAI } from "react-appinsights";
+import { ApplicationInsights } from "@microsoft/applicationinsights-web";
+
+let appInsights = new ApplicationInsights({
+  config: {
+    instrumentationKey: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxx",
+    extensions: [reactAI],
+    extensionConfig: {
+      [reactAI.extensionId]: { debug: false }
+    }
+  }
+});
+appInsights.loadAppInsights();
 ```
-See [this Application Insights tutorial for Node.js][appinsights-nodejs] 
+
+See [this Application Insights tutorial for Node.js][appinsights-nodejs]
 for more details on how to obtain the instrumentation key.
 
+`IReactAISettings` has following non-mandatory configuration options to be passed into the `extensionConfig` object:
+
+```typescript
+interface IReactAISettings {
+  initialContext?: { [key: string]: any };  // Initial context to initialize with
+  history?: History;                        // React router history - to enable page view tracking
+  debug?: boolean;                          // Debug mode: displays debug messages from ReactAI in console
+}
+```
+
 #### Track router changes
 
 To track page views, pass a history object to the init method.  
 For more information see the [documentation][react-router] of the `react-router` package.
 
-
 ```javascript
-import ReactAI from 'react-appinsights';
-import { Router } from 'react-router-dom';
-import { createBrowserHistory } from 'history';
+import { reactAI } from "react-appinsights";
+import { ApplicationInsights } from "@microsoft/applicationinsights-web";
+import { Router } from "react-router-dom";
+import { createBrowserHistory } from "history";
+
+const history = createBrowserHistory();
 
-const history = createBrowserHistory()
-ReactAI.init({instrumentationKey:'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxx'}, history);
+/*
+ * In the code sample above, set configuration as follows:
+ *   extensionConfig: {
+ *     [ReactAI.extensionId]: { history: history }
+ *   }
+ */
 
 ReactDOM.render(
   <Router history={history}>
@@ -55,64 +81,65 @@ ReactDOM.render(
 
 #### Enable React components usage tracking
 
-To enable React components usage tracking, apply the `withTracking` higher-order 
+To instrument various React components usage tracking, apply the `withAITracking` higher-order
 component function.
 
 ```javascript
-import ReactAI from 'react-appinsights';
+import { withAITracking } from 'react-appinsights';
 
 class MyComponent extends React.Component {
-    ... 
+    ...
 }
 
-export default ReactAI.withTracking(MyComponent);
+export default withAITracking(MyComponent);
 ```
 
-If, for any reason, you want to change the name string of the component 
-that appears in Application Insights, 
-you can pass in a custom name as second argument of `withTracking`.
+To change the name string of the component that appears in Application Insights,
+you can pass a custom name as second argument of `withAITracking`.
 
 ```javascript
-export default ReactAI.withTracking(MyComponent, "CustomMyComponentName");
+export default withAITracking(MyComponent, "CustomMyComponentName");
 ```
 
-It will measure time from the `ComponentDidMount` event through the `ComponentWillUnmount` event. 
-However, in order to make this time more accurate it will subtract idle time. 
-In other words, `React Component Engaged Time = ComponentWillUnmount timestamp - ComponentDidMount timestamp - idle time`.  
+It will measure time from the `ComponentDidMount` event through the `ComponentWillUnmount` event.
+However, in order to make this more accurate, it will subtract the time in which the user was idle.
+In other words, `React Component Engaged Time = ComponentWillUnmount timestamp - ComponentDidMount timestamp - idle time`.
+
+To see this metric in the Azure portal you need to navigate to the Application Insights resource, select "Metrics" tab and configure the empty charts to display Custom metric named "React Component Engaged Time (seconds)", select aggregation (sum, avg, etc.) of your liking and apply split by "Component Name".
+
+![image](https://user-images.githubusercontent.com/1005174/51357010-c168ac80-1a71-11e9-8df9-348febd2d6dd.png)
+
+You can also run custom queries to slice and dice AI data to generate reports and visualizations as per your requirements. In the Azure portal, navigate to the Application Insights resource, select "Analytics" from the top menu of the Overview tab and run your query.
 
-To see this metric in Azure portal you need to navigate to Application Insights resource, 
-select Metrics Explorer from the top menu 
-and configure one of the empty charts to display Custom metrics "React Component Engaged Time" 
-grouped by Component Name. 
-It can take up to 10 minutes for new custom metric to appear in Azure Portal.
+![image](https://user-images.githubusercontent.com/1005174/51356821-e872ae80-1a70-11e9-9e12-e56a1edcde68.png)
 
-<img width="550" src="https://cloud.githubusercontent.com/assets/3801171/18735093/eeac0496-802f-11e6-9403-50c6fe8aaf9e.png"/>
+Please note that it can take up to 10 minutes for new custom metric to appear in the Azure Portal.
 
 #### Set application context
 
-To augment all telemetry with additional properties use `setAppContext` method. For instance:
+To augment all telemetry with additional properties use `setContext` method. For instance:
 
 ```javascript
-ReactAI.setAppContext({urlReferrer: document.referrer});
+reactAI.setContext({ CorrelationId: "some-unique-correlation-id", Referrer: document.referrer });
 ```
 
-This will add urlReferrer property to all page views, ajax calls, exceptions and other telemetry sent to Application Insights:
+This will add CorrelationId and Referrer property to all page views, ajax calls, exceptions and other telemetry sent to Application Insights.
 
 <img width="600" src="https://cloud.githubusercontent.com/assets/3801171/18721651/43c4861e-7fe6-11e6-8541-3614111acc8f.png"/>
 
-#### Get AppInsights object
+#### Get original AppInsights object
 
 Use the following method to get the original AppInsights object:
 
 ```javascript
-var appInsights = ReactAI.ai();
+var appInsights = reactAI.appInsights;
 ```
 
-Refer to [this doc][appinsights-js-api] for information on the Javascript API of Application Insights. 
+Refer to [this doc][appinsights-js-api] for information on the Javascript API of Application Insights.
 
 
- [react]: https://reactjs.org/
- [appinsights-js]: https://docs.microsoft.com/en-us/azure/application-insights/app-insights-javascript
- [appinsights-nodejs]: https://azure.microsoft.com/en-us/documentation/articles/app-insights-nodejs/
- [appinsights-js-api]: https://github.com/Microsoft/ApplicationInsights-JS/blob/master/API-reference.md
- [react-router]: https://github.com/ReactTraining/react-router/blob/master/FAQ.md#how-do-i-access-the-history-object-outside-of-components
+[react]: https://reactjs.org/
+[appinsights-js]: https://docs.microsoft.com/en-us/azure/application-insights/app-insights-javascript
+[appinsights-nodejs]: https://azure.microsoft.com/en-us/documentation/articles/app-insights-nodejs/
+[appinsights-js-api]: https://github.com/Microsoft/ApplicationInsights-JS/blob/master/API-reference.md
+[react-router]: https://github.com/ReactTraining/react-router/blob/master/FAQ.md#how-do-i-access-the-history-object-outside-of-components

azure-pipelines.yml

@@ -8,8 +8,6 @@ pool:
 
 strategy:
   matrix:
-    node_6_x:
-      node_version: 6.x
     node_8_x:
       node_version: 8.x
     node_10_x:
@@ -28,3 +26,13 @@ steps:
     npm run build
     npm test
   displayName: 'npm install, build and test'
+
+- task: PublishTestResults@2
+  inputs:
+      testResultsFiles: '**/test-report.xml' 
+
+- task: PublishCodeCoverageResults@1
+  inputs:
+    codeCoverageTool: Cobertura
+    summaryFileLocation: '$(System.DefaultWorkingDirectory)/coverage/cobertura-coverage.xml'
+    reportDirectory: '$(System.DefaultWorkingDirectory)/coverage/lcov-report'