preloads all custom elements and leaves within RichText

src/client/components/customComponents.js

@@ -11,7 +11,7 @@ function stringify(obj, config) {
     });
     return `{${result.join(',')}}`;
   }
-  return `ReactLazyPreload(() => import('${path.join(config.paths.configDir, obj)}'))`;
+  return `() => import('${path.join(config.paths.configDir, obj)}')`;
 }
 
 function recursivelyAddFieldComponents(fields, config) {
@@ -109,14 +109,6 @@ function customComponents(config) {
 
   return {
     code: `
-      const React = require('react');
-
-      const ReactLazyPreload = importStatement => {
-        const Component = React.lazy(importStatement);
-        Component.preload = importStatement;
-        return Component;
-      };
-
       export default ${string};
   `,
   };

src/client/components/forms/field-types/RichText/RichText.js

@@ -41,7 +41,6 @@ const RichText = (props) => {
   const path = pathFromProps || name;
 
   const [preloaded, setPreloaded] = useState(false);
-
   const [enabledElements, setEnabledElements] = useState({});
   const [enabledLeaves, setEnabledLeaves] = useState({});
 
@@ -102,43 +101,18 @@ const RichText = (props) => {
   useEffect(() => {
     if (!preloaded) {
       const preload = async () => {
-        const elementPromises = Object.values(enabledElements).reduce((promises, element) => {
-          const componentPromises = [];
+        const mergedElements = await mergeCustomFunctions(`${customComponentPath}.elements`, elements, elementTypes);
+        const mergedLeaves = await mergeCustomFunctions(`${customComponentPath}.leaves`, leaves, leafTypes);
 
-          if (element?.button?.preload) componentPromises.push(element.button.preload());
-          if (element?.element?.preload) componentPromises.push(element.element.preload());
-
-          return [
-            ...promises,
-            ...componentPromises,
-          ];
-        }, []);
-
-        const leafPromises = Object.values(enabledLeaves).reduce((promises, leaf) => {
-          const componentPromises = [];
-
-          if (leaf?.button?.preload) componentPromises.push(leaf.button.preload());
-          if (leaf?.leaf?.preload) {
-            componentPromises.push(leaf.leaf.preload());
-          }
-
-          return [
-            ...promises,
-            ...componentPromises,
-          ];
-        }, []);
-
-        await Promise.all([...elementPromises, ...leafPromises]);
-
-        setEnabledElements(mergeCustomFunctions(`${customComponentPath}.elements`, elements, elementTypes));
-        setEnabledLeaves(mergeCustomFunctions(`${customComponentPath}.leaves`, leaves, leafTypes));
+        setEnabledElements(mergedElements);
+        setEnabledLeaves(mergedLeaves);
 
         setPreloaded(true);
       };
 
       preload();
     }
-  }, [preloaded, enabledElements, enabledLeaves, customComponentPath, elements, leaves]);
+  }, [preloaded, customComponentPath, elements, leaves]);
 
   if (!preloaded) {
     return null;
@@ -210,22 +184,6 @@ const RichText = (props) => {
           }}
         />
       </Slate>
-      <div className={`${baseClass}__preload`}>
-        {Object.values(enabledElements).map(({ element: Element }, i) => (
-          <Element
-            key={i}
-          >
-            {i}
-          </Element>
-        ))}
-        {Object.values(enabledLeaves).map(({ leaf: Leaf }, i) => (
-          <Leaf
-            key={i}
-          >
-            {i}
-          </Leaf>
-        ))}
-      </div>
     </div>
   );
 };

src/client/components/forms/field-types/RichText/mergeCustomFunctions.js

@@ -1,6 +1,23 @@
 import customComponents from '../../../customComponents';
 
-export default (path, enabledFunctions, builtInFunctions) => {
+const setComponent = async (obj, key, loadComponent) => {
+  const newObj = obj;
+  const Component = await loadComponent();
+  newObj[key] = Component.default;
+};
+
+const loadComponents = (promises, obj) => Object.entries(obj).forEach(([key, val]) => {
+  if (typeof val === 'object') {
+    loadComponents(promises, val);
+  }
+  if (typeof val === 'function') {
+    promises.push(setComponent(obj, key, val));
+  }
+});
+
+export default async (path, enabledFunctions, builtInFunctions) => {
+  const promises = [];
+
   const CustomFunctions = path.split('.').reduce((res, prop) => {
     const potentialRowIndex = parseInt(prop, 10);
 
@@ -15,6 +32,10 @@ export default (path, enabledFunctions, builtInFunctions) => {
     return {};
   }, customComponents);
 
+  loadComponents(promises, CustomFunctions);
+
+  await Promise.all(promises);
+
   const formattedEnabledFunctions = [...enabledFunctions];
 
   if (enabledFunctions.indexOf('ul') > -1 || enabledFunctions.indexOf('ol') > -1) {

src/client/components/utilities/RenderCustomComponent/index.js

@@ -7,7 +7,7 @@ const RenderCustomComponent = (props) => {
   const { path, DefaultComponent, componentProps } = props;
 
   if (path) {
-    const CustomComponent = path.split('.').reduce((res, prop) => {
+    const customComponentImport = path.split('.').reduce((res, prop) => {
       const potentialRowIndex = parseInt(prop, 10);
 
       if (!Number.isNaN(potentialRowIndex) && res.fields) {
@@ -21,7 +21,9 @@ const RenderCustomComponent = (props) => {
       return false;
     }, customComponents);
 
-    if (CustomComponent) {
+    if (customComponentImport) {
+      const CustomComponent = React.lazy(customComponentImport);
+
       return (
         <Suspense fallback={<Loading />}>
           <CustomComponent {...componentProps} />