feat(plugin-frustration-browser): stub in frustration browser plugin

packages/plugin-frustration-browser/CHANGELOG.md

@@ -0,0 +1,4 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

packages/plugin-frustration-browser/README.md

@@ -0,0 +1,48 @@
+<p align="center">
+  <a href="https://amplitude.com" target="_blank" align="center">
+    <img src="https://static.amplitude.com/lightning/46c85bfd91905de8047f1ee65c7c93d6fa9ee6ea/static/media/amplitude-logo-with-text.4fb9e463.svg" width="280">
+  </a>
+  <br />
+</p>
+
+# @amplitude/plugin-frustration-browser (beta)
+**This plugin is in beta at the moment, naming and interface might change in the future.**
+
+This plugin captures frustration analytics events like "Dead Clicks" and "Rage Clicks".
+
+## Installation
+
+This package is not published on NPM registry and is available to be installed using npm and yarn.
+
+```sh
+# npm
+npm install @amplitude/plugin-frustration-browser@beta
+
+# yarn
+yarn add @amplitude/plugin-frustration-browser@beta
+```
+
+## Usage
+
+```typescript
+import * as amplitude from '@amplitude/analytics-browser';
+import { frustrationPlugin } from '@amplitude/plugin-frustration-browser';
+```
+
+### 2. Instantiate the plugin
+
+```typescript
+const plugin = frustrationPlugin();
+```
+
+### 3. Install plugin to Amplitude SDK
+
+```typescript
+amplitude.add(plugin);
+```
+
+### 4. Initialize Amplitude SDK
+
+```typescript
+amplitude.init('API_KEY');
+```

packages/plugin-frustration-browser/jest.config.js

@@ -0,0 +1,11 @@
+const baseConfig = require('../../jest.config.js');
+const package = require('./package');
+
+module.exports = {
+  ...baseConfig,
+  displayName: package.name,
+  rootDir: '.',
+  testEnvironment: 'jsdom',
+  coveragePathIgnorePatterns: ['index.ts'],
+};
+

packages/plugin-frustration-browser/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@amplitude/plugin-frustration-browser",
+  "version": "0.0.1-alpha.1",
+  "description": "",
+  "author": "Amplitude Inc",
+  "homepage": "https://github.com/amplitude/Amplitude-TypeScript",
+  "license": "MIT",
+  "main": "lib/cjs/index.js",
+  "module": "lib/esm/index.js",
+  "types": "lib/esm/index.d.ts",
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public",
+    "tag": "alpha"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/amplitude/Amplitude-TypeScript.git"
+  },
+  "scripts": {
+    "build": "yarn bundle && yarn build:es5 && yarn build:esm",
+    "bundle": "rollup --config rollup.config.js",
+    "build:es5": "tsc -p ./tsconfig.es5.json",
+    "build:esm": "tsc -p ./tsconfig.esm.json",
+    "watch": "tsc -p ./tsconfig.esm.json --watch",
+    "clean": "rimraf node_modules lib coverage",
+    "fix": "yarn fix:eslint & yarn fix:prettier",
+    "fix:eslint": "eslint '{src,test}/**/*.ts' --fix",
+    "fix:prettier": "prettier --write \"{src,test}/**/*.ts\"",
+    "lint": "yarn lint:eslint & yarn lint:prettier",
+    "lint:eslint": "eslint '{src,test}/**/*.ts'",
+    "lint:prettier": "prettier --check \"{src,test}/**/*.ts\"",
+    "test": "jest",
+    "typecheck": "tsc -p ./tsconfig.json",
+    "version": "yarn version-file && yarn build",
+    "version-file": "node -p \"'export const VERSION = \\'' + require('./package.json').version + '\\';'\" > src/version.ts"
+  },
+  "bugs": {
+    "url": "https://github.com/amplitude/Amplitude-TypeScript/issues"
+  },
+  "dependencies": {
+    "@amplitude/analytics-core": "^2.12.0",
+    "tslib": "^2.4.1"
+  },
+  "devDependencies": {
+    "@amplitude/analytics-browser": "^2.17.6",
+    "@rollup/plugin-commonjs": "^23.0.4",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@rollup/plugin-typescript": "^10.0.1",
+    "css.escape": "^1.5.1",
+    "rollup": "^2.79.1",
+    "rollup-plugin-execute": "^1.1.1",
+    "rollup-plugin-gzip": "^3.1.0",
+    "rollup-plugin-terser": "^7.0.2"
+  },
+  "files": [
+    "lib"
+  ]
+}

packages/plugin-frustration-browser/rollup.config.js

@@ -0,0 +1,6 @@
+import { iife, umd } from '../../scripts/build/rollup.config';
+
+iife.input = umd.input;
+iife.output.name = 'amplitudeFrustrationPlugin';
+
+export default [umd, iife];

packages/plugin-frustration-browser/src/constants.ts

@@ -0,0 +1 @@
+export const PLUGIN_NAME = 'frustration-browser';

packages/plugin-frustration-browser/src/frustration-plugin.ts

