Vue 2 partial support

.eslintignore

@@ -1,5 +1,6 @@
 node_modules
 dist
+v2
 build
 lib
 dts

.gitignore

@@ -1,5 +1,6 @@
 node_modules
 dist
+v2
 dts
 lib
 .DS_Store

packages/widget-vue/README.md

@@ -1,6 +1,6 @@
 # @livechat/widget-vue
 
-> This library allows to render and interact with the [LiveChat Chat Widget](https://developers.livechat.com/open-chat-widget/) inside a [Vue 3](https://v3.vuejs.org/) application.
+> This library allows to render and interact with the [LiveChat Chat Widget](https://developers.livechat.com/open-chat-widget/) inside a [Vue](https://vuejs.org/) application.
 
 [![mit](https://img.shields.io/badge/license-MIT-blue.svg)](https://choosealicense.com/licenses/mit/)
 ![Github lerna version](https://img.shields.io/github/lerna-json/v/livechat/chat-widget-adapters?label=version)
@@ -25,6 +25,8 @@ yarn add @livechat/widget-vue
 
 ### Render
 
+#### Vue 3
+
 ```html
 <script lang="ts" setup>
   import { LiveChatWidget, EventHandlerPayload } from '@livechat/widget-vue'
@@ -43,6 +45,34 @@ yarn add @livechat/widget-vue
 </template>
 ```
 
+#### Vue 2
+
+```html
+<template>
+  <LiveChatWidget
+    license="12345678"
+    visibility="maximized"
+    v-on:new-event="handleNewEvent"
+  />
+</template>
+
+<script>
+  import { LiveChatWidget } from '@livechat/widget-vue/v2'
+
+  export default {
+    name: 'App',
+    components: {
+      LiveChatWidget,
+    },
+    methods: {
+      handleNewEvent(event) {
+        console.log('LiveChatWidget.onNewEvent', event)
+      },
+    },
+  }
+</script>
+```
+
 ### Props
 
 #### Config data
@@ -79,6 +109,8 @@ All event handlers listed below are registered if provided for the first time. T
 
 This package exports a set of [Vue Composition API](https://v3.vuejs.org/api/composition-api.html#composition-api) utilities that allow consuming reactive data from the chat widget in any place of the application as long as the `LiveChatWidget` component is rendered in the tree.
 
+**The composition API is only availble for Vue 3 apps.**
+
 #### useWidgetState
 
 Access the current chat widget `availability` or `visibility` state if the chat widget is loaded.

packages/widget-vue/package.json

@@ -17,19 +17,22 @@
     "url": "https://github.com/livechat/chat-widget-adapters.git"
   },
   "files": [
-    "dist"
+    "dist",
+    "v2"
   ],
   "scripts": {
     "test": "jest",
     "coverage": "jest --coverage",
-    "build": "rimraf dist && rollup -c",
-    "start": "rollup -c -w"
+    "start": "rollup -c -w",
+    "build": "run-p build:*",
+    "build:default": "rimraf dist && rollup -c",
+    "build:vue2": "rimraf v2 && rollup -c rollup-vue2.config.js"
   },
   "dependencies": {
     "@livechat/widget-core": "^1.0.1"
   },
   "peerDependencies": {
-    "vue": "3"
+    "vue": "2 || 3"
   },
   "devDependencies": {
     "eslint-plugin-vue": "8.1.1",

packages/widget-vue/rollup-vue2.config.js

@@ -0,0 +1,110 @@
+import fs from 'fs'
+import { defineConfig } from 'rollup'
+import resolve from '@rollup/plugin-node-resolve'
+import babel from '@rollup/plugin-babel'
+import replace from '@rollup/plugin-replace'
+import { terser } from 'rollup-plugin-terser'
+
+import mainPkg from './package.json'
+
+const extensions = ['.ts']
+const pkg = {
+	main: 'LiveChatWidget.cjs.js',
+	module: 'LiveChatWidget.esm.js',
+	unpkg: 'LiveChatWidget.umd.js',
+}
+
+/**
+ * Babel plugin
+ *  1. Removes `defineComponent` import declarations:
+ *    a. `import { defineComponent } from 'vue'` => no import
+ *    b. `import Vue, { defineComponent } from 'vue'` => `import Vue from 'vue'`
+ *    c. `import { defineComponent, createApp } from 'vue'` => `import { createApp } from 'vue'`
+ *
+ *  3. Replaces `defineComponent` call with its first argument, for example:
+ *    a. `defineComponent({ template: '', props: {} })` => `{ template: '', props: {} }`
+ *    b. `export const Component = defineComponent({})` => `export const Component = {}`
+ */
+function removeVueDefineComponentCall() {
+	return {
+		visitor: {
+			Program(path) {
+				path.setData('calleeName', [])
+				path.traverse({
+					ImportDeclaration(_path) {
+						if (_path.get('importKind').node !== 'value' || _path.get('source.value').node !== 'vue') {
+							return
+						}
+
+						_path.setData('newSpecifiers', [])
+						_path.traverse({
+							'ImportSpecifier|ImportDefaultSpecifier'(__path) {
+								if (__path.get('imported.name').node === 'defineComponent') {
+									path.setData('calleeName', path.getData('calleeName').concat(__path.get('local.name').node))
+								} else {
+									_path.setData('newSpecifiers', _path.getData('newSpecifiers').concat(__path.node))
+								}
+							},
+						})
+
+						if (_path.getData('newSpecifiers').length === 0) {
+							_path.remove()
+						} else {
+							_path.set('specifiers', _path.getData('newSpecifiers'))
+						}
+					},
+					CallExpression(_path) {
+						if (path.getData('calleeName').includes(_path.get('callee.name').node)) {
+							_path.replaceWith(_path.get('arguments.0').node)
+						}
+					},
+				})
+			},
+		},
+	}
+}
+
+/**
+ * Rollup plugin
+ *  1. Makes new 'v2' directory where build outputs will be stored
+ *  2. Adds 'package.json' pointing to apropriate build output formats
+ */
+function makePkgJSON() {
+	return {
+		buildEnd() {
+			fs.mkdirSync('v2')
+			fs.writeFileSync('v2/package.json', JSON.stringify(pkg, null, 2))
+		},
+	}
+}
+
+export default defineConfig({
+	input: 'src/LiveChatWidget.ts',
+	external: ['vue', '@livechat/widget-core'],
+	plugins: [
+		resolve({ extensions }),
+		replace({ 'process.env.PACKAGE_NAME': JSON.stringify(`${String(mainPkg.name)}/v2`), preventAssignment: true }),
+		babel({ extensions, babelHelpers: 'bundled', plugins: [removeVueDefineComponentCall] }),
+		makePkgJSON(),
+	],
+	output: [
+		{
+			file: `v2/${pkg.module}`,
+			format: 'esm',
+		},
+		{
+			file: `v2/${pkg.main}`,
+			format: 'cjs',
+		},
+		{
+			file: `v2/${pkg.unpkg}`,
+			format: 'umd',
+			name: 'LiveChatWidgetVue',
+			plugins: [terser()],
+			globals: {
+				vue: 'Vue',
+				'@livechat/widget-core': 'LiveChatWidgetCore',
+			},
+		},
+	],
+})

packages/widget-vue/src/LiveChatWidget.ts

@@ -1,5 +1,4 @@
 import { defineComponent } from 'vue'
-import type { PropType } from 'vue'
 import { createWidget } from '@livechat/widget-core'
 import type { ExtendedWindow, WidgetInstance, WidgetConfig, CustomerData, WidgetState } from '@livechat/widget-core'
 
@@ -8,40 +7,52 @@ declare const window: ExtendedWindow
 export const LiveChatWidget = defineComponent({
 	props: {
 		license: {
-			type: Object as PropType<WidgetConfig['license']>,
+			type: String,
 			required: true,
 		},
 		group: {
-			type: Object as PropType<WidgetConfig['group']>,
+			type: String,
 			required: false,
 			default: undefined,
 		},
 		visibility: {
-			type: Object as PropType<WidgetConfig['visibility']>,
+			type: String,
 			required: false,
 			default: undefined,
 		},
 		customerName: {
-			type: Object as PropType<WidgetConfig['customerName']>,
+			type: String,
 			required: false,
 			default: undefined,
 		},
 		customerEmail: {
-			type: Object as PropType<WidgetConfig['customerEmail']>,
+			type: String,
 			required: false,
 			default: undefined,
 		},
 		sessionVariables: {
-			type: Object as PropType<WidgetConfig['sessionVariables']>,
+			type: Object,
 			required: false,
 			default: undefined,
 		},
 		chatBetweenGroups: {
-			type: Object as PropType<WidgetConfig['chatBetweenGroups']>,
+			type: Boolean,
 			required: false,
 			default: undefined,
 		},
 	},
+	emits: [
+		'ready',
+		'new-event',
+		'form-submitted',
+		'rating-submitted',
+		'greeting-hidden',
+		'greeting-displayed',
+		'visibility-changed',
+		'customer-status-changed',
+		'rich-message-button-clicked',
+		'availability-changed',
+	],
 	data(): { widget: WidgetInstance | null } {
 		return {
 			widget: null,
@@ -72,25 +83,24 @@ export const LiveChatWidget = defineComponent({
 	},
 	methods: {
 		setupWidget() {
-			const emit = this.$emit
 			this.widget = createWidget({
 				group: this.group,
 				license: this.license,
-				visibility: this.visibility,
 				customerName: this.customerName,
 				customerEmail: this.customerEmail,
 				sessionVariables: this.sessionVariables,
 				chatBetweenGroups: this.chatBetweenGroups,
-				onReady: (data) => emit('ready', data),
-				onNewEvent: (event) => emit('new-event', event),
-				onFormSubmitted: (form) => emit('form-submitted', form),
-				onRatingSubmitted: (rating) => emit('rating-submitted', rating),
-				onGreetingHidden: (greeting) => emit('greeting-hidden', greeting),
-				onGreetingDisplayed: (greeting) => emit('greeting-displayed', greeting),
-				onVisibilityChanged: (visibility) => emit('visibility-changed', visibility),
-				onCustomerStatusChanged: (status) => emit('customer-status-changed', status),
-				onRichMessageButtonClicked: (button) => emit('rich-message-button-clicked', button),
-				onAvailabilityChanged: (availability) => emit('availability-changed', availability),
+				visibility: this.visibility as WidgetConfig['visibility'],
+				onReady: (data) => this.$emit('ready', data),
+				onNewEvent: (event) => this.$emit('new-event', event),
+				onFormSubmitted: (form) => this.$emit('form-submitted', form),
+				onRatingSubmitted: (rating) => this.$emit('rating-submitted', rating),
+				onGreetingHidden: (greeting) => this.$emit('greeting-hidden', greeting),
+				onGreetingDisplayed: (greeting) => this.$emit('greeting-displayed', greeting),
+				onVisibilityChanged: (visibility) => this.$emit('visibility-changed', visibility),
+				onCustomerStatusChanged: (status) => this.$emit('customer-status-changed', status),
+				onRichMessageButtonClicked: (button) => this.$emit('rich-message-button-clicked', button),
+				onAvailabilityChanged: (availability) => this.$emit('availability-changed', availability),
 			})
 			window.__lc.integration_name = process.env.PACKAGE_NAME
 			this.widget.init()
@@ -100,4 +110,7 @@ export const LiveChatWidget = defineComponent({
 			this.setupWidget()
 		},
 	},
+	render() {
+		return null
+	},
 })