chore(#1): add poc DruxtLayoutBuilder component

src/components/DruxtLayoutBuilder.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="layout_builder">
+    <template v-for="(section, index) of sections">
+      <component
+        :is="componentIs(section.layout_id)"
+        v-if="componentIs(section.layout_id) !== 'div'"
+        :key="index"
+        :section="section"
+      >
+        <template
+          v-for="component of Object.values(section.components)"
+          #[component.uuid]
+        >
+          <component
+            :is="componentIs(component.configuration.id)"
+            v-if="componentIs(component.configuration.id) !== 'div'"
+            :key="component.uuid"
+            :component="component"
+            :entity="entity"
+          />
+
+          <DruxtDebug
+            v-else
+            :key="component.uuid"
+            :summary="`${componentName(component.configuration.id)} missing`"
+          >
+            <pre><code>{{ JSON.stringify(component, null, '  ') }}</code></pre>
+          </DruxtDebug>
+        </template>
+      </component>
+
+      <DruxtDebug
+        v-else
+        :key="index"
+        :summary="`${componentName(section.layout_id)} missing`"
+      >
+        <pre><code>{{ JSON.stringify(section, null, '  ') }}</code></pre>
+      </DruxtDebug>
+    </template>
+  </div>
+</template>
+
+<script>
+import { pascalCase, upperFirst } from 'scule'
+
+export default {
+  name: 'DruxtLayoutBuilder',
+
+  props: {
+    entity: {
+      type: Object,
+      required: true,
+    }
+  },
+
+  computed: {
+    sections: ({ entity }) => entity.attributes.layout_builder__layout
+  },
+
+  methods: {
+    componentIs(id) {
+      const name = this.componentName(id)
+      return this.$nuxt.$options.components[name] ? name : 'div'
+    },
+
+    componentName(id) {
+      return `DruxtLayoutBuilder${pascalCase(id.split(':').map((s) => upperFirst(s)).join(''))}`
+    },
+  }
+}
+</script>

test/components/DruxtLayoutBuilder.test.js

@@ -0,0 +1,43 @@
+import 'regenerator-runtime/runtime'
+import { createLocalVue, mount } from '@vue/test-utils'
+
+import DruxtWrapper from 'druxt/dist/components/DruxtWrapper.vue'
+import DruxtLayoutBuilder from '../../src/components/DruxtLayoutBuilder.vue'
+
+// Setup local vue instance.
+const localVue = createLocalVue()
+localVue.component('DruxtWrapper', DruxtWrapper)
+
+// Mount the Vue component.
+const mountComponent = function() {
+  return mount(
+    DruxtLayoutBuilder,
+    {
+      localVue,
+      mocks: {
+        $fetchState: { pending: true },
+        $route: { meta: { lang: undefined }},
+      }
+    }
+  )
+}
+
+describe('DruxtLayoutBuilder', () => {
+  // test('Hello world', async () => {
+  //   // Mount the component.
+  //   const wrapper = mountComponent()
+
+  //   // Simulate the Nuxt fetch hook.
+  //   await wrapper.vm.$options.fetch.call(wrapper.vm)
+
+  //   // Assert data and props are as expected.
+  //   expect(wrapper.vm.foo).toBe('bar')
+  //   expect(wrapper.vm.component).toMatchSnapshot()
+
+  //   // Assert slots.
+  //   const h = jest.fn()
+  //   const slots = wrapper.vm.$options.druxt.slots(h)
+  //   slots.default()
+  //   expect(h).toBeCalledWith('div', ['Hello world'])
+  // })
+})