@teambit/component 0.0.784 → 0.0.787

package/ui/component.tsx

@@ -3,12 +3,12 @@ import flatten from 'lodash.flatten';
 import { RouteSlot, SlotRouter } from '@teambit/ui-foundation.ui.react-router.slot-router';
 import { SlotRegistry } from '@teambit/harmony';
 import { useLanesContext } from '@teambit/lanes.ui.lanes';
-
 import styles from './component.module.scss';
 import { ComponentProvider, ComponentDescriptorProvider } from './context';
-import { useComponent } from './use-component';
+import { useComponent as useComponentQuery, UseComponentType } from './use-component';
 import { ComponentModel } from './component-model';
 import { useIdFromLocation } from './use-component-from-location';
+import { ComponentID } from '..';
 
 export type ComponentPageSlot = SlotRegistry<ComponentPageElement[]>;
 export type ComponentPageElement = {
@@ -21,22 +21,36 @@ export type ComponentProps = {
   routeSlot: RouteSlot;
   host: string;
   onComponentChange?: (activeComponent?: ComponentModel) => void;
+  useComponent?: UseComponentType;
+  componentIdStr?: string;
 };
 
 /**
  * main UI component of the Component extension.
  */
-export function Component({ routeSlot, containerSlot, host, onComponentChange }: ComponentProps) {
-  const componentId = useIdFromLocation();
+export function Component({
+  routeSlot,
+  containerSlot,
+  host,
+  onComponentChange,
+  componentIdStr,
+  useComponent,
+}: ComponentProps) {
+  const idFromLocation = useIdFromLocation();
+  const componentId = componentIdStr ? ComponentID.fromString(componentIdStr) : undefined;
+  const fullName = componentId?.fullName || idFromLocation;
   const lanesContext = useLanesContext();
-  const laneComponent = componentId ? lanesContext?.resolveComponent(componentId) : undefined;
-  const useComponentOptions = laneComponent && {
-    logFilters: { log: { logHead: laneComponent.version } },
+  const laneComponent = fullName
+    ? lanesContext?.resolveComponent(fullName)
+    : undefined;
+  const useComponentOptions = {
+    logFilters: laneComponent && { log: { logHead: laneComponent.version } },
+    customUseComponent: useComponent,
   };
 
-  const { component, componentDescriptor, error } = useComponent(
+  const { component, componentDescriptor, error } = useComponentQuery(
     host,
-    laneComponent?.id.toString() || componentId,
+    laneComponent?.id.toString() || componentId?.toString() || idFromLocation,
     useComponentOptions
   );
   // trigger onComponentChange when component changes
@@ -56,7 +70,7 @@ export function Component({ routeSlot, containerSlot, host, onComponentChange }:
       <ComponentProvider component={component}>
         {before}
         <div className={styles.container}>
-          {routeSlot && <SlotRouter parentPath={`${componentId}/*`} slot={routeSlot} />}
+          {routeSlot && <SlotRouter parentPath={`${fullName}/*`} slot={routeSlot} />}
         </div>
         {after}
       </ComponentProvider>

package/ui/menu/menu.tsx

@@ -12,12 +12,13 @@ import { Menu as ConsumeMethodsMenu } from '@teambit/ui-foundation.ui.use-box.me
 import { LaneModel, useLanesContext } from '@teambit/lanes.ui.lanes';
 import { LegacyComponentLog } from '@teambit/legacy-component-log';
 import type { ComponentModel } from '../component-model';
-import { useComponent } from '../use-component';
+import { useComponent as useComponentQuery, UseComponentType } from '../use-component';
 import { MenuNav } from './menu-nav';
 import { MobileMenuNav } from './mobile-menu-nav';
 import styles from './menu.module.scss';
 import { OrderedNavigationSlot, ConsumeMethodSlot } from './nav-plugin';
 import { useIdFromLocation } from '../use-component-from-location';
+import { ComponentID } from '../..';
 
 export type MenuProps = {
   className?: string;
@@ -36,6 +37,10 @@ export type MenuProps = {
   menuItemSlot: MenuItemSlot;
 
   consumeMethodSlot: ConsumeMethodSlot;
+
+  componentIdStr?: string;
+
+  useComponent?: UseComponentType;
 };
 
 /**
@@ -48,21 +53,30 @@ export function ComponentMenu({
   host,
   menuItemSlot,
   consumeMethodSlot,
+  componentIdStr,
+  useComponent,
 }: MenuProps) {
-  const componentId = useIdFromLocation();
+  const idFromLocation = useIdFromLocation();
+  const componentId = componentIdStr ? ComponentID.fromString(componentIdStr) : undefined;
+  const fullName = componentId?.fullName || idFromLocation;
   const lanesContext = useLanesContext();
-  const laneComponent = componentId ? lanesContext?.resolveComponent(componentId) : undefined;
-  const useComponentOptions = laneComponent && {
-    logFilters: { log: { logHead: laneComponent.version } },
+  const laneComponent = fullName ? lanesContext?.resolveComponent(fullName) : undefined;
+  const useComponentOptions = {
+    logFilters: laneComponent && { log: { logHead: laneComponent.version } },
+    customUseComponent: useComponent,
   };
 
-  const { component } = useComponent(host, laneComponent?.id.toString() || componentId, useComponentOptions);
+  const { component } = useComponentQuery(
+    host,
+    laneComponent?.id.toString() || componentId?.toStringWithoutVersion() || fullName,
+    useComponentOptions
+  );
   const mainMenuItems = useMemo(() => groupBy(flatten(menuItemSlot.values()), 'category'), [menuItemSlot]);
   if (!component) return <FullLoader />;
   return (
     <Routes>
       <Route
-        path={`${componentId}/*`}
+        path={`${fullName}/*`}
         element={
           <div className={classnames(styles.topBar, className)}>
             <div className={styles.leftSide}>

package/ui/use-component-query.ts

@@ -24,8 +24,8 @@ export const componentOverviewFields = gql`
       # 'id' property in gql refers to a *global* identifier and used for caching.
       # this makes aspect data cache under the same key, even when they are under different components.
       # renaming the property fixes that.
-      aspectId: id
-      aspectData: data
+      id
+      data
     }
     elementsUrl
     description
@@ -244,7 +244,13 @@ export function useComponentQuery(componentId: string, host: string, filters?: F
   const rawComponent = data?.getHost?.get;
   return useMemo(() => {
     const aspectList = {
-      entries: rawComponent?.aspects,
+      entries: rawComponent?.aspects.map((aspectObject) => {
+        return {
+          ...aspectObject,
+          aspectId: aspectObject.id,
+          aspectData: aspectObject.data
+        };
+      }),
     };
     const id = rawComponent && ComponentID.fromObject(rawComponent.id);
     return {

package/ui/use-component.tsx

@@ -13,18 +13,22 @@ export type Component = {
 export type UseComponentOptions = {
   version?: string;
   logFilters?: Filters;
+  customUseComponent?: UseComponentType
 };
 
+export type UseComponentType = (id: string, host: string, filters?: Filters) => Component
+
 export function useComponent(host: string, id?: string, options?: UseComponentOptions): Component {
   const query = useQuery();
-  const { version, logFilters } = options || {};
+  const { version, logFilters, customUseComponent } = options || {};
   const componentVersion = (version || query.get('version')) ?? undefined;
 
   if (!id) throw new TypeError('useComponent received no component id');
 
   const componentIdStr = withVersion(id, componentVersion);
+  const targetUseComponent = customUseComponent || useComponentQuery;
 
-  return useComponentQuery(componentIdStr, host, logFilters);
+  return targetUseComponent(componentIdStr, host, logFilters);
 }
 
 function withVersion(id: string, version?: string) {