Vue 2 partial support

[walaszczykm]

Type of change

• Docs
• Bug fix
• Feature

Packages

• @livechat/widget-core
• @livechat/widget-react
• @livechat/widget-vue
• @livechat/widget-angular

Issue

Resolves #27

Description

Add partial support for Vue 2 by exporting additional submodule v2 which exports the LiveChatWidget component compatible with Vue 2. The "hooks" using Composition API will still be Vue 3 exclusive feature as the overall Composition API is a new feature since version 3.

The usage in Vue 2 app is as follows:

<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>

To achieve compatibility with both Vue 2 and Vue 3 for LiveChatWidget component it is defined with an "old" Options API approach (as opposed to Composition API with setup method or setup script).

In order to resolve imports issues and no existence of defineComponent function in vue@2 package but still offer to reach TypeScript support for Vue 3 there is a new dedicated build pipeline for Vue 2 submodule defined in packages/widget-vue/rollup-vue2.config.js. Aside from the typical Rollup configuration for input and output files, it includes a custom Babel plugin for removing imports and usages of defineComponent from the output file leaving plain object component definition as an export. That way it can be consumed by Vue 2 application without compatibility error.

The LiveChatWidget component required some slight adjustments to be both compatible with Vue 2 and 3:

• Refactor prop types definitions from using PropType to type constructor (String, Object, Boolean etc.)
• Add render() methods that explicitly return nothing (null)
• Add emits property which contains a list of events that consumers can listen on this component.
• Use this.emit$ directly in handlers and let Babel extract this reference binding.