From 8b0572dce77ae44269665ee13aa6c48373f70f4d Mon Sep 17 00:00:00 2001
From: Thomas von Deyen <thomas@vondeyen.com>
Date: Fri, 6 Nov 2020 15:28:03 +0100
Subject: [PATCH 1/2] Rename element_type into name

This attribute has been renamed by the alchemy-json_api gem
and reflects what this attribute is called in Alchemy core.
---
 src/components/FallbackElement.vue                |  2 +-
 src/components/__tests__/fallback-element.spec.js |  4 ++--
 src/mixins/__tests__/element.spec.js              | 10 +++++-----
 src/mixins/__tests__/page.spec.js                 |  8 ++++----
 src/mixins/page.js                                |  4 ++--
 5 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/components/FallbackElement.vue b/src/components/FallbackElement.vue
index 9378aae..0fd0b25 100644
--- a/src/components/FallbackElement.vue
+++ b/src/components/FallbackElement.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="alchemy-fallback-element">
-    <h2>I am a dummy {{ element.element_type }} Alchemy element component</h2>
+    <h2>I am a dummy {{ element.name }} Alchemy element component</h2>
     <p>
       To replace me put a Vue component into
       <kbd>~/components/Alchemy/Elements/</kbd>
diff --git a/src/components/__tests__/fallback-element.spec.js b/src/components/__tests__/fallback-element.spec.js
index 1845967..552a2f6 100644
--- a/src/components/__tests__/fallback-element.spec.js
+++ b/src/components/__tests__/fallback-element.spec.js
@@ -5,7 +5,7 @@ function getComponent() {
   return shallowMount(FallbackElement, {
     propsData: {
       element: {
-        element_type: "main_header",
+        name: "main_header",
         essences: [
           {
             role: "headline",
@@ -13,7 +13,7 @@ function getComponent() {
         ],
         nested_elements: [
           {
-            element_type: "header",
+            name: "header",
           },
         ],
       },
diff --git a/src/mixins/__tests__/element.spec.js b/src/mixins/__tests__/element.spec.js
index 588a6e1..b80c0a9 100644
--- a/src/mixins/__tests__/element.spec.js
+++ b/src/mixins/__tests__/element.spec.js
@@ -9,7 +9,7 @@ const AlchemyElementComponent = {
 describe("Alchemy element mixin", () => {
   it("has access to the element", () => {
     const element = {
-      element_type: "content_page",
+      name: "content_page",
       essences: [],
     }
     const comp = shallowMount(AlchemyElementComponent, {
@@ -26,7 +26,7 @@ describe("Alchemy element mixin", () => {
         const comp = shallowMount(AlchemyElementComponent, {
           propsData: {
             element: {
-              element_type: "content_page",
+              name: "content_page",
               essences: [],
             },
           },
@@ -41,7 +41,7 @@ describe("Alchemy element mixin", () => {
         const comp = shallowMount(AlchemyElementComponent, {
           propsData: {
             element: {
-              element_type: "content_page",
+              name: "content_page",
               essences: [headline],
             },
           },
@@ -57,7 +57,7 @@ describe("Alchemy element mixin", () => {
         const comp = shallowMount(AlchemyElementComponent, {
           propsData: {
             element: {
-              element_type: "content_page",
+              name: "content_page",
               essences: [],
             },
           },
@@ -72,7 +72,7 @@ describe("Alchemy element mixin", () => {
         const comp = shallowMount(AlchemyElementComponent, {
           propsData: {
             element: {
-              element_type: "content_page",
+              name: "content_page",
               essences: [headline],
             },
           },
diff --git a/src/mixins/__tests__/page.spec.js b/src/mixins/__tests__/page.spec.js
index 56eeacb..9ef4c5a 100644
--- a/src/mixins/__tests__/page.spec.js
+++ b/src/mixins/__tests__/page.spec.js
@@ -40,7 +40,7 @@ describe("Alchemy page mixin", () => {
   describe("elementByName", () => {
     describe("if element exists", () =>{
       it("returns element", () => {
-        const element = { element_type: "header" }
+        const element = { name: "header" }
         const component = shallowMount(AlchemyPageComponent, {
           propsData: {
             page: {
@@ -70,7 +70,7 @@ describe("Alchemy page mixin", () => {
   describe("elementsByName", () => {
     describe("if element exists", () =>{
       it("returns element", () => {
-        const elements = [{ element_type: "header" }]
+        const elements = [{ name: "header" }]
         const component = shallowMount(AlchemyPageComponent, {
           propsData: {
             page: {
@@ -103,7 +103,7 @@ describe("Alchemy page mixin", () => {
         const component = shallowMount(AlchemyPageComponent, {
           propsData: {
             page: {
-              elements: [{ element_type: "element_component" }],
+              elements: [{ name: "element_component" }],
             },
           },
         })
@@ -118,7 +118,7 @@ describe("Alchemy page mixin", () => {
         const component = shallowMount(AlchemyPageComponent, {
           propsData: {
             page: {
-              elements: [{ element_type: "something" }],
+              elements: [{ name: "something" }],
             },
           },
         })
diff --git a/src/mixins/page.js b/src/mixins/page.js
index 2569276..666a409 100644
--- a/src/mixins/page.js
+++ b/src/mixins/page.js
@@ -10,7 +10,7 @@ export default {
   },
   methods: {
     elementType(element) {
-      const name = element.element_type
+      const name = element.name
       if (this.$options.components[name]) {
         return name
       }
@@ -20,7 +20,7 @@ export default {
       return this.elementsByName(name)[0]
     },
     elementsByName(name) {
-      return this.page.elements.filter((e) => e.element_type === name)
+      return this.page.elements.filter((e) => e.name === name)
     },
   },
 }

From 7bd4d7ca79874ea0dafc943f198222ca8bcaacf1 Mon Sep 17 00:00:00 2001
From: Thomas von Deyen <thomas@vondeyen.com>
Date: Fri, 6 Nov 2020 15:34:21 +0100
Subject: [PATCH 2/2] Rename elementType() into componentName()

The element attribute used is called name and not type, also
in Vue components have a name attribute.
---
 README.md                         | 4 ++--
 src/mixins/__tests__/page.spec.js | 4 ++--
 src/mixins/page.js                | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 0aab641..14f6d98 100644
--- a/README.md
+++ b/README.md
@@ -23,13 +23,13 @@ export default {
 }
 ```
 
-You now have acces to the `page` prop and its `elements`. Also you have access to the `elementType()` method that you can use to dynamically render element components.
+You now have acces to the `page` prop and its `elements`. Also you have access to the `componentName()` method that you can use to dynamically render element components.
 
 ```html
 <template>
   <div :class="page.page_layout">
     <component
-      :is="elementType(element)"
+      :is="componentName(element)"
       v-for="element in page.elements"
       :key="element.id"
       :element="element"
diff --git a/src/mixins/__tests__/page.spec.js b/src/mixins/__tests__/page.spec.js
index 9ef4c5a..c40da10 100644
--- a/src/mixins/__tests__/page.spec.js
+++ b/src/mixins/__tests__/page.spec.js
@@ -11,7 +11,7 @@ const AlchemyPageComponent = {
   template: `
     <div class="alchemy-page">
       <component
-        :is="elementType(element)"
+        :is="componentName(element)"
         v-for="element in page.elements"
         :key="element.id"
         :element="element"
@@ -97,7 +97,7 @@ describe("Alchemy page mixin", () => {
     })
   })
 
-  describe("elementType", () => {
+  describe("componentName", () => {
     describe("if element component has been registered", () => {
       it("returns the component name", () => {
         const component = shallowMount(AlchemyPageComponent, {
diff --git a/src/mixins/page.js b/src/mixins/page.js
index 666a409..3918887 100644
--- a/src/mixins/page.js
+++ b/src/mixins/page.js
@@ -9,7 +9,7 @@ export default {
     },
   },
   methods: {
-    elementType(element) {
+    componentName(element) {
       const name = element.name
       if (this.$options.components[name]) {
         return name