[VEG-1404] Enable ZAF SDK to be imported as a Node Module

dist/zaf_sdk.js.LICENSE.txt

@@ -0,0 +1,4 @@
+/*! Native Promise Only
+    v0.8.1 (c) Kyle Simpson
+    MIT License: http://getify.mit-license.org
+*/

dist/zaf_sdk.min.js.LICENSE.txt

@@ -0,0 +1,4 @@
+/*! Native Promise Only
+    v0.8.1 (c) Kyle Simpson
+    MIT License: http://getify.mit-license.org
+*/

lib/client.js

@@ -1,5 +1,5 @@
 /* global URL */
-import version from 'version'
+import pkgJson from '../package.json'
 import { when, isObject, isString } from './utils'
 import IdleState from './utils/idleState'
 import Tracker from './tracker'
@@ -380,7 +380,7 @@ export default class Client {
     const tracker = new Tracker(this)
     tracker.setup()
     window.addEventListener('message', messageHandler.bind(null, this))
-    this.postMessage('iframe.handshake', { version: version })
+    this.postMessage('iframe.handshake', { version: pkgJson.version })
   }
 
   /**

package.json

@@ -1,7 +1,7 @@
 {
   "name": "zendesk_app_framework_sdk",
   "version": "2.0.33",
-  "main": "lib/zendesk-app-framework-sdk.js",
+  "main": "dist/zaf_sdk.min.js",
   "description": "The Zendesk App Framework (ZAF) SDK is a JavaScript library that simplifies cross-frame communication between iframed apps and ZAF.",
   "homepage": "http://developer.zendesk.com",
   "bugs": "[email protected]",
@@ -11,9 +11,7 @@
     "url": "http://developer.zendesk.com"
   },
   "engines": {
-    "node": ">=12.10.0",
-    "npm": ">=5.6.0",
-    "yarn": "Yarn is disabled for this project, use npm instead"
+    "node": ">=12.10.0"
   },
   "repository": {
     "type": "git",
@@ -82,5 +80,10 @@
     "snyk-protect": "snyk protect",
     "prepare": "npm run snyk-protect"
   },
+  "standard": {
+    "ignore": [
+      "/dist/"
+    ]
+  },
   "snyk": true
 }

spec/client_spec.js

@@ -2,7 +2,7 @@
 /* global expect Promise */
 import Client, * as clientUtils from '../lib/client'
 import Tracker from '../lib/tracker'
-import version from 'version'
+import pkgJson from '../package.json'
 import sinon from 'sinon'
 
 describe('#collateActions', () => {
@@ -200,7 +200,7 @@ describe('Client', () => {
     it('posts an "iframe.handshake" message when initialised', () => {
       const data = {
         key: 'iframe.handshake',
-        message: { version: version },
+        message: { version: pkgJson.version },
         appGuid: appGuid,
         instanceGuid: appGuid
       }

webpack.config.js

@@ -1,5 +1,4 @@
 const path = require('path')
-const packageJson = require('./package.json')
 const webpackMerge = require('webpack-merge')
 const TerserPlugin = require('terser-webpack-plugin')
 const Visualizer = require('webpack-visualizer-plugin')
@@ -40,21 +39,20 @@ const commonConfig = {
   },
 
   output: {
-    library: 'ZAFClient',
-    libraryExport: 'default',
+    library: {
+      name: 'ZAFClient',
+      type: 'umd',
+      export: 'default'
+    },
     filename: '[name].js',
     sourceMapFilename: '[name].js.map',
-    path: path.resolve(__dirname, 'build')
+    path: path.resolve(__dirname, 'dist')
   },
 
-  externals: {
-    version: `"${packageJson.version}"`
-  },
-
-  // Note: devServer does not serve from build/, but from cache. It also doesn't respect mode
+  // Note: devServer does not serve from dist/, but from cache. It also doesn't respect mode
   // so outputed files are very different from server/build/build:dev
   devServer: {
-    contentBase: path.join(__dirname, 'build'),
+    contentBase: path.join(__dirname, 'dist'),
     hot: false,
     inline: false,
     compress: true,