@teambit/component 0.0.593 → 0.0.597

package/component.docs.mdx

@@ -6,3 +6,50 @@ labels: ['component', 'bit', 'extension', 'aspect']
 import { Component } from '@teambit/component.aspect-docs.component';
 
 <Component />
+
+## Expanding this aspect
+
+Bit allows you to register to slots and expand the component aspect with new capabilities.
+
+### Available slots:
+
+This aspect can be expanded via its available slots, to allow new capabilities to the component page ui.
+
+#### `registerConsumeMethod`:
+
+This method allows you to register new ways to consume a component, and present it in the component page ui. It will add any custom components to the `use-box` in the page's header.
+
+First, require the component aspect to your aspect's code, and use `registerConsumeMethod` to add your custom **consume method**.
+
+`registerConsumeMethod` expects a callback function that is provided with the `ComponentModel` data in it's `args` and returns an object with `Component` and a `Title` of type `ReactNode` that you would need to supply in order for them to render in the menu.
+
+Another optional parameter is the `order`. This will allow you to decide the order of your method in the tabs.
+
+:::note
+If `Title` or `Component` are `undefined`, the method will not be presented in the menu.
+:::
+
+```
+// in your aspect
+
+import { ComponentUI } from '@teambit/component';
+
+private pnpmMethod: ConsumePlugin = (componentModel) => {
+    const registry = componentModel.packageName.split('/')[0];
+    return {
+      Title: <img src="https://static.bit.dev/brands/pnpm.svg" />,
+      Component: (
+        <Install
+          config={`npm config set ${registry}:registry' https://node.bit.dev`}
+          componentName={componentModel.id.name}
+          packageManager="pnpm"
+          copyString={`pnpm i ${componentModel.packageName}`}
+          registryName={registry}
+        />
+      ),
+      order: 1,
+    };
+  };
+
+ComponentUI.registerConsumeMethod(YourAspect.pnpmMethod)
+```

package/component.ui.runtime.tsx

@@ -7,12 +7,13 @@ import { NavLinkProps } from '@teambit/base-ui.routing.nav-link';
 import { UIRuntime } from '@teambit/ui';
 import { isBrowser } from '@teambit/ui-foundation.ui.is-browser';
 import React from 'react';
+import { Import } from '@teambit/ui-foundation.ui.use-box.menu';
 import { RouteProps } from 'react-router-dom';
 import CommandBarAspect, { CommandBarUI, CommandEntry } from '@teambit/command-bar';
 import copy from 'copy-to-clipboard';
 import { ComponentAspect } from './component.aspect';
 import { Component, ComponentPageElement, ComponentPageSlot } from './ui/component';
-import { Menu, NavPlugin, OrderedNavigationSlot } from './ui/menu';
+import { Menu, NavPlugin, OrderedNavigationSlot, ConsumeMethodSlot, ConsumePlugin } from './ui/menu';
 import { AspectSection } from './aspect.section';
 import { ComponentModel } from './ui';
 
@@ -40,6 +41,8 @@ export class ComponentUI {
 
     private navSlot: OrderedNavigationSlot,
 
+    private consumeMethodSlot: ConsumeMethodSlot,
+
     /**
      * slot for registering a new widget to the menu.
      */
@@ -115,6 +118,21 @@ export class ComponentUI {
     },
   ];
 
+  private bitMethod: ConsumePlugin = (comp) => {
+    const version = comp.version === comp.latest ? '' : `@${comp.version}`;
+    return {
+      Title: <img style={{ width: '20px' }} src="https://static.bit.dev/brands/bit-logo-text.svg" />,
+      Component: (
+        <Import
+          componentId={`${comp.id.toString({ ignoreVersion: true })}${version}`}
+          packageName={`${comp.packageName}${version}`}
+          componentName={comp.id.name}
+        />
+      ),
+      order: 0,
+    };
+  };
+
   registerPubSub() {
     this.pubsub.sub(PreviewAspect.id, (be: BitBaseEvent<any>) => {
       if (be.type === ClickInsideAnIframeEvent.TYPE) {
@@ -147,7 +165,13 @@ export class ComponentUI {
 
   getMenu(host: string) {
     return (
-      <Menu navigationSlot={this.navSlot} widgetSlot={this.widgetSlot} host={host} menuItemSlot={this.menuItemSlot} />
+      <Menu
+        navigationSlot={this.navSlot}
+        consumeMethodSlot={this.consumeMethodSlot}
+        widgetSlot={this.widgetSlot}
+        host={host}
+        menuItemSlot={this.menuItemSlot}
+      />
     );
   }
 
@@ -163,6 +187,10 @@ export class ComponentUI {
     });
   }
 
+  registerConsumeMethod(...consumeMethods: ConsumePlugin[]) {
+    this.consumeMethodSlot.register(consumeMethods);
+  }
+
   registerWidget(widget: NavLinkProps, order?: number) {
     this.widgetSlot.register({ props: widget, order });
   }
@@ -183,6 +211,7 @@ export class ComponentUI {
     Slot.withType<RouteProps>(),
     Slot.withType<NavPlugin>(),
     Slot.withType<NavigationSlot>(),
+    Slot.withType<ConsumeMethodSlot>(),
     Slot.withType<MenuItemSlot>(),
     Slot.withType<ComponentPageSlot>(),
   ];
@@ -190,9 +219,10 @@ export class ComponentUI {
   static async provider(
     [pubsub, commandBarUI]: [PubsubUI, CommandBarUI],
     config,
-    [routeSlot, navSlot, widgetSlot, menuItemSlot, pageSlot]: [
+    [routeSlot, navSlot, consumeMethodSlot, widgetSlot, menuItemSlot, pageSlot]: [
       RouteSlot,
       OrderedNavigationSlot,
+      ConsumeMethodSlot,
       OrderedNavigationSlot,
       MenuItemSlot,
       ComponentPageSlot
@@ -200,13 +230,23 @@ export class ComponentUI {
   ) {
     // TODO: refactor ComponentHost to a separate extension (including sidebar, host, graphql, etc.)
     // TODO: add contextual hook for ComponentHost @uri/@oded
-    const componentUI = new ComponentUI(pubsub, routeSlot, navSlot, widgetSlot, menuItemSlot, pageSlot, commandBarUI);
+    const componentUI = new ComponentUI(
+      pubsub,
+      routeSlot,
+      navSlot,
+      consumeMethodSlot,
+      widgetSlot,
+      menuItemSlot,
+      pageSlot,
+      commandBarUI
+    );
     const section = new AspectSection();
 
     componentUI.commandBarUI.addCommand(...componentUI.keyBindings);
     componentUI.registerMenuItem(componentUI.menuItems);
     componentUI.registerRoute(section.route);
     componentUI.registerWidget(section.navigationLink, section.order);
+    componentUI.registerConsumeMethod(componentUI.bitMethod);
     return componentUI;
   }
 }

package/dist/component.docs.mdx

@@ -6,3 +6,50 @@ labels: ['component', 'bit', 'extension', 'aspect']
 import { Component } from '@teambit/component.aspect-docs.component';
 
 <Component />
+
+## Expanding this aspect
+
+Bit allows you to register to slots and expand the component aspect with new capabilities.
+
+### Available slots:
+
+This aspect can be expanded via its available slots, to allow new capabilities to the component page ui.
+
+#### `registerConsumeMethod`:
+
+This method allows you to register new ways to consume a component, and present it in the component page ui. It will add any custom components to the `use-box` in the page's header.
+
+First, require the component aspect to your aspect's code, and use `registerConsumeMethod` to add your custom **consume method**.
+
+`registerConsumeMethod` expects a callback function that is provided with the `ComponentModel` data in it's `args` and returns an object with `Component` and a `Title` of type `ReactNode` that you would need to supply in order for them to render in the menu.
+
+Another optional parameter is the `order`. This will allow you to decide the order of your method in the tabs.
+
+:::note
+If `Title` or `Component` are `undefined`, the method will not be presented in the menu.
+:::
+
+```
+// in your aspect
+
+import { ComponentUI } from '@teambit/component';
+
+private pnpmMethod: ConsumePlugin = (componentModel) => {
+    const registry = componentModel.packageName.split('/')[0];
+    return {
+      Title: <img src="https://static.bit.dev/brands/pnpm.svg" />,
+      Component: (
+        <Install
+          config={`npm config set ${registry}:registry' https://node.bit.dev`}
+          componentName={componentModel.id.name}
+          packageManager="pnpm"
+          copyString={`pnpm i ${componentModel.packageName}`}
+          registryName={registry}
+        />
+      ),
+      order: 1,
+    };
+  };
+
+ComponentUI.registerConsumeMethod(YourAspect.pnpmMethod)
+```

package/dist/component.ui.runtime.d.ts

@@ -5,7 +5,7 @@ import { NavLinkProps } from '@teambit/base-ui.routing.nav-link';
 import { RouteProps } from 'react-router-dom';
 import { CommandBarUI } from '@teambit/command-bar';
 import { ComponentPageElement, ComponentPageSlot } from './ui/component';
-import { NavPlugin, OrderedNavigationSlot } from './ui/menu';
+import { NavPlugin, OrderedNavigationSlot, ConsumeMethodSlot, ConsumePlugin } from './ui/menu';
 import { ComponentModel } from './ui';
 export declare type Server = {
     env: string;
@@ -22,6 +22,7 @@ export declare class ComponentUI {
     private pubsub;
     private routeSlot;
     private navSlot;
+    private consumeMethodSlot;
     /**
      * slot for registering a new widget to the menu.
      */
@@ -34,7 +35,7 @@ export declare class ComponentUI {
     /**
      * Pubsub aspects
      */
-    pubsub: PubsubUI, routeSlot: RouteSlot, navSlot: OrderedNavigationSlot, 
+    pubsub: PubsubUI, routeSlot: RouteSlot, navSlot: OrderedNavigationSlot, consumeMethodSlot: ConsumeMethodSlot, 
     /**
      * slot for registering a new widget to the menu.
      */
@@ -49,12 +50,14 @@ export declare class ComponentUI {
      */
     private keyBindings;
     private menuItems;
+    private bitMethod;
     registerPubSub(): void;
     handleComponentChange: (activeComponent?: ComponentModel | undefined) => void;
     getComponentUI(host: string): JSX.Element;
     getMenu(host: string): JSX.Element;
     registerRoute(route: RouteProps): this;
     registerNavigation(nav: NavLinkProps, order?: number): void;
+    registerConsumeMethod(...consumeMethods: ConsumePlugin[]): void;
     registerWidget(widget: NavLinkProps, order?: number): void;
     registerMenuItem: (menuItems: MenuItem[]) => void;
     registerPageItem: (...items: ComponentPageElement[]) => void;
@@ -62,10 +65,11 @@ export declare class ComponentUI {
     static runtime: import("@teambit/harmony").RuntimeDefinition;
     static slots: (((registerFn: () => string) => import("@teambit/harmony").SlotRegistry<RouteProps<string, {
         [x: string]: string | undefined;
-    }>>) | ((registerFn: () => string) => import("@teambit/harmony").SlotRegistry<MenuItemSlot>) | ((registerFn: () => string) => import("@teambit/harmony").SlotRegistry<NavPlugin>) | ((registerFn: () => string) => import("@teambit/harmony").SlotRegistry<NavigationSlot>) | ((registerFn: () => string) => import("@teambit/harmony").SlotRegistry<ComponentPageSlot>))[];
-    static provider([pubsub, commandBarUI]: [PubsubUI, CommandBarUI], config: any, [routeSlot, navSlot, widgetSlot, menuItemSlot, pageSlot]: [
+    }>>) | ((registerFn: () => string) => import("@teambit/harmony").SlotRegistry<MenuItemSlot>) | ((registerFn: () => string) => import("@teambit/harmony").SlotRegistry<NavPlugin>) | ((registerFn: () => string) => import("@teambit/harmony").SlotRegistry<NavigationSlot>) | ((registerFn: () => string) => import("@teambit/harmony").SlotRegistry<ConsumeMethodSlot>) | ((registerFn: () => string) => import("@teambit/harmony").SlotRegistry<ComponentPageSlot>))[];
+    static provider([pubsub, commandBarUI]: [PubsubUI, CommandBarUI], config: any, [routeSlot, navSlot, consumeMethodSlot, widgetSlot, menuItemSlot, pageSlot]: [
         RouteSlot,
         OrderedNavigationSlot,
+        ConsumeMethodSlot,
         OrderedNavigationSlot,
         MenuItemSlot,
         ComponentPageSlot

package/dist/component.ui.runtime.js

@@ -81,6 +81,16 @@ function _react() {
   return data;
 }
 
+function _uiFoundationUiUseBox() {
+  const data = require("@teambit/ui-foundation.ui.use-box.menu");
+
+  _uiFoundationUiUseBox = function () {
+    return data;
+  };
+
+  return data;
+}
+
 function _commandBar() {
   const data = _interopRequireDefault(require("@teambit/command-bar"));
 
@@ -153,7 +163,7 @@ class ComponentUI {
   /**
    * Pubsub aspects
    */
-  pubsub, routeSlot, navSlot,
+  pubsub, routeSlot, navSlot, consumeMethodSlot,
   /**
    * slot for registering a new widget to the menu.
    */
@@ -161,6 +171,7 @@ class ComponentUI {
     this.pubsub = pubsub;
     this.routeSlot = routeSlot;
     this.navSlot = navSlot;
+    this.consumeMethodSlot = consumeMethodSlot;
     this.widgetSlot = widgetSlot;
     this.menuItemSlot = menuItemSlot;
     this.pageItemSlot = pageItemSlot;
@@ -234,6 +245,25 @@ class ComponentUI {
         return (_this$commandBarUI4 = this.commandBarUI) === null || _this$commandBarUI4 === void 0 ? void 0 : _this$commandBarUI4.run('component.copyNpmId');
       }
     }]);
+    (0, _defineProperty2().default)(this, "bitMethod", comp => {
+      const version = comp.version === comp.latest ? '' : `@${comp.version}`;
+      return {
+        Title: /*#__PURE__*/_react().default.createElement("img", {
+          style: {
+            width: '20px'
+          },
+          src: "https://static.bit.dev/brands/bit-logo-text.svg"
+        }),
+        Component: /*#__PURE__*/_react().default.createElement(_uiFoundationUiUseBox().Import, {
+          componentId: `${comp.id.toString({
+            ignoreVersion: true
+          })}${version}`,
+          packageName: `${comp.packageName}${version}`,
+          componentName: comp.id.name
+        }),
+        order: 0
+      };
+    });
     (0, _defineProperty2().default)(this, "handleComponentChange", activeComponent => {
       this.activeComponent = activeComponent;
     });
@@ -276,6 +306,7 @@ class ComponentUI {
   getMenu(host) {
     return /*#__PURE__*/_react().default.createElement(_menu().Menu, {
       navigationSlot: this.navSlot,
+      consumeMethodSlot: this.consumeMethodSlot,
       widgetSlot: this.widgetSlot,
       host: host,
       menuItemSlot: this.menuItemSlot
@@ -294,6 +325,10 @@ class ComponentUI {
     });
   }
 
+  registerConsumeMethod(...consumeMethods) {
+    this.consumeMethodSlot.register(consumeMethods);
+  }
+
   registerWidget(widget, order) {
     this.widgetSlot.register({
       props: widget,
@@ -301,15 +336,16 @@ class ComponentUI {
     });
   }
 
-  static async provider([pubsub, commandBarUI], config, [routeSlot, navSlot, widgetSlot, menuItemSlot, pageSlot]) {
+  static async provider([pubsub, commandBarUI], config, [routeSlot, navSlot, consumeMethodSlot, widgetSlot, menuItemSlot, pageSlot]) {
     // TODO: refactor ComponentHost to a separate extension (including sidebar, host, graphql, etc.)
     // TODO: add contextual hook for ComponentHost @uri/@oded
-    const componentUI = new ComponentUI(pubsub, routeSlot, navSlot, widgetSlot, menuItemSlot, pageSlot, commandBarUI);
+    const componentUI = new ComponentUI(pubsub, routeSlot, navSlot, consumeMethodSlot, widgetSlot, menuItemSlot, pageSlot, commandBarUI);
     const section = new (_aspect().AspectSection)();
     componentUI.commandBarUI.addCommand(...componentUI.keyBindings);
     componentUI.registerMenuItem(componentUI.menuItems);
     componentUI.registerRoute(section.route);
     componentUI.registerWidget(section.navigationLink, section.order);
+    componentUI.registerConsumeMethod(componentUI.bitMethod);
     return componentUI;
   }
 
@@ -318,7 +354,7 @@ class ComponentUI {
 exports.ComponentUI = ComponentUI;
 (0, _defineProperty2().default)(ComponentUI, "dependencies", [_pubsub().default, _commandBar().default]);
 (0, _defineProperty2().default)(ComponentUI, "runtime", _ui().UIRuntime);
-(0, _defineProperty2().default)(ComponentUI, "slots", [_harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType()]);
+(0, _defineProperty2().default)(ComponentUI, "slots", [_harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType()]);
 var _default = ComponentUI;
 exports.default = _default;
 

package/dist/component.ui.runtime.js.map

@@ -1 +1 @@
-{"version":3,"sources":["component.ui.runtime.tsx"],"names":["componentIdUrlRegex","ComponentUI","constructor","pubsub","routeSlot","navSlot","widgetSlot","menuItemSlot","pageItemSlot","commandBarUI","packageName","activeComponent","version","id","versionString","handler","toString","displayName","keybinding","copyNpmId","category","title","keyChar","run","menuItems","register","items","isBrowser","registerPubSub","sub","PreviewAspect","be","type","ClickInsideAnIframeEvent","TYPE","event","MouseEvent","view","window","bubbles","cancelable","body","document","dispatchEvent","getComponentUI","host","handleComponentChange","getMenu","registerRoute","route","registerNavigation","nav","order","props","registerWidget","widget","provider","config","pageSlot","componentUI","section","AspectSection","addCommand","keyBindings","registerMenuItem","navigationLink","PubsubAspect","CommandBarAspect","UIRuntime","Slot","withType","ComponentAspect","addRuntime"],"mappings":"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","sourcesContent":["import PubsubAspect, { PubsubUI, BitBaseEvent } from '@teambit/pubsub';\nimport PreviewAspect, { ClickInsideAnIframeEvent } from '@teambit/preview';\nimport { MenuItemSlot, MenuItem } from '@teambit/ui-foundation.ui.main-dropdown';\nimport { Slot } from '@teambit/harmony';\nimport { NavigationSlot, RouteSlot } from '@teambit/ui-foundation.ui.react-router.slot-router';\nimport { NavLinkProps } from '@teambit/base-ui.routing.nav-link';\nimport { UIRuntime } from '@teambit/ui';\nimport { isBrowser } from '@teambit/ui-foundation.ui.is-browser';\nimport React from 'react';\nimport { RouteProps } from 'react-router-dom';\nimport CommandBarAspect, { CommandBarUI, CommandEntry } from '@teambit/command-bar';\nimport copy from 'copy-to-clipboard';\nimport { ComponentAspect } from './component.aspect';\nimport { Component, ComponentPageElement, ComponentPageSlot } from './ui/component';\nimport { Menu, NavPlugin, OrderedNavigationSlot } from './ui/menu';\nimport { AspectSection } from './aspect.section';\nimport { ComponentModel } from './ui';\n\nexport type Server = {\n  env: string;\n  url: string;\n};\n\nexport type ComponentMeta = {\n  id: string;\n};\n\nexport const componentIdUrlRegex = '[\\\\w\\\\/-]*[\\\\w-]';\n\nexport class ComponentUI {\n  readonly routePath = `/:componentId(${componentIdUrlRegex})`;\n\n  constructor(\n    /**\n     * Pubsub aspects\n     */\n    private pubsub: PubsubUI,\n\n    private routeSlot: RouteSlot,\n\n    private navSlot: OrderedNavigationSlot,\n\n    /**\n     * slot for registering a new widget to the menu.\n     */\n    private widgetSlot: OrderedNavigationSlot,\n\n    private menuItemSlot: MenuItemSlot,\n\n    private pageItemSlot: ComponentPageSlot,\n\n    private commandBarUI: CommandBarUI\n  ) {\n    if (isBrowser) this.registerPubSub();\n  }\n\n  /**\n   * the current visible component\n   */\n  private activeComponent?: ComponentModel;\n\n  private copyNpmId = () => {\n    const packageName = this.activeComponent?.packageName;\n    if (packageName) {\n      const version = this.activeComponent?.id.version;\n      const versionString = version ? `@${version}` : '';\n      copy(`${packageName}${versionString}`);\n    }\n  };\n\n  /**\n   * key bindings used by component aspect\n   */\n  private keyBindings: CommandEntry[] = [\n    {\n      id: 'component.copyBitId', // TODO - extract to a component!\n      handler: () => {\n        copy(this.activeComponent?.id.toString() || '');\n      },\n      displayName: 'Copy component ID',\n      keybinding: '.',\n    },\n    {\n      id: 'component.copyNpmId', // TODO - extract to a component!\n      handler: this.copyNpmId,\n      displayName: 'Copy component package name',\n      keybinding: ',',\n    },\n  ];\n\n  private menuItems: MenuItem[] = [\n    {\n      category: 'general',\n      title: 'Open command bar',\n      keyChar: 'mod+k',\n      handler: () => this.commandBarUI?.run('command-bar.open'),\n    },\n    {\n      category: 'general',\n      title: 'Toggle component list',\n      keyChar: 'alt+s',\n      handler: () => this.commandBarUI?.run('sidebar.toggle'),\n    },\n    {\n      category: 'workflow',\n      title: 'Copy component ID',\n      keyChar: '.',\n      handler: () => this.commandBarUI?.run('component.copyBitId'),\n    },\n    {\n      category: 'workflow',\n      title: 'Copy component package name',\n      keyChar: ',',\n      handler: () => this.commandBarUI?.run('component.copyNpmId'),\n    },\n  ];\n\n  registerPubSub() {\n    this.pubsub.sub(PreviewAspect.id, (be: BitBaseEvent<any>) => {\n      if (be.type === ClickInsideAnIframeEvent.TYPE) {\n        const event = new MouseEvent('mousedown', {\n          view: window,\n          bubbles: true,\n          cancelable: true,\n        });\n\n        const body = document.body;\n        body?.dispatchEvent(event);\n      }\n    });\n  }\n\n  handleComponentChange = (activeComponent?: ComponentModel) => {\n    this.activeComponent = activeComponent;\n  };\n\n  getComponentUI(host: string) {\n    return (\n      <Component\n        routeSlot={this.routeSlot}\n        containerSlot={this.pageItemSlot}\n        onComponentChange={this.handleComponentChange}\n        host={host}\n      />\n    );\n  }\n\n  getMenu(host: string) {\n    return (\n      <Menu navigationSlot={this.navSlot} widgetSlot={this.widgetSlot} host={host} menuItemSlot={this.menuItemSlot} />\n    );\n  }\n\n  registerRoute(route: RouteProps) {\n    this.routeSlot.register(route);\n    return this;\n  }\n\n  registerNavigation(nav: NavLinkProps, order?: number) {\n    this.navSlot.register({\n      props: nav,\n      order,\n    });\n  }\n\n  registerWidget(widget: NavLinkProps, order?: number) {\n    this.widgetSlot.register({ props: widget, order });\n  }\n\n  registerMenuItem = (menuItems: MenuItem[]) => {\n    this.menuItemSlot.register(menuItems);\n  };\n\n  registerPageItem = (...items: ComponentPageElement[]) => {\n    this.pageItemSlot.register(items);\n  };\n\n  static dependencies = [PubsubAspect, CommandBarAspect];\n\n  static runtime = UIRuntime;\n\n  static slots = [\n    Slot.withType<RouteProps>(),\n    Slot.withType<NavPlugin>(),\n    Slot.withType<NavigationSlot>(),\n    Slot.withType<MenuItemSlot>(),\n    Slot.withType<ComponentPageSlot>(),\n  ];\n\n  static async provider(\n    [pubsub, commandBarUI]: [PubsubUI, CommandBarUI],\n    config,\n    [routeSlot, navSlot, widgetSlot, menuItemSlot, pageSlot]: [\n      RouteSlot,\n      OrderedNavigationSlot,\n      OrderedNavigationSlot,\n      MenuItemSlot,\n      ComponentPageSlot\n    ]\n  ) {\n    // TODO: refactor ComponentHost to a separate extension (including sidebar, host, graphql, etc.)\n    // TODO: add contextual hook for ComponentHost @uri/@oded\n    const componentUI = new ComponentUI(pubsub, routeSlot, navSlot, widgetSlot, menuItemSlot, pageSlot, commandBarUI);\n    const section = new AspectSection();\n\n    componentUI.commandBarUI.addCommand(...componentUI.keyBindings);\n    componentUI.registerMenuItem(componentUI.menuItems);\n    componentUI.registerRoute(section.route);\n    componentUI.registerWidget(section.navigationLink, section.order);\n    return componentUI;\n  }\n}\n\nexport default ComponentUI;\n\nComponentAspect.addRuntime(ComponentUI);\n"]}
+{"version":3,"sources":["component.ui.runtime.tsx"],"names":["componentIdUrlRegex","ComponentUI","constructor","pubsub","routeSlot","navSlot","consumeMethodSlot","widgetSlot","menuItemSlot","pageItemSlot","commandBarUI","packageName","activeComponent","version","id","versionString","handler","toString","displayName","keybinding","copyNpmId","category","title","keyChar","run","comp","latest","Title","width","Component","ignoreVersion","name","order","menuItems","register","items","isBrowser","registerPubSub","sub","PreviewAspect","be","type","ClickInsideAnIframeEvent","TYPE","event","MouseEvent","view","window","bubbles","cancelable","body","document","dispatchEvent","getComponentUI","host","handleComponentChange","getMenu","registerRoute","route","registerNavigation","nav","props","registerConsumeMethod","consumeMethods","registerWidget","widget","provider","config","pageSlot","componentUI","section","AspectSection","addCommand","keyBindings","registerMenuItem","navigationLink","bitMethod","PubsubAspect","CommandBarAspect","UIRuntime","Slot","withType","ComponentAspect","addRuntime"],"mappings":"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","sourcesContent":["import PubsubAspect, { PubsubUI, BitBaseEvent } from '@teambit/pubsub';\nimport PreviewAspect, { ClickInsideAnIframeEvent } from '@teambit/preview';\nimport { MenuItemSlot, MenuItem } from '@teambit/ui-foundation.ui.main-dropdown';\nimport { Slot } from '@teambit/harmony';\nimport { NavigationSlot, RouteSlot } from '@teambit/ui-foundation.ui.react-router.slot-router';\nimport { NavLinkProps } from '@teambit/base-ui.routing.nav-link';\nimport { UIRuntime } from '@teambit/ui';\nimport { isBrowser } from '@teambit/ui-foundation.ui.is-browser';\nimport React from 'react';\nimport { Import } from '@teambit/ui-foundation.ui.use-box.menu';\nimport { RouteProps } from 'react-router-dom';\nimport CommandBarAspect, { CommandBarUI, CommandEntry } from '@teambit/command-bar';\nimport copy from 'copy-to-clipboard';\nimport { ComponentAspect } from './component.aspect';\nimport { Component, ComponentPageElement, ComponentPageSlot } from './ui/component';\nimport { Menu, NavPlugin, OrderedNavigationSlot, ConsumeMethodSlot, ConsumePlugin } from './ui/menu';\nimport { AspectSection } from './aspect.section';\nimport { ComponentModel } from './ui';\n\nexport type Server = {\n  env: string;\n  url: string;\n};\n\nexport type ComponentMeta = {\n  id: string;\n};\n\nexport const componentIdUrlRegex = '[\\\\w\\\\/-]*[\\\\w-]';\n\nexport class ComponentUI {\n  readonly routePath = `/:componentId(${componentIdUrlRegex})`;\n\n  constructor(\n    /**\n     * Pubsub aspects\n     */\n    private pubsub: PubsubUI,\n\n    private routeSlot: RouteSlot,\n\n    private navSlot: OrderedNavigationSlot,\n\n    private consumeMethodSlot: ConsumeMethodSlot,\n\n    /**\n     * slot for registering a new widget to the menu.\n     */\n    private widgetSlot: OrderedNavigationSlot,\n\n    private menuItemSlot: MenuItemSlot,\n\n    private pageItemSlot: ComponentPageSlot,\n\n    private commandBarUI: CommandBarUI\n  ) {\n    if (isBrowser) this.registerPubSub();\n  }\n\n  /**\n   * the current visible component\n   */\n  private activeComponent?: ComponentModel;\n\n  private copyNpmId = () => {\n    const packageName = this.activeComponent?.packageName;\n    if (packageName) {\n      const version = this.activeComponent?.id.version;\n      const versionString = version ? `@${version}` : '';\n      copy(`${packageName}${versionString}`);\n    }\n  };\n\n  /**\n   * key bindings used by component aspect\n   */\n  private keyBindings: CommandEntry[] = [\n    {\n      id: 'component.copyBitId', // TODO - extract to a component!\n      handler: () => {\n        copy(this.activeComponent?.id.toString() || '');\n      },\n      displayName: 'Copy component ID',\n      keybinding: '.',\n    },\n    {\n      id: 'component.copyNpmId', // TODO - extract to a component!\n      handler: this.copyNpmId,\n      displayName: 'Copy component package name',\n      keybinding: ',',\n    },\n  ];\n\n  private menuItems: MenuItem[] = [\n    {\n      category: 'general',\n      title: 'Open command bar',\n      keyChar: 'mod+k',\n      handler: () => this.commandBarUI?.run('command-bar.open'),\n    },\n    {\n      category: 'general',\n      title: 'Toggle component list',\n      keyChar: 'alt+s',\n      handler: () => this.commandBarUI?.run('sidebar.toggle'),\n    },\n    {\n      category: 'workflow',\n      title: 'Copy component ID',\n      keyChar: '.',\n      handler: () => this.commandBarUI?.run('component.copyBitId'),\n    },\n    {\n      category: 'workflow',\n      title: 'Copy component package name',\n      keyChar: ',',\n      handler: () => this.commandBarUI?.run('component.copyNpmId'),\n    },\n  ];\n\n  private bitMethod: ConsumePlugin = (comp) => {\n    const version = comp.version === comp.latest ? '' : `@${comp.version}`;\n    return {\n      Title: <img style={{ width: '20px' }} src=\"https://static.bit.dev/brands/bit-logo-text.svg\" />,\n      Component: (\n        <Import\n          componentId={`${comp.id.toString({ ignoreVersion: true })}${version}`}\n          packageName={`${comp.packageName}${version}`}\n          componentName={comp.id.name}\n        />\n      ),\n      order: 0,\n    };\n  };\n\n  registerPubSub() {\n    this.pubsub.sub(PreviewAspect.id, (be: BitBaseEvent<any>) => {\n      if (be.type === ClickInsideAnIframeEvent.TYPE) {\n        const event = new MouseEvent('mousedown', {\n          view: window,\n          bubbles: true,\n          cancelable: true,\n        });\n\n        const body = document.body;\n        body?.dispatchEvent(event);\n      }\n    });\n  }\n\n  handleComponentChange = (activeComponent?: ComponentModel) => {\n    this.activeComponent = activeComponent;\n  };\n\n  getComponentUI(host: string) {\n    return (\n      <Component\n        routeSlot={this.routeSlot}\n        containerSlot={this.pageItemSlot}\n        onComponentChange={this.handleComponentChange}\n        host={host}\n      />\n    );\n  }\n\n  getMenu(host: string) {\n    return (\n      <Menu\n        navigationSlot={this.navSlot}\n        consumeMethodSlot={this.consumeMethodSlot}\n        widgetSlot={this.widgetSlot}\n        host={host}\n        menuItemSlot={this.menuItemSlot}\n      />\n    );\n  }\n\n  registerRoute(route: RouteProps) {\n    this.routeSlot.register(route);\n    return this;\n  }\n\n  registerNavigation(nav: NavLinkProps, order?: number) {\n    this.navSlot.register({\n      props: nav,\n      order,\n    });\n  }\n\n  registerConsumeMethod(...consumeMethods: ConsumePlugin[]) {\n    this.consumeMethodSlot.register(consumeMethods);\n  }\n\n  registerWidget(widget: NavLinkProps, order?: number) {\n    this.widgetSlot.register({ props: widget, order });\n  }\n\n  registerMenuItem = (menuItems: MenuItem[]) => {\n    this.menuItemSlot.register(menuItems);\n  };\n\n  registerPageItem = (...items: ComponentPageElement[]) => {\n    this.pageItemSlot.register(items);\n  };\n\n  static dependencies = [PubsubAspect, CommandBarAspect];\n\n  static runtime = UIRuntime;\n\n  static slots = [\n    Slot.withType<RouteProps>(),\n    Slot.withType<NavPlugin>(),\n    Slot.withType<NavigationSlot>(),\n    Slot.withType<ConsumeMethodSlot>(),\n    Slot.withType<MenuItemSlot>(),\n    Slot.withType<ComponentPageSlot>(),\n  ];\n\n  static async provider(\n    [pubsub, commandBarUI]: [PubsubUI, CommandBarUI],\n    config,\n    [routeSlot, navSlot, consumeMethodSlot, widgetSlot, menuItemSlot, pageSlot]: [\n      RouteSlot,\n      OrderedNavigationSlot,\n      ConsumeMethodSlot,\n      OrderedNavigationSlot,\n      MenuItemSlot,\n      ComponentPageSlot\n    ]\n  ) {\n    // TODO: refactor ComponentHost to a separate extension (including sidebar, host, graphql, etc.)\n    // TODO: add contextual hook for ComponentHost @uri/@oded\n    const componentUI = new ComponentUI(\n      pubsub,\n      routeSlot,\n      navSlot,\n      consumeMethodSlot,\n      widgetSlot,\n      menuItemSlot,\n      pageSlot,\n      commandBarUI\n    );\n    const section = new AspectSection();\n\n    componentUI.commandBarUI.addCommand(...componentUI.keyBindings);\n    componentUI.registerMenuItem(componentUI.menuItems);\n    componentUI.registerRoute(section.route);\n    componentUI.registerWidget(section.navigationLink, section.order);\n    componentUI.registerConsumeMethod(componentUI.bitMethod);\n    return componentUI;\n  }\n}\n\nexport default ComponentUI;\n\nComponentAspect.addRuntime(ComponentUI);\n"]}

package/dist/index.d.ts

@@ -18,6 +18,7 @@ export type { ComponentMain } from './component.main.runtime';
 export type { ComponentUI } from './component.ui.runtime';
 export { Section } from './section';
 export { ComponentContext } from './ui/context/component-context';
+export { ConsumePlugin } from './ui/menu';
 export { ComponentModel, ComponentModelProps } from './ui/component-model';
 export type { ShowFragment, ShowRow } from './show';
 export { default as Config } from './config';

package/dist/index.js

@@ -71,6 +71,12 @@ Object.defineProperty(exports, "Config", {
     return _config().default;
   }
 });
+Object.defineProperty(exports, "ConsumePlugin", {
+  enumerable: true,
+  get: function () {
+    return _menu().ConsumePlugin;
+  }
+});
 Object.defineProperty(exports, "InvalidComponent", {
   enumerable: true,
   get: function () {
@@ -257,6 +263,16 @@ function _componentContext() {
   return data;
 }
 
+function _menu() {
+  const data = require("./ui/menu");
+
+  _menu = function () {
+    return data;
+  };
+
+  return data;
+}
+
 function _componentModel() {
   const data = require("./ui/component-model");
 

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":["ComponentAspect"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAEA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAIA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAGA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAIA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAEA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAGA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAEA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAjBA;AACA;AAGA;AACA;AAaA;AACA;eAEeA,4B","sourcesContent":["import { ComponentAspect } from './component.aspect';\n\nexport { useComponentHost } from './host';\nexport { Component, InvalidComponent } from './component';\nexport { ComponentID } from '@teambit/component-id';\nexport { default as ComponentFS } from './component-fs';\nexport type { default as ComponentConfig } from './config';\nexport type { ComponentFactory } from './component-factory';\nexport type { AspectList } from './aspect-list';\nexport { AspectEntry, AspectData } from './aspect-entry';\n// TODO: check why it's not working when using the index in snap dir like this:\n// export { Snap, Author } from './snap';\nexport { Snap, SnapProps } from './snap/snap';\nexport type { Author } from './snap/author';\n// TODO: check why it's not working when using the index in tag dir like this:\n// export { Tag } from './tag';\nexport { Tag, TagProps } from './tag/tag';\nexport { State } from './state';\nexport type { Hash } from './hash';\nexport { TagMap } from './tag-map';\nexport { ComponentMap } from './component-map';\nexport type { ComponentMain } from './component.main.runtime';\nexport type { ComponentUI } from './component.ui.runtime';\nexport { Section } from './section';\nexport { ComponentContext } from './ui/context/component-context';\nexport { ComponentModel, ComponentModelProps } from './ui/component-model';\nexport type { ShowFragment, ShowRow } from './show';\nexport { default as Config } from './config';\n// export { AspectList } from './aspect-list';\n// export { AspectEntry } from './aspect-entry';\nexport { ComponentAspect };\nexport default ComponentAspect;\n"]}
+{"version":3,"sources":["index.ts"],"names":["ComponentAspect"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAEA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAIA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAGA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAIA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAEA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAGA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAEA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAlBA;AACA;AAGA;AACA;AAcA;AACA;eAEeA,4B","sourcesContent":["import { ComponentAspect } from './component.aspect';\n\nexport { useComponentHost } from './host';\nexport { Component, InvalidComponent } from './component';\nexport { ComponentID } from '@teambit/component-id';\nexport { default as ComponentFS } from './component-fs';\nexport type { default as ComponentConfig } from './config';\nexport type { ComponentFactory } from './component-factory';\nexport type { AspectList } from './aspect-list';\nexport { AspectEntry, AspectData } from './aspect-entry';\n// TODO: check why it's not working when using the index in snap dir like this:\n// export { Snap, Author } from './snap';\nexport { Snap, SnapProps } from './snap/snap';\nexport type { Author } from './snap/author';\n// TODO: check why it's not working when using the index in tag dir like this:\n// export { Tag } from './tag';\nexport { Tag, TagProps } from './tag/tag';\nexport { State } from './state';\nexport type { Hash } from './hash';\nexport { TagMap } from './tag-map';\nexport { ComponentMap } from './component-map';\nexport type { ComponentMain } from './component.main.runtime';\nexport type { ComponentUI } from './component.ui.runtime';\nexport { Section } from './section';\nexport { ComponentContext } from './ui/context/component-context';\nexport { ConsumePlugin } from './ui/menu';\nexport { ComponentModel, ComponentModelProps } from './ui/component-model';\nexport type { ShowFragment, ShowRow } from './show';\nexport { default as Config } from './config';\n// export { AspectList } from './aspect-list';\n// export { AspectEntry } from './aspect-entry';\nexport { ComponentAspect };\nexport default ComponentAspect;\n"]}

package/dist/show/show.cmd.js

@@ -21,6 +21,16 @@ function _defineProperty2() {
   return data;
 }
 
+function _lodash() {
+  const data = require("lodash");
+
+  _lodash = function () {
+    return data;
+  };
+
+  return data;
+}
+
 function _cliTable() {
   const data = require("@teambit/cli-table");
 
@@ -117,9 +127,10 @@ class ShowCmd {
     const fragments = this.component.getShowFragments();
     const rows = await Promise.all(fragments.map(async fragment => {
       const row = await fragment.renderRow(component);
+      if (!row.content) return null;
       return [row.title, row.content];
     }));
-    const table = new (_cliTable().CLITable)([], rows);
+    const table = new (_cliTable().CLITable)([], (0, _lodash().compact)(rows));
     return table.render();
   }
 

package/dist/show/show.cmd.js.map

@@ -1 +1 @@
-{"version":3,"sources":["show.cmd.ts"],"names":["ShowCmd","constructor","component","getComponent","idStr","remote","bitId","BitId","parse","host","getHost","id","resolveComponentId","getRemoteComponent","Error","get","MissingBitMapComponent","useLegacy","json","compare","legacyShow","LegacyShow","showData","action","versions","undefined","report","legacy","fragments","getShowFragments","rows","Promise","all","map","fragment","row","renderRow","title","content","table","CLITable","render","JSON","filter"],"mappings":"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","sourcesContent":["import { Command, CommandOptions } from '@teambit/cli';\n// import { Logger } from '@teambit/logger';\n// import chalk from 'chalk';\nimport { CLITable } from '@teambit/cli-table';\nimport { MissingBitMapComponent } from '@teambit/legacy/dist/consumer/bit-map/exceptions';\nimport { BitId } from '@teambit/legacy-bit-id';\nimport LegacyShow from '@teambit/legacy/dist/cli/commands/public-cmds/show-cmd';\nimport { ComponentMain } from '../component.main.runtime';\n\nexport class ShowCmd implements Command {\n  name = 'show <id>';\n  description = 'show a component';\n  alias = '';\n  group = 'info';\n  options = [\n    ['j', 'json', 'return the component data in json format'],\n    ['l', 'legacy', 'use the legacy bit show.'],\n    ['r', 'remote', 'show a remote component'],\n    [\n      'c',\n      'compare',\n      'compare current file system component to latest tagged component [default=latest]. only works in legacy.',\n    ],\n  ] as CommandOptions;\n\n  constructor(private component: ComponentMain) {}\n\n  private async getComponent(idStr: string, remote: boolean) {\n    if (remote) {\n      const bitId: BitId = BitId.parse(idStr, true); // user used --remote so we know it has a scope\n      const host = this.component.getHost('teambit.scope/scope');\n      const id = await host.resolveComponentId(bitId);\n      if (!host.getRemoteComponent) {\n        throw new Error('Component Host does not implement getRemoteComponent()');\n      }\n      const component = await host.getRemoteComponent(id);\n      return component;\n    }\n    const host = this.component.getHost();\n    const id = await host.resolveComponentId(idStr);\n    const component = await host.get(id);\n    if (!component) throw new MissingBitMapComponent(idStr);\n    return component;\n  }\n\n  async useLegacy(id: string, json = false, remote = false, compare = false) {\n    const legacyShow = new LegacyShow();\n    const showData = await legacyShow.action([id], {\n      json,\n      versions: undefined,\n      remote,\n      compare,\n    });\n\n    return legacyShow.report(showData);\n  }\n\n  async report([idStr]: [string], { legacy, remote, compare }: { legacy: boolean; remote: boolean; compare: boolean }) {\n    if (legacy) return this.useLegacy(idStr, false, remote, compare);\n    const component = await this.getComponent(idStr, remote);\n    const fragments = this.component.getShowFragments();\n    const rows = await Promise.all(\n      fragments.map(async (fragment) => {\n        const row = await fragment.renderRow(component);\n        return [row.title, row.content];\n      })\n    );\n\n    const table = new CLITable([], rows);\n    return table.render();\n  }\n\n  async json([idStr]: [string], { remote, legacy }: { remote: boolean; legacy: boolean }) {\n    if (legacy) return JSON.parse(await this.useLegacy(idStr, true, remote));\n    const component = await this.getComponent(idStr, remote);\n    const fragments = this.component.getShowFragments();\n    const rows = await Promise.all(\n      fragments.map(async (fragment) => {\n        return fragment.json ? fragment.json(component) : undefined;\n      })\n    );\n\n    return rows.filter((row) => !!row);\n  }\n}\n"]}
+{"version":3,"sources":["show.cmd.ts"],"names":["ShowCmd","constructor","component","getComponent","idStr","remote","bitId","BitId","parse","host","getHost","id","resolveComponentId","getRemoteComponent","Error","get","MissingBitMapComponent","useLegacy","json","compare","legacyShow","LegacyShow","showData","action","versions","undefined","report","legacy","fragments","getShowFragments","rows","Promise","all","map","fragment","row","renderRow","content","title","table","CLITable","render","JSON","filter"],"mappings":"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","sourcesContent":["import { Command, CommandOptions } from '@teambit/cli';\nimport { compact } from 'lodash';\n// import { Logger } from '@teambit/logger';\n// import chalk from 'chalk';\nimport { CLITable } from '@teambit/cli-table';\nimport { MissingBitMapComponent } from '@teambit/legacy/dist/consumer/bit-map/exceptions';\nimport { BitId } from '@teambit/legacy-bit-id';\nimport LegacyShow from '@teambit/legacy/dist/cli/commands/public-cmds/show-cmd';\nimport { ComponentMain } from '../component.main.runtime';\n\nexport class ShowCmd implements Command {\n  name = 'show <id>';\n  description = 'show a component';\n  alias = '';\n  group = 'info';\n  options = [\n    ['j', 'json', 'return the component data in json format'],\n    ['l', 'legacy', 'use the legacy bit show.'],\n    ['r', 'remote', 'show a remote component'],\n    [\n      'c',\n      'compare',\n      'compare current file system component to latest tagged component [default=latest]. only works in legacy.',\n    ],\n  ] as CommandOptions;\n\n  constructor(private component: ComponentMain) {}\n\n  private async getComponent(idStr: string, remote: boolean) {\n    if (remote) {\n      const bitId: BitId = BitId.parse(idStr, true); // user used --remote so we know it has a scope\n      const host = this.component.getHost('teambit.scope/scope');\n      const id = await host.resolveComponentId(bitId);\n      if (!host.getRemoteComponent) {\n        throw new Error('Component Host does not implement getRemoteComponent()');\n      }\n      const component = await host.getRemoteComponent(id);\n      return component;\n    }\n    const host = this.component.getHost();\n    const id = await host.resolveComponentId(idStr);\n    const component = await host.get(id);\n    if (!component) throw new MissingBitMapComponent(idStr);\n    return component;\n  }\n\n  async useLegacy(id: string, json = false, remote = false, compare = false) {\n    const legacyShow = new LegacyShow();\n    const showData = await legacyShow.action([id], {\n      json,\n      versions: undefined,\n      remote,\n      compare,\n    });\n\n    return legacyShow.report(showData);\n  }\n\n  async report([idStr]: [string], { legacy, remote, compare }: { legacy: boolean; remote: boolean; compare: boolean }) {\n    if (legacy) return this.useLegacy(idStr, false, remote, compare);\n    const component = await this.getComponent(idStr, remote);\n    const fragments = this.component.getShowFragments();\n    const rows = await Promise.all(\n      fragments.map(async (fragment) => {\n        const row = await fragment.renderRow(component);\n        if (!row.content) return null;\n        return [row.title, row.content];\n      })\n    );\n\n    const table = new CLITable([], compact(rows));\n    return table.render();\n  }\n\n  async json([idStr]: [string], { remote, legacy }: { remote: boolean; legacy: boolean }) {\n    if (legacy) return JSON.parse(await this.useLegacy(idStr, true, remote));\n    const component = await this.getComponent(idStr, remote);\n    const fragments = this.component.getShowFragments();\n    const rows = await Promise.all(\n      fragments.map(async (fragment) => {\n        return fragment.json ? fragment.json(component) : undefined;\n      })\n    );\n\n    return rows.filter((row) => !!row);\n  }\n}\n"]}

package/dist/ui/component-model/component-model.d.ts

@@ -20,6 +20,7 @@ export declare type ComponentModelProps = {
     env?: Descriptor;
     labels?: string[];
     host?: string;
+    latest?: string;
 };
 export declare type ComponentServer = {
     env: string;
@@ -83,6 +84,10 @@ export declare class ComponentModel {
      * host of the component
      */
     readonly host?: string | undefined;
+    /**
+     * latest version of component
+     */
+    readonly latest?: string | undefined;
     constructor(
     /**
      * id of the component
@@ -139,12 +144,16 @@ export declare class ComponentModel {
     /**
      * host of the component
      */
-    host?: string | undefined);
+    host?: string | undefined, 
+    /**
+     * latest version of component
+     */
+    latest?: string | undefined);
     get version(): string;
     /**
      * create an instance of a component from a plain object.
      */
-    static from({ id, server, displayName, compositions, packageName, elementsUrl, tags, deprecation, buildStatus, env, status, issuesCount, description, labels, host, }: ComponentModelProps): ComponentModel;
+    static from({ id, server, displayName, compositions, packageName, elementsUrl, tags, deprecation, buildStatus, env, status, issuesCount, description, labels, host, latest, }: ComponentModelProps): ComponentModel;
     static fromArray(componentsProps: ComponentModelProps[]): ComponentModel[];
     static empty(): ComponentModel;
 }

package/dist/ui/component-model/component-model.js

@@ -104,7 +104,11 @@ class ComponentModel {
   /**
    * host of the component
    */
-  host) {
+  host,
+  /**
+   * latest version of component
+   */
+  latest) {
     this.id = id;
     this.displayName = displayName;
     this.packageName = packageName;
@@ -120,6 +124,7 @@ class ComponentModel {
     this.description = description;
     this.labels = labels;
     this.host = host;
+    this.latest = latest;
   }
 
   get version() {
@@ -146,9 +151,10 @@ class ComponentModel {
     issuesCount,
     description,
     labels,
-    host
+    host,
+    latest
   }) {
-    return new ComponentModel(_componentId().ComponentID.fromObject(id), displayName, packageName, server, _compositions().Composition.fromArray(compositions), _tagMap().TagMap.fromArray(tags.map(tag => _tag().Tag.fromObject(tag))), buildStatus, issuesCount, elementsUrl, status, deprecation, env, description, labels, host);
+    return new ComponentModel(_componentId().ComponentID.fromObject(id), displayName, packageName, server, _compositions().Composition.fromArray(compositions), _tagMap().TagMap.fromArray(tags.map(tag => _tag().Tag.fromObject(tag))), buildStatus, issuesCount, elementsUrl, status, deprecation, env, description, labels, host, latest);
   }
 
   static fromArray(componentsProps) {

package/dist/ui/component-model/component-model.js.map

@@ -1 +1 @@
-{"version":3,"sources":["component-model.ts"],"names":["ComponentModel","constructor","id","displayName","packageName","server","compositions","tags","buildStatus","issuesCount","elementsUrl","status","deprecation","environment","description","labels","host","version","from","env","ComponentID","fromObject","Composition","fromArray","TagMap","map","tag","Tag","componentsProps","rawComponent","empty","name","scope","url"],"mappings":"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","sourcesContent":["import { Composition, CompositionProps } from '@teambit/compositions';\nimport { DeprecationInfo } from '@teambit/deprecation';\nimport { Descriptor } from '@teambit/envs';\nimport { ComponentID, ComponentIdObj } from '@teambit/component-id';\n\nimport { Tag } from '../../tag';\nimport { TagMap } from '../../tag-map';\nimport { TagProps } from '../../tag/tag';\n// import { Snap } from '../../snap';\n\n// ADDING MORE PROPERTIES HERE IS NOT ALLOWED!!! IF YOU NEED DATA PLEASE ADD A NEW\n// HOOK FROM YOUR ASPECT!!!\n// TODO: remove all properties from here to their rightful place in their aspects.\nexport type ComponentModelProps = {\n  id: ComponentIdObj;\n  description: string;\n  buildStatus?: string;\n  server?: ComponentServer;\n  displayName: string;\n  packageName: string; // pkg aspect\n  elementsUrl?: string; // pkg aspect\n  compositions?: CompositionProps[];\n  tags?: TagProps[];\n  issuesCount?: number; // component/issues aspect\n  status?: any; // workspace aspect.\n  deprecation?: DeprecationInfo; // deprecation aspect\n  env?: Descriptor; // env aspect.\n  labels?: string[];\n  host?: string;\n};\n\nexport type ComponentServer = {\n  env: string;\n  url: string;\n};\n\nexport class ComponentModel {\n  constructor(\n    /**\n     * id of the component\n     */\n    readonly id: ComponentID,\n\n    /**\n     * display name of the component.\n     */\n    readonly displayName: string,\n\n    /**\n     * package name of the component.\n     */\n    readonly packageName: string,\n\n    /**\n     * the component server.\n     */\n    readonly server: ComponentServer | undefined,\n\n    /**\n     * array of compositions\n     */\n    readonly compositions: Composition[],\n\n    /**\n     * tags of the component.\n     */\n    readonly tags: TagMap,\n\n    /**\n     * component build status\n     */\n    readonly buildStatus?: string,\n\n    /**\n     * issues of component.\n     */\n    readonly issuesCount?: number,\n    /**\n     * elements url\n     */\n    readonly elementsUrl?: string,\n    /**\n     * status of component.\n     */\n    readonly status?: any,\n\n    /**\n     * deprecation info of the component.\n     */\n    readonly deprecation?: DeprecationInfo,\n\n    /**\n     * env descriptor.\n     */\n    readonly environment?: Descriptor,\n\n    /**\n     * description of the component.\n     */\n\n    readonly description = '',\n\n    readonly labels: string[] = [],\n\n    /**\n     * host of the component\n     */\n    readonly host?: string\n  ) {}\n\n  get version() {\n    if (!this.id.version) return 'new';\n    return this.id.version;\n  }\n\n  /**\n   * create an instance of a component from a plain object.\n   */\n  static from({\n    id,\n    server,\n    displayName,\n    compositions = [],\n    packageName,\n    elementsUrl,\n    tags = [],\n    deprecation,\n    buildStatus,\n    env,\n    status,\n    issuesCount,\n    description,\n    labels,\n    host,\n  }: ComponentModelProps) {\n    return new ComponentModel(\n      ComponentID.fromObject(id),\n      displayName,\n      packageName,\n      server,\n      Composition.fromArray(compositions),\n      TagMap.fromArray(tags.map((tag) => Tag.fromObject(tag))),\n      buildStatus,\n      issuesCount,\n      elementsUrl,\n      status,\n      deprecation,\n      env,\n      description,\n      labels,\n      host\n    );\n  }\n\n  static fromArray(componentsProps: ComponentModelProps[]) {\n    return componentsProps.map((rawComponent) => ComponentModel.from(rawComponent));\n  }\n\n  static empty() {\n    return new ComponentModel(\n      ComponentID.fromObject({ name: 'root', scope: 'temp' }),\n      '',\n      '',\n      { env: '', url: '' },\n      [],\n      TagMap.empty()\n    );\n  }\n}\n"]}
+{"version":3,"sources":["component-model.ts"],"names":["ComponentModel","constructor","id","displayName","packageName","server","compositions","tags","buildStatus","issuesCount","elementsUrl","status","deprecation","environment","description","labels","host","latest","version","from","env","ComponentID","fromObject","Composition","fromArray","TagMap","map","tag","Tag","componentsProps","rawComponent","empty","name","scope","url"],"mappings":"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","sourcesContent":["import { Composition, CompositionProps } from '@teambit/compositions';\nimport { DeprecationInfo } from '@teambit/deprecation';\nimport { Descriptor } from '@teambit/envs';\nimport { ComponentID, ComponentIdObj } from '@teambit/component-id';\n\nimport { Tag } from '../../tag';\nimport { TagMap } from '../../tag-map';\nimport { TagProps } from '../../tag/tag';\n// import { Snap } from '../../snap';\n\n// ADDING MORE PROPERTIES HERE IS NOT ALLOWED!!! IF YOU NEED DATA PLEASE ADD A NEW\n// HOOK FROM YOUR ASPECT!!!\n// TODO: remove all properties from here to their rightful place in their aspects.\nexport type ComponentModelProps = {\n  id: ComponentIdObj;\n  description: string;\n  buildStatus?: string;\n  server?: ComponentServer;\n  displayName: string;\n  packageName: string; // pkg aspect\n  elementsUrl?: string; // pkg aspect\n  compositions?: CompositionProps[];\n  tags?: TagProps[];\n  issuesCount?: number; // component/issues aspect\n  status?: any; // workspace aspect.\n  deprecation?: DeprecationInfo; // deprecation aspect\n  env?: Descriptor; // env aspect.\n  labels?: string[];\n  host?: string;\n  latest?: string;\n};\n\nexport type ComponentServer = {\n  env: string;\n  url: string;\n};\n\nexport class ComponentModel {\n  constructor(\n    /**\n     * id of the component\n     */\n    readonly id: ComponentID,\n\n    /**\n     * display name of the component.\n     */\n    readonly displayName: string,\n\n    /**\n     * package name of the component.\n     */\n    readonly packageName: string,\n\n    /**\n     * the component server.\n     */\n    readonly server: ComponentServer | undefined,\n\n    /**\n     * array of compositions\n     */\n    readonly compositions: Composition[],\n\n    /**\n     * tags of the component.\n     */\n    readonly tags: TagMap,\n\n    /**\n     * component build status\n     */\n    readonly buildStatus?: string,\n\n    /**\n     * issues of component.\n     */\n    readonly issuesCount?: number,\n    /**\n     * elements url\n     */\n    readonly elementsUrl?: string,\n    /**\n     * status of component.\n     */\n    readonly status?: any,\n\n    /**\n     * deprecation info of the component.\n     */\n    readonly deprecation?: DeprecationInfo,\n\n    /**\n     * env descriptor.\n     */\n    readonly environment?: Descriptor,\n\n    /**\n     * description of the component.\n     */\n\n    readonly description = '',\n\n    readonly labels: string[] = [],\n\n    /**\n     * host of the component\n     */\n    readonly host?: string,\n\n    /**\n     * latest version of component\n     */\n    readonly latest?: string\n  ) {}\n\n  get version() {\n    if (!this.id.version) return 'new';\n    return this.id.version;\n  }\n\n  /**\n   * create an instance of a component from a plain object.\n   */\n  static from({\n    id,\n    server,\n    displayName,\n    compositions = [],\n    packageName,\n    elementsUrl,\n    tags = [],\n    deprecation,\n    buildStatus,\n    env,\n    status,\n    issuesCount,\n    description,\n    labels,\n    host,\n    latest,\n  }: ComponentModelProps) {\n    return new ComponentModel(\n      ComponentID.fromObject(id),\n      displayName,\n      packageName,\n      server,\n      Composition.fromArray(compositions),\n      TagMap.fromArray(tags.map((tag) => Tag.fromObject(tag))),\n      buildStatus,\n      issuesCount,\n      elementsUrl,\n      status,\n      deprecation,\n      env,\n      description,\n      labels,\n      host,\n      latest\n    );\n  }\n\n  static fromArray(componentsProps: ComponentModelProps[]) {\n    return componentsProps.map((rawComponent) => ComponentModel.from(rawComponent));\n  }\n\n  static empty() {\n    return new ComponentModel(\n      ComponentID.fromObject({ name: 'root', scope: 'temp' }),\n      '',\n      '',\n      { env: '', url: '' },\n      [],\n      TagMap.empty()\n    );\n  }\n}\n"]}

package/dist/ui/menu/index.d.ts

@@ -1,2 +1,2 @@
 export { Menu } from './menu';
-export type { NavPlugin, OrderedNavigationSlot } from './nav-plugin';
+export type { NavPlugin, OrderedNavigationSlot, ConsumePlugin, ConsumeMethodSlot } from './nav-plugin';

package/dist/ui/menu/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA","sourcesContent":["export { Menu } from './menu';\nexport type { NavPlugin, OrderedNavigationSlot } from './nav-plugin';\n"]}
+{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA","sourcesContent":["export { Menu } from './menu';\nexport type { NavPlugin, OrderedNavigationSlot, ConsumePlugin, ConsumeMethodSlot } from './nav-plugin';\n"]}

package/dist/ui/menu/menu.d.ts

@@ -1,5 +1,5 @@
 import { MenuItemSlot } from '@teambit/ui-foundation.ui.main-dropdown';
-import { OrderedNavigationSlot } from './nav-plugin';
+import { OrderedNavigationSlot, ConsumeMethodSlot } from './nav-plugin';
 export declare type MenuProps = {
     className?: string;
     /**
@@ -15,8 +15,9 @@ export declare type MenuProps = {
      * main dropdown item slot
      */
     menuItemSlot: MenuItemSlot;
+    consumeMethodSlot: ConsumeMethodSlot;
 };
 /**
  * top bar menu.
  */
-export declare function Menu({ navigationSlot, widgetSlot, className, host, menuItemSlot }: MenuProps): JSX.Element;
+export declare function Menu({ navigationSlot, widgetSlot, className, host, menuItemSlot, consumeMethodSlot }: MenuProps): JSX.Element;

package/dist/ui/menu/menu.js

@@ -4,8 +4,6 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 
 require("core-js/modules/es.array.iterator.js");
 
-require("core-js/modules/es.regexp.exec.js");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -133,7 +131,8 @@ function Menu({
   widgetSlot,
   className,
   host,
-  menuItemSlot
+  menuItemSlot,
+  consumeMethodSlot
 }) {
   const {
     component
@@ -153,14 +152,16 @@ function Menu({
   }, /*#__PURE__*/_react().default.createElement(_menuNav().MenuNav, {
     navigationSlot: widgetSlot
   })), /*#__PURE__*/_react().default.createElement(VersionRelatedDropdowns, {
-    component: component
+    component: component,
+    consumeMethods: consumeMethodSlot
   }), /*#__PURE__*/_react().default.createElement(_uiFoundationUi().MainDropdown, {
     menuItems: mainMenuItems
   })));
 }
 
 function VersionRelatedDropdowns({
-  component
+  component,
+  consumeMethods
 }) {
   const versionList = (0, _react().useMemo)(() => {
     var _component$tags;
@@ -171,21 +172,13 @@ function VersionRelatedDropdowns({
       return tag === null || tag === void 0 ? void 0 : (_tag$version = tag.version) === null || _tag$version === void 0 ? void 0 : _tag$version.version;
     }).filter(x => x !== undefined).reverse();
   }, [component.tags]) || [];
-  const isLatestVersion = (0, _react().useMemo)(() => component.version === versionList[0], [component.version]);
-  const packageVersion = (0, _react().useMemo)(() => isLatestVersion ? '' : `@${component.version}`, [component.version]);
-  const origin = typeof window !== undefined ? window.location.origin : undefined;
-  const finalElementsUrl = origin && component.elementsUrl ? `${origin}${component.elementsUrl}` : undefined;
+  const methods = useConsumeMethods(consumeMethods, component);
   return /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, versionList.length > 0 && /*#__PURE__*/_react().default.createElement(_uiFoundationUiUseBox().UseBoxDropdown, {
     position: "bottom-end",
     className: _menuModule().default.useBox,
-    Menu: () => /*#__PURE__*/_react().default.createElement(_uiFoundationUiUseBox2().Menu, {
-      componentName: component.id.name,
-      componentId: component.id.toString({
-        ignoreVersion: isLatestVersion
-      }),
-      packageName: `${component.packageName}${packageVersion}`,
-      elementsUrl: finalElementsUrl,
-      registryName: component.packageName.split('/')[0]
+    Menu: /*#__PURE__*/_react().default.createElement(_uiFoundationUiUseBox2().Menu, {
+      methods: methods,
+      componentName: component.id.name
     })
   }), /*#__PURE__*/_react().default.createElement(_componentUi().VersionDropdown, {
     versions: versionList,
@@ -193,4 +186,10 @@ function VersionRelatedDropdowns({
   }));
 }
 
+function useConsumeMethods(consumeMethods, componentModel) {
+  return (0, _react().useMemo)(() => (0, _lodash().flatten)(consumeMethods.values()).map(method => {
+    return method === null || method === void 0 ? void 0 : method(componentModel);
+  }).filter(x => !!x && x.Component && x.Title), [consumeMethods, componentModel]);
+}
+
 //# sourceMappingURL=menu.js.map

package/dist/ui/menu/menu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["menu.tsx"],"names":["Menu","navigationSlot","widgetSlot","className","host","menuItemSlot","component","mainMenuItems","values","styles","topBar","leftSide","rightSide","widgets","VersionRelatedDropdowns","versionList","tags","toArray","map","tag","version","filter","x","undefined","reverse","isLatestVersion","packageVersion","origin","window","location","finalElementsUrl","elementsUrl","length","useBox","id","name","toString","ignoreVersion","packageName","split"],"mappings":";;;;;;;;;;;;;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAEA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;;;;;AAoBA;AACA;AACA;AACO,SAASA,IAAT,CAAc;AAAEC,EAAAA,cAAF;AAAkBC,EAAAA,UAAlB;AAA8BC,EAAAA,SAA9B;AAAyCC,EAAAA,IAAzC;AAA+CC,EAAAA;AAA/C,CAAd,EAAwF;AAC7F,QAAM;AAAEC,IAAAA;AAAF,MAAgB,kCAAaF,IAAb,CAAtB;AACA,QAAMG,aAAa,GAAG,sBAAQ,MAAM,uBAAQ,uBAAQF,YAAY,CAACG,MAAb,EAAR,CAAR,EAAwC,UAAxC,CAAd,EAAmE,CAACH,YAAD,CAAnE,CAAtB;AAEA,MAAI,CAACC,SAAL,EAAgB,oBAAO,+BAAC,wBAAD,OAAP;AAEhB,sBACE;AAAK,IAAA,SAAS,EAAE,2BAAWG,sBAAOC,MAAlB,EAA0BP,SAA1B;AAAhB,kBACE;AAAK,IAAA,SAAS,EAAEM,sBAAOE;AAAvB,kBACE,+BAAC,kBAAD;AAAS,IAAA,cAAc,EAAEV;AAAzB,IADF,CADF,eAIE;AAAK,IAAA,SAAS,EAAEQ,sBAAOG;AAAvB,kBACE;AAAK,IAAA,SAAS,EAAEH,sBAAOI;AAAvB,kBACE,+BAAC,kBAAD;AAAS,IAAA,cAAc,EAAEX;AAAzB,IADF,CADF,eAIE,+BAAC,uBAAD;AAAyB,IAAA,SAAS,EAAEI;AAApC,IAJF,eAKE,+BAAC,8BAAD;AAAc,IAAA,SAAS,EAAEC;AAAzB,IALF,CAJF,CADF;AAcD;;AAED,SAASO,uBAAT,CAAiC;AAAER,EAAAA;AAAF,CAAjC,EAA+E;AAC7E,QAAMS,WAAW,GACf,sBACE;AAAA;;AAAA,8BACET,SAAS,CAACU,IADZ,oDACE,gBACIC,OADJ,GAEGC,GAFH,CAEQC,GAAD;AAAA;;AAAA,aAASA,GAAT,aAASA,GAAT,uCAASA,GAAG,CAAEC,OAAd,iDAAS,aAAcA,OAAvB;AAAA,KAFP,EAGGC,MAHH,CAGWC,CAAD,IAAOA,CAAC,KAAKC,SAHvB,EAIGC,OAJH,EADF;AAAA,GADF,EAOE,CAAClB,SAAS,CAACU,IAAX,CAPF,KAQK,EATP;AAWA,QAAMS,eAAe,GAAG,sBAAQ,MAAMnB,SAAS,CAACc,OAAV,KAAsBL,WAAW,CAAC,CAAD,CAA/C,EAAoD,CAACT,SAAS,CAACc,OAAX,CAApD,CAAxB;AACA,QAAMM,cAAc,GAAG,sBAAQ,MAAOD,eAAe,GAAG,EAAH,GAAS,IAAGnB,SAAS,CAACc,OAAQ,EAA5D,EAAgE,CAACd,SAAS,CAACc,OAAX,CAAhE,CAAvB;AACA,QAAMO,MAAM,GAAG,OAAOC,MAAP,KAAkBL,SAAlB,GAA8BK,MAAM,CAACC,QAAP,CAAgBF,MAA9C,GAAuDJ,SAAtE;AACA,QAAMO,gBAAgB,GAAGH,MAAM,IAAIrB,SAAS,CAACyB,WAApB,GAAmC,GAAEJ,MAAO,GAAErB,SAAS,CAACyB,WAAY,EAApE,GAAwER,SAAjG;AAEA,sBACE,gEACGR,WAAW,CAACiB,MAAZ,GAAqB,CAArB,iBACC,+BAAC,sCAAD;AACE,IAAA,QAAQ,EAAC,YADX;AAEE,IAAA,SAAS,EAAEvB,sBAAOwB,MAFpB;AAGE,IAAA,IAAI,EAAE,mBACJ,+BAAC,6BAAD;AACE,MAAA,aAAa,EAAE3B,SAAS,CAAC4B,EAAV,CAAaC,IAD9B;AAEE,MAAA,WAAW,EAAE7B,SAAS,CAAC4B,EAAV,CAAaE,QAAb,CAAsB;AAAEC,QAAAA,aAAa,EAAEZ;AAAjB,OAAtB,CAFf;AAGE,MAAA,WAAW,EAAG,GAAEnB,SAAS,CAACgC,WAAY,GAAEZ,cAAe,EAHzD;AAIE,MAAA,WAAW,EAAEI,gBAJf;AAKE,MAAA,YAAY,EAAExB,SAAS,CAACgC,WAAV,CAAsBC,KAAtB,CAA4B,GAA5B,EAAiC,CAAjC;AALhB;AAJJ,IAFJ,eAgBE,+BAAC,8BAAD;AAAiB,IAAA,QAAQ,EAAExB,WAA3B;AAAwC,IAAA,cAAc,EAAET,SAAS,CAACc;AAAlE,IAhBF,CADF;AAoBD","sourcesContent":["import { MainDropdown, MenuItemSlot } from '@teambit/ui-foundation.ui.main-dropdown';\nimport { VersionDropdown } from '@teambit/component.ui.version-dropdown';\nimport { FullLoader } from '@teambit/legacy/dist/to-eject/full-loader';\nimport { flatten, groupBy } from 'lodash';\nimport classnames from 'classnames';\nimport React, { useMemo } from 'react';\nimport { UseBoxDropdown } from '@teambit/ui-foundation.ui.use-box.dropdown';\nimport { Menu as UseBoxMenu } from '@teambit/ui-foundation.ui.use-box.menu';\nimport type { ComponentModel } from '../component-model';\nimport { useComponent } from '../use-component';\nimport { MenuNav } from './menu-nav';\nimport styles from './menu.module.scss';\nimport { OrderedNavigationSlot } from './nav-plugin';\n\nexport type MenuProps = {\n  className?: string;\n  /**\n   * slot for top bar menu nav items\n   */\n  navigationSlot: OrderedNavigationSlot;\n  /**\n   * right side menu item slot\n   */\n  widgetSlot: OrderedNavigationSlot;\n  host: string;\n  /**\n   * main dropdown item slot\n   */\n  menuItemSlot: MenuItemSlot;\n};\n\n/**\n * top bar menu.\n */\nexport function Menu({ navigationSlot, widgetSlot, className, host, menuItemSlot }: MenuProps) {\n  const { component } = useComponent(host);\n  const mainMenuItems = useMemo(() => groupBy(flatten(menuItemSlot.values()), 'category'), [menuItemSlot]);\n\n  if (!component) return <FullLoader />;\n\n  return (\n    <div className={classnames(styles.topBar, className)}>\n      <div className={styles.leftSide}>\n        <MenuNav navigationSlot={navigationSlot} />\n      </div>\n      <div className={styles.rightSide}>\n        <div className={styles.widgets}>\n          <MenuNav navigationSlot={widgetSlot} />\n        </div>\n        <VersionRelatedDropdowns component={component} />\n        <MainDropdown menuItems={mainMenuItems} />\n      </div>\n    </div>\n  );\n}\n\nfunction VersionRelatedDropdowns({ component }: { component: ComponentModel }) {\n  const versionList =\n    useMemo(\n      () =>\n        component.tags\n          ?.toArray()\n          .map((tag) => tag?.version?.version)\n          .filter((x) => x !== undefined)\n          .reverse(),\n      [component.tags]\n    ) || [];\n\n  const isLatestVersion = useMemo(() => component.version === versionList[0], [component.version]);\n  const packageVersion = useMemo(() => (isLatestVersion ? '' : `@${component.version}`), [component.version]);\n  const origin = typeof window !== undefined ? window.location.origin : undefined;\n  const finalElementsUrl = origin && component.elementsUrl ? `${origin}${component.elementsUrl}` : undefined;\n\n  return (\n    <>\n      {versionList.length > 0 && (\n        <UseBoxDropdown\n          position=\"bottom-end\"\n          className={styles.useBox}\n          Menu={() => (\n            <UseBoxMenu\n              componentName={component.id.name}\n              componentId={component.id.toString({ ignoreVersion: isLatestVersion })}\n              packageName={`${component.packageName}${packageVersion}`}\n              elementsUrl={finalElementsUrl}\n              registryName={component.packageName.split('/')[0]}\n            />\n          )}\n        />\n      )}\n      <VersionDropdown versions={versionList} currentVersion={component.version} />\n    </>\n  );\n}\n"]}
+{"version":3,"sources":["menu.tsx"],"names":["Menu","navigationSlot","widgetSlot","className","host","menuItemSlot","consumeMethodSlot","component","mainMenuItems","values","styles","topBar","leftSide","rightSide","widgets","VersionRelatedDropdowns","consumeMethods","versionList","tags","toArray","map","tag","version","filter","x","undefined","reverse","methods","useConsumeMethods","length","useBox","id","name","componentModel","method","Component","Title"],"mappings":"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","sourcesContent":["import { MainDropdown, MenuItemSlot } from '@teambit/ui-foundation.ui.main-dropdown';\nimport { VersionDropdown } from '@teambit/component.ui.version-dropdown';\nimport { FullLoader } from '@teambit/legacy/dist/to-eject/full-loader';\nimport type { ConsumeMethod } from '@teambit/ui-foundation.ui.use-box.menu';\nimport { flatten, groupBy } from 'lodash';\nimport classnames from 'classnames';\nimport React, { useMemo } from 'react';\nimport { UseBoxDropdown } from '@teambit/ui-foundation.ui.use-box.dropdown';\nimport { Menu as ConsumeMethodsMenu } from '@teambit/ui-foundation.ui.use-box.menu';\nimport type { ComponentModel } from '../component-model';\nimport { useComponent } from '../use-component';\nimport { MenuNav } from './menu-nav';\nimport styles from './menu.module.scss';\nimport { OrderedNavigationSlot, ConsumeMethodSlot } from './nav-plugin';\n\nexport type MenuProps = {\n  className?: string;\n  /**\n   * slot for top bar menu nav items\n   */\n  navigationSlot: OrderedNavigationSlot;\n  /**\n   * right side menu item slot\n   */\n  widgetSlot: OrderedNavigationSlot;\n  host: string;\n  /**\n   * main dropdown item slot\n   */\n  menuItemSlot: MenuItemSlot;\n\n  consumeMethodSlot: ConsumeMethodSlot;\n};\n\n/**\n * top bar menu.\n */\nexport function Menu({ navigationSlot, widgetSlot, className, host, menuItemSlot, consumeMethodSlot }: MenuProps) {\n  const { component } = useComponent(host);\n  const mainMenuItems = useMemo(() => groupBy(flatten(menuItemSlot.values()), 'category'), [menuItemSlot]);\n  if (!component) return <FullLoader />;\n  return (\n    <div className={classnames(styles.topBar, className)}>\n      <div className={styles.leftSide}>\n        <MenuNav navigationSlot={navigationSlot} />\n      </div>\n      <div className={styles.rightSide}>\n        <div className={styles.widgets}>\n          <MenuNav navigationSlot={widgetSlot} />\n        </div>\n        <VersionRelatedDropdowns component={component} consumeMethods={consumeMethodSlot} />\n        <MainDropdown menuItems={mainMenuItems} />\n      </div>\n    </div>\n  );\n}\n\nfunction VersionRelatedDropdowns({\n  component,\n  consumeMethods,\n}: {\n  component: ComponentModel;\n  consumeMethods: ConsumeMethodSlot;\n}) {\n  const versionList =\n    useMemo(\n      () =>\n        component.tags\n          ?.toArray()\n          .map((tag) => tag?.version?.version)\n          .filter((x) => x !== undefined)\n          .reverse(),\n      [component.tags]\n    ) || [];\n\n  const methods = useConsumeMethods(consumeMethods, component);\n  return (\n    <>\n      {versionList.length > 0 && (\n        <UseBoxDropdown\n          position=\"bottom-end\"\n          className={styles.useBox}\n          Menu={<ConsumeMethodsMenu methods={methods} componentName={component.id.name} />}\n        />\n      )}\n      <VersionDropdown versions={versionList} currentVersion={component.version} />\n    </>\n  );\n}\n\nfunction useConsumeMethods(consumeMethods: ConsumeMethodSlot, componentModel: ComponentModel): ConsumeMethod[] {\n  return useMemo(\n    () =>\n      flatten(consumeMethods.values())\n        .map((method) => {\n          return method?.(componentModel);\n        })\n        .filter((x) => !!x && x.Component && x.Title) as ConsumeMethod[],\n    [consumeMethods, componentModel]\n  );\n}\n"]}

package/dist/ui/menu/nav-plugin.d.ts

@@ -1,7 +1,11 @@
 import { SlotRegistry } from '@teambit/harmony';
 import { NavLinkProps } from '@teambit/base-ui.routing.nav-link';
+import type { ConsumeMethod } from '@teambit/ui-foundation.ui.use-box.menu';
+import { ComponentModel } from '../../ui';
 export declare type NavPlugin = {
     props: NavLinkProps;
     order?: number;
 };
 export declare type OrderedNavigationSlot = SlotRegistry<NavPlugin>;
+export declare type ConsumePlugin = (componentModel: ComponentModel) => ConsumeMethod | undefined;
+export declare type ConsumeMethodSlot = SlotRegistry<ConsumePlugin[]>;

package/dist/ui/use-component-query.js

@@ -96,6 +96,7 @@ const componentFields = (0, _client().gql)`
     packageName
     elementsUrl
     displayName
