[MOB-8539]: Embedded GA

.babelrc

@@ -1,6 +1,7 @@
 {
 	"presets": [
-		"@babel/typescript"
+		"@babel/preset-env",
+		"@babel/preset-typescript"
 	],
 	"ignore": [
 		"**/*.test.ts",
@@ -12,6 +13,9 @@
 		"@babel/proposal-class-properties",
 		"@babel/proposal-object-rest-spread",
 		"@babel/plugin-proposal-optional-chaining",
+		["@babel/transform-runtime", {
+			"regenerator": true
+		}],
 		"@babel/plugin-transform-modules-umd",
 		"@babel/plugin-transform-nullish-coalescing-operator",
 		[

.eslintrc

@@ -10,12 +10,26 @@
     "plugin:@typescript-eslint/recommended",
     "plugin:prettier/recommended"
   ],
-  "ignorePatterns": ["webpack.*.js"],
+  "ignorePatterns": [
+    "webpack.*.js"
+  ],
   "rules": {
     "no-console": 1,
+    "no-duplicate-imports": 2,
     "no-extra-boolean-cast": "off",
     "@typescript-eslint/camelcase": "off",
+    "@typescript-eslint/comma-spacing": 2,
     "@typescript-eslint/explicit-function-return-type": "off",
-    "eqeqeq": 2
+    "@typescript-eslint/array-type": [
+      2,
+      {
+        "default": "array"
+      }
+    ],
+    "eqeqeq": 2,
+    "quotes": [
+      2,
+      "single"
+    ]
   }
 }

example/src/index.ts

@@ -28,7 +28,7 @@ import {
             }
           }
         )
-        .then((response) => {
+        .then((response: any) => {
           return response.data?.token;
         });
     }
@@ -71,11 +71,11 @@ import {
   const handleGetMessagesClick = (event: MouseEvent) => {
     event.preventDefault();
     if (startBtn.getAttribute('aria-disabled') !== 'true') {
-      startBtn.innerText = `Loading...`;
+      startBtn.innerText = 'Loading...';
       startBtn.setAttribute('aria-disabled', 'true');
       startBtn.className = 'disabled';
       request()
-        .then((response) => {
+        .then((response: any) => {
           triggerDisplayMessages(response.data.inAppMessages);
           startBtn.innerText = `${response.data.inAppMessages.length} total messages retrieved!`;
         })
@@ -94,7 +94,7 @@ import {
       /* login */
       loginBtn.setAttribute('aria-disabled', 'true');
       loginBtn.className = 'disabled';
-      loginBtn.innerText = `Loading...`;
+      loginBtn.innerText = 'Loading...';
       setEmail(email).then(() => {
         /* enable change email button */
         changeEmailBtn.classList.remove('disabled');
@@ -123,7 +123,7 @@ import {
 
     changeEmailBtn.setAttribute('aria-disabled', 'true');
     changeEmailBtn.className = 'disabled';
-    changeEmailBtn.innerText = `Loading...`;
+    changeEmailBtn.innerText = 'Loading...';
 
     startBtn.setAttribute('aria-disabled', 'true');
     startBtn.className = 'disabled';

package.json

@@ -1,6 +1,7 @@
 {
   "name": "@iterable/web-sdk",
   "description": "Iterable SDK for JavaScript and Node.",
+
   "version": "1.0.10",
   "homepage": "https://iterable.com/",
   "repository": {
@@ -32,10 +33,13 @@
   ],
   "dependencies": {
     "@pabra/sortby": "^1.0.1",
+    "@types/ws": "8.5.4",
     "axios": "^1.6.2",
     "buffer": "^6.0.3",
+    "copy-webpack-plugin": "^11.0.0",
     "idb-keyval": "^6.2.0",
     "throttle-debounce": "^3.0.1",
+    "uuid": "^9.0.0",
     "yup": "^0.32.9"
   },
   "scripts": {
@@ -46,7 +50,7 @@
     "build": "ttsc && babel src --out-dir ./dist --extensions '.ts,.tsx' && webpack",
     "build:node": "yarn build --config webpack.node.config.js",
     "test": "jest --config jest.config.js --collectCoverage",
-    "format": "prettier --write \"src/**/*.{ts,tsx}\" \"src/**/*.{js}\" \"example/src/**/*.{ts,tsx}\" \"example/src/**/*.{js}\" --no-error-on-unmatched-pattern",
+    "format": "prettier --write \"src/**/*.{ts,tsx}\" \"src/**/*.{js}\" \"example/src/**/*.{ts,tsx}\" \"example/src/**/*.{js}\" \"react-example/src/**/*.{ts,tsx}\" \"react-example/src/**/*.{js}\" --no-error-on-unmatched-pattern",
     "lint": "eslint src --ignore-pattern '*.test.*' --ignore-pattern '*.spec.*' --ext '.ts,.tsx'",
     "typecheck": "ttsc --noEmit true --emitDeclarationOnly false",
     "check-deps": "madge --extensions js,ts --circular dist",
@@ -61,27 +65,34 @@
     "@babel/plugin-proposal-optional-chaining": "^7.14.5",
     "@babel/plugin-transform-modules-umd": "^7.14.5",
     "@babel/plugin-transform-nullish-coalescing-operator": "^7.23.4",
+    "@babel/plugin-transform-runtime": "^7.22.15",
     "@babel/preset-env": "^7.5.5",
     "@babel/preset-typescript": "^7.6.0",
     "@types/jest": "^27.0.2",
     "@types/node": "^12.7.1",
     "@types/throttle-debounce": "^2.1.0",
+    "@types/uuid": "^9.0.2",
     "@typescript-eslint/eslint-plugin": "^5.38.1",
     "@typescript-eslint/parser": "^5.38.1",
     "@webpack-cli/serve": "^1.6.0",
-    "babel-plugin-module-resolver": "^5.0.0",
     "axios-mock-adapter": "^1.22.0",
+    "babel-loader": "^9.1.3",
+    "babel-plugin-module-resolver": "^5.0.0",
     "concurrently": "^6.3.0",
+    "css-loader": "^6.8.1",
     "dotenv": "^10.0.0",
     "eslint": "^7.14.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^3.4.0",
     "fake-indexeddb": "^4.0.0",
+    "file-loader": "^6.2.0",
     "husky": "^3.1.0",
     "jest": "^27.3.1",
     "lint-staged": "^11.2.6",
     "madge": "^5.0.1",
+    "mini-css-extract-plugin": "^2.7.6",
     "prettier": "^2.2.1",
+    "style-loader": "^3.3.3",
     "ts-jest": "^27.0.7",
     "ttypescript": "^1.5.15",
     "typescript": "^4.9.5",
@@ -103,4 +114,4 @@
       "eslint"
     ]
   }
-}
+}

react-example/.env.example

@@ -1,10 +1,18 @@
-# To make requests from this example app make sure you first create an .env file
-# and add the API key and JWT Secret to it like so (and uncomment the keys):
-# API_KEY=1234
-# JWT_SECRET=1234
+# Optional environment variables for local development. Start by creating a
+# called .env and add these values to it and change them appropriately.
+# Remember to uncomment the variables!
+
+# Only set BASE_URL if developing locally, as it will take precedence over the production api urls.
+# BASE_URL="https://api.iterable.com/api"
 
 # You can set the URL for the JWT generator here if needed
-# JWT_GENERATOR=http://localhost:5000/generate
+# JWT_GENERATOR=http://localhost:3000/generate
+
+# Set this to false to prevent messages from being consumed to fetch the same message(s) when testing changes locally.
+# ENABLE_INAPP_CONSUME=false
+
+# Toggle this to true if you would need to hit our EU APIs.
+# IS_EU_ITERABLE_SERVICE=false
 
 # Convenience variable to automatically set the login email during testing.
 # LOGIN_EMAIL=email@email.com

react-example/.eslintrc

@@ -5,6 +5,9 @@
   ],
   "rules": {
     "@typescript-eslint/no-empty-interface": "off",
-    "react/react-in-jsx-scope": "off"
-  }
+    "react/react-in-jsx-scope": "off",
+  },
+  "ignorePatterns": [
+    "node_modules/"
+  ]
 }

react-example/cypress/integration/inapp/inapp.spec.ts

@@ -1,6 +1,6 @@
 import * as mockMessages from '../../fixtures/inapp/200.json';
 
-const url = `/api/inApp/web/getMessages*`;
+const url = '/api/inApp/web/getMessages*';
 
 describe('Requesting In-App Messages', () => {
   it('should paint the correct 200 response', () => {

react-example/package.json

@@ -28,30 +28,28 @@
     "cypress": "cypress open"
   },
   "devDependencies": {
-    "@babel/core": "^7.9.0",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
-    "@babel/plugin-proposal-object-rest-spread": "^7.9.5",
+    "@babel/core": "^7.5.0",
+    "@babel/plugin-proposal-class-properties": "^7.5.5",
+    "@babel/plugin-proposal-object-rest-spread": "^7.5.5",
     "@babel/plugin-proposal-optional-chaining": "^7.14.5",
-    "@babel/preset-react": "^7.16.7",
-    "@babel/preset-typescript": "^7.9.0",
+    "@babel/preset-react": "^7.22.15",
+    "@babel/preset-typescript": "^7.6.0",
     "@types/jest": "^27.0.2",
-    "@types/react": "^17.0.38",
-    "@types/react-dom": "^17.0.11",
-    "@types/styled-components": "^5.1.21",
+    "@types/react": "^18.2.21",
+    "@types/react-dom": "^18.2.7",
+    "@types/styled-components": "^5.1.34",
     "@typescript-eslint/eslint-plugin": "^2.26.0",
     "@typescript-eslint/parser": "^2.26.0",
     "@webpack-cli/serve": "^1.6.0",
-    "babel-loader": "^8.1.0",
-    "babel-plugin-styled-components": "^2.0.2",
+    "babel-loader": "^9.1.3",
     "concurrently": "^6.3.0",
     "css-loader": "^6.5.1",
-    "cypress": "^9.3.1",
     "dotenv": "^10.0.0",
     "eslint": "^7.14.0",
     "eslint-config-prettier": "^8.1.0",
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-react": "^7.28.0",
-    "eslint-webpack-plugin": "^3.1.0",
+    "eslint-webpack-plugin": "3.1.0",
     "html-webpack-plugin": "^5.5.0",
     "jest": "^27.3.1",
     "mini-css-extract-plugin": "^2.5.2",
@@ -60,12 +58,15 @@
     "typescript": "^4.6.4",
     "webpack": "^5.76.0",
     "webpack-cli": "^4.9.1",
-    "webpack-dev-server": "^4.7.3"
+    "webpack-dev-server": "^4.7.3",
+    "@types/uuid": "^9.0.2"
   },
   "dependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "@iterable/web-sdk": "../",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-router-dom": "^6.2.1",
-    "styled-components": "^5.3.3"
+    "styled-components": "^5.3.3",
+    "uuid": "^9.0.0"
   }
 }