refactor: make components optionally lazy

Signed-off-by: Camila Belo <camilaibs@gmail.com>

packages/app-next/src/examples/notFoundErrorPageExtension.tsx

@@ -58,5 +58,5 @@ export function CustomNotFoundErrorPage() {
 
 export default createComponentExtension({
   ref: coreComponentsRefs.notFoundErrorPage,
-  component: async () => CustomNotFoundErrorPage,
+  component: { sync: () => CustomNotFoundErrorPage },
 });

packages/core-compat-api/src/collectLegacyComponents.tsx

@@ -34,13 +34,13 @@ const refs: Record<string, ComponentRef<ComponentTypes>> = {
 /** @public */
 export function collectLegacyComponents(components: Partial<AppComponents>) {
   return Object.entries(components).reduce<Extension<unknown>[]>(
-    (extensions, [componentName, componentFunction]) => {
-      const ref = refs[componentName];
+    (extensions, [name, component]) => {
+      const ref = refs[name];
       return ref
         ? extensions.concat(
             createComponentExtension({
               ref,
-              component: async () => componentFunction,
+              component: { sync: () => component },
             }),
           )
         : extensions;

packages/frontend-app-api/src/extensions/components.tsx

@@ -24,20 +24,20 @@ import { components as defaultComponents } from '../../../app-defaults/src/defau
 
 export const DefaultProgressComponent = createComponentExtension({
   ref: coreComponentsRefs.progress,
-  component: async () => defaultComponents.Progress,
+  component: { sync: () => defaultComponents.Progress },
 });
 
 export const DefaultBootErrorPageComponent = createComponentExtension({
   ref: coreComponentsRefs.bootErrorPage,
-  component: async () => defaultComponents.BootErrorPage,
+  component: { sync: () => defaultComponents.BootErrorPage },
 });
 
 export const DefaultNotFoundErrorPageComponent = createComponentExtension({
   ref: coreComponentsRefs.notFoundErrorPage,
-  component: async () => defaultComponents.NotFoundErrorPage,
+  component: { sync: () => defaultComponents.NotFoundErrorPage },
 });
 
 export const DefaultErrorBoundaryComponent = createComponentExtension({
   ref: coreComponentsRefs.errorBoundaryFallback,
-  component: async () => defaultComponents.ErrorBoundaryFallback,
+  component: { sync: () => defaultComponents.ErrorBoundaryFallback },
 });

packages/frontend-plugin-api/src/extensions/createComponentExtension.tsx

@@ -35,10 +35,19 @@ export function createComponentExtension<
   disabled?: boolean;
   inputs?: TInputs;
   configSchema?: PortableSchema<TConfig>;
-  component: (values: {
-    config: TConfig;
-    inputs: Expand<ExtensionInputValues<TInputs>>;
-  }) => Promise<TRef['T']>;
+  component:
+    | {
+        lazy: (values: {
+          config: TConfig;
+          inputs: Expand<ExtensionInputValues<TInputs>>;
+        }) => Promise<TRef['T']>;
+      }
+    | {
+        sync: (values: {
+          config: TConfig;
+          inputs: Expand<ExtensionInputValues<TInputs>>;
+        }) => TRef['T'];
+      };
 }) {
   const id = options.ref.id;
   return createExtension({
@@ -51,11 +60,16 @@ export function createComponentExtension<
       component: coreExtensionData.component,
     },
     factory({ config, inputs, node }) {
-      const ExtensionComponent = lazy(() =>
-        options
-          .component({ config, inputs })
-          .then(component => ({ default: component })),
-      );
+      let ExtensionComponent: TRef['T'];
+
+      if ('sync' in options.component) {
+        ExtensionComponent = options.component.sync({ config, inputs });
+      } else {
+        const loader = options.component.lazy({ config, inputs });
+        ExtensionComponent = lazy(() =>
+          loader.then(component => ({ default: component })),
+        );
+      }
 
       return {
         component: {