Merge pull request #287 from usu/feat/nuxt3-vite

Feat/nuxt3 vite

Author: usu

jest.config.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   preset: 'ts-jest',
   testEnvironment: 'jsdom',
   transform: {

package-lock.json

@@ -1,21 +1,31 @@
 {
   "name": "hal-json-vuex",
-  "version": "2.0.0-alpha.16",
+  "version": "3.0.0-alpha.1",
   "description": "Use a HAL JSON API with Vuex",
-  "main": "dist/bundle.js",
+  "main": "./dist/hal-json-vuex.umd.cjs",
+  "module": "./dist/hal-json-vuex.js",
+  "typings": "./dist/hal-json-vuex.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/hal-json-vuex.js",
+      "require": "./dist/hal-json-vuex.umd.cjs"
+    }
+  },
   "scripts": {
-    "build": "cross-env NODE_ENV=production webpack",
-    "build-dev": "cross-env NODE_ENV=development webpack",
+    "build": "cross-env NODE_ENV=production tsc && vite build",
+    "build:watch": "cross-env NODE_ENV=production vite build --watch",
+    "build-dev": "cross-env NODE_ENV=development tsc && vite build",
     "clean": "cross-env rimraf dist coverage lib",
     "coverage": "cross-env npm run build && jest --coverage",
-    "lint": "cross-env eslint src --ext .js,.ts",
+    "lint": "cross-env eslint src tests --ext .js,.ts",
     "test": "jest",
     "test:debug": "node --inspect-brk ./node_modules/.bin/jest -i",
     "version": "npm run build"
   },
   "engines": {
     "node": ">=16.0.0 <21.0.0"
   },
+  "type": "module",
   "files": [
     "/dist",
     "/CHANGELOG.md",
@@ -50,12 +60,11 @@
     "@babel/plugin-transform-runtime": "7.16.10",
     "@babel/preset-env": "7.16.11",
     "@babel/preset-typescript": "7.16.7",
-    "@nuxt/types": "2.15.8",
     "@types/jest": "27.5.1",
     "@typescript-eslint/eslint-plugin": "5.10.1",
     "@typescript-eslint/parser": "5.10.1",
     "@vue/eslint-config-standard": "6.1.0",
-    "@vue/test-utils": "1.3.0",
+    "@vue/test-utils": "2.4.1",
     "axios": "0.25.0",
     "axios-mock-adapter": "1.20.0",
     "babel-eslint": "10.1.0",
@@ -78,12 +87,9 @@
     "ts-jest": "27.1.3",
     "ts-loader": "9.2.6",
     "typescript": "4.5.5",
-    "vue": "2.6.14",
-    "vue-axios": "3.2.5",
-    "vue-template-compiler": "2.6.14",
-    "vuex": "3.6.2",
-    "webpack": "5.67.0",
-    "webpack-cli": "4.9.2",
-    "webpack-node-externals": "3.0.0"
+    "vite": "4.4.4",
+    "vue": "3.3.6",
+    "@vue/compiler-sfc": "3.3.6",
+    "vuex": "4.1.0"
   }
 }

package.json

@@ -30,31 +30,14 @@ function HalJsonVuex (store: Store<Record<string, State>>, axios: AxiosInstance,
   const defaultOptions = {
     apiName: 'api',
     avoidNPlusOneRequests: true,
-    forceRequestedSelfLink: false,
-    nuxtInject: undefined
+    forceRequestedSelfLink: false
   }
   const opts = { ...defaultOptions, ...options, apiRoot: axios.defaults.baseURL }
 
   store.registerModule(opts.apiName, { state: {}, ...storeModule })
 
   const resourceCreator = new ResourceCreator({ get, reload, post, patch, del, href, isUnknown }, opts)
 
-  if (opts.nuxtInject !== null) axios = adaptNuxtAxios(axios)
-
-  /**
-   * Since Nuxt.js uses $get, $post etc., we need to use an adapter in the case of a Nuxt.js app...
-   * @param $axios
-   */
-  function adaptNuxtAxios ($axios) {
-    return {
-      get: $axios.$get,
-      patch: $axios.$patch,
-      post: $axios.$post,
-      delete: $axios.$delete,
-      ...$axios
-    }
-  }
-
   /**
    * Sends a POST request to the API, in order to create a new entity. Note that this does not
    * reload any collections that this new entity might be in, the caller has to do that on their own.
@@ -461,19 +444,17 @@ 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 (Vue: any) {
-    if (!opts.nuxtInject) {
-      // Normal installation in a Vue app
-      Object.defineProperties(Vue.prototype, {
+  function install (app: any) {
+    if (app.version && app.version.charAt(0) === '3') {
+      Object.defineProperties(app.config.globalProperties, {
         [opts.apiName]: {
           get () {
             return halJsonVuex
           }
         }
       })
     } else {
-      // Support for Nuxt-style inject installation
-      opts.nuxtInject(opts.apiName, halJsonVuex)
+      throw new Error('Vue2 detected: this version of hal-json-vuex is not compatible with Vue2')
     }
   }
 

src/index.ts

@@ -1,10 +1,7 @@
-import { Inject } from '@nuxt/types/app'
-
 interface ExternalConfig {
     apiName?: string
     avoidNPlusOneRequests?: boolean
     forceRequestedSelfLink?: boolean
-    nuxtInject?: Inject
 }
 
 interface InternalConfig extends ExternalConfig {

src/interfaces/Config.ts

@@ -1,4 +1,3 @@
-import Vue from 'vue'
 import StoreData from './interfaces/StoreData'
 
 import { MutationTree } from 'vuex/types'
@@ -14,7 +13,9 @@ export const mutations: MutationTree<State> = {
    * @param uri   URI of the object that is being fetched
    */
   addEmpty (state: State, uri: string) : void {
-    Vue.set(state, uri, { _meta: { self: uri, loading: true } })
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    state[uri] = { _meta: { self: uri, loading: true } }
   },
   /**
    * Adds entities loaded from the API to the Vuex store.
@@ -23,10 +24,12 @@ export const mutations: MutationTree<State> = {
    */
   add (state: State, data: Record<string, unknown>) : void {
     Object.keys(data).forEach(uri => {
-      Vue.set(state, uri, data[uri])
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      state[uri] = data[uri]
 
-      Vue.set(state[uri]._meta, 'loading', false)
-      Vue.set(state[uri]._meta, 'reloading', false)
+      state[uri]._meta.loading = false
+      state[uri]._meta.reloading = false
     })
   },
   /**
@@ -35,23 +38,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]) Vue.set(state[uri]._meta, 'reloading', true)
+    if (state[uri]) 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]) Vue.set(state[uri]._meta, 'reloading', false)
+    if (state[uri]) 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 {
-    Vue.delete(state, uri)
+    delete state[uri]
   },
   /**
    * Removes all entities from the Vuex store.
@@ -60,7 +63,7 @@ export const mutations: MutationTree<State> = {
    */
   purgeAll (state: State) : void {
     Object.keys(state).forEach(uri => {
-      Vue.delete(state, uri)
+      delete state[uri]
     })
   },
   /**
@@ -69,15 +72,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]) Vue.set(state[uri]._meta, 'deleting', true)
+    if (state[uri]) 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]) Vue.set(state[uri]._meta, 'deleting', false)
+    if (state[uri]) state[uri]._meta.deleting = false
   }
 }
 

src/storeModule.ts

@@ -0,0 +1,5 @@
+{
+  "env": {
+    "jest": true
+  }
+}