feat(): add vue2 support using vue-demi dependency

Author: Toilal

package-lock.json

@@ -13,12 +13,12 @@
     "url": "https://github.com/baloise/vue-keycloak.git"
   },
   "scripts": {
-    "test": "jest",
+    "test": "vue-demi-switch 3 vue3 && jest && vue-demi-switch 2.7 vue27 && jest && vue-demi-switch 2 vue2 && jest && vue-demi-switch 3 vue3",
     "test:watch": "jest --watchAll",
     "build": "npm run build:clean && npm run build:compile && npm run build:bundle",
     "build:clean": "rimraf dist && rimraf dist-transpiled",
-    "build:compile": "tsc -p .",
-    "build:bundle": "rollup --config rollup.config.js",
+    "build:compile": "vue-demi-switch 3 vue3 && tsc -p .",
+    "build:bundle": "vue-demi-switch 3 vue3 && rollup --config rollup.config.js",
     "lint": "eslint src --ext .ts,vue",
     "format": "npm run prettier:write",
     "prettier:write": "prettier --write \"./src\"",
@@ -37,10 +37,19 @@
     "composition-api"
   ],
   "license": "Apache-2.0",
+  "dependencies": {
+    "vue-demi": "^0.13"
+  },
   "peerDependencies": {
+    "@vue/composition-api": "^1.3.0",
     "jwt-decode": "^3.1.2",
     "keycloak-js": "^12.0.4",
-    "vue": "^3.0.8"
+    "vue": "^2 || ^3"
+  },
+  "peerDependenciesMeta": {
+    "@vue/composition-api": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@semantic-release/changelog": "^5.0.1",
@@ -50,6 +59,7 @@
     "@types/jest": "^26.0.22",
     "@typescript-eslint/eslint-plugin": "^4.19.0",
     "@typescript-eslint/parser": "^4.19.0",
+    "@vue/composition-api": "^1.3.0",
     "@vue/eslint-config-prettier": "^6.0.0",
     "@vue/eslint-config-typescript": "^7.0.0",
     "eslint": "^7.23.0",
@@ -64,7 +74,8 @@
     "semantic-release": "^17.4.2",
     "ts-jest": "^26.5.4",
     "typescript": "^4.2.3",
-    "vue": "^3.0.8"
-  },
-  "dependencies": {}
+    "vue27": "npm:vue@^2.7",
+    "vue2": "npm:vue@<2.7",
+    "vue3": "npm:vue@^3"
+  }
 }

package.json

@@ -12,8 +12,8 @@ export default {
       dir: 'dist/',
       format: 'commonjs',
       preferConst: true,
-      sourcemap: true,
-    },
+      sourcemap: true
+    }
   ],
-  external: ['keycloak-js', 'jwt-decode', 'vue'],
+  external: ['keycloak-js', 'jwt-decode', 'vue-demi', 'vue']
 }

rollup.config.js

@@ -1,5 +1,5 @@
 import { KeycloakInstance } from 'keycloak-js'
-import { toRefs, Ref } from 'vue'
+import { toRefs, Ref } from 'vue-demi'
 import { getKeycloak } from './keycloak'
 import { KeycloakState, state } from './state'
 import { isNil } from './utils'

src/composable.ts

@@ -1,8 +1,12 @@
+import { isVue2, isVue3, Vue2 } from 'vue-demi'
 import { KeycloakConfig } from 'keycloak-js'
 import { vueKeycloak } from './plugin'
 import { createKeycloak, initKeycloak } from './keycloak'
 import { defaultInitConfig } from './const'
 
+const testVue3 = isVue3 ? test : test.skip
+const testVue2 = isVue2 ? test : test.skip
+
 jest.mock('./keycloak', () => {
   return {
     initKeycloak: jest.fn(),
@@ -64,14 +68,22 @@ describe('vueKeycloak', () => {
     }
   })
 
-  test('should set globalProperties', async () => {
+  testVue3('should set $keycloak in globalProperties', async () => {
     await vueKeycloak.install(appMock, { config: keycloakConfig })
 
     expect(appMock.config.globalProperties.$keycloak).toBeDefined()
     expect(createKeycloak as jest.Mock).toBeCalled()
     expect(initKeycloak as jest.Mock).toBeCalled()
   })
 
+  testVue2('should set $keycloak in prototype', async () => {
+    await vueKeycloak.install(appMock, { config: keycloakConfig })
+
+    expect(Vue2.prototype.$keycloak).toBeDefined()
+    expect(createKeycloak as jest.Mock).toBeCalled()
+    expect(initKeycloak as jest.Mock).toBeCalled()
+  })
+
   test('should call init with the default config', async () => {
     await vueKeycloak.install(appMock, { config: keycloakConfig })
 

src/plugin.test.ts

@@ -1,4 +1,4 @@
-import { Plugin } from 'vue'
+import { Plugin, isVue3, Vue2 } from 'vue-demi'
 import Keycloak from 'keycloak-js'
 import { defaultInitConfig } from './const'
 import { createKeycloak, initKeycloak } from './keycloak'
@@ -36,7 +36,11 @@ export const vueKeycloak: Plugin = {
       : defaultInitConfig
 
     const _keycloak = createKeycloak(keycloakConfig)
-    app.config.globalProperties.$keycloak = _keycloak
+    if (isVue3) {
+      app.config.globalProperties.$keycloak = _keycloak
+    } else {
+      Vue2.prototype.$keycloak = _keycloak
+    }
 
     await initKeycloak(keycloakInitOptions)
   },

src/plugin.ts

@@ -11,7 +11,7 @@ describe('state', () => {
     expect(state.token).toBe('')
     expect(state.username).toBe('')
     expect(state.roles).toStrictEqual([])
-    expect(state.resourceRoles).toStrictEqual({});
+    expect(state.resourceRoles).toStrictEqual({})
   })
 
   test('should update the state', () => {

src/state.test.ts

@@ -1,4 +1,4 @@
-import { reactive } from 'vue'
+import { reactive } from 'vue-demi'
 import jwtDecode from 'jwt-decode'
 
 export interface KeycloakState<T = unknown> {
@@ -37,9 +37,9 @@ export const setToken = (token: string): void => {
   state.decodedToken = content
   state.roles = content.realm_access.roles
   state.username = content.preferred_username
-  state.resourceRoles = content.resource_access ? Object.fromEntries(
-    Object.entries(content.resource_access).map(([key, value]) => [key, value.roles]),
-  ) : {};
+  state.resourceRoles = content.resource_access
+    ? Object.fromEntries(Object.entries(content.resource_access).map(([key, value]) => [key, value.roles]))
+    : {}
 }
 
 export const hasFailed = (value: boolean): void => {