Merge pull request #683 from smartxworks/feat/extract-module

feat(runtime): add allComponents to ImplProps

packages/arco-lib/src/components/Table/Table.tsx

@@ -185,6 +185,7 @@ export const Table = implementRuntimeComponent({
     checkCrossPage,
     callbackMap,
     app,
+    allComponents,
     mergeState,
     customStyle,
     services,
@@ -420,10 +421,10 @@ export const Table = implementRuntimeComponent({
               break;
 
             case 'component':
-              const childrenSchema = app.spec.components.filter(c => {
+              const childrenSchema = allComponents.filter(c => {
                 return c.traits.find(
                   t =>
-                    t.type === 'core/v1/slot' &&
+                    (t.type === 'core/v1/slot' || t.type === 'core/v2/slot') &&
                     (t.properties.container as any).id === component.id
                 );
               });
@@ -460,6 +461,7 @@ export const Table = implementRuntimeComponent({
                   component={_childrenSchema}
                   app={app}
                   services={services}
+                  allComponents={allComponents}
                   childrenMap={{}}
                   isInModule
                   slotContext={{

packages/chakra-ui-lib/src/components/Table/Table.tsx

@@ -33,6 +33,7 @@ export const TableImpl = implementTable(
     mergeState,
     services,
     app,
+    allComponents,
     elementRef,
     slotsElements,
   }) => {
@@ -197,6 +198,7 @@ export const TableImpl = implementTable(
                       column={column}
                       services={services}
                       app={app}
+                      allComponents={allComponents}
                       slotsElements={slotsElements}
                     />
                   ))}

packages/chakra-ui-lib/src/components/Table/TableTd.tsx

@@ -25,6 +25,7 @@ export const TableTd: React.FC<{
   onClickItem: () => void;
   services: UIServices;
   component: RuntimeComponentSchema;
+  allComponents: RuntimeComponentSchema[];
   app: RuntimeApplication;
   slotsElements: SlotsElements<{
     content: {
@@ -41,6 +42,7 @@ export const TableTd: React.FC<{
     onClickItem,
     services,
     app,
+    allComponents,
     slotsElements,
   } = props;
   const evalOptions = {
@@ -110,10 +112,10 @@ export const TableTd: React.FC<{
       );
       break;
     case 'component':
-      const childrenSchema = app.spec.components.filter(c => {
+      const childrenSchema = allComponents.filter(c => {
         return c.traits.find(
           t =>
-            t.type === 'core/v1/slot' &&
+            (t.type === 'core/v1/slot' || t.type === 'core/v2/slot') &&
             (t.properties.container as any).id === component.id
         );
       });
@@ -143,6 +145,7 @@ export const TableTd: React.FC<{
           key={_childrenSchema.id}
           component={_childrenSchema}
           app={app}
+          allComponents={allComponents}
           services={services}
           childrenMap={{}}
           isInModule

packages/runtime/src/App.tsx

@@ -49,6 +49,7 @@ export const App: React.FC<AppProps> = props => {
             services={services}
             childrenMap={childrenMap}
             app={app}
+            allComponents={app.spec.components}
             hooks={hooks}
             isInModule={false}
             isInEditor={isInEditor}

packages/runtime/src/components/_internal/ModuleRenderer.tsx

@@ -67,7 +67,7 @@ const ModuleRendererContent = React.forwardRef<
     });
   }, [services.stateManager, moduleSpec.spec.stateMap, moduleId]);
 
-  const evaledModuleTemplate = useDeepCompareMemo(() => {
+  const evaledModuleTemplate: RuntimeComponentSchema[] = useDeepCompareMemo(() => {
     // here should only eval with evaledProperties, any other key not in evaledProperties should be ignored
     // so we can assume that template will not change if evaledProperties is the same
     return services.stateManager.deepEval(
@@ -159,6 +159,7 @@ const ModuleRendererContent = React.forwardRef<
           component={c}
           services={services}
           app={app}
+          allComponents={evaledModuleTemplate}
           childrenMap={childrenMap}
           isInModule={true}
         />

packages/runtime/src/components/core/List.tsx

@@ -44,80 +44,91 @@ export default implementRuntimeComponent({
     styleSlots: ['content'],
     events: [],
   },
-})(({ listData, component, app, services, customStyle, elementRef, slotsElements }) => {
-  if (!listData) {
-    return null;
-  }
-  const childrenSchema = app.spec.components.filter(c => {
-    return c.traits.find(
-      t =>
-        (t.type === 'core/v1/slot' || t.type === 'core/v2/slot') &&
-        (t.properties.container as any).id === component.id
-    );
-  });
+})(
+  ({
+    listData,
+    component,
+    app,
+    services,
+    allComponents,
+    customStyle,
+    elementRef,
+    slotsElements,
+  }) => {
+    if (!listData) {
+      return null;
+    }
+    const childrenSchema = allComponents.filter(c => {
+      return c.traits.find(
+        t =>
+          (t.type === 'core/v1/slot' || t.type === 'core/v2/slot') &&
+          (t.properties.container as any).id === component.id
+      );
+    });
+    if (childrenSchema.length === 0) {
+      return (
+        <div
+          className={css`
+            ${customStyle?.content}
+          `}
+          ref={elementRef}
+        >
+          List has no children. Drag components into here to add listItems.
+        </div>
+      );
+    }
+
+    const listItems = listData.map((listItem, i) => {
+      const _childrenSchema = childrenSchema.map(child => {
+        return {
+          ...child,
+          id: `${component.id}_${child.id}_${i}`,
+        };
+      });
+
+      /**
+       * FIXME: temporary hack
+       */
+      slotsElements.content?.(
+        {
+          [LIST_ITEM_EXP]: listItem,
+          [LIST_ITEM_INDEX_EXP]: i,
+        },
+        undefined,
+        `content_${i}`
+      );
+
+      const childrenEles = _childrenSchema.map(child => {
+        return (
+          <ImplWrapper
+            key={child.id}
+            component={child}
+            app={app}
+            allComponents={allComponents}
+            services={services}
+            childrenMap={{}}
+            isInModule
+            slotContext={{
+              renderSet: new Set(),
+              slotKey: formatSlotKey(component.id, 'content', `content_${i}`),
+            }}
+          />
+        );
+      });
+
+      return <li key={i}>{childrenEles}</li>;
+    });
 
-  if (childrenSchema.length === 0) {
     return (
-      <div
+      <ul
         className={css`
+          list-style: none;
           ${customStyle?.content}
         `}
         ref={elementRef}
       >
-        List has no children. Drag components into here to add listItems.
-      </div>
+        {listItems}
+      </ul>
     );
   }
-
-  const listItems = listData.map((listItem, i) => {
-    const _childrenSchema = childrenSchema.map(child => {
-      return {
-        ...child,
-        id: `${component.id}_${child.id}_${i}`,
-      };
-    });
-
-    /**
-     * FIXME: temporary hack
-     */
-    slotsElements.content?.(
-      {
-        [LIST_ITEM_EXP]: listItem,
-        [LIST_ITEM_INDEX_EXP]: i,
-      },
-      undefined,
-      `content_${i}`
-    );
-
-    const childrenEles = _childrenSchema.map(child => {
-      return (
-        <ImplWrapper
-          key={child.id}
-          component={child}
-          app={app}
-          services={services}
-          childrenMap={{}}
-          isInModule
-          slotContext={{
-            renderSet: new Set(),
-            slotKey: formatSlotKey(component.id, 'content', `content_${i}`),
-          }}
-        />
-      );
-    });
-
-    return <li key={i}>{childrenEles}</li>;
-  });
-
-  return (
-    <ul
-      className={css`
-        list-style: none;
-        ${customStyle?.content}
-      `}
-      ref={elementRef}
-    >
-      {listItems}
-    </ul>
-  );
-});
+);

packages/runtime/src/types/component.ts

@@ -21,6 +21,7 @@ export type ImplWrapperProps<
   services: UIServices;
   isInModule: boolean;
   app: RuntimeApplication;
+  allComponents: RuntimeComponentSchema[];
   slotContext?: { renderSet: Set<string>; slotKey?: string };
 } & ComponentParamsFromApp;