@@ -0,0 +1,28 @@
+/* eslint-disable no-restricted-globals */
+import { BrowserClient, BrowserConfig, EnrichmentPlugin } from '@amplitude/analytics-core';
+import { PLUGIN_NAME } from './constants';
+
+export type BrowserEnrichmentPlugin = EnrichmentPlugin<BrowserClient, BrowserConfig>;
+
+export const frustrationPlugin = (): BrowserEnrichmentPlugin => {
+  const setup: BrowserEnrichmentPlugin['setup'] = async (/*config, amplitude*/) => {
+    // add logic here to setup any resources
+  };
+
+  /* istanbul ignore next */
+  const execute: BrowserEnrichmentPlugin['execute'] = async (event) => {
+    return event;
+  };
+
+  const teardown = async () => {
+    // add logic here to clean up any resources
+  };
+
+  return {
+    name: PLUGIN_NAME,
+    type: 'enrichment',
+    setup,
+    execute,
+    teardown,
+  };
+};

packages/plugin-frustration-browser/src/index.ts

@@ -0,0 +1,2 @@
+export { frustrationPlugin as plugin, frustrationPlugin } from './frustration-plugin';
+export { VERSION } from './version';

packages/plugin-frustration-browser/src/version.ts

@@ -0,0 +1 @@
+export const VERSION = '0.0.1-alpha.1';

packages/plugin-frustration-browser/test/index.test.ts

@@ -0,0 +1,13 @@
+import { frustrationPlugin } from '../src/index';
+
+describe('frustration-browser', () => {
+  it('should be defined', () => {
+    expect(frustrationPlugin).toBeDefined();
+  });
+  it('should call setup and teardown without errors', async () => {
+    const plugin = frustrationPlugin();
+    /* eslint-disable-next-line @typescript-eslint/no-unsafe-argument */
+    await plugin?.setup?.({} as unknown as any, {} as unknown as any);
+    await plugin?.teardown?.();
+  });
+});

packages/plugin-frustration-browser/tsconfig.es5.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["src/**/*"],
+  "compilerOptions": {
+    "module": "commonjs",
+    "noEmit": false,
+    "outDir": "lib/cjs",
+    "rootDir": "./src"
+  }
+}

packages/plugin-frustration-browser/tsconfig.esm.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["src/**/*"],
+  "compilerOptions": {
+    "module": "es6",
+    "noEmit": false,
+    "outDir": "lib/esm",
+    "rootDir": "./src"
+  }
+}

packages/plugin-frustration-browser/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["src/**/*", "test/**/*"],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "esModuleInterop": true,
+    "lib": ["dom"],
+    "noEmit": true,
+    "rootDir": "."
+  }
+}

packages/plugin-stub-browser/README.md

@@ -5,8 +5,8 @@
   <br />
 </p>
 
-# @amplitude/plugin-stub-browser (beta)
-**This plugin is in beta at the moment, naming and interface might change in the future.**
+# @amplitude/plugin-stub-browser (alpha)
+**This plugin is in alpha at the moment, naming and interface might change in the future.**
 
 A stub plugin. Copy and paste this and rename to make a new plugin.
 
@@ -18,10 +18,10 @@ This package is not published on NPM registry and is available to be installed u
 
 ```sh
 # npm
-npm install @amplitude/plugin-stub-browser@beta
+npm install @amplitude/plugin-stub-browser@alpha
 
 # yarn
-yarn add @amplitude/plugin-stub-browser@beta
+yarn add @amplitude/plugin-stub-browser@alpha
 ```
 
 ## Usage

packages/plugin-stub-browser/package.json

@@ -31,7 +31,6 @@
     "lint": "yarn lint:eslint & yarn lint:prettier",
     "lint:eslint": "eslint '{src,test}/**/*.ts'",
     "lint:prettier": "prettier --check \"{src,test}/**/*.ts\"",
-    "publish": "node ../../scripts/publish/upload-to-s3.js",
     "test": "jest",
     "typecheck": "tsc -p ./tsconfig.json",
     "version": "yarn version-file && yarn build",
@@ -42,7 +41,6 @@
   },
   "dependencies": {
     "@amplitude/analytics-core": "^2.12.0",
-    "rxjs": "^7.8.1",
     "tslib": "^2.4.1"
   },
   "devDependencies": {

packages/plugin-web-vitals-browser/package.json

@@ -40,7 +40,6 @@
   },
   "dependencies": {
     "@amplitude/analytics-core": "^2.12.0",
-    "rxjs": "^7.8.1",
     "tslib": "^2.4.1",
     "web-vitals": "^5.0.1"
   },

test-server/autocapture/frustration.html

@@ -0,0 +1,30 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/amplitude.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Frustration Analytics Test</title>
+  </head>
+  <body>
+    <div id="app">
+      <div>Placeholder to add a Rage Click test</div>
+      <div>Placeholder to add a Dead Click test</div>
+      <div>Placeholder to add a non-Dead Click test</div>
+    </div>
+    <script type="module">
+      import * as amplitude from '@amplitude/analytics-browser';
+      import { frustrationPlugin } from '@amplitude/plugin-frustration-browser';
+      window.amplitude = amplitude;
+      amplitude.add(frustrationPlugin());
+      amplitude.init(
+        import.meta.env.VITE_AMPLITUDE_API_KEY,
+        import.meta.env.VITE_AMPLITUDE_USER_ID || 'amplitude-typescript test user',
+        {
+          autocapture: {
+          },
+        }
+      );
+    </script>
+  </body>
+</html>