refactor: resolve all slot children on component change

Author: chrisvxd

packages/core/lib/for-each-slot.ts

@@ -1,9 +1,13 @@
-import { ComponentData, Config, Content, RootData } from "../types";
+import { ComponentData, Content, RootData } from "../types";
 import { isSlot } from "./is-slot";
 
-export const forEachSlot = <T extends ComponentData | RootData>(
+export const forEachSlot = async <T extends ComponentData | RootData>(
   item: T,
-  cb: (parentId: string, slotId: string, content: Content) => void,
+  cb: (
+    parentId: string,
+    slotId: string,
+    content: Content
+  ) => Promise<void> | void,
   recursive: boolean = false
 ) => {
   const props: Record<string, any> = item.props || {};
@@ -16,10 +20,12 @@ export const forEachSlot = <T extends ComponentData | RootData>(
     if (isSlot(props[propKey])) {
       const content = props[propKey] as Content;
 
-      cb(props.id, propKey, content);
+      await cb(props.id, propKey, content);
 
       if (recursive) {
-        content.forEach((childItem) => forEachSlot(childItem, cb, true));
+        content.forEach(
+          async (childItem) => await forEachSlot(childItem, cb, true)
+        );
       }
     }
   }

packages/core/lib/map-slots.ts

@@ -1,22 +1,20 @@
 import { ComponentData, Content, RootData } from "../types";
 import { forEachSlot } from "../lib/for-each-slot";
 
-export function mapSlots<T extends ComponentData | RootData>(
+export async function mapSlots<T extends ComponentData | RootData>(
   item: T,
-  map: (data: Content, path: string[]) => Content,
-  path: string[] = []
-): T {
+  map: (data: Content, propName: string) => Promise<Content>
+): Promise<T> {
   const props: Record<string, any> = { ...item.props };
 
-  forEachSlot(item, (_parentId, propName, content) => {
-    const currentPath = [...path, `${_parentId}:${propName}`];
-
-    props[propName] = map(
-      content.map((item) => {
-        return mapSlots(item, map as any, currentPath);
-      }),
-      currentPath
+  await forEachSlot(item, async (_parentId, propName, content) => {
+    const mappedContent = await Promise.all(
+      content.map(async (item) => {
+        return await mapSlots(item, map as any);
+      })
     );
+
+    props[propName] = await map(mappedContent, propName);
   });
 
   return { ...item, props };

packages/core/lib/resolve-component-data.ts

@@ -1,6 +1,5 @@
 import { ComponentData, Config, MappedItem, Metadata } from "../types";
 import { mapSlots } from "./map-slots";
-import { forEachSlot } from "./for-each-slot";
 import { getChanged } from "./get-changed";
 
 export const cache: {
@@ -12,7 +11,8 @@ export const resolveComponentData = async (
   config: Config,
   metadata: Metadata = {},
   onResolveStart?: (item: MappedItem) => void,
-  onResolveEnd?: (item: MappedItem) => void
+  onResolveEnd?: (item: MappedItem) => void,
+  recursive: boolean = true
 ) => {
   const configForItem = config.components[item.type];
   if (configForItem.resolveData) {
@@ -36,14 +36,31 @@ export const resolveComponentData = async (
         metadata,
       });
 
-    const resolvedItem = {
+    let resolvedItem = {
       ...item,
       props: {
         ...item.props,
         ...resolvedProps,
       },
     };
 
+    if (recursive) {
+      resolvedItem = await mapSlots(resolvedItem, async (content) => {
+        return Promise.all(
+          content.map(async (childItem) =>
+            resolveComponentData(
+              childItem,
+              config,
+              metadata,
+              onResolveStart,
+              onResolveEnd,
+              false
+            )
+          )
+        );
+      });
+    }
+
     if (Object.keys(readOnly).length) {
       resolvedItem.readOnly = readOnly;
     }