Update typescript, node, eslint and other dependencies, fix lint erro…

…rs (#441)

* update many dependencies including typescript, fix lint errors, run prettier as lint rule

* upgrade bk node version (#442)

* node 14

* update size limit by 3 bytes (likely some ts tweak)

* move eslint to external

* add comments to eslint

* make extras an object again

Co-authored-by: Pooya Jaferian <[email protected]>

.buildkite/Dockerfile.agent

@@ -1,4 +1,4 @@
-FROM 528451384384.dkr.ecr.us-west-2.amazonaws.com/buildkite-agent-node12
+FROM 528451384384.dkr.ecr.us-west-2.amazonaws.com/buildkite-agent-node14
 
 # 2. Install WebKit dependencies
 RUN apt-get update && apt-get install -y --no-install-recommends \

.eslintrc

@@ -1,34 +1,55 @@
 {
-  "ignorePatterns": ["/node_modules/", "/dist/", "/example/", "/e2e-tests/", "/qa/"],
+  "ignorePatterns": [
+    "/node_modules/",
+    "/dist/",
+    "/example/",
+    "/e2e-tests/",
+    "/qa/",
+    "/*.tmp.*/"
+  ],
   "parserOptions": {
     "ecmaVersion": 2019
   },
   "env": {
     "node": true
   },
-  "extends": ["eslint:recommended", "prettier"],
+  "extends": [
+    // Turn on on eslint recommended rules https://github.com/eslint/eslint/blob/main/conf/eslint-recommended.js
+    "eslint:recommended",
+    // Turn off eslint rules that conflict with prettier https://github.com/prettier/eslint-config-prettier/blob/main/index.js
+    "prettier"
+  ],
   "overrides": [
     {
-      "files": ["*.{ts,tsx}"],
+      "files": [
+        "*.{ts,tsx}"
+      ],
       "parser": "@typescript-eslint/parser",
       "parserOptions": {
         "project": "./tsconfig.json"
       },
       "extends": [
+        // Disable rules from eslint:recommended which are already handled by TypeScript. Enables eslint (@not typescript-eslint) rules that make sense due to TS's typechecking / transpilation.
+        // https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/src/configs/eslint-recommended.ts
         "plugin:@typescript-eslint/eslint-recommended",
+        // Enable recommended rules from @typescript-eslint
+        // https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/src/configs/recommended.ts
         "plugin:@typescript-eslint/recommended",
-        "plugin:@typescript-eslint/recommended-requiring-type-checking",
-        "prettier/@typescript-eslint"
+        // Handle prettier rules through eslint https://github.com/prettier/eslint-plugin-prettier/blob/master/eslint-plugin-prettier.js#L65
+        "plugin:prettier/recommended"
       ],
       "rules": {
         "@typescript-eslint/explicit-function-return-type": "off",
         "@typescript-eslint/ban-ts-ignore": "off",
+        "@typescript-eslint/ban-ts-comment": "off",
         "@typescript-eslint/no-unused-vars": "off",
+        "@typescript-eslint/no-explicit-any": "off",
         "@typescript-eslint/no-non-null-assertion": "off",
         "@typescript-eslint/no-floating-promises": "error",
         "@typescript-eslint/require-await": "off",
-        "@typescript-eslint/no-empty-function": "off"
+        "@typescript-eslint/no-empty-function": "off",
+        "@typescript-eslint/ban-types": "off" // TODO: turn on
       }
     }
   ]
-}
+}

.github/workflows/build-and-test.yml

@@ -8,7 +8,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-          node-version: '12.x'
+          node-version: '14.x'
           registry-url: 'https://registry.npmjs.org'
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path

.gitignore

@@ -5,3 +5,4 @@
 stats.json
 /coverage
 e2e-tests/data/requests/*.json
+*tmp*

.nvmrc

@@ -1 +1 @@
-12.22
+14.17

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 80,
+  "tabWidth": 2,
+  "arrowParens": "always"
+}

jest.config.js

@@ -14,6 +14,7 @@ module.exports = {
   moduleNameMapper: {
     '@/(.+)': '<rootdir>/../../src/$1',
   },
+  setupFilesAfterEnv: ['./jest.setup.js'],
   globals: {
     'ts-jest': {
       isolatedModules: true,

jest.setup.js

@@ -0,0 +1,5 @@
+const { TextEncoder, TextDecoder } = require('util')
+
+// fix: "ReferenceError: TextEncoder is not defined" after upgrading JSDOM
+global.TextEncoder = TextEncoder
+global.TextDecoder = TextDecoder

package.json

@@ -31,18 +31,12 @@
   "size-limit": [
     {
       "path": "dist/umd/index.js",
-      "limit": "25.0 KB"
+      "limit": "25.05 KB"
     }
   ],
-  "prettier": {
-    "semi": false,
-    "singleQuote": true,
-    "printWidth": 80
-  },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [
-      "eslint --fix",
-      "prettier --write"
+      "eslint --fix"
     ],
     "*.{yml,md,json}": [
       "prettier --write"
@@ -61,7 +55,7 @@
     "js-cookie": "^2.2.1",
     "node-fetch": "^2.6.7",
     "spark-md5": "^3.0.1",
-    "tslib": "^2.1.0",
+    "tslib": "^2.4.0",
     "unfetch": "^4.1.0"
   },
   "devDependencies": {
@@ -73,7 +67,7 @@
     "@types/jest-dev-server": "^4.2.0",
     "@types/jquery": "^3.5.4",
     "@types/js-cookie": "^2.2.6",
-    "@types/jsdom": "^16.2.5",
+    "@types/jsdom": "^16.2.14",
     "@types/lodash": "^4.14.161",
     "@types/md5": "^2.2.0",
     "@types/mime": "^2.0.3",
@@ -84,8 +78,8 @@
     "@types/sinon": "^9.0.10",
     "@types/spark-md5": "^3.0.2",
     "@types/test-listen": "^1.1.0",
-    "@typescript-eslint/eslint-plugin": "^2.25.0",
-    "@typescript-eslint/parser": "^2.25.0",
+    "@typescript-eslint/eslint-plugin": "^5.21.0",
+    "@typescript-eslint/parser": "^5.21.0",
     "@wdio/cli": "^6.10.5",
     "@wdio/jasmine-framework": "^6.10.4",
     "@wdio/local-runner": "^6.10.5",
@@ -97,9 +91,9 @@
     "compression-webpack-plugin": "^8.0.1",
     "concurrently": "^5.3.0",
     "delay": "^4.4.0",
-    "electron": "^11.3.0",
-    "eslint": "^6.8.0",
-    "eslint-config-prettier": "^6.10.1",
+    "eslint": "^8.14.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-prettier": "^4.0.0",
     "execa": "^4.1.0",
     "express": "^4.17.1",
     "flat": "^5.0.2",
@@ -108,7 +102,7 @@
     "jest": "^26.6.3",
     "jest-dev-server": "^4.4.0",
     "jquery": "^3.5.1",
-    "jsdom": "^16.4.0",
+    "jsdom": "^19.0.0",
     "lighthouse": "^7.3.0",
     "lint-staged": "^10.0.9",
     "log-update": "^4.0.0",
@@ -118,7 +112,7 @@
     "np": "^7.5.0",
     "p-map": "^4.0.0",
     "playwright": "^1.20.0",
-    "prettier": "^2.0.2",
+    "prettier": "^2.6.2",
     "serve": "^12.0.0",
     "serve-handler": "^6.1.3",
     "sinon": "^9.2.4",
@@ -128,7 +122,7 @@
     "ts-jest": "^26.4.4",
     "ts-loader": "^9.1.1",
     "ts-node": "^9.0.0",
-    "typescript": "^3.8.3",
+    "typescript": "^4.6.4",
     "wdio-chromedriver-service": "^6.0.4",
     "webpack": "^5.36.1",
     "webpack-bundle-analyzer": "^4.4.2",

src/__tests__/csp-detection.test.ts

@@ -80,11 +80,11 @@ describe('CSP Detection', () => {
     jest.spyOn(console, 'warn').mockImplementationOnce(() => {})
 
     windowSpy.mockImplementation(() => {
-      return (jsd.window as unknown) as Window & typeof globalThis
+      return jsd.window as unknown as Window & typeof globalThis
     })
 
     documentSpy.mockImplementation(
-      () => (jsd.window.document as unknown) as Document
+      () => jsd.window.document as unknown as Document
     )
   })
 
@@ -126,10 +126,10 @@ describe('CSP Detection', () => {
 
     const warnSpy = jest.spyOn(console, 'warn')
 
-    await onCSPError(({
+    await onCSPError({
       blockedURI: 'cdn.segment.com',
       disposition: 'report',
-    } as unknown) as SecurityPolicyViolationEvent)
+    } as unknown as SecurityPolicyViolationEvent)
 
     expect(warnSpy).not.toHaveBeenCalled()
     expect(Array.from(document.scripts)).toEqual(ogScripts)

src/__tests__/integration.test.ts

@@ -652,7 +652,7 @@ describe('addDestinationMiddleware', () => {
 
     const windowSpy = jest.spyOn(global, 'window', 'get')
     windowSpy.mockImplementation(
-      () => (jsd.window as unknown) as Window & typeof globalThis
+      () => jsd.window as unknown as Window & typeof globalThis
     )
   })
 
@@ -755,16 +755,14 @@ describe('deregister', () => {
 
     const windowSpy = jest.spyOn(global, 'window', 'get')
     windowSpy.mockImplementation(
-      () => (jsd.window as unknown) as Window & typeof globalThis
+      () => jsd.window as unknown as Window & typeof globalThis
     )
   })
 
   it('deregisters a plugin given its name', async () => {
-    const unload = jest.fn(
-      (): Promise<unknown> => {
-        return Promise.resolve()
-      }
-    )
+    const unload = jest.fn((): Promise<unknown> => {
+      return Promise.resolve()
+    })
     xt.unload = unload
 
     const [analytics] = await AnalyticsBrowser.load({
@@ -932,7 +930,7 @@ describe('.Integrations', () => {
 
     const windowSpy = jest.spyOn(global, 'window', 'get')
     windowSpy.mockImplementation(
-      () => (jsd.window as unknown) as Window & typeof globalThis
+      () => jsd.window as unknown as Window & typeof globalThis
     )
   })
 

src/__tests__/query-string.integration.test.ts

@@ -31,7 +31,7 @@ describe('queryString', () => {
 
     const windowSpy = jest.spyOn(global, 'window', 'get')
     windowSpy.mockImplementation(
-      () => (jsd.window as unknown) as Window & typeof globalThis
+      () => jsd.window as unknown as Window & typeof globalThis
     )
   })
 

src/__tests__/standalone-analytics.test.ts

@@ -84,11 +84,11 @@ describe('standalone bundle', () => {
     jest.spyOn(console, 'warn').mockImplementationOnce(() => {})
 
     windowSpy.mockImplementation(() => {
-      return (jsd.window as unknown) as Window & typeof globalThis
+      return jsd.window as unknown as Window & typeof globalThis
     })
 
     documentSpy.mockImplementation(
-      () => (jsd.window.document as unknown) as Document
+      () => jsd.window.document as unknown as Document
     )
   })
 

src/__tests__/standalone-errors.test.ts

@@ -73,11 +73,11 @@ describe('standalone bundle', () => {
     jest.spyOn(console, 'warn').mockImplementationOnce(() => {})
 
     windowSpy.mockImplementation(() => {
-      return (jsd.window as unknown) as Window & typeof globalThis
+      return jsd.window as unknown as Window & typeof globalThis
     })
 
     documentSpy.mockImplementation(
-      () => (jsd.window.document as unknown) as Document
+      () => jsd.window.document as unknown as Document
     )
   })
 

src/__tests__/standalone.test.ts

@@ -74,11 +74,11 @@ describe('standalone bundle', () => {
     jest.spyOn(console, 'warn').mockImplementationOnce(() => {})
 
     windowSpy.mockImplementation(() => {
-      return (jsd.window as unknown) as Window & typeof globalThis
+      return jsd.window as unknown as Window & typeof globalThis
     })
 
     documentSpy.mockImplementation(
-      () => (jsd.window.document as unknown) as Document
+      () => jsd.window.document as unknown as Document
     )
   })
 

src/analytics.ts

@@ -139,13 +139,8 @@ export class Analytics extends Emitter {
   }
 
   async page(...args: PageParams): Promise<DispatchedEvent> {
-    const [
-      category,
-      page,
-      properties,
-      options,
-      callback,
-    ] = resolvePageArguments(...args)
+    const [category, page, properties, options, callback] =
+      resolvePageArguments(...args)
 
     const segmentEvent = this.eventFactory.page(
       category,
@@ -226,13 +221,8 @@ export class Analytics extends Emitter {
   }
 
   async screen(...args: PageParams): Promise<DispatchedEvent> {
-    const [
-      category,
-      page,
-      properties,
-      options,
-      callback,
-    ] = resolvePageArguments(...args)
+    const [category, page, properties, options, callback] =
+      resolvePageArguments(...args)
 
     const segmentEvent = this.eventFactory.screen(
       category,

src/browser-umd.ts

@@ -4,14 +4,12 @@ import { setVersionType } from './plugins/segmentio/normalize'
 if (process.env.ASSET_PATH) {
   if (process.env.ASSET_PATH === '/dist/umd/') {
     // @ts-ignore
-    // eslint-disable-next-line @typescript-eslint/camelcase
     __webpack_public_path__ = '/dist/umd/'
   } else {
     const cdn = getCDN()
     setGlobalCDNUrl(cdn) // preserving original behavior -- TODO: neccessary?
 
     // @ts-ignore
-    // eslint-disable-next-line @typescript-eslint/camelcase
     __webpack_public_path__ = cdn + '/analytics-next/bundles/'
   }
 }

src/core/query-string/__tests__/pickPrefix.test.ts

@@ -3,9 +3,7 @@ import { pickPrefix } from '../pickPrefix'
 describe('pickPrefix', () => {
   it('strips a single prefix to creates an object', () => {
     const traits = pickPrefix('ajs_traits_', {
-      /* eslint-disable @typescript-eslint/camelcase */
       ajs_traits_address: '12-123 St.',
-      /* eslint-enable @typescript-eslint/camelcase */
     })
 
     const output = {
@@ -17,11 +15,9 @@ describe('pickPrefix', () => {
 
   it('stripts multiple prefixes to create an object', () => {
     const traits = pickPrefix('ajs_traits_', {
-      /* eslint-disable @typescript-eslint/camelcase */
       ajs_traits_address: '12-123 St.',
       ajs_traits_city: 'Vancouver',
       ajs_traits_province: 'BC',
-      /* eslint-enable @typescript-eslint/camelcase */
     })
 
     const output = {