+    latest
     server {
       env
       url

package/dist/ui/use-component-query.js.map

@@ -1 +1 @@
-{"version":3,"sources":["use-component-query.ts"],"names":["componentIdFields","componentFields","GET_COMPONENT","SUB_SUBSCRIPTION_ADDED","SUB_COMPONENT_CHANGED","SUB_COMPONENT_REMOVED","useComponentQuery","componentId","host","idRef","current","data","error","loading","subscribeToMore","variables","id","extensionId","unsubAddition","document","updateQuery","prev","subscriptionData","prevComponent","getHost","get","addedComponent","componentAdded","component","name","unsubChanges","updatedComponent","componentChanged","isUpdated","ComponentID","isEqualObj","unsubRemoval","removedIds","componentRemoved","componentIds","length","isRemoved","some","removedId","rawComponent","ComponentModel","from","undefined","ComponentError","message"],"mappings":"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","sourcesContent":["import { useMemo, useEffect, useRef } from 'react';\nimport { gql } from '@apollo/client';\nimport { useDataQuery } from '@teambit/ui-foundation.ui.hooks.use-data-query';\nimport { ComponentID, ComponentIdObj } from '@teambit/component-id';\n\nimport { ComponentModel } from './component-model';\nimport { ComponentError } from './component-error';\n\nconst componentIdFields = gql`\n  fragment componentIdFields on ComponentID {\n    name\n    version\n    scope\n  }\n`;\n\nconst componentFields = gql`\n  fragment componentFields on Component {\n    id {\n      ...componentIdFields\n    }\n    packageName\n    elementsUrl\n    displayName\n    server {\n      env\n      url\n    }\n    buildStatus\n    compositions {\n      identifier\n      displayName\n    }\n    tags {\n      version\n    }\n    env {\n      id\n      icon\n    }\n  }\n  ${componentIdFields}\n`;\n\nconst GET_COMPONENT = gql`\n  query Component($id: String!, $extensionId: String!) {\n    getHost(id: $extensionId) {\n      id # used for GQL caching\n      get(id: $id) {\n        ...componentFields\n      }\n    }\n  }\n  ${componentFields}\n`;\n\nconst SUB_SUBSCRIPTION_ADDED = gql`\n  subscription OnComponentAdded {\n    componentAdded {\n      component {\n        ...componentFields\n      }\n    }\n  }\n  ${componentFields}\n`;\n\nconst SUB_COMPONENT_CHANGED = gql`\n  subscription OnComponentChanged {\n    componentChanged {\n      component {\n        ...componentFields\n      }\n    }\n  }\n  ${componentFields}\n`;\n\nconst SUB_COMPONENT_REMOVED = gql`\n  subscription OnComponentRemoved {\n    componentRemoved {\n      componentIds {\n        ...componentIdFields\n      }\n    }\n  }\n  ${componentIdFields}\n`;\n\n/** provides data to component ui page, making sure both variables and return value are safely typed and memoized */\nexport function useComponentQuery(componentId: string, host: string) {\n  const idRef = useRef(componentId);\n  idRef.current = componentId;\n  const { data, error, loading, subscribeToMore } = useDataQuery(GET_COMPONENT, {\n    variables: { id: componentId, extensionId: host },\n  });\n\n  useEffect(() => {\n    // @TODO @Kutner fix subscription for scope\n    if (host !== 'teambit.workspace/workspace') {\n      return () => {};\n    }\n\n    const unsubAddition = subscribeToMore({\n      document: SUB_SUBSCRIPTION_ADDED,\n      updateQuery: (prev, { subscriptionData }) => {\n        const prevComponent = prev?.getHost?.get;\n        const addedComponent = subscriptionData?.data?.componentAdded?.component;\n\n        if (!addedComponent || prevComponent) return prev;\n\n        if (idRef.current === addedComponent.id.name) {\n          return {\n            ...prev,\n            getHost: {\n              ...prev.getHost,\n              get: addedComponent,\n            },\n          };\n        }\n\n        return prev;\n      },\n    });\n\n    const unsubChanges = subscribeToMore({\n      document: SUB_COMPONENT_CHANGED,\n      updateQuery: (prev, { subscriptionData }) => {\n        if (!subscriptionData.data) return prev;\n\n        const prevComponent = prev?.getHost?.get;\n        const updatedComponent = subscriptionData?.data?.componentChanged?.component;\n\n        const isUpdated = updatedComponent && ComponentID.isEqualObj(prevComponent?.id, updatedComponent?.id);\n\n        if (isUpdated) {\n          return {\n            ...prev,\n            getHost: {\n              ...prev.getHost,\n              get: updatedComponent,\n            },\n          };\n        }\n\n        return prev;\n      },\n    });\n\n    const unsubRemoval = subscribeToMore({\n      document: SUB_COMPONENT_REMOVED,\n      updateQuery: (prev, { subscriptionData }) => {\n        if (!subscriptionData.data) return prev;\n\n        const prevComponent = prev?.getHost?.get;\n        const removedIds: ComponentIdObj[] | undefined = subscriptionData?.data?.componentRemoved?.componentIds;\n        if (!prevComponent || !removedIds?.length) return prev;\n\n        const isRemoved = removedIds.some((removedId) => ComponentID.isEqualObj(removedId, prevComponent.id));\n\n        if (isRemoved) {\n          return {\n            ...prev,\n            getHost: {\n              ...prev.getHost,\n              get: null,\n            },\n          };\n        }\n\n        return prev;\n      },\n    });\n\n    return () => {\n      unsubChanges();\n      unsubAddition();\n      unsubRemoval();\n    };\n  }, []);\n\n  const rawComponent = data?.getHost?.get;\n\n  return useMemo(() => {\n    return {\n      component: rawComponent ? ComponentModel.from({ ...rawComponent, host }) : undefined,\n      // eslint-disable-next-line\n      error: error\n        ? new ComponentError(500, error.message)\n        : !rawComponent && !loading\n        ? new ComponentError(404)\n        : undefined,\n    };\n  }, [rawComponent, host, error]);\n}\n"]}
+{"version":3,"sources":["use-component-query.ts"],"names":["componentIdFields","componentFields","GET_COMPONENT","SUB_SUBSCRIPTION_ADDED","SUB_COMPONENT_CHANGED","SUB_COMPONENT_REMOVED","useComponentQuery","componentId","host","idRef","current","data","error","loading","subscribeToMore","variables","id","extensionId","unsubAddition","document","updateQuery","prev","subscriptionData","prevComponent","getHost","get","addedComponent","componentAdded","component","name","unsubChanges","updatedComponent","componentChanged","isUpdated","ComponentID","isEqualObj","unsubRemoval","removedIds","componentRemoved","componentIds","length","isRemoved","some","removedId","rawComponent","ComponentModel","from","undefined","ComponentError","message"],"mappings":"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","sourcesContent":["import { useMemo, useEffect, useRef } from 'react';\nimport { gql } from '@apollo/client';\nimport { useDataQuery } from '@teambit/ui-foundation.ui.hooks.use-data-query';\nimport { ComponentID, ComponentIdObj } from '@teambit/component-id';\n\nimport { ComponentModel } from './component-model';\nimport { ComponentError } from './component-error';\n\nconst componentIdFields = gql`\n  fragment componentIdFields on ComponentID {\n    name\n    version\n    scope\n  }\n`;\n\nconst componentFields = gql`\n  fragment componentFields on Component {\n    id {\n      ...componentIdFields\n    }\n    packageName\n    elementsUrl\n    displayName\n    latest\n    server {\n      env\n      url\n    }\n    buildStatus\n    compositions {\n      identifier\n      displayName\n    }\n    tags {\n      version\n    }\n    env {\n      id\n      icon\n    }\n  }\n  ${componentIdFields}\n`;\n\nconst GET_COMPONENT = gql`\n  query Component($id: String!, $extensionId: String!) {\n    getHost(id: $extensionId) {\n      id # used for GQL caching\n      get(id: $id) {\n        ...componentFields\n      }\n    }\n  }\n  ${componentFields}\n`;\n\nconst SUB_SUBSCRIPTION_ADDED = gql`\n  subscription OnComponentAdded {\n    componentAdded {\n      component {\n        ...componentFields\n      }\n    }\n  }\n  ${componentFields}\n`;\n\nconst SUB_COMPONENT_CHANGED = gql`\n  subscription OnComponentChanged {\n    componentChanged {\n      component {\n        ...componentFields\n      }\n    }\n  }\n  ${componentFields}\n`;\n\nconst SUB_COMPONENT_REMOVED = gql`\n  subscription OnComponentRemoved {\n    componentRemoved {\n      componentIds {\n        ...componentIdFields\n      }\n    }\n  }\n  ${componentIdFields}\n`;\n\n/** provides data to component ui page, making sure both variables and return value are safely typed and memoized */\nexport function useComponentQuery(componentId: string, host: string) {\n  const idRef = useRef(componentId);\n  idRef.current = componentId;\n  const { data, error, loading, subscribeToMore } = useDataQuery(GET_COMPONENT, {\n    variables: { id: componentId, extensionId: host },\n  });\n\n  useEffect(() => {\n    // @TODO @Kutner fix subscription for scope\n    if (host !== 'teambit.workspace/workspace') {\n      return () => {};\n    }\n\n    const unsubAddition = subscribeToMore({\n      document: SUB_SUBSCRIPTION_ADDED,\n      updateQuery: (prev, { subscriptionData }) => {\n        const prevComponent = prev?.getHost?.get;\n        const addedComponent = subscriptionData?.data?.componentAdded?.component;\n\n        if (!addedComponent || prevComponent) return prev;\n\n        if (idRef.current === addedComponent.id.name) {\n          return {\n            ...prev,\n            getHost: {\n              ...prev.getHost,\n              get: addedComponent,\n            },\n          };\n        }\n\n        return prev;\n      },\n    });\n\n    const unsubChanges = subscribeToMore({\n      document: SUB_COMPONENT_CHANGED,\n      updateQuery: (prev, { subscriptionData }) => {\n        if (!subscriptionData.data) return prev;\n\n        const prevComponent = prev?.getHost?.get;\n        const updatedComponent = subscriptionData?.data?.componentChanged?.component;\n\n        const isUpdated = updatedComponent && ComponentID.isEqualObj(prevComponent?.id, updatedComponent?.id);\n\n        if (isUpdated) {\n          return {\n            ...prev,\n            getHost: {\n              ...prev.getHost,\n              get: updatedComponent,\n            },\n          };\n        }\n\n        return prev;\n      },\n    });\n\n    const unsubRemoval = subscribeToMore({\n      document: SUB_COMPONENT_REMOVED,\n      updateQuery: (prev, { subscriptionData }) => {\n        if (!subscriptionData.data) return prev;\n\n        const prevComponent = prev?.getHost?.get;\n        const removedIds: ComponentIdObj[] | undefined = subscriptionData?.data?.componentRemoved?.componentIds;\n        if (!prevComponent || !removedIds?.length) return prev;\n\n        const isRemoved = removedIds.some((removedId) => ComponentID.isEqualObj(removedId, prevComponent.id));\n\n        if (isRemoved) {\n          return {\n            ...prev,\n            getHost: {\n              ...prev.getHost,\n              get: null,\n            },\n          };\n        }\n\n        return prev;\n      },\n    });\n\n    return () => {\n      unsubChanges();\n      unsubAddition();\n      unsubRemoval();\n    };\n  }, []);\n\n  const rawComponent = data?.getHost?.get;\n\n  return useMemo(() => {\n    return {\n      component: rawComponent ? ComponentModel.from({ ...rawComponent, host }) : undefined,\n      // eslint-disable-next-line\n      error: error\n        ? new ComponentError(500, error.message)\n        : !rawComponent && !loading\n        ? new ComponentError(404)\n        : undefined,\n    };\n  }, [rawComponent, host, error]);\n}\n"]}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/component",
-  "version": "0.0.593",
+  "version": "0.0.597",
   "homepage": "https://bit.dev/teambit/component/component",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.component",
     "name": "component",
-    "version": "0.0.593"
+    "version": "0.0.597"
   },
   "dependencies": {
     "lodash": "4.17.21",
@@ -26,38 +26,38 @@
     "@teambit/base-ui.routing.nav-link": "1.0.0",
     "@teambit/documenter.ui.heading": "4.1.1",
     "@teambit/documenter.ui.separator": "4.1.1",
-    "@teambit/component-id": "0.0.397",
-    "@teambit/ui-foundation.ui.menu-widget-icon": "0.0.486",
-    "@teambit/aspect-loader": "0.0.593",
-    "@teambit/legacy-bit-id": "0.0.396",
-    "@teambit/toolbox.string.capitalize": "0.0.481",
-    "@teambit/cli": "0.0.407",
-    "@teambit/config": "0.0.419",
-    "@teambit/express": "0.0.499",
-    "@teambit/graphql": "0.0.593",
-    "@teambit/bit-error": "0.0.393",
-    "@teambit/command-bar": "0.0.593",
-    "@teambit/preview": "0.0.593",
-    "@teambit/pubsub": "0.0.593",
-    "@teambit/ui-foundation.ui.is-browser": "0.0.484",
-    "@teambit/ui-foundation.ui.main-dropdown": "0.0.484",
-    "@teambit/ui-foundation.ui.react-router.slot-router": "0.0.486",
-    "@teambit/ui": "0.0.593",
-    "@teambit/component-issues": "0.0.42",
-    "@teambit/ui-foundation.ui.hooks.use-data-query": "0.0.485",
-    "@teambit/cli-table": "0.0.30",
-    "@teambit/ui-foundation.ui.react-router.use-query": "0.0.484",
+    "@teambit/component-id": "0.0.398",
+    "@teambit/ui-foundation.ui.menu-widget-icon": "0.0.487",
+    "@teambit/aspect-loader": "0.0.597",
+    "@teambit/legacy-bit-id": "0.0.397",
+    "@teambit/toolbox.string.capitalize": "0.0.482",
+    "@teambit/cli": "0.0.410",
+    "@teambit/config": "0.0.422",
+    "@teambit/express": "0.0.502",
+    "@teambit/graphql": "0.0.597",
+    "@teambit/bit-error": "0.0.394",
+    "@teambit/command-bar": "0.0.597",
+    "@teambit/preview": "0.0.597",
+    "@teambit/pubsub": "0.0.597",
+    "@teambit/ui-foundation.ui.is-browser": "0.0.485",
+    "@teambit/ui-foundation.ui.main-dropdown": "0.0.485",
+    "@teambit/ui-foundation.ui.react-router.slot-router": "0.0.487",
+    "@teambit/ui-foundation.ui.use-box.menu": "0.0.107",
+    "@teambit/ui": "0.0.597",
+    "@teambit/component-issues": "0.0.45",
+    "@teambit/ui-foundation.ui.hooks.use-data-query": "0.0.486",
+    "@teambit/cli-table": "0.0.33",
+    "@teambit/ui-foundation.ui.react-router.use-query": "0.0.485",
     "@teambit/design.ui.empty-box": "0.0.352",
-    "@teambit/harmony.ui.aspect-box": "0.0.484",
-    "@teambit/compositions": "0.0.593",
-    "@teambit/deprecation": "0.0.593",
-    "@teambit/envs": "0.0.593",
+    "@teambit/harmony.ui.aspect-box": "0.0.485",
     "@teambit/design.ui.pages.not-found": "0.0.352",
     "@teambit/design.ui.pages.server-error": "0.0.352",
-    "@teambit/component.ui.version-dropdown": "0.0.488",
-    "@teambit/ui-foundation.ui.use-box.dropdown": "0.0.105",
-    "@teambit/ui-foundation.ui.use-box.menu": "0.0.105",
-    "@teambit/ui-foundation.ui.react-router.extend-path": "0.0.484"
+    "@teambit/compositions": "0.0.597",
+    "@teambit/deprecation": "0.0.597",
+    "@teambit/envs": "0.0.597",
+    "@teambit/component.ui.version-dropdown": "0.0.489",
+    "@teambit/ui-foundation.ui.use-box.dropdown": "0.0.107",
+    "@teambit/ui-foundation.ui.react-router.extend-path": "0.0.485"
   },
   "devDependencies": {
     "@types/lodash": "4.14.165",
@@ -72,11 +72,11 @@
     "@types/jest": "^26.0.0",
     "@types/react-dom": "^17.0.5",
     "@types/node": "12.20.4",
-    "@teambit/component.aspect-docs.component": "0.0.129"
+    "@teambit/component.aspect-docs.component": "0.0.130"
   },
   "peerDependencies": {
     "@apollo/client": "^3.0.0",
-    "@teambit/legacy": "1.0.193",
+    "@teambit/legacy": "1.0.197",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },
@@ -104,7 +104,7 @@
         "react": "-"
       },
       "peerDependencies": {
-        "@teambit/legacy": "1.0.193",
+        "@teambit/legacy": "1.0.197",
         "react-dom": "^16.8.0 || ^17.0.0",
         "react": "^16.8.0 || ^17.0.0"
       }

package/show/show.cmd.ts

@@ -1,4 +1,5 @@
 import { Command, CommandOptions } from '@teambit/cli';
+import { compact } from 'lodash';
 // import { Logger } from '@teambit/logger';
 // import chalk from 'chalk';
 import { CLITable } from '@teambit/cli-table';
@@ -62,11 +63,12 @@ export class ShowCmd implements Command {
     const rows = await Promise.all(
       fragments.map(async (fragment) => {
         const row = await fragment.renderRow(component);
+        if (!row.content) return null;
         return [row.title, row.content];
       })
     );
 
-    const table = new CLITable([], rows);
+    const table = new CLITable([], compact(rows));
     return table.render();
   }
 

package/ui/component-model/component-model.ts

@@ -27,6 +27,7 @@ export type ComponentModelProps = {
   env?: Descriptor; // env aspect.
   labels?: string[];
   host?: string;
+  latest?: string;
 };
 
 export type ComponentServer = {
@@ -105,7 +106,12 @@ export class ComponentModel {
     /**
      * host of the component
      */
-    readonly host?: string
+    readonly host?: string,
+
+    /**
+     * latest version of component
+     */
+    readonly latest?: string
   ) {}
 
   get version() {
@@ -132,6 +138,7 @@ export class ComponentModel {
     description,
     labels,
     host,
+    latest,
   }: ComponentModelProps) {
     return new ComponentModel(
       ComponentID.fromObject(id),
@@ -148,7 +155,8 @@ export class ComponentModel {
       env,
       description,
       labels,
-      host
+      host,
+      latest
     );
   }
 

package/ui/menu/index.ts

@@ -1,2 +1,2 @@
 export { Menu } from './menu';
-export type { NavPlugin, OrderedNavigationSlot } from './nav-plugin';
+export type { NavPlugin, OrderedNavigationSlot, ConsumePlugin, ConsumeMethodSlot } from './nav-plugin';

package/ui/menu/menu.tsx

@@ -1,16 +1,17 @@
 import { MainDropdown, MenuItemSlot } from '@teambit/ui-foundation.ui.main-dropdown';
 import { VersionDropdown } from '@teambit/component.ui.version-dropdown';
 import { FullLoader } from '@teambit/legacy/dist/to-eject/full-loader';
+import type { ConsumeMethod } from '@teambit/ui-foundation.ui.use-box.menu';
 import { flatten, groupBy } from 'lodash';
 import classnames from 'classnames';
 import React, { useMemo } from 'react';
 import { UseBoxDropdown } from '@teambit/ui-foundation.ui.use-box.dropdown';
-import { Menu as UseBoxMenu } from '@teambit/ui-foundation.ui.use-box.menu';
+import { Menu as ConsumeMethodsMenu } from '@teambit/ui-foundation.ui.use-box.menu';
 import type { ComponentModel } from '../component-model';
 import { useComponent } from '../use-component';
 import { MenuNav } from './menu-nav';
 import styles from './menu.module.scss';
-import { OrderedNavigationSlot } from './nav-plugin';
+import { OrderedNavigationSlot, ConsumeMethodSlot } from './nav-plugin';
 
 export type MenuProps = {
   className?: string;
@@ -27,17 +28,17 @@ export type MenuProps = {
    * main dropdown item slot
    */
   menuItemSlot: MenuItemSlot;
+
+  consumeMethodSlot: ConsumeMethodSlot;
 };
 
 /**
  * top bar menu.
  */
-export function Menu({ navigationSlot, widgetSlot, className, host, menuItemSlot }: MenuProps) {
+export function Menu({ navigationSlot, widgetSlot, className, host, menuItemSlot, consumeMethodSlot }: MenuProps) {
   const { component } = useComponent(host);
   const mainMenuItems = useMemo(() => groupBy(flatten(menuItemSlot.values()), 'category'), [menuItemSlot]);
-
   if (!component) return <FullLoader />;
-
   return (
     <div className={classnames(styles.topBar, className)}>
       <div className={styles.leftSide}>
@@ -47,14 +48,20 @@ export function Menu({ navigationSlot, widgetSlot, className, host, menuItemSlot
         <div className={styles.widgets}>
           <MenuNav navigationSlot={widgetSlot} />
         </div>
-        <VersionRelatedDropdowns component={component} />
+        <VersionRelatedDropdowns component={component} consumeMethods={consumeMethodSlot} />
         <MainDropdown menuItems={mainMenuItems} />
       </div>
     </div>
   );
 }
 
-function VersionRelatedDropdowns({ component }: { component: ComponentModel }) {
+function VersionRelatedDropdowns({
+  component,
+  consumeMethods,
+}: {
+  component: ComponentModel;
+  consumeMethods: ConsumeMethodSlot;
+}) {
   const versionList =
     useMemo(
       () =>
@@ -66,29 +73,29 @@ function VersionRelatedDropdowns({ component }: { component: ComponentModel }) {
       [component.tags]
     ) || [];
 
-  const isLatestVersion = useMemo(() => component.version === versionList[0], [component.version]);
-  const packageVersion = useMemo(() => (isLatestVersion ? '' : `@${component.version}`), [component.version]);
-  const origin = typeof window !== undefined ? window.location.origin : undefined;
-  const finalElementsUrl = origin && component.elementsUrl ? `${origin}${component.elementsUrl}` : undefined;
-
+  const methods = useConsumeMethods(consumeMethods, component);
   return (
     <>
       {versionList.length > 0 && (
         <UseBoxDropdown
           position="bottom-end"
           className={styles.useBox}
-          Menu={() => (
-            <UseBoxMenu
-              componentName={component.id.name}
-              componentId={component.id.toString({ ignoreVersion: isLatestVersion })}
-              packageName={`${component.packageName}${packageVersion}`}
-              elementsUrl={finalElementsUrl}
-              registryName={component.packageName.split('/')[0]}
-            />
-          )}
+          Menu={<ConsumeMethodsMenu methods={methods} componentName={component.id.name} />}
         />
       )}
       <VersionDropdown versions={versionList} currentVersion={component.version} />
     </>
   );
 }
+
+function useConsumeMethods(consumeMethods: ConsumeMethodSlot, componentModel: ComponentModel): ConsumeMethod[] {
+  return useMemo(
+    () =>
+      flatten(consumeMethods.values())
+        .map((method) => {
+          return method?.(componentModel);
+        })
+        .filter((x) => !!x && x.Component && x.Title) as ConsumeMethod[],
+    [consumeMethods, componentModel]
+  );
+}

package/ui/menu/nav-plugin.tsx

@@ -1,5 +1,8 @@
+// import { ReactNode } from 'react';
 import { SlotRegistry } from '@teambit/harmony';
 import { NavLinkProps } from '@teambit/base-ui.routing.nav-link';
+import type { ConsumeMethod } from '@teambit/ui-foundation.ui.use-box.menu';
+import { ComponentModel } from '../../ui';
 
 export type NavPlugin = {
   props: NavLinkProps;
@@ -7,3 +10,7 @@ export type NavPlugin = {
 };
 
 export type OrderedNavigationSlot = SlotRegistry<NavPlugin>;
+
+export type ConsumePlugin = (componentModel: ComponentModel) => ConsumeMethod | undefined;
+
+export type ConsumeMethodSlot = SlotRegistry<ConsumePlugin[]>;

package/ui/use-component-query.ts

@@ -22,6 +22,7 @@ const componentFields = gql`
     packageName
     elementsUrl
     displayName
+    latest
     server {
       env
       url