refactor: remove @analytics/ua-parser as dependency of @amplitude/analytics-connector (#70)

Author: kevinpagtakhan

packages/analytics-connector/package.json

@@ -27,9 +27,7 @@
   "bugs": {
     "url": "https://github.com/amplitude/experiment-js-client/issues"
   },
-  "dependencies": {
-    "@amplitude/ua-parser-js": "^0.7.31"
-  },
+  "dependencies": {},
   "devDependencies": {
     "@types/amplitude-js": "^8.0.2",
     "amplitude-js": "^8.12.0"

packages/analytics-connector/rollup.config.js

@@ -71,7 +71,7 @@ const configs = [
       entryFileNames: 'analytics-connector.esm.js',
       format: 'esm',
     }),
-    external: ['@amplitude/ua-parser-js'],
+    external: [],
   },
 
   // modern build for field "es2015" - not ie, esm, es2015 syntax
@@ -81,7 +81,7 @@ const configs = [
       entryFileNames: 'analytics-connector.es2015.js',
       format: 'esm',
     }),
-    external: ['@amplitude/ua-parser-js'],
+    external: [],
   },
 ];
 

packages/analytics-connector/src/applicationContextProvider.ts

@@ -1,5 +1,3 @@
-import { UAParser } from '@amplitude/ua-parser-js';
-
 export type ApplicationContext = {
   versionName?: string;
   language?: string;
@@ -16,31 +14,18 @@ export interface ApplicationContextProvider {
 export class ApplicationContextProviderImpl
   implements ApplicationContextProvider
 {
-  private readonly ua = new UAParser(
-    typeof navigator !== 'undefined' ? navigator.userAgent : null,
-  ).getResult();
   public versionName: string;
   getApplicationContext(): ApplicationContext {
     return {
       versionName: this.versionName,
       language: getLanguage(),
       platform: 'Web',
-      os: getOs(this.ua),
-      deviceModel: getDeviceModel(this.ua),
+      os: undefined,
+      deviceModel: undefined,
     };
   }
 }
 
-const getOs = (ua: UAParser): string => {
-  return [ua.browser?.name, ua.browser?.major]
-    .filter((e) => e !== null && e !== undefined)
-    .join(' ');
-};
-
-const getDeviceModel = (ua: UAParser): string => {
-  return ua.os?.name;
-};
-
 const getLanguage = (): string => {
   return (
     (typeof navigator !== 'undefined' &&

packages/experiment-browser/package.json

@@ -35,6 +35,7 @@
   },
   "dependencies": {
     "@amplitude/analytics-connector": "^1.4.7",
+    "@amplitude/ua-parser-js": "^0.7.31",
     "base64-js": "1.5.1",
     "unfetch": "4.1.0"
   },

packages/experiment-browser/rollup.config.js

@@ -71,7 +71,7 @@ const configs = [
       entryFileNames: 'experiment.esm.js',
       format: 'esm',
     }),
-    external: ['@amplitude/ua-parser-js', '@amplitude/analytics-connector'],
+    external: ['@amplitude/analytics-connector'],
   },
 
   // modern build for field "es2015" - not ie, esm, es2015 syntax
@@ -81,7 +81,7 @@ const configs = [
       entryFileNames: 'experiment.es2015.js',
       format: 'esm',
     }),
-    external: ['@amplitude/ua-parser-js', '@amplitude/analytics-connector'],
+    external: ['@amplitude/analytics-connector'],
   },
 ];
 

packages/experiment-browser/src/integration/default.ts

@@ -1,9 +1,13 @@
 import { ApplicationContextProvider } from '@amplitude/analytics-connector';
+import { UAParser } from '@amplitude/ua-parser-js';
 
 import { ExperimentUserProvider } from '../types/provider';
 import { ExperimentUser } from '../types/user';
 
 export class DefaultUserProvider implements ExperimentUserProvider {
+  private readonly ua = new UAParser(
+    typeof navigator !== 'undefined' ? navigator.userAgent : null,
+  ).getResult();
   private readonly contextProvider: ApplicationContextProvider;
   public readonly userProvider: ExperimentUserProvider | undefined;
   constructor(
@@ -21,9 +25,19 @@ export class DefaultUserProvider implements ExperimentUserProvider {
       version: context.versionName,
       language: context.language,
       platform: context.platform,
-      os: context.os,
-      device_model: context.deviceModel,
+      os: context.os || this.getOs(this.ua),
+      device_model: context.deviceModel || this.getDeviceModel(this.ua),
       ...user,
     };
   }
+
+  private getOs(ua: UAParser): string {
+    return [ua.browser?.name, ua.browser?.major]
+      .filter((e) => e !== null && e !== undefined)
+      .join(' ');
+  }
+
+  private getDeviceModel(ua: UAParser): string | undefined {
+    return ua.os?.name;
+  }
 }