Implement RenderContent component

src/components/RenderContent.test.ts

@@ -0,0 +1,71 @@
+import { RenderContent } from '../index';
+import { extractContent } from './RenderContent';
+
+describe('RenderContent', () => {
+
+  test('extractContent should return empty array when content is null', async () => {
+    // Call function
+    const result = extractContent(null);
+    // Assert
+    expect(result).toEqual([]);
+  });
+
+  test('extractContent should correctly handle single resources', async () => {
+    // Call function
+    const result = extractContent({
+      id: 'itemId',
+      type: 'itemType',
+      foo: 'bar'
+    });
+    // Assert
+    expect(result).toEqual([{
+      componentName: 'itemType',
+      props: {
+        id: 'itemId',
+        type: 'itemType',
+        foo: 'bar'
+      }
+    }]);
+  });
+
+  test('extractContent should correctly handle resource arrays', async () => {
+    // Call function
+    const result = extractContent([
+      {
+        id: 'itemId',
+        type: 'itemType',
+        foo: 'bar'
+      },
+      {
+        id: 'itemId2',
+        type: 'itemType2',
+        foo2: 'bar2'
+      }
+    ]);
+    // Assert
+    expect(result).toEqual([
+      {
+        componentName: 'itemType',
+        props: {
+          id: 'itemId',
+          type: 'itemType',
+          foo: 'bar'
+        }
+      },
+      {
+        componentName: 'itemType2',
+        props: {
+          id: 'itemId2',
+          type: 'itemType2',
+          foo2: 'bar2'
+        }
+      }
+    ]);
+  });
+
+  test('RenderContent should have been initialised correctly', async () => {
+    expect(RenderContent.render).not.toBeUndefined();
+    expect(RenderContent.props).not.toBeUndefined();
+  });
+
+});

src/components/RenderContent.ts

@@ -0,0 +1,23 @@
+import { renderContentFactory } from '@vue-storefront/core';
+
+import { LexascmsContent } from '../types/lexascms';
+
+export const extractContent = function (content: LexascmsContent | null) {
+  // Ensure content is an array
+  if (content === null) {
+    content = [];
+  } else if (!(content instanceof Array)) {
+    content = [ content ];
+  }
+  // Generate component map
+  const componentMap = content.map(contentItem => ({
+    componentName: contentItem.type,
+    props: contentItem
+  }));
+  // Return
+  return componentMap;
+}
+
+export const RenderContent = renderContentFactory({
+  extractContent
+});

src/index.ts

@@ -1,6 +1,7 @@
 import { apiClientFactory, integrationPluginFactory } from '@vue-storefront/core';
 
 import { getContent } from './api';
+import { RenderContent } from './components/RenderContent';
 import { useContent } from './composables/useContent';
 import { LexascmsSetupConfig } from './types/lexascms';
 
@@ -26,5 +27,6 @@ const integrationPlugin = integrationPluginFactory(createApiClient);
 export {
   createApiClient,
   integrationPlugin,
+  RenderContent,
   useContent
 };