refactor: remove vue [do not merge] (#534)

* chore: remove vue

It shouldn't be neccessary as instance.
It should be available from outside

* build: update vue(x) dependencies

- vuex and vue/compat are added to peerDependencies,
they are not needed as regular dependencies
- vue and vue-template-compiler (the latter needed for
vue 2, but not vue 3) could be removed as dependencies
- to be able to run the library in a vue 3 project,
vuex is required in ^v4

* refactor: remove vuex usage

to be able to remove vuex as a direct dependency,
we need to remove its usages in the library

* docs: update documentation for vue 3

* refactor: remove vue usage

to be able to remove vue as a dependency,
we need to remove all its usages

* build: add missing dev dependencies

these are needed for running the tests

* fix: fix deleting of an item

- since state.items is an object, using `findIndex` on
it throws an error
- instead, we can just use `delete` to delete the item

* build: add missing vue-jest peer dependencies

* build: update jest dependencies to work with vue3

* fix: use dot notation

* refactor: delete unused file

* refactor: remove commented out code

---------

Co-authored-by: Florian Salis <[email protected]>

Author: hwiem

docs/README.md

@@ -15,40 +15,47 @@ a magical experience.
 In your entrypoint do something like:
 
 ```js
-import Vue from 'vue/dist/vue.esm'
+import { createApp } from 'vue'
+import { createStore } from 'vuex'
 
 import {
-  createVueInstance,
-  createVuexStore,
   Api,
   StaticRouter
 } from '@efrane/vuex-json-api'
 
-import App from './App'
-
 import PlaygroundRoutes from '@efrane/vuex-json-api/misc/JsonApiPlaygroundRoutes'
 
 Api.setBaseUrl('https://jsonapiplayground.reyesoft.com')
 
 const router = new StaticRouter(PlaygroundRoutes)
 
-createVuexStore({}, router)
-  .then((store) => {
-    return createVueInstance(store, { App })
+const storeOptions = {} // your store options
+
+const store = createStore(storeOptions, router)
+  .then(store => {
+    const app = createApp(store, { App })
+
+    app.use(store)
+    app.mount('#app')
   })
-  .then(instance => instance.$mount('#app'))
 ```
 
 Then, in `App.vue`:
 
-```js
+```vue
 {
   // ...
-  computed: ...mapState('books', {
-    books: state => state.items
-  }),
-  methods: ...mapActions('books', ['list']),
-  mounted() {
+  computed: {
+    ...mapState('books', {
+      books: state => state.items
+    })
+  },
+
+  methods: {
+    ...mapActions('books', ['list'])
+  },
+
+  mounted () {
     this.list()
   }
   // ...

docs/usage/setup.md

@@ -1,31 +1,26 @@
 # Example Setup
-## prepare the store
+## Prepare the store
 
 ``` js
-import Vue from 'vue'
-import Vuex from 'vuex'
+import { createApp } from 'vue'
+import { createStore } from 'vuex'
 ...
 import { initJsonApiPlugin, prepareModuleHashMap, StaticRouter } from '@efrane/vuex-json-api'
 import VuexApiRoutes from '<path-to>/VuexApiRoutes'
 
-Vue.use(Vuex)
-
-// create The Router
 const router = new StaticRouter(VuexApiRoutes)
-
-// set the baseUrl
 let baseUrl = '/my-base/api/1.0'
+const app = createApp(rootComponent)
 
-// create a store instance
 const store = router
   .updateRoutes()
   .then(router => {
-    const store = new Vuex.Store({
+    const store = createStore({
       plugins: [
         initJsonApiPlugin({
           router: router,
           baseUrl: baseUrl,
-          headers: { }, // you might want set some custum headers
+          headers: { }, // you might want to set some custom headers
           preprocessingCallbacks: [], // you can pass an array of promise resolving methods to manipulate the response before passing it to the store
           errorCallbacks: [], // you can pass an array of promise resolving methods to manipulate the response if an error gets returned (e.g. statuscode >= 400)
         }),
@@ -37,6 +32,8 @@ const store = router
 
     return store
   })
+  
+app.use(store)
 
 export { store }
 
@@ -47,6 +44,7 @@ export { store }
 
 
 ``` js
+import { createApp } from 'vue'
 import { store } from '<the-place-of-the-above-file>/Store'
 
 // The Module names has
@@ -65,7 +63,7 @@ const presetModules = [
 ]
 
 store.then(store => {
-  let instance = new Vue({
+  let instance = createApp({
     components: [], // do the regular stuff you do, when using vue
     store,
   }).then(() => {
@@ -86,5 +84,5 @@ store.then(store => {
   })
 })
 ```
-Thats it.
-now you should see the registered modules in the vue devTools.
+That's it.
+Now you should see the registered modules in the vue devTools.

index.js

@@ -1,11 +1,10 @@
-import { createVuexStore, prepareModuleHashMap } from './src/init/createVuexStore'
+import { prepareModuleHashMap } from './src/init/prepareModuleHashMap'
 import { initJsonApiPlugin } from './src/init/initJsonApiPlugin'
 import { StaticRouter } from './src/route/StaticRouter'
 import { JsonApiRouter } from './src/route/JsonApiRouter'
 import { FosJsRoutingRouter } from './src/route/FosJsRoutingRouter'
 
 export {
-  createVuexStore,
   initJsonApiPlugin,
   StaticRouter,
   JsonApiRouter,

jest.config.js

@@ -31,11 +31,9 @@ module.exports = {
   testTimeout: 10000,
 
   transform: {
-    '^.+\\.vue$': 'vue-jest',
+    '^.+\\.vue$': '@vue/vue3-jest',
     '.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$':
       'jest-transform-stub',
     '^.+\\.(js|jsx)?$': 'babel-jest'
-  },
-
-  setupFiles: ['./test/setup.js']
+  }
 };

package.json

@@ -17,39 +17,43 @@
   "dependencies": {
     "deep-object-diff": "^1.1.0",
     "json-api-normalizer": "^1.0",
-    "qs": "~6.10.3",
-    "vuex": "^3.1.1"
+    "qs": "~6.10.3"
   },
   "peerDependencies": {
-    "vue": "2.*"
+    "@vue/compat": "3.2.0",
+    "vuex": "^4.0.2"
   },
   "devDependencies": {
     "@babel/core": "^7.16",
     "@babel/plugin-proposal-object-rest-spread": "^7.16.7",
     "@babel/plugin-transform-modules-commonjs": "^7.16.8",
-    "@babel/preset-env": "^7.16.4",
-    "babel-jest": "^27.3.1",
+    "@babel/preset-env": "^7.20.2",
+    "@vue/compat": "^3.2.0",
+    "@vue/vue3-jest": "29",
+    "babel-core": "^7.0.0-bridge.0",
+    "babel-jest": "^29.4.3",
     "eslint": "7.32.0",
     "eslint-config-standard": "16.0.3",
     "eslint-friendly-formatter": "^4.0.1",
     "eslint-plugin-import": "^2.25.4",
-    "eslint-plugin-jest": "^25.2.4",
+    "eslint-plugin-jest": "^27.2.1",
     "eslint-plugin-node": "^11.0.0",
     "eslint-plugin-promise": "^5.1.1",
     "eslint-plugin-vue": "^8.3.0",
     "faker": "^5.5.3",
     "fetch-mock": "^9.11.0",
     "husky": "^7.0.4",
-    "jest": "^26.0.1",
+    "jest": "^29.4.3",
+    "jest-environment-jsdom": "^29.7.0",
     "jest-transform-stub": "^2.0.0",
     "lint-staged": "^12.3.2",
     "node-fetch": "^2.6.1",
-    "vue": "^2.6.14",
-    "vue-jest": "^3.0.5",
-    "vue-template-compiler": "^2.6.14"
+    "node-notifier": "^10.0.1",
+    "vue": "^3.2.0",
+    "vuex": "^4.0.2"
   },
   "engines": {
-    "node": ">= 8.0.0",
+    "node": ">= 10.0.0",
     "npm": ">= 3.0.0"
   },
   "lint-staged": {

src/init/createVueInstance.js

@@ -0,0 +1,27 @@
+import { hasOwn } from '../shared/utils'
+
+/**
+ * Converts a module listing object (e.g. `{ myModule: myModule }`)
+ * to the expected syntax for module registration.
+ *
+ * By default, this Vuex usage interpretation expects non-api-bound
+ * modules to have a `name`-property which defines their namespaced
+ * name. This is necessary to facilitate auto-registration of the modules.
+ *
+ * N.b.: There is no checking done to avoid overwrites of these modules
+ * by later-to-be-initialized api-bound modules.
+ *
+ * @param {object|array} modules
+ */
+export function prepareModuleHashMap (modules) {
+  const moduleHashMap = {}
+
+  for (const idx in modules) {
+    if (hasOwn(modules, idx)) {
+      const module = modules[idx]
+      moduleHashMap[module.name] = module
+    }
+  }
+
+  return moduleHashMap
+}

src/init/createVuexStore.js

@@ -1,5 +1,3 @@
-import Vue from 'vue'
-
 /**
  * Remove a ResourceObject from a module's item(s)
  *
@@ -18,9 +16,9 @@ export function removeMutation (isCollection) {
   return new Proxy((state, payload) => {}, {
     apply (target, thisArg, [state, id]) {
       if (isCollection) {
-        Vue.delete(state.items, id)
+        delete state.items[id]
       } else {
-        Vue.set(state, 'item', {})
+        state.item = {}
       }
     }
   })

src/init/prepareModuleHashMap.js

@@ -1,4 +1,3 @@
-import Vue from 'vue'
 import { initialState } from '../State'
 
 /**
@@ -12,13 +11,13 @@ export function resetItemsMutation (isCollection) {
       const initial = initialState(isCollection)
 
       if (isCollection) {
-        Vue.set(state, 'items', initial.items)
-        Vue.set(state, 'initial', initial.initial)
+        state.items = initial.items
+        state.initial = initial.initial
       }
 
       if (!isCollection) {
-        Vue.set(state, 'item', initial.item)
-        Vue.set(state, 'item', initial.initial)
+        state.item = initial.item
+        state.item = initial.initial
       }
     }
   })