Usage of `loadable()` for dynamic component resolution for pages

README.md

Description

exports.json files include maps to all published components, and for different modules (base, blog, content). This is used to look up the correct library folder and component name to resolve.

loadable.js

import baseExports from '@kickstartds/base/lib/exports.json';
import blogExports from '@kickstartds/blog/lib/exports.json';
import contentExports from '@kickstartds/content/lib/exports.json';

const components = {};
const componentCounter = [];

Object.entries(baseExports).forEach(([key, value]) => {
  components[key] = loadable(({component}) => import(`@kickstartds/base/lib/${component}/index.js`), {
    resolveComponent: (exports) => exports[value[0]],
  });
});

Object.entries(blogExports).forEach(([key, value]) => {
  components[key] = loadable(({component}) => import(`@kickstartds/blog/lib/${component}/index.js`), {
    resolveComponent: (exports) => exports[value[0]],
  });
});

Object.entries(contentExports).forEach(([key, value]) => {
  components[key] = loadable(({component}) => import(`@kickstartds/content/lib/${component}/index.js`), {
    resolveComponent: (exports) => exports[value[0]],
  });
});

const getComponent = (element) => {
  const componentType = element['type'];

  componentCounter[componentType] = componentCounter[componentType]+1 || 1;
  const key = componentType+'-'+componentCounter[componentType];

  const Component = components[componentType];
  return <Component component={componentType} key={key} { ...element } />;
};

const getContent = (elements) => {
  if (elements && elements.length > 0) {
    return elements.map((element) => getComponent(element));
  }
};

export const Page: FunctionComponent<any> = ({
  elements,
}) => (
  <Layout>
    {getContent(elements)}
  </Layout>
);