chore: upgrade build infrastructure (#171)

Author: gyoshev

.gitignore

@@ -114,3 +114,4 @@ com_crashlytics_export_strings.xml
 crashlytics.properties
 crashlytics-build.properties
 fabric.properties
+test/e2e/dist/

jest.config.js

@@ -1,3 +1,4 @@
 module.exports = {
   preset: 'ts-jest',
+  testEnvironment: 'jsdom'
 };

package.json

@@ -4,7 +4,7 @@
     "clean": "rimraf dist",
     "lint": "yarn eslint 'src/**/*.{ts,tsx}'",
     "start": "cross-env NODE_ENV=development webpack --watch",
-    "e2e-build": "tsc --project tsconfig.e2e.json && yarn run e2e-copy",
+    "e2e-build": "mkdir -p ./test/e2e/dist/ && cp ./dist/leanplum.js ./test/e2e/dist/leanplum.js && tsc --project tsconfig.e2e.json && yarn run e2e-copy",
     "e2e-copy": "cp ./test/e2e/*.html ./dist/e2e/ && cp ./dist/*.js ./dist/e2e/ && cp ./dist/sw/*.js ./dist/e2e/",
     "e2e-deploy": "yarn run e2e-build && now deploy dist/e2e --confirm --local-config vercel.json",
     "e2e-serve": "yarn run e2e-build && http-server dist/e2e -p 8989 -a localhost",
@@ -19,7 +19,7 @@
     "@types/jest": "^25.2.1",
     "@types/jquery": "^3.3.38",
     "@types/node": "^13.13.4",
-    "@types/webpack": "^4.41.12",
+    "@types/webpack": "^5",
     "@typescript-eslint/eslint-plugin": "^2.29.0",
     "@typescript-eslint/parser": "^2.29.0",
     "chai": "^3.5.0",
@@ -29,21 +29,21 @@
     "eslint-loader": "^4.0.0",
     "fork-ts-checker-webpack-plugin": "^4.1.3",
     "http-server": "^0.12.1",
-    "jest": "^25.4.0",
-    "jsdom": "^9.12.0",
+    "jest": "^29",
+    "jest-environment-jsdom": "^29.3.1",
+    "jsdom": "^20.0.3",
     "lodash.isequal": "^4.5.0",
     "lodash.merge": "^4.6.2",
     "mock-local-storage": "^1.0.2",
     "rimraf": "^3.0.2",
     "semantic-release": "^19.0.2",
     "sinon": "^2.1.0",
-    "ts-jest": "^25.4.0",
-    "ts-loader": "^7.0.1",
-    "ts-node": "^8.9.1",
-    "typescript": "^3.8.3",
-    "uglifyjs-webpack-plugin": "^2.2.0",
-    "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.11"
+    "ts-jest": "^29",
+    "ts-loader": "^9",
+    "ts-node": "^10",
+    "typescript": "^4",
+    "webpack": "^5",
+    "webpack-cli": "^5"
   },
   "name": "leanplum-sdk",
   "description": "The JavaScript SDK for Leanplum allows developers to integrate the Leanplum platform with applications that use JavaScript and HTML5. Leanplum is an customer engagement platform that provides mobile A/B testing, messaging, and personalization features for websites and web applications.",

src/Messages.ts

@@ -372,7 +372,7 @@ export default class Messages {
     if ('srcdoc' in iframe) {
       iframe.srcdoc = content
     } else {
-      const doc = iframe.contentWindow.document
+      const doc = (iframe as HTMLIFrameElement).contentWindow.document
       doc.open()
       doc.write(content)
       doc.close()

test/e2e/index.ts

@@ -1,5 +1,4 @@
-declare const Leanplum: typeof import('../../dist/leanplum').default
-import { RenderOptions } from '../../dist/leanplum'
+import Leanplum from './dist/leanplum'
 
 const isProdKey = (accessKey: string): boolean => /^prod_/.test(accessKey)
 
@@ -257,7 +256,7 @@ function renderAppInbox(): void {
 
 // register handler for in-app messages
 Leanplum.enableRichInAppMessages(true)
-Leanplum.on('showMessage', (args: RenderOptions) => {
+Leanplum.on('showMessage', (args) => {
   const { message, context } = args
   let title, body
   const buttons = []

test/specs/Leanplum.test.ts

@@ -316,7 +316,7 @@ Object.keys(testModes).forEach((mode) => {
     })
 
     describe('Test variable changed callback after forceContentUpdate.', () => {
-      it('test setVariable forceContentUpdate', async (done) => {
+      it('test setVariable forceContentUpdate', (done) => {
         interceptRequest((request) => {
           const methodName = getAction(request)
           if (methodName == 'getVars'){

test/specs/LeanplumIntegration.test.ts

@@ -94,7 +94,7 @@ describe('Integration Tests', () => {
     })
   })
 
-  it('pushes notification token when registering with LP', async (done) => {
+  it('pushes notification token when registering with LP', (done) => {
     mockNextResponse(migrationResponses.DUPLICATE)
     mockNextResponse(startResponse)
 
@@ -106,7 +106,6 @@ describe('Integration Tests', () => {
 
       done()
     })
-
   })
 
   it('pushes previously registered notification token', (done) => {

test/specs/Messages.test.ts

@@ -12,7 +12,7 @@ describe(Messages, () => {
   let getFileUrl: jest.Mock
 
   beforeEach(() => {
-    localStorage.clear()
+    window.localStorage.clear()
     Network.prototype.ajax = jest.fn()
     events = new EventEmitter()
     createRequest = jest.fn().mockImplementation((_, __, options) => options?.response())
@@ -1194,7 +1194,7 @@ describe(Messages, () => {
 
       events.emit('track', { eventName: 'Add to cart' })
 
-      await (new Promise(resolve => setImmediate(resolve)));
+      await (new Promise(resolve => setTimeout(resolve, 0)));
       const messageVars = JSON.stringify({ messageId: "12345", ...vars })
       expect(iframe.srcdoc).toEqual(
         `<body><script>window.messageId='12345'</script>${messageVars}</body>`

tsconfig.json

@@ -2,6 +2,7 @@
   "compilerOptions": {
     "allowJs": true,
     "allowSyntheticDefaultImports": true,
+    "declaration": true,
     "esModuleInterop": true,
     "lib": [
       "dom",

webpack.config.ts

@@ -4,7 +4,7 @@ import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'
 import fs from 'fs'
 import merge from 'lodash.merge'
 import path from 'path'
-import UglifyJS from 'uglifyjs-webpack-plugin'
+import TerserPlugin from 'terser-webpack-plugin';
 import webpack from 'webpack'
 
 let configuration = null
@@ -16,8 +16,9 @@ class DtsBundlePlugin {
 
   apply(compiler: webpack.Compiler): void {
     compiler.hooks.done.tap('DtsBundlePlugin', (stats) => {
+      return;
       // Do not bundle TypeScript declaration files if there are errors.
-      if (stats.compilation.errors?.length) {
+      if (stats.hasErrors()) {
         return
       }
 
@@ -59,24 +60,19 @@ class DtsBundlePlugin {
   }
 }
 
-const optimization: webpack.Options.Optimization = {
+const optimization = {
   minimize: true,
   minimizer: [
-    new UglifyJS({
-      cache: true,
+    new TerserPlugin({
       parallel: true,
-      uglifyOptions: {
+      terserOptions: {
+        // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
         ecma: 5,
         mangle: true,
-        output: {
-          beautify: false,
-          comments: false,
-        },
-        warnings: false,
       },
     }),
   ],
-  noEmitOnErrors: true,
+  emitOnErrors: false,
   sideEffects: true,
   usedExports: true,
 }