chore: Allow PascalCase as Modulename (#567)

* feat/fix: Allow PascalCase Types

* feat: Allow Pascalcase Keys

* feat/fix: Disperse moduleName and Type for relationsships

* test: Add/Adjust Tests

* doc: Add changelog

* chore: Linting

* fix: Use Type to access Store module in relationships

* fix: Correct data structure

* feat: Only use the Type-Name. No more upper-/lowercase transformation anywhere

* chore: remove commented out code and console logs

* fix: Revert wrong changes

* fix: Revert wrong changes

Author: salisdemos

Changelog.md

@@ -1,5 +1,11 @@
 # next version
 
+- **BREAKING**: The response data now allows PascalCase Types and Keys.
+  With that, If the Type has been pascal case before, but Your module was
+  in camel case, it worked, because the Type was transformed to camel case
+  automatically. Now, the Type is not transformed anymore, so you have to
+  adjust your module to the correct case.
+
 # v0.1
 
 - **BREAKING**: Vue has been removed as a direct dependency.

src/api/ResourcefulApi.js

@@ -115,7 +115,7 @@ export class ResourcefulApi extends Api {
     }
 
     if (json.data) {
-      parsedResponse.data = normalize(json)
+      parsedResponse.data = normalize(json, { camelizeTypeValues: false, camelizeKeys: false })
     }
 
     if (json.errors) {

src/module/ModuleBuilder.js

@@ -120,7 +120,6 @@ export class ModuleBuilder {
    */
   buildMutations () {
     const resourceBuilder = new ResourceBuilder(this.api.store)
-
     const mutations = {
       resetItems: resetItemsMutation(this.isCollection),
       set: (this.isCollection) ? setAllMutation(resourceBuilder) : setMutation(resourceBuilder),
@@ -179,10 +178,9 @@ export class ModuleBuilder {
 
     for (const relatedObjectType in this.apiMethods.related) {
       const relatedObjectMethods = this.apiMethods.related[relatedObjectType]
-      const relatedObjectTypeActionName = relatedObjectType.charAt(0).toUpperCase() + relatedObjectType.slice(1)
 
       if (relatedObjectMethods.isCollection()) {
-        const listActionName = `listRelated${relatedObjectTypeActionName}`
+        const listActionName = `listRelated${relatedObjectType}`
         relatedActions[listActionName] = listRelatedAction(this.api, this.moduleName, relatedObjectType)
       }
     }

src/module/resource/ResourceBuilder.js

@@ -56,7 +56,7 @@ export class ResourceBuilder {
    * Adds Methods (get, load, list) to the relationships for getting / loading them
    * Adds Shorthand Methods (rel / loadRel)
    *
-   * @param {Object} jsonResourceObject
+   * @param {Object} obj jsonResourceObject
    */
   buildRelationshipMethods (obj) {
     const relationships = obj.relationships

src/module/resource/getRelationship.js

@@ -2,20 +2,21 @@
 *
 * @param {Vuex.Store} store
 * @param {Object} relatedObject
+* @param {Object} config{isToMany: boolean}
 */
 export function getRelationship (store, relatedObject, config) {
   return new Proxy(() => {}, {
     apply (target, thisArg, argArray) {
-      const moduleName = relatedObject.data.type
-      const relatedModule = store.state[moduleName]
+      const moduleType = relatedObject.data.type
+      const relatedModule = store.state[moduleType]
 
       if (config.isToMany) {
         const [requestedId] = argArray
 
         try {
           return relatedModule.items[requestedId]
         } catch (e) {
-          throw new Error(`Related object ${relatedObject.id} not found in ${moduleName}`)
+          throw new Error(`Related object ${relatedObject.data.id} not found in ${moduleType}`)
         }
       }
 

src/module/resource/loadRelationship.js

@@ -1,10 +1,9 @@
 export function loadRelationship (store, currentObjectId, currentObjectType, relatedObject, config) {
   return () => {
     const relatedObjectType = (config.isToMany) ? relatedObject.data[0].type : relatedObject.data.type
-    const relatedObjectNameForAction = relatedObjectType[0].toUpperCase() + relatedObjectType.slice(1)
 
     if (config.isToMany) {
-      return store.dispatch(`${currentObjectType}/listRelated${relatedObjectNameForAction}`, { id: currentObjectId })
+      return store.dispatch(`${currentObjectType}/listRelated${relatedObjectType}`, { id: currentObjectId })
     }
 
     return new Error('Failed to load relationship')

src/route/JsonApiRouter.js

@@ -74,7 +74,7 @@ export class JsonApiRouter extends Router {
   }
 
   parseApiResult (data) {
-    for (const routeResource of Object.values(data.vuexJsonApiRoute)) {
+    for (const routeResource of Object.values(data.VuexJsonApiRoute)) {
       this.addRoute(new JsonApiRoute(routeResource))
     }
   }

test/api/ResourcefulApi.spec.js

@@ -51,7 +51,7 @@ test('reads the initial module list', () => {
 
   api.registerModule = registerModuleMock
 
-  api.setupApiModules(['foo', 'bar', 'baz'])
+  api.setupApiModules(['foo', 'bar', 'Baz'])
 
   expect(registerModuleMock.mock.calls.length).toBe(3)
 })

test/apiMock.js

@@ -35,9 +35,9 @@ export function initApiMockServer () {
   fetchMock.reset()
   fetchMock.config.sendAsJson = false
 
-  function book (id) {
+  function Author (id) {
     return {
-      type: 'Book',
+      type: 'Author',
       id,
       attributes: {
         author: faker.person.fullName(),
@@ -46,10 +46,39 @@ export function initApiMockServer () {
     }
   }
 
+  function book (id) {
+    return {
+      type: 'book',
+      id,
+      attributes: {
+        author: faker.name.findName(),
+        title: faker.lorem.words(3)
+      }
+    }
+  }
+
+  function category (id) {
+    return {
+      type: 'Category',
+      id,
+      attributes: {
+        author: faker.name.findName(),
+        title: faker.lorem.words(3)
+      }
+    }
+  }
+
+  fetchMock.get(url('/Author/1'), response(Author(1)))
   fetchMock.get(url('/book/1'), response(book(1)))
+  fetchMock.get(url('/category/1'), response(category(1)))
+
   fetchMock.getOnce(url('/book/1/nometa'), response(book(1), null))
   fetchMock.getOnce(url('/book/1/nolinks'), response(book(1), {}, null))
+
+  fetchMock.get(url('/Author/'), response([Author(1), Author(2), Author(3)]))
   fetchMock.get(url('/book/'), response([book(1), book(2), book(3)]))
+  fetchMock.get(url('/category/'), response([category(1), category(2), category(3)]))
+
   fetchMock.postOnce(url('/book/'), response(book('new'), {}, {}, 201))
   fetchMock.postOnce({
     url: url('/clientBook/'),
@@ -97,23 +126,33 @@ export function initApiMock () {
   initApiMockServer()
 
   const router = new Router()
+  router
+    .addRoute(new Route('Author', 'get', '/Author/{id}', ['id']))
+    .addRoute(new Route('Author', 'delete', '/Author/{id}', ['id']))
+    .addRoute(new Route('Author', 'list', '/Author/', []))
+    .addRoute(new Route('Author', 'create', '/Author/', []))
   router
     .addRoute(new Route('book', 'get', '/book/{id}', ['id']))
     .addRoute(new Route('book', 'delete', '/book/{id}', ['id']))
     .addRoute(new Route('book', 'list', '/book/', []))
     .addRoute(new Route('book', 'create', '/book/', []))
+  router
+    .addRoute(new Route('Category', 'get', '/category/{id}', ['id']))
+    .addRoute(new Route('Category', 'delete', '/category/{id}', ['id']))
+    .addRoute(new Route('Category', 'list', '/category/', []))
+    .addRoute(new Route('Category', 'create', '/category/', []))
 
   const store = new Vuex.Store()
   const api = new ResourcefulApi()
 
   api.setBaseUrl('http://api/')
   api.setStore(store)
   api.setupResourcefulRequests(router)
-  api.setupApiModules(['book'])
+  api.setupApiModules(['Author', 'book', 'Category'])
 
   return api
 }
 
-export function getVuexContextForResourceType (api, type) {
-  return api.store._modules.root._children[type].context
+export function getVuexContextForResourceType (api, moduleName) {
+  return api.store._modules.root._children[moduleName].context
 }

test/module/actions/createAction.spec.js

@@ -6,5 +6,5 @@ const action = createAction(api, 'book')
 const bookModule = getVuexContextForResourceType(api, 'book')
 
 test.skip('creates without id', async () => {
-  action(bookModule, { type: 'Book', attributes: {} })
+  action(bookModule, { type: 'book', attributes: {} })
 })