[VEG-874][VEG-754][VEG-604][VEG-631] modernise babel tooling, support TypeScript, and add idleState to the zaf_sdk to facilitate session tracking (#145)

* WIP: adding idleState to the zaf_sdk

* Run 'npm install'

* Run 'npx standard --fix' + fix minor oversight

* Start to add Typescript support

* Continue working at adding typescript support

* Continue attempting to add Typescript support

* Continue with adding typescript support ...

* Downgrade ts-loader to 8.3.0

* Remove unnecessary code

* Bump webpack so can run 'npm run server'

* Update uglify-js-plugin for webpack so can 'npm run server' without issue

* Add additional github actions on branch push

* Bump karma, add uglify plugin

* Move more webpack options to common config to be run in test mode as well

* Alter build script per change to webpack api

* Remove infinite loop task from github action workflow

* Remove nontest config object entirely to fix minified sourcemap issue

* Pass session_state_timeout as optional option

* Reword get idle state method and alter comments so as to clarify intent

* Remove default_idle_timeout constant from idleState util

* Remove unnecessary _removeObserverCallback attribute on IdleState class

* This block not needed as observer emits required information

* Handle iframe_session_timeout attribute passed on runningApp registration from ZAF

* Set the idleState object on app.registered only

* Simplify implementation as IdleState class is only called once in the zaf_sdk

* Add sourceMap output filename attribute to outputs

* Migrate from Uglify (deprecated) to Terser

* npm install

* npx standard --fix

* npm install terser-webpack-plugin --save-dev

* npm install --save babel-runtime

* npm install @types/node --save-dev

* npm i core-js --save

* Modernise babel compilation tooling

* Remove explicit reference to core-js

* Dont forget the .js before the .map

* Add options to @babel/preset-env

* Simplify determination as to whether we are in a test environment

Author: Christopher Goddard

.babelrc

@@ -0,0 +1,14 @@
+{
+  "plugins": ["@babel/plugin-transform-runtime"],
+  "presets": [
+    ["@babel/preset-env", {
+      "targets": {
+        "esmodules": true,
+        "browsers": [
+          "last 2 versions",
+          "last 1 ie version"
+        ]
+      }
+    }]
+  ]
+}

.github/workflows/actions.yml

@@ -18,6 +18,10 @@ jobs:
           - env:
               TASK: test
             command: npm test
+          
+          - env:
+              TASK: build
+            command: npm run build
 
     steps:
       - uses: zendesk/checkout@v2

lib/client.js

@@ -1,10 +1,13 @@
 /* global URL */
 import version from 'version'
 import { when, isObject, isString } from './utils'
+import IdleState from './utils/idleState'
 import Tracker from './tracker'
 import NativePromise from 'native-promise-only'
 
 const Promise = window.Promise || NativePromise
+
+export const IFRAME_SESSION_TIMEOUT = 5 * 60 * 1000 // Set timeout for iframe sessions to 5 minutes.
 export const PROMISE_TIMEOUT = 10000
 // 10 seconds, see ZD#4058685
 export const PROMISE_TIMEOUT_LONG = 5 * 60 * 1000
@@ -328,6 +331,8 @@ export default class Client {
     this._instanceClients = {}
     this._metadata = null
     this._context = options.context || null
+    this._iframe_session_timeout = options.iframe_session_timeout || IFRAME_SESSION_TIMEOUT
+    this._idleState = null
     this.ready = false
 
     if (!isOriginValid(this._origin)) {
@@ -347,6 +352,20 @@ export default class Client {
       this.ready = true
       this._metadata = data.metadata
       this._context = data.context
+      this._iframe_session_timeout = data.iframe_session_timeout
+      this._idleState = new IdleState(data.iframe_session_timeout)
+      // Add an observer.  This will be called when the idleState changes
+      this._idleState.addObserver(state => {
+        if (state === 'active') {
+          // ... application is now active, timeout clock is reset to zero
+          // Send a postMessage indicating liveness + possibly a payload too
+          this.postMessage('session.live')
+        } else if (state === 'idle') {
+          // ... application is now idle, timeout clock is ticking
+          // Send a postMessage indicating sessionTimeout + possibly a payload too
+          this.postMessage('session.idle')
+        }
+      })
     }, this)
 
     this.on('context.updated', (context) => {

lib/utils/environment.ts

@@ -0,0 +1,7 @@
+const NODE_ENV = process.env['NODE_ENV'];
+
+export const isProduction = NODE_ENV === 'production';
+
+export const isDevelopment = NODE_ENV === 'development';
+
+export const isTest = NODE_ENV === 'test';

lib/utils/idleState.ts

@@ -0,0 +1,209 @@
+import Observers, { ListenerFunction } from './listeners';
+
+/*
+  IdleState let you know if the application is active or idle. The application is considered idle if not user
+  interactions have been detected for a specific amount of time (timeout). To use IdleState, you first create an
+  IdleState instance, then you can either get the current state from the instance or add an observer to be called each
+  time the state changes.
+
+  When creating an instance, you can provide a timeout, by default timeout of 3 minutes is used. When done with the
+  IdleState instance, you must call the delete method to release it.
+
+  If several consumers create an idleState with the same timeout, only one instance is created. The instance is shared
+  between the consumers.
+
+  Syntax:
+    new IdleState();
+    new IdleState(timeout);
+
+    timeout: timeout in milliseconds, default is 3 minutes.
+
+  Properties:
+    IdleState.state:
+      current state as string, either 'active' or 'idle', read only.
+
+  Methods:
+    IdleState.addObserver(observer):
+      Add an observer to be called when the idle state changes. The observer receives the new state as parameter. You
+      can several observers.
+      Returns a function to be called to remove the observer.
+
+    IdleState.delete():
+      Release the IdleState instance. As the same instance can be shared with multiple consumers, it's important to call
+      delete() when done with it. But first, you should remove any observer you have added, else they will still be
+      called until all consumers have released the instance.
+
+  Usage:
+    import IdleState from 'utils/IdleState';
+
+    // Create an instance with a timeout of 2 minutes
+    const idleState = new IdleState(2 * 60 * 1000);
+
+    // Add an observer
+    const removeObserver = idleState.addObserver(state => {
+      if (state === 'active') {
+        // ... application is now active
+      } else if (state === 'idle') {
+        // ... application is now idle
+      }
+    });
+
+    // Read the current state
+    const currentState = idleState.state;
+
+    // When done, release the instance, but first remove the observer
+    removeObserver();
+    idleState.delete();
+*/
+
+import { isTest } from './environment';
+export const STATE_ACTIVE = 'active';
+export const STATE_IDLE = 'idle';
+
+const USER_EVENTS = ['mousemove', 'keydown', 'wheel', 'mousedown', 'touchstart', 'touchmove'];
+// list of user events to ignore when window hasn't focus as string, i.e. 'mousemove touchmove'
+const IGNORED_USER_EVENTS = 'mousemove';
+
+const stateProperty = Symbol('state');
+
+const setState = (idleState: IdleState, state: 'active' | 'idle') => {
+  if (idleState[stateProperty] !== state) {
+    idleState[stateProperty] = state;
+    idleState.observers && idleState.observers.call(state);
+  }
+};
+class IdleState {
+  refcount?: number;
+  timeout?: number;
+  [stateProperty]: 'active' | 'idle';
+  hasActiveEvent?: boolean;
+  timer?: number | null;
+  hasFocus?: boolean;
+  userEventListenerAdded?: boolean;
+  observers?: Observers;
+  setState?: (state: 'active' | 'idle') => void;
+
+  constructor(timeout) {
+    this.timeout = timeout;
+    this[stateProperty] = STATE_ACTIVE;
+    this.hasActiveEvent = true;
+    this.timer = null;
+    this.hasFocus = true;
+    this.userEventListenerAdded = false;
+    this.observers = new Observers();
+
+    this.refcount = 1;
+
+    // Bind callbacks
+    this.handleVisibilityChange = this.handleVisibilityChange.bind(this);
+    this.handleFocusChange = this.handleFocusChange.bind(this);
+    this.handleUserEvent = this.handleUserEvent.bind(this);
+    this.handleTimer = this.handleTimer.bind(this);
+
+    // Install listeners and timer
+    document.addEventListener('visibilitychange', this.handleVisibilityChange, true);
+
+    // Because Safari dispatches focus events before visibilitychange, we need to register focus/blurr listener here
+    // and not inside handleVisibilityChange with the other event listeners
+    window.addEventListener('focus', this.handleFocusChange, true);
+    window.addEventListener('blur', this.handleFocusChange, true);
+
+    this.handleVisibilityChange();
+    this.resetTimer();
+
+    // Add access to setState for testing
+    if (isTest) {
+      this.setState = (state) => {
+        setState(this, state);
+      };
+    }
+  }
+
+  delete(): void {
+    if (this.refcount !== undefined && --this.refcount === 0) {
+      document.removeEventListener('visibilitychange', this.handleVisibilityChange, true);
+      window.removeEventListener('focus', this.handleFocusChange, true);
+      window.removeEventListener('blur', this.handleFocusChange, true);
+
+      if (this.userEventListenerAdded) {
+        USER_EVENTS.forEach((type) =>
+          document.removeEventListener(type, this.handleUserEvent, true)
+        );
+      }
+
+      this.clearTimer();
+      delete this.observers;
+    }
+  }
+
+  get state(): 'active' | 'idle' {
+    return this[stateProperty];
+  }
+
+  clearTimer(): void {
+    if (this.timer) {
+      clearTimeout(this.timer);
+      this.timer = undefined;
+    }
+  }
+
+  resetTimer(): void {
+    this.clearTimer();
+    this.timer = window.setTimeout(this.handleTimer, this.timeout);
+  }
+
+  handleTimer(): void {
+    this.resetTimer();
+
+    if (this.hasActiveEvent) {
+      // we had user events during last timeout cycle,
+      // do not set state to idle yet
+      this.hasActiveEvent = false;
+    } else {
+      // we did not have user event during last timeout cycle,
+      // set state to idle now
+      setState(this, STATE_IDLE);
+    }
+  }
+
+  markActive(): void {
+    this.hasActiveEvent = true;
+    setState(this, STATE_ACTIVE);
+  }
+
+  handleUserEvent(event: Event): void {
+    if (!this.hasFocus && IGNORED_USER_EVENTS.includes(event.type)) return;
+
+    this.markActive();
+  }
+
+  handleFocusChange(event: Event): void {
+    // we only care about focus/blur event related to the window itself
+    if (event.target !== window) return;
+
+    this.hasFocus = event.type === 'focus';
+    if (this.hasFocus) {
+      this.markActive();
+    }
+  }
+
+  handleVisibilityChange(): void {
+    if (document.hidden) {
+      if (this.userEventListenerAdded) {
+        USER_EVENTS.forEach((type) =>
+          document.removeEventListener(type, this.handleUserEvent, true)
+        );
+        this.userEventListenerAdded = false;
+      }
+    } else if (!this.userEventListenerAdded) {
+      USER_EVENTS.forEach((type) => document.addEventListener(type, this.handleUserEvent, true));
+      this.userEventListenerAdded = true;
+    }
+  }
+
+  addObserver(observer: ListenerFunction): (() => void) | undefined {
+    return this.observers && this.observers.add(observer);
+  }
+}
+
+export default IdleState;

lib/utils/listeners.ts

@@ -0,0 +1,45 @@
+export type ListenerFunction = (...args: unknown[]) => void;
+
+interface Listener {
+  fn: ListenerFunction;
+  count: number;
+}
+
+class Listeners {
+  private listeners: Listener[];
+
+  constructor() {
+    this.listeners = [];
+  }
+
+  add(listener: ListenerFunction): () => void {
+    const find = (listener: ListenerFunction) =>
+      this.listeners.findIndex((item) => item.fn === listener);
+
+    const index = find(listener);
+    if (index === -1) {
+      this.listeners.push({ fn: listener, count: 1 });
+    } else {
+      const listener = this.listeners[index];
+      listener && listener.count++;
+    }
+
+    return () => {
+      const index = find(listener);
+
+      if (index !== -1) {
+        const listener = this.listeners[index];
+        listener && listener.count--;
+        if (listener && listener.count === 0) {
+          this.listeners.splice(index, 1);
+        }
+      }
+    };
+  }
+
+  call(...args: unknown[]): void {
+    this.listeners.forEach((listener) => listener.fn(...args));
+  }
+}
+
+export default Listeners;