Merge pull request #302 from manuelmeister/feature/vue2-compatibility-v3

Make v3 compatible with vue2

Author: manuelmeister

package-lock.json

@@ -47,7 +47,8 @@
   ],
   "authors": [
     "Carlo Beltrame",
-    "Urban Suppiger"
+    "Urban Suppiger",
+    "Manuel Meister"
   ],
   "license": "MIT",
   "bugs": {
@@ -56,7 +57,17 @@
   "homepage": "https://github.com/ecamp/hal-json-vuex#readme",
   "dependencies": {
     "hal-json-normalizer": "^4.2.0",
-    "url-template": "^3.1.1"
+    "url-template": "^3.1.1",
+    "vue-demi": "^0.14.10"
+  },
+  "peerDependencies": {
+    "@vue/composition-api": "^1.0.0-rc.1",
+    "vue": "^2.0.0 || >=3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@vue/composition-api": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "5.10.1",

package.json

@@ -13,6 +13,7 @@ import ResourceInterface from './interfaces/ResourceInterface'
 import StoreData, { Link, SerializablePromise } from './interfaces/StoreData'
 import ApiActions from './interfaces/ApiActions'
 import { isVirtualResource } from './halHelpers'
+import { App, isVue2, isVue3, Vue2 } from 'vue-demi'
 
 /**
  * Defines the API store methods available in all Vue components. The methods can be called as follows:
@@ -444,17 +445,19 @@ function HalJsonVuex (store: Store<Record<string, State>>, axios: AxiosInstance,
   const halJsonVuex = { ...apiActions, purge, purgeAll, href, Resource, LoadingResource }
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  function install (app: any) {
-    if (app.version && app.version.charAt(0) === '3') {
-      Object.defineProperties(app.config.globalProperties, {
-        [opts.apiName]: {
-          get () {
-            return halJsonVuex
-          }
-        }
+  function install (app: App | typeof Vue2) {
+    if (isVue3) {
+      Object.defineProperty(app.config.globalProperties, opts.apiName, {
+        get: () => halJsonVuex,
+        configurable: true
+      })
+    } else if (isVue2) {
+      Object.defineProperty(app.prototype, opts.apiName, {
+        get: () => halJsonVuex,
+        configurable: true
       })
     } else {
-      throw new Error('Vue2 detected: this version of hal-json-vuex is not compatible with Vue2')
+      throw new Error('Neither Vue2 or Vue3 detected')
     }
   }
 

src/index.ts

@@ -1,3 +1,5 @@
+import { del, set } from 'vue-demi'
+
 import StoreData from './interfaces/StoreData'
 
 import { MutationTree } from 'vuex/types'
@@ -13,9 +15,7 @@ export const mutations: MutationTree<State> = {
    * @param uri   URI of the object that is being fetched
    */
   addEmpty (state: State, uri: string) : void {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    state[uri] = { _meta: { self: uri, loading: true } }
+    set(state, uri, { _meta: { self: uri, loading: true } })
   },
   /**
    * Adds entities loaded from the API to the Vuex store.
@@ -24,12 +24,10 @@ export const mutations: MutationTree<State> = {
    */
   add (state: State, data: Record<string, unknown>) : void {
     Object.keys(data).forEach(uri => {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      state[uri] = data[uri]
+      set(state, uri, data[uri])
 
-      state[uri]._meta.loading = false
-      state[uri]._meta.reloading = false
+      set(state[uri]._meta, 'loading', false)
+      set(state[uri]._meta, 'reloading', false)
     })
   },
   /**
@@ -38,23 +36,23 @@ export const mutations: MutationTree<State> = {
    * @param uri   URI of the entity that is currently being reloaded
    */
   reloading (state: State, uri: string) : void {
-    if (state[uri]) state[uri]._meta.reloading = true
+    if (state[uri]) set(state[uri]._meta, 'reloading', true)
   },
   /**
    * Marks a single entity in the Vuex store as normal again, after it has been marked as reloading before.
    * @param state Vuex state
    * @param uri   URI of the entity that is currently being reloaded
    */
   reloadingFailed (state: State, uri: string) : void {
-    if (state[uri]) state[uri]._meta.reloading = false
+    if (state[uri]) set(state[uri]._meta, 'reloading', false)
   },
   /**
    * Removes a single entity from the Vuex store.
    * @param state Vuex state
    * @param uri   URI of the entity to be removed
    */
   purge (state: State, uri: string) : void {
-    delete state[uri]
+    del(state, uri)
   },
   /**
    * Removes all entities from the Vuex store.
@@ -63,7 +61,7 @@ export const mutations: MutationTree<State> = {
    */
   purgeAll (state: State) : void {
     Object.keys(state).forEach(uri => {
-      delete state[uri]
+      del(state, uri)
     })
   },
   /**
@@ -72,15 +70,15 @@ export const mutations: MutationTree<State> = {
    * @param uri   URI of the entity that is currently being deleted
    */
   deleting (state: State, uri: string) : void {
-    if (state[uri]) state[uri]._meta.deleting = true
+    if (state[uri]) set(state[uri]._meta, 'deleting', true)
   },
   /**
    * Marks a single entity in the Vuex store as normal again, after it has been marked as deleting before.
    * @param state Vuex state
    * @param uri   URI of the entity that failed to be deleted
    */
   deletingFailed (state: State, uri: string) : void {
-    if (state[uri]) state[uri]._meta.deleting = false
+    if (state[uri]) set(state[uri]._meta, 'deleting', false)
   }
 }
 

src/storeModule.ts

@@ -21,15 +21,19 @@ export default defineConfig({
     },
     rollupOptions: {
       // externalize outputs if we have these modules as dependencies
-      external: ['hal-json-normalizer', 'url-template'],
+      external: ['hal-json-normalizer', 'url-template', 'vue-demi'],
       output: {
         globals: {
           'url-template': 'parseTemplate',
-          'hal-json-normalizer': 'normalize'
+          'hal-json-normalizer': 'normalize',
+          'vue-demi': 'VueDemi'
         }
       }
     }
   },
+  optimizeDeps: {
+    exclude: ['vue-demi']
+  },
   test: {
     environment: 'jsdom',
     globals: true,