@teambit/scope 0.0.615 → 0.0.623

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

@@ -13,6 +13,7 @@ import { CommandBarUI, ComponentSearcher } from '@teambit/command-bar';
 import { ScopeModel } from '@teambit/scope.models.scope-model';
 export declare type ScopeBadge = ComponentType;
 export declare type ScopeBadgeSlot = SlotRegistry<ScopeBadge[]>;
+export declare type ContextSlot = SlotRegistry<ScopeContextType[]>;
 export declare type ScopeContextType = ComponentType<{
     scope: ScopeModel;
     children: ReactNode;
@@ -59,6 +60,10 @@ export declare class ScopeUI {
      * overview line slot to add new lines beneath the overview section
      */
     private overviewSlot;
+    /**
+     * add a new context to ui
+     */
+    private contextSlot;
     constructor(
     /**
      * route slot.
@@ -87,7 +92,11 @@ export declare class ScopeUI {
     /**
      * overview line slot to add new lines beneath the overview section
      */
-    overviewSlot: OverviewLineSlot);
+    overviewSlot: OverviewLineSlot, 
+    /**
+     * add a new context to ui
+     */
+    contextSlot: ContextSlot);
     private setSidebarToggle;
     /**
      * register a new badge into the scope overview.
@@ -125,12 +134,11 @@ export declare class ScopeUI {
      * register metadata.
      */
     registerMetadata(): void;
-    private _context;
     /**
      * add a new context to the scope.
      */
-    addContext(context: ScopeContextType): void;
-    getContext(): ScopeContextType | undefined;
+    addContext(...context: ScopeContextType[]): this;
+    private getContext;
     registerMenuItem: (menuItems: MenuItem[]) => void;
     /**
      * register a sidebar Widget for the scope
@@ -148,14 +156,14 @@ export declare class ScopeUI {
     static runtime: import("@teambit/harmony").RuntimeDefinition;
     static slots: (((registerFn: () => string) => SlotRegistry<RouteProps<string, {
         [x: string]: string | undefined;
-    }>>) | ((registerFn: () => string) => SlotRegistry<ComponentTreeNode>) | ((registerFn: () => string) => SlotRegistry<MenuItemSlot>) | ((registerFn: () => string) => SlotRegistry<SidebarItemSlot>) | ((registerFn: () => string) => SlotRegistry<ScopeBadge>) | ((registerFn: () => string) => SlotRegistry<MenuWidget[]>) | ((registerFn: () => string) => SlotRegistry<CornerSlot>))[];
+    }>>) | ((registerFn: () => string) => SlotRegistry<ComponentTreeNode>) | ((registerFn: () => string) => SlotRegistry<MenuItemSlot>) | ((registerFn: () => string) => SlotRegistry<SidebarItemSlot>) | ((registerFn: () => string) => SlotRegistry<ScopeBadge>) | ((registerFn: () => string) => SlotRegistry<MenuWidget[]>) | ((registerFn: () => string) => SlotRegistry<CornerSlot>) | ((registerFn: () => string) => SlotRegistry<ContextSlot>))[];
     static provider([ui, componentUi, sidebar, commandBarUI, reactRouterUI]: [
         UiUI,
         ComponentUI,
         SidebarUI,
         CommandBarUI,
         ReactRouterUI
-    ], config: any, [routeSlot, menuSlot, sidebarSlot, scopeBadgeSlot, menuWidgetSlot, menuItemSlot, sidebarItemSlot, cornerSlot, overviewSlot,]: [
+    ], config: any, [routeSlot, menuSlot, sidebarSlot, scopeBadgeSlot, menuWidgetSlot, menuItemSlot, sidebarItemSlot, cornerSlot, overviewSlot, contextSlot,]: [
         RouteSlot,
         RouteSlot,
         SidebarSlot,
@@ -164,7 +172,8 @@ export declare class ScopeUI {
         MenuItemSlot,
         SidebarItemSlot,
         CornerSlot,
-        OverviewLineSlot
+        OverviewLineSlot,
+        ContextSlot
     ]): Promise<ScopeUI>;
 }
 export default ScopeUI;

package/dist/scope.ui.runtime.js

@@ -21,6 +21,16 @@ function _defineProperty2() {
   return data;
 }
 
+function _lodash() {
+  const data = _interopRequireDefault(require("lodash.flatten"));
+
+  _lodash = function () {
+    return data;
+  };
+
+  return data;
+}
+
 function _component() {
   const data = require("@teambit/component");
 
@@ -174,7 +184,11 @@ class ScopeUI {
   /**
    * overview line slot to add new lines beneath the overview section
    */
-  overviewSlot) {
+  overviewSlot,
+  /**
+   * add a new context to ui
+   */
+  contextSlot) {
     this.routeSlot = routeSlot;
     this.componentUi = componentUi;
     this.menuSlot = menuSlot;
@@ -188,8 +202,8 @@ class ScopeUI {
     this.menuItemSlot = menuItemSlot;
     this.cornerSlot = cornerSlot;
     this.overviewSlot = overviewSlot;
+    this.contextSlot = contextSlot;
     (0, _defineProperty2().default)(this, "setSidebarToggle", () => {});
-    (0, _defineProperty2().default)(this, "_context", void 0);
     (0, _defineProperty2().default)(this, "registerMenuItem", menuItems => {
       this.menuItemSlot.register(menuItems);
     });
@@ -307,17 +321,19 @@ class ScopeUI {
 
 
   registerMetadata() {}
-
   /**
    * add a new context to the scope.
    */
-  addContext(context) {
-    this._context = () => context;
+
+
+  addContext(...context) {
+    this.contextSlot.register(context);
+    return this;
   }
 
   getContext() {
-    if (!this._context) return undefined;
-    return this._context();
+    const contexts = this.contextSlot.values();
+    return (0, _lodash().default)(contexts);
   }
 
   uiRoot() {
@@ -353,9 +369,9 @@ class ScopeUI {
   /** registers available components */
 
 
-  static async provider([ui, componentUi, sidebar, commandBarUI, reactRouterUI], config, [routeSlot, menuSlot, sidebarSlot, scopeBadgeSlot, menuWidgetSlot, menuItemSlot, sidebarItemSlot, cornerSlot, overviewSlot]) {
+  static async provider([ui, componentUi, sidebar, commandBarUI, reactRouterUI], config, [routeSlot, menuSlot, sidebarSlot, scopeBadgeSlot, menuWidgetSlot, menuItemSlot, sidebarItemSlot, cornerSlot, overviewSlot, contextSlot]) {
     const componentSearcher = new (_commandBar().ComponentSearcher)(reactRouterUI.navigateTo);
-    const scopeUi = new ScopeUI(routeSlot, componentUi, menuSlot, sidebar, sidebarSlot, commandBarUI, componentSearcher, scopeBadgeSlot, menuWidgetSlot, sidebarItemSlot, menuItemSlot, cornerSlot, overviewSlot);
+    const scopeUi = new ScopeUI(routeSlot, componentUi, menuSlot, sidebar, sidebarSlot, commandBarUI, componentSearcher, scopeBadgeSlot, menuWidgetSlot, sidebarItemSlot, menuItemSlot, cornerSlot, overviewSlot, contextSlot);
     scopeUi.registerExplicitRoutes();
     scopeUi.registerMenuItem(scopeUi.menuItems);
     scopeUi.registerMenuWidget(() => /*#__PURE__*/_react().default.createElement(_menu().ScopeUseBox, null));
@@ -373,7 +389,7 @@ class ScopeUI {
 exports.ScopeUI = ScopeUI;
 (0, _defineProperty2().default)(ScopeUI, "dependencies", [_ui().UIAspect, _component().ComponentAspect, _sidebar().SidebarAspect, _commandBar().default, _reactRouter().default]);
 (0, _defineProperty2().default)(ScopeUI, "runtime", _ui().UIRuntime);
-(0, _defineProperty2().default)(ScopeUI, "slots", [_harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType()]);
+(0, _defineProperty2().default)(ScopeUI, "slots", [_harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType()]);
 var _default = ScopeUI;
 exports.default = _default;
 

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

@@ -1 +1 @@
-{"version":3,"sources":["scope.ui.runtime.tsx"],"names":["ScopeUI","constructor","routeSlot","componentUi","menuSlot","sidebar","sidebarSlot","commandBarUI","componentSearcher","scopeBadgeSlot","menuWidgetSlot","sidebarItemSlot","menuItemSlot","cornerSlot","overviewSlot","menuItems","register","componentTreeNodes","map","componentTreeNode","links","components","update","category","title","keyChar","handler","run","registerBadge","badges","registerOverviewLine","lines","registerRoute","route","registerExplicitRoutes","path","routePath","children","getComponentUI","ScopeAspect","id","getMenu","exact","registerMenuWidget","registerCorner","corner","replaceOverview","replaceDescription","replaceMetadataSection","registerMetadataItem","replaceComponentGrid","registerMetadata","addContext","context","_context","getContext","undefined","uiRoot","registerDrawer","ComponentsDrawer","addSearcher","setKeyBindHandler","addCommand","displayName","keybinding","setSidebarToggle","routes","provider","ui","reactRouterUI","config","ComponentSearcher","navigateTo","scopeUi","registerMenuItem","registerRoot","bind","registerSidebarLink","UIAspect","ComponentAspect","SidebarAspect","CommandBarAspect","ReactRouterAspect","UIRuntime","Slot","withType","addRuntime"],"mappings":"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","sourcesContent":["import type { ComponentUI, ComponentModel } from '@teambit/component';\nimport { ComponentAspect } from '@teambit/component';\nimport { Slot, SlotRegistry } from '@teambit/harmony';\nimport ReactRouterAspect, { ReactRouterUI } from '@teambit/react-router';\nimport { RouteSlot } from '@teambit/ui-foundation.ui.react-router.slot-router';\nimport { SidebarAspect, SidebarUI, SidebarItem, SidebarItemSlot } from '@teambit/sidebar';\nimport { ComponentTreeNode } from '@teambit/component-tree';\nimport { UIAspect, UIRootUI as UIRoot, UIRuntime, UiUI } from '@teambit/ui';\nimport React, { ComponentType, ReactNode } from 'react';\nimport { MenuItemSlot, MenuItem } from '@teambit/ui-foundation.ui.main-dropdown';\nimport { RouteProps } from 'react-router-dom';\nimport { MenuWidget, MenuWidgetSlot } from '@teambit/ui-foundation.ui.menu';\nimport { MenuLinkItem } from '@teambit/design.ui.surfaces.menu.link-item';\nimport CommandBarAspect, { CommandBarUI, ComponentSearcher, CommandHandler } from '@teambit/command-bar';\nimport { ScopeModel } from '@teambit/scope.models.scope-model';\nimport { ScopeMenu, ScopeUseBox } from './ui/menu';\nimport { ScopeAspect } from './scope.aspect';\nimport { Scope } from './ui/scope';\nimport { ComponentsDrawer } from './ui/components-drawer';\n\nexport type ScopeBadge = ComponentType;\n\nexport type ScopeBadgeSlot = SlotRegistry<ScopeBadge[]>;\n\nexport type ScopeContextType = ComponentType<{ scope: ScopeModel; children: ReactNode }>;\n\nexport type SidebarSlot = SlotRegistry<ComponentTreeNode>;\n\nexport type ScopeOverview = ComponentType;\n\nexport type ScopeOverviewSlot = SlotRegistry<ScopeOverview>;\n\nexport type Corner = ComponentType;\n\nexport type CornerSlot = SlotRegistry<Corner>;\n\nexport type OverviewLine = ComponentType;\n\nexport type OverviewLineSlot = SlotRegistry<OverviewLine[]>;\n\nexport class ScopeUI {\n  constructor(\n    /**\n     * route slot.\n     */\n    private routeSlot: RouteSlot,\n\n    /**\n     * component ui extension.\n     */\n    private componentUi: ComponentUI,\n    /**\n     * menu slot\n     */\n    private menuSlot: RouteSlot,\n\n    private sidebar: SidebarUI,\n\n    private sidebarSlot: SidebarSlot,\n\n    private commandBarUI: CommandBarUI,\n\n    private componentSearcher: ComponentSearcher,\n\n    private scopeBadgeSlot: ScopeBadgeSlot,\n\n    private menuWidgetSlot: MenuWidgetSlot,\n\n    /**\n     * sidebar link slot\n     */\n    private sidebarItemSlot: SidebarItemSlot,\n\n    /**\n     * main dropdown item slot\n     */\n    private menuItemSlot: MenuItemSlot,\n\n    /**\n     * corner slot\n     */\n    private cornerSlot: CornerSlot,\n\n    /**\n     * overview line slot to add new lines beneath the overview section\n     */\n    private overviewSlot: OverviewLineSlot\n  ) {}\n\n  private setSidebarToggle: (updated: CommandHandler) => void = () => {};\n\n  /**\n   * register a new badge into the scope overview.\n   */\n  registerBadge(...badges: ScopeBadge[]) {\n    this.scopeBadgeSlot.register(badges);\n    return this;\n  }\n\n  /**\n   * register a new line beneath the scope overview section.\n   */\n  registerOverviewLine(...lines: OverviewLine[]) {\n    this.overviewSlot.register(lines);\n    return this;\n  }\n\n  /**\n   * register a route to the scope.\n   */\n  registerRoute(route: RouteProps) {\n    this.routeSlot.register(route);\n    return this;\n  }\n\n  private registerExplicitRoutes() {\n    this.routeSlot.register({\n      path: this.componentUi.routePath,\n      children: this.componentUi.getComponentUI(ScopeAspect.id),\n    });\n\n    this.menuSlot.register([\n      {\n        path: this.componentUi.routePath,\n        children: this.componentUi.getMenu(ScopeAspect.id),\n      },\n      {\n        exact: true,\n        path: '/',\n        children: <ScopeMenu widgetSlot={this.menuWidgetSlot} menuItemSlot={this.menuItemSlot} />,\n      },\n    ]);\n  }\n\n  registerMenuWidget(...menuItems: MenuWidget[]) {\n    this.menuWidgetSlot.register(menuItems);\n  }\n\n  registerCorner(corner: Corner) {\n    this.cornerSlot.register(corner);\n  }\n\n  /**\n   * register a scope overview.\n   */\n  replaceOverview() {}\n\n  /**\n   * register description.\n   */\n  replaceDescription() {}\n\n  /**\n   * register metadata section.\n   */\n  replaceMetadataSection() {}\n\n  /**\n   * register a metadata item.\n   */\n  registerMetadataItem() {}\n\n  replaceComponentGrid() {}\n\n  /**\n   * register metadata.\n   */\n  registerMetadata() {}\n\n  private _context: () => ScopeContextType;\n\n  /**\n   * add a new context to the scope.\n   */\n  addContext(context: ScopeContextType) {\n    this._context = () => context;\n  }\n\n  getContext() {\n    if (!this._context) return undefined;\n    return this._context();\n  }\n\n  registerMenuItem = (menuItems: MenuItem[]) => {\n    this.menuItemSlot.register(menuItems);\n  };\n\n  /**\n   * register a sidebar Widget for the scope\n   */\n  registerSidebarWidget = (componentTreeNodes: ComponentTreeNode[]) => {\n    componentTreeNodes.map((componentTreeNode) => this.sidebarSlot.register(componentTreeNode));\n    return this;\n  };\n\n  /**\n   * register a sidebar link to the section above the drawers\n   */\n  registerSidebarLink = (...links: SidebarItem[]) => {\n    this.sidebarItemSlot.register(links);\n  };\n\n  uiRoot(): UIRoot {\n    this.sidebar.registerDrawer(new ComponentsDrawer(this.sidebarSlot));\n    this.commandBarUI.addSearcher(this.componentSearcher);\n\n    const [setKeyBindHandler] = this.commandBarUI.addCommand({\n      id: 'sidebar.toggle', // TODO - extract to a component!\n      handler: () => {},\n      displayName: 'Toggle component list',\n      keybinding: 'alt+s',\n    });\n    this.setSidebarToggle = setKeyBindHandler;\n\n    return {\n      routes: [\n        {\n          path: '/',\n          children: (\n            <Scope\n              routeSlot={this.routeSlot}\n              menuSlot={this.menuSlot}\n              sidebar={<this.sidebar.render itemSlot={this.sidebarItemSlot} />}\n              scopeUi={this}\n              badgeSlot={this.scopeBadgeSlot}\n              overviewLineSlot={this.overviewSlot}\n              context={this.getContext()}\n              onSidebarTogglerChange={this.setSidebarToggle}\n              cornerSlot={this.cornerSlot}\n            />\n          ),\n        },\n      ],\n    };\n  }\n\n  /** registers available components */\n  setComponents = (components: ComponentModel[]) => {\n    this.componentSearcher.update(components);\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\n  static dependencies = [UIAspect, ComponentAspect, SidebarAspect, CommandBarAspect, ReactRouterAspect];\n  static runtime = UIRuntime;\n  static slots = [\n    Slot.withType<RouteProps>(),\n    Slot.withType<RouteProps>(),\n    Slot.withType<ComponentTreeNode>(),\n    Slot.withType<ScopeBadge>(),\n    Slot.withType<ScopeOverview>(),\n    Slot.withType<MenuWidget[]>(),\n    Slot.withType<MenuItemSlot>(),\n    Slot.withType<CornerSlot>(),\n    Slot.withType<OverviewLineSlot>(),\n    Slot.withType<SidebarItemSlot>(),\n  ];\n\n  static async provider(\n    [ui, componentUi, sidebar, commandBarUI, reactRouterUI]: [\n      UiUI,\n      ComponentUI,\n      SidebarUI,\n      CommandBarUI,\n      ReactRouterUI\n    ],\n    config,\n    [\n      routeSlot,\n      menuSlot,\n      sidebarSlot,\n      scopeBadgeSlot,\n      menuWidgetSlot,\n      menuItemSlot,\n      sidebarItemSlot,\n      cornerSlot,\n      overviewSlot,\n    ]: [\n      RouteSlot,\n      RouteSlot,\n      SidebarSlot,\n      ScopeBadgeSlot,\n      MenuWidgetSlot,\n      MenuItemSlot,\n      SidebarItemSlot,\n      CornerSlot,\n      OverviewLineSlot\n    ]\n  ) {\n    const componentSearcher = new ComponentSearcher(reactRouterUI.navigateTo);\n    const scopeUi = new ScopeUI(\n      routeSlot,\n      componentUi,\n      menuSlot,\n      sidebar,\n      sidebarSlot,\n      commandBarUI,\n      componentSearcher,\n      scopeBadgeSlot,\n      menuWidgetSlot,\n      sidebarItemSlot,\n      menuItemSlot,\n      cornerSlot,\n      overviewSlot\n    );\n    scopeUi.registerExplicitRoutes();\n    scopeUi.registerMenuItem(scopeUi.menuItems);\n    scopeUi.registerMenuWidget(() => <ScopeUseBox />);\n    ui.registerRoot(scopeUi.uiRoot.bind(scopeUi));\n    scopeUi.registerSidebarLink(() => (\n      <MenuLinkItem exact href=\"/\" icon=\"comps\">\n        Gallery\n      </MenuLinkItem>\n    ));\n\n    return scopeUi;\n  }\n}\n\nexport default ScopeUI;\n\nScopeAspect.addRuntime(ScopeUI);\n"]}
+{"version":3,"sources":["scope.ui.runtime.tsx"],"names":["ScopeUI","constructor","routeSlot","componentUi","menuSlot","sidebar","sidebarSlot","commandBarUI","componentSearcher","scopeBadgeSlot","menuWidgetSlot","sidebarItemSlot","menuItemSlot","cornerSlot","overviewSlot","contextSlot","menuItems","register","componentTreeNodes","map","componentTreeNode","links","components","update","category","title","keyChar","handler","run","registerBadge","badges","registerOverviewLine","lines","registerRoute","route","registerExplicitRoutes","path","routePath","children","getComponentUI","ScopeAspect","id","getMenu","exact","registerMenuWidget","registerCorner","corner","replaceOverview","replaceDescription","replaceMetadataSection","registerMetadataItem","replaceComponentGrid","registerMetadata","addContext","context","getContext","contexts","values","uiRoot","registerDrawer","ComponentsDrawer","addSearcher","setKeyBindHandler","addCommand","displayName","keybinding","setSidebarToggle","routes","provider","ui","reactRouterUI","config","ComponentSearcher","navigateTo","scopeUi","registerMenuItem","registerRoot","bind","registerSidebarLink","UIAspect","ComponentAspect","SidebarAspect","CommandBarAspect","ReactRouterAspect","UIRuntime","Slot","withType","addRuntime"],"mappings":"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","sourcesContent":["import flatten from 'lodash.flatten';\nimport type { ComponentUI, ComponentModel } from '@teambit/component';\nimport { ComponentAspect } from '@teambit/component';\nimport { Slot, SlotRegistry } from '@teambit/harmony';\nimport ReactRouterAspect, { ReactRouterUI } from '@teambit/react-router';\nimport { RouteSlot } from '@teambit/ui-foundation.ui.react-router.slot-router';\nimport { SidebarAspect, SidebarUI, SidebarItem, SidebarItemSlot } from '@teambit/sidebar';\nimport { ComponentTreeNode } from '@teambit/component-tree';\nimport { UIAspect, UIRootUI as UIRoot, UIRuntime, UiUI } from '@teambit/ui';\nimport React, { ComponentType, ReactNode } from 'react';\nimport { MenuItemSlot, MenuItem } from '@teambit/ui-foundation.ui.main-dropdown';\nimport { RouteProps } from 'react-router-dom';\nimport { MenuWidget, MenuWidgetSlot } from '@teambit/ui-foundation.ui.menu';\nimport { MenuLinkItem } from '@teambit/design.ui.surfaces.menu.link-item';\nimport CommandBarAspect, { CommandBarUI, ComponentSearcher, CommandHandler } from '@teambit/command-bar';\nimport { ScopeModel } from '@teambit/scope.models.scope-model';\nimport { ScopeMenu, ScopeUseBox } from './ui/menu';\nimport { ScopeAspect } from './scope.aspect';\nimport { Scope } from './ui/scope';\nimport { ComponentsDrawer } from './ui/components-drawer';\n\nexport type ScopeBadge = ComponentType;\n\nexport type ScopeBadgeSlot = SlotRegistry<ScopeBadge[]>;\n\nexport type ContextSlot = SlotRegistry<ScopeContextType[]>;\n\nexport type ScopeContextType = ComponentType<{ scope: ScopeModel; children: ReactNode }>;\n\nexport type SidebarSlot = SlotRegistry<ComponentTreeNode>;\n\nexport type ScopeOverview = ComponentType;\n\nexport type ScopeOverviewSlot = SlotRegistry<ScopeOverview>;\n\nexport type Corner = ComponentType;\n\nexport type CornerSlot = SlotRegistry<Corner>;\n\nexport type OverviewLine = ComponentType;\n\nexport type OverviewLineSlot = SlotRegistry<OverviewLine[]>;\n\nexport class ScopeUI {\n  constructor(\n    /**\n     * route slot.\n     */\n    private routeSlot: RouteSlot,\n\n    /**\n     * component ui extension.\n     */\n    private componentUi: ComponentUI,\n    /**\n     * menu slot\n     */\n    private menuSlot: RouteSlot,\n\n    private sidebar: SidebarUI,\n\n    private sidebarSlot: SidebarSlot,\n\n    private commandBarUI: CommandBarUI,\n\n    private componentSearcher: ComponentSearcher,\n\n    private scopeBadgeSlot: ScopeBadgeSlot,\n\n    private menuWidgetSlot: MenuWidgetSlot,\n\n    /**\n     * sidebar link slot\n     */\n    private sidebarItemSlot: SidebarItemSlot,\n\n    /**\n     * main dropdown item slot\n     */\n    private menuItemSlot: MenuItemSlot,\n\n    /**\n     * corner slot\n     */\n    private cornerSlot: CornerSlot,\n\n    /**\n     * overview line slot to add new lines beneath the overview section\n     */\n    private overviewSlot: OverviewLineSlot,\n\n    /**\n     * add a new context to ui\n     */\n    private contextSlot: ContextSlot\n  ) {}\n\n  private setSidebarToggle: (updated: CommandHandler) => void = () => {};\n\n  /**\n   * register a new badge into the scope overview.\n   */\n  registerBadge(...badges: ScopeBadge[]) {\n    this.scopeBadgeSlot.register(badges);\n    return this;\n  }\n\n  /**\n   * register a new line beneath the scope overview section.\n   */\n  registerOverviewLine(...lines: OverviewLine[]) {\n    this.overviewSlot.register(lines);\n    return this;\n  }\n\n  /**\n   * register a route to the scope.\n   */\n  registerRoute(route: RouteProps) {\n    this.routeSlot.register(route);\n    return this;\n  }\n\n  private registerExplicitRoutes() {\n    this.routeSlot.register({\n      path: this.componentUi.routePath,\n      children: this.componentUi.getComponentUI(ScopeAspect.id),\n    });\n\n    this.menuSlot.register([\n      {\n        path: this.componentUi.routePath,\n        children: this.componentUi.getMenu(ScopeAspect.id),\n      },\n      {\n        exact: true,\n        path: '/',\n        children: <ScopeMenu widgetSlot={this.menuWidgetSlot} menuItemSlot={this.menuItemSlot} />,\n      },\n    ]);\n  }\n\n  registerMenuWidget(...menuItems: MenuWidget[]) {\n    this.menuWidgetSlot.register(menuItems);\n  }\n\n  registerCorner(corner: Corner) {\n    this.cornerSlot.register(corner);\n  }\n\n  /**\n   * register a scope overview.\n   */\n  replaceOverview() {}\n\n  /**\n   * register description.\n   */\n  replaceDescription() {}\n\n  /**\n   * register metadata section.\n   */\n  replaceMetadataSection() {}\n\n  /**\n   * register a metadata item.\n   */\n  registerMetadataItem() {}\n\n  replaceComponentGrid() {}\n\n  /**\n   * register metadata.\n   */\n  registerMetadata() {}\n\n  /**\n   * add a new context to the scope.\n   */\n  addContext(...context: ScopeContextType[]) {\n    this.contextSlot.register(context);\n    return this;\n  }\n\n  private getContext() {\n    const contexts = this.contextSlot.values();\n    return flatten(contexts);\n  }\n\n  registerMenuItem = (menuItems: MenuItem[]) => {\n    this.menuItemSlot.register(menuItems);\n  };\n\n  /**\n   * register a sidebar Widget for the scope\n   */\n  registerSidebarWidget = (componentTreeNodes: ComponentTreeNode[]) => {\n    componentTreeNodes.map((componentTreeNode) => this.sidebarSlot.register(componentTreeNode));\n    return this;\n  };\n\n  /**\n   * register a sidebar link to the section above the drawers\n   */\n  registerSidebarLink = (...links: SidebarItem[]) => {\n    this.sidebarItemSlot.register(links);\n  };\n\n  uiRoot(): UIRoot {\n    this.sidebar.registerDrawer(new ComponentsDrawer(this.sidebarSlot));\n    this.commandBarUI.addSearcher(this.componentSearcher);\n\n    const [setKeyBindHandler] = this.commandBarUI.addCommand({\n      id: 'sidebar.toggle', // TODO - extract to a component!\n      handler: () => {},\n      displayName: 'Toggle component list',\n      keybinding: 'alt+s',\n    });\n    this.setSidebarToggle = setKeyBindHandler;\n\n    return {\n      routes: [\n        {\n          path: '/',\n          children: (\n            <Scope\n              routeSlot={this.routeSlot}\n              menuSlot={this.menuSlot}\n              sidebar={<this.sidebar.render itemSlot={this.sidebarItemSlot} />}\n              scopeUi={this}\n              badgeSlot={this.scopeBadgeSlot}\n              overviewLineSlot={this.overviewSlot}\n              context={this.getContext()}\n              onSidebarTogglerChange={this.setSidebarToggle}\n              cornerSlot={this.cornerSlot}\n            />\n          ),\n        },\n      ],\n    };\n  }\n\n  /** registers available components */\n  setComponents = (components: ComponentModel[]) => {\n    this.componentSearcher.update(components);\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\n  static dependencies = [UIAspect, ComponentAspect, SidebarAspect, CommandBarAspect, ReactRouterAspect];\n  static runtime = UIRuntime;\n  static slots = [\n    Slot.withType<RouteProps>(),\n    Slot.withType<RouteProps>(),\n    Slot.withType<ComponentTreeNode>(),\n    Slot.withType<ScopeBadge>(),\n    Slot.withType<ScopeOverview>(),\n    Slot.withType<MenuWidget[]>(),\n    Slot.withType<MenuItemSlot>(),\n    Slot.withType<CornerSlot>(),\n    Slot.withType<OverviewLineSlot>(),\n    Slot.withType<SidebarItemSlot>(),\n    Slot.withType<ContextSlot>(),\n  ];\n\n  static async provider(\n    [ui, componentUi, sidebar, commandBarUI, reactRouterUI]: [\n      UiUI,\n      ComponentUI,\n      SidebarUI,\n      CommandBarUI,\n      ReactRouterUI\n    ],\n    config,\n    [\n      routeSlot,\n      menuSlot,\n      sidebarSlot,\n      scopeBadgeSlot,\n      menuWidgetSlot,\n      menuItemSlot,\n      sidebarItemSlot,\n      cornerSlot,\n      overviewSlot,\n      contextSlot,\n    ]: [\n      RouteSlot,\n      RouteSlot,\n      SidebarSlot,\n      ScopeBadgeSlot,\n      MenuWidgetSlot,\n      MenuItemSlot,\n      SidebarItemSlot,\n      CornerSlot,\n      OverviewLineSlot,\n      ContextSlot\n    ]\n  ) {\n    const componentSearcher = new ComponentSearcher(reactRouterUI.navigateTo);\n    const scopeUi = new ScopeUI(\n      routeSlot,\n      componentUi,\n      menuSlot,\n      sidebar,\n      sidebarSlot,\n      commandBarUI,\n      componentSearcher,\n      scopeBadgeSlot,\n      menuWidgetSlot,\n      sidebarItemSlot,\n      menuItemSlot,\n      cornerSlot,\n      overviewSlot,\n      contextSlot\n    );\n    scopeUi.registerExplicitRoutes();\n    scopeUi.registerMenuItem(scopeUi.menuItems);\n    scopeUi.registerMenuWidget(() => <ScopeUseBox />);\n    ui.registerRoot(scopeUi.uiRoot.bind(scopeUi));\n    scopeUi.registerSidebarLink(() => (\n      <MenuLinkItem exact href=\"/\" icon=\"comps\">\n        Gallery\n      </MenuLinkItem>\n    ));\n\n    return scopeUi;\n  }\n}\n\nexport default ScopeUI;\n\nScopeAspect.addRuntime(ScopeUI);\n"]}

package/dist/ui/scope.d.ts

@@ -10,7 +10,7 @@ export declare type ScopeProps = {
     badgeSlot: ScopeBadgeSlot;
     overviewLineSlot: OverviewLineSlot;
     cornerSlot: CornerSlot;
-    context?: ScopeContextType;
+    context: ScopeContextType[];
     onSidebarTogglerChange: (callback: () => void) => void;
 };
 /**

package/dist/ui/scope.js

@@ -71,6 +71,16 @@ function _uiFoundationUi2() {
   return data;
 }
 
+function _baseUiUtils() {
+  const data = require("@teambit/base-ui.utils.composer");
+
+  _baseUiUtils = function () {
+    return data;
+  };
+
+  return data;
+}
+
 function _fullLoader() {
   const data = require("@teambit/legacy/dist/to-eject/full-loader");
 
@@ -166,7 +176,7 @@ function Scope({
   badgeSlot,
   overviewLineSlot,
   cornerSlot,
-  context,
+  context = [],
   onSidebarTogglerChange
 }) {
   const {
@@ -182,17 +192,14 @@ function Scope({
 
   const CornerOverride = cornerSlot === null || cornerSlot === void 0 ? void 0 : cornerSlot.values()[0];
   scopeUi.setComponents(scope.components);
-
-  const defaultContext = ({
-    children
-  }) => /*#__PURE__*/_react().default.createElement("div", null, children);
-
-  const Context = context || defaultContext;
+  const Context = context.map(ctx => [ctx, {
+    scope
+  }]);
   onSidebarTogglerChange(handleSidebarToggle);
   return /*#__PURE__*/_react().default.createElement(_scopeUiHooks().ScopeProvider, {
     scope: scope
-  }, /*#__PURE__*/_react().default.createElement(Context, {
-    scope: scope
+  }, /*#__PURE__*/_react().default.createElement(_baseUiUtils().Composer, {
+    components: Context
   }, /*#__PURE__*/_react().default.createElement("div", {
     className: _scopeModule().default.scope
   }, /*#__PURE__*/_react().default.createElement(_uiFoundationUi2().TopBar, {

package/dist/ui/scope.js.map

@@ -1 +1 @@
-{"version":3,"sources":["scope.tsx"],"names":["Scope","routeSlot","menuSlot","sidebar","scopeUi","badgeSlot","overviewLineSlot","cornerSlot","context","onSidebarTogglerChange","scope","isMobile","isSidebarOpen","handleSidebarToggle","x","sidebarOpenness","Layout","row","right","CornerOverride","values","setComponents","components","defaultContext","children","Context","styles","topbar","name","whiteCorner","main","splitter","e","stopPropagation"],"mappings":"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","sourcesContent":["import 'reset-css';\nimport { SplitPane, Pane, Layout } from '@teambit/base-ui.surfaces.split-pane.split-pane';\nimport { RouteSlot, SlotRouter } from '@teambit/ui-foundation.ui.react-router.slot-router';\nimport { Corner } from '@teambit/ui-foundation.ui.corner';\nimport { Collapser } from '@teambit/ui-foundation.ui.buttons.collapser';\nimport { HoverSplitter } from '@teambit/base-ui.surfaces.split-pane.hover-splitter';\nimport { TopBar } from '@teambit/ui-foundation.ui.top-bar';\nimport { FullLoader } from '@teambit/legacy/dist/to-eject/full-loader';\nimport React, { useReducer } from 'react';\nimport { Route } from 'react-router-dom';\nimport { useIsMobile } from '@teambit/ui-foundation.ui.hooks.use-is-mobile';\nimport { ScopeProvider } from '@teambit/scope.ui.hooks.scope-context';\nimport { useScopeQuery } from '@teambit/scope.ui.hooks.use-scope';\nimport { ScopeOverview } from './scope-overview';\nimport styles from './scope.module.scss';\nimport ScopeUI, { ScopeBadgeSlot, ScopeContextType, CornerSlot, OverviewLineSlot } from '../scope.ui.runtime';\n\nexport type ScopeProps = {\n  routeSlot: RouteSlot;\n  menuSlot: RouteSlot;\n  sidebar: JSX.Element;\n  scopeUi: ScopeUI;\n  badgeSlot: ScopeBadgeSlot;\n  overviewLineSlot: OverviewLineSlot;\n  cornerSlot: CornerSlot;\n  context?: ScopeContextType;\n  onSidebarTogglerChange: (callback: () => void) => void;\n};\n\n/**\n * root component of the scope\n */\nexport function Scope({\n  routeSlot,\n  menuSlot,\n  sidebar,\n  scopeUi,\n  badgeSlot,\n  overviewLineSlot,\n  cornerSlot,\n  context,\n  onSidebarTogglerChange,\n}: ScopeProps) {\n  const { scope } = useScopeQuery();\n  const isMobile = useIsMobile();\n  const [isSidebarOpen, handleSidebarToggle] = useReducer((x) => !x, !isMobile);\n  const sidebarOpenness = isSidebarOpen ? Layout.row : Layout.right;\n  if (!scope) {\n    return <FullLoader />;\n  }\n  const CornerOverride = cornerSlot?.values()[0];\n  scopeUi.setComponents(scope.components);\n  const defaultContext = ({ children }) => <div>{children}</div>;\n  const Context = context || defaultContext;\n\n  onSidebarTogglerChange(handleSidebarToggle);\n\n  return (\n    <ScopeProvider scope={scope}>\n      <Context scope={scope}>\n        <div className={styles.scope}>\n          <TopBar\n            className={styles.topbar}\n            Corner={() => {\n              if (CornerOverride) return <CornerOverride />;\n              return <Corner name={scope.name} className={styles.whiteCorner} />;\n            }}\n            menu={menuSlot}\n          />\n\n          <SplitPane className={styles.main} size={264} layout={sidebarOpenness}>\n            <Pane className={styles.sidebar}>{sidebar}</Pane>\n            <HoverSplitter className={styles.splitter}>\n              <Collapser\n                isOpen={isSidebarOpen}\n                onMouseDown={(e) => e.stopPropagation()} // avoid split-pane drag\n                onClick={handleSidebarToggle}\n                tooltipContent={`${isSidebarOpen ? 'Hide' : 'Show'} side panel`}\n              />\n            </HoverSplitter>\n            <Pane>\n              <SlotRouter slot={routeSlot} />\n              <Route exact path=\"/\">\n                <ScopeOverview badgeSlot={badgeSlot} overviewSlot={overviewLineSlot} />\n              </Route>\n            </Pane>\n          </SplitPane>\n        </div>\n      </Context>\n    </ScopeProvider>\n  );\n}\n"]}
+{"version":3,"sources":["scope.tsx"],"names":["Scope","routeSlot","menuSlot","sidebar","scopeUi","badgeSlot","overviewLineSlot","cornerSlot","context","onSidebarTogglerChange","scope","isMobile","isSidebarOpen","handleSidebarToggle","x","sidebarOpenness","Layout","row","right","CornerOverride","values","setComponents","components","Context","map","ctx","styles","topbar","name","whiteCorner","main","splitter","e","stopPropagation"],"mappings":"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","sourcesContent":["import 'reset-css';\nimport { SplitPane, Pane, Layout } from '@teambit/base-ui.surfaces.split-pane.split-pane';\nimport { RouteSlot, SlotRouter } from '@teambit/ui-foundation.ui.react-router.slot-router';\nimport { Corner } from '@teambit/ui-foundation.ui.corner';\nimport { Collapser } from '@teambit/ui-foundation.ui.buttons.collapser';\nimport { HoverSplitter } from '@teambit/base-ui.surfaces.split-pane.hover-splitter';\nimport { TopBar } from '@teambit/ui-foundation.ui.top-bar';\nimport { Composer, ComponentTuple } from '@teambit/base-ui.utils.composer';\nimport { FullLoader } from '@teambit/legacy/dist/to-eject/full-loader';\nimport React, { useReducer } from 'react';\nimport { Route } from 'react-router-dom';\nimport { useIsMobile } from '@teambit/ui-foundation.ui.hooks.use-is-mobile';\nimport { ScopeProvider } from '@teambit/scope.ui.hooks.scope-context';\nimport { useScopeQuery } from '@teambit/scope.ui.hooks.use-scope';\nimport { ScopeOverview } from './scope-overview';\nimport styles from './scope.module.scss';\nimport ScopeUI, { ScopeBadgeSlot, ScopeContextType, CornerSlot, OverviewLineSlot } from '../scope.ui.runtime';\n\nexport type ScopeProps = {\n  routeSlot: RouteSlot;\n  menuSlot: RouteSlot;\n  sidebar: JSX.Element;\n  scopeUi: ScopeUI;\n  badgeSlot: ScopeBadgeSlot;\n  overviewLineSlot: OverviewLineSlot;\n  cornerSlot: CornerSlot;\n  context: ScopeContextType[];\n  onSidebarTogglerChange: (callback: () => void) => void;\n};\n\n/**\n * root component of the scope\n */\nexport function Scope({\n  routeSlot,\n  menuSlot,\n  sidebar,\n  scopeUi,\n  badgeSlot,\n  overviewLineSlot,\n  cornerSlot,\n  context = [],\n  onSidebarTogglerChange,\n}: ScopeProps) {\n  const { scope } = useScopeQuery();\n  const isMobile = useIsMobile();\n  const [isSidebarOpen, handleSidebarToggle] = useReducer((x) => !x, !isMobile);\n  const sidebarOpenness = isSidebarOpen ? Layout.row : Layout.right;\n  if (!scope) {\n    return <FullLoader />;\n  }\n  const CornerOverride = cornerSlot?.values()[0];\n  scopeUi.setComponents(scope.components);\n  const Context = context.map((ctx) => [ctx, { scope }] as ComponentTuple);\n\n  onSidebarTogglerChange(handleSidebarToggle);\n\n  return (\n    <ScopeProvider scope={scope}>\n      <Composer components={Context}>\n        <div className={styles.scope}>\n          <TopBar\n            className={styles.topbar}\n            Corner={() => {\n              if (CornerOverride) return <CornerOverride />;\n              return <Corner name={scope.name} className={styles.whiteCorner} />;\n            }}\n            menu={menuSlot}\n          />\n\n          <SplitPane className={styles.main} size={264} layout={sidebarOpenness}>\n            <Pane className={styles.sidebar}>{sidebar}</Pane>\n            <HoverSplitter className={styles.splitter}>\n              <Collapser\n                isOpen={isSidebarOpen}\n                onMouseDown={(e) => e.stopPropagation()} // avoid split-pane drag\n                onClick={handleSidebarToggle}\n                tooltipContent={`${isSidebarOpen ? 'Hide' : 'Show'} side panel`}\n              />\n            </HoverSplitter>\n            <Pane>\n              <SlotRouter slot={routeSlot} />\n              <Route exact path=\"/\">\n                <ScopeOverview badgeSlot={badgeSlot} overviewSlot={overviewLineSlot} />\n              </Route>\n            </Pane>\n          </SplitPane>\n        </div>\n      </Composer>\n    </ScopeProvider>\n  );\n}\n"]}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/scope",
-  "version": "0.0.615",
+  "version": "0.0.623",
   "homepage": "https://bit.dev/teambit/scope/scope",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.scope",
     "name": "scope",
-    "version": "0.0.615"
+    "version": "0.0.623"
   },
   "dependencies": {
     "semver": "7.3.4",
@@ -15,6 +15,7 @@
     "fs-extra": "10.0.0",
     "lodash": "4.17.21",
     "p-map-series": "2.1.0",
+    "lodash.flatten": "4.4.0",
     "react-router-dom": "5.2.0",
     "reset-css": "5.0.1",
     "classnames": "2.2.6",
@@ -22,29 +23,30 @@
     "core-js": "^3.0.0",
     "@teambit/base-ui.surfaces.split-pane.hover-splitter": "1.0.0",
     "@teambit/base-ui.surfaces.split-pane.split-pane": "1.0.0",
+    "@teambit/base-ui.utils.composer": "1.0.0",
     "@teambit/base-ui.graph.tree.recursive-tree": "1.0.0",
     "@teambit/scope.models.scope-model": "0.0.95",
     "@teambit/scope.ui.hooks.scope-context": "0.0.95",
-    "@teambit/component": "0.0.615",
-    "@teambit/logger": "0.0.512",
-    "@teambit/aspect-loader": "0.0.615",
-    "@teambit/builder": "0.0.615",
-    "@teambit/cli": "0.0.423",
-    "@teambit/compiler": "0.0.615",
-    "@teambit/config": "0.0.435",
-    "@teambit/envs": "0.0.615",
-    "@teambit/express": "0.0.516",
-    "@teambit/graphql": "0.0.615",
+    "@teambit/component": "0.0.623",
+    "@teambit/logger": "0.0.516",
+    "@teambit/aspect-loader": "0.0.623",
+    "@teambit/builder": "0.0.623",
+    "@teambit/cli": "0.0.427",
+    "@teambit/compiler": "0.0.623",
+    "@teambit/config": "0.0.439",
+    "@teambit/envs": "0.0.623",
+    "@teambit/express": "0.0.520",
+    "@teambit/graphql": "0.0.623",
     "@teambit/harmony.modules.requireable-component": "0.0.483",
-    "@teambit/isolator": "0.0.615",
+    "@teambit/isolator": "0.0.623",
     "@teambit/legacy-bit-id": "0.0.397",
-    "@teambit/ui": "0.0.615",
+    "@teambit/ui": "0.0.623",
     "@teambit/workspace.modules.match-pattern": "0.0.487",
-    "@teambit/command-bar": "0.0.615",
-    "@teambit/component-tree": "0.0.407",
+    "@teambit/command-bar": "0.0.623",
+    "@teambit/component-tree": "0.0.411",
     "@teambit/design.ui.surfaces.menu.link-item": "0.0.377",
-    "@teambit/react-router": "0.0.615",
-    "@teambit/sidebar": "0.0.615",
+    "@teambit/react-router": "0.0.623",
+    "@teambit/sidebar": "0.0.623",
     "@teambit/ui-foundation.ui.main-dropdown": "0.0.485",
     "@teambit/ui-foundation.ui.menu": "0.0.485",
     "@teambit/ui-foundation.ui.react-router.slot-router": "0.0.487",
@@ -62,7 +64,7 @@
     "@teambit/ui-foundation.ui.tree.drawer": "0.0.486",
     "@teambit/ui-foundation.ui.use-box.dropdown": "0.0.108",
     "@teambit/ui-foundation.ui.use-box.scope-menu": "0.0.108",
-    "@teambit/explorer.ui.gallery.component-card": "0.0.490",
+    "@teambit/explorer.ui.gallery.component-card": "0.0.492",
     "@teambit/explorer.ui.gallery.component-grid": "0.0.485",
     "@teambit/preview.ui.preview-placeholder": "0.0.485",
     "@teambit/scope.ui.empty-scope": "0.0.489",
@@ -72,6 +74,7 @@
     "@types/semver": "7.3.4",
     "@types/fs-extra": "9.0.7",
     "@types/lodash": "4.14.165",
+    "@types/lodash.flatten": "4.4.6",
     "@types/react-router-dom": "5.1.7",
     "@types/react": "^17.0.8",
     "@types/classnames": "2.2.11",
@@ -82,7 +85,7 @@
     "@types/node": "12.20.4"
   },
   "peerDependencies": {
-    "@teambit/legacy": "1.0.204",
+    "@teambit/legacy": "1.0.206",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },
@@ -110,7 +113,7 @@
         "react": "-"
       },
       "peerDependencies": {
-        "@teambit/legacy": "1.0.204",
+        "@teambit/legacy": "1.0.206",
         "react-dom": "^16.8.0 || ^17.0.0",
         "react": "^16.8.0 || ^17.0.0"
       }

package/scope.ui.runtime.tsx

@@ -1,3 +1,4 @@
+import flatten from 'lodash.flatten';
 import type { ComponentUI, ComponentModel } from '@teambit/component';
 import { ComponentAspect } from '@teambit/component';
 import { Slot, SlotRegistry } from '@teambit/harmony';
@@ -22,6 +23,8 @@ export type ScopeBadge = ComponentType;
 
 export type ScopeBadgeSlot = SlotRegistry<ScopeBadge[]>;
 
+export type ContextSlot = SlotRegistry<ScopeContextType[]>;
+
 export type ScopeContextType = ComponentType<{ scope: ScopeModel; children: ReactNode }>;
 
 export type SidebarSlot = SlotRegistry<ComponentTreeNode>;
@@ -84,7 +87,12 @@ export class ScopeUI {
     /**
      * overview line slot to add new lines beneath the overview section
      */
-    private overviewSlot: OverviewLineSlot
+    private overviewSlot: OverviewLineSlot,
+
+    /**
+     * add a new context to ui
+     */
+    private contextSlot: ContextSlot
   ) {}
 
   private setSidebarToggle: (updated: CommandHandler) => void = () => {};
@@ -167,18 +175,17 @@ export class ScopeUI {
    */
   registerMetadata() {}
 
-  private _context: () => ScopeContextType;
-
   /**
    * add a new context to the scope.
    */
-  addContext(context: ScopeContextType) {
-    this._context = () => context;
+  addContext(...context: ScopeContextType[]) {
+    this.contextSlot.register(context);
+    return this;
   }
 
-  getContext() {
-    if (!this._context) return undefined;
-    return this._context();
+  private getContext() {
+    const contexts = this.contextSlot.values();
+    return flatten(contexts);
   }
 
   registerMenuItem = (menuItems: MenuItem[]) => {
@@ -267,6 +274,7 @@ export class ScopeUI {
     Slot.withType<CornerSlot>(),
     Slot.withType<OverviewLineSlot>(),
     Slot.withType<SidebarItemSlot>(),
+    Slot.withType<ContextSlot>(),
   ];
 
   static async provider(
@@ -288,6 +296,7 @@ export class ScopeUI {
       sidebarItemSlot,
       cornerSlot,
       overviewSlot,
+      contextSlot,
     ]: [
       RouteSlot,
       RouteSlot,
@@ -297,7 +306,8 @@ export class ScopeUI {
       MenuItemSlot,
       SidebarItemSlot,
       CornerSlot,
-      OverviewLineSlot
+      OverviewLineSlot,
+      ContextSlot
     ]
   ) {
     const componentSearcher = new ComponentSearcher(reactRouterUI.navigateTo);
@@ -314,7 +324,8 @@ export class ScopeUI {
       sidebarItemSlot,
       menuItemSlot,
       cornerSlot,
-      overviewSlot
+      overviewSlot,
+      contextSlot
     );
     scopeUi.registerExplicitRoutes();
     scopeUi.registerMenuItem(scopeUi.menuItems);

package/ui/scope.tsx

@@ -5,6 +5,7 @@ import { Corner } from '@teambit/ui-foundation.ui.corner';
 import { Collapser } from '@teambit/ui-foundation.ui.buttons.collapser';
 import { HoverSplitter } from '@teambit/base-ui.surfaces.split-pane.hover-splitter';
 import { TopBar } from '@teambit/ui-foundation.ui.top-bar';
+import { Composer, ComponentTuple } from '@teambit/base-ui.utils.composer';
 import { FullLoader } from '@teambit/legacy/dist/to-eject/full-loader';
 import React, { useReducer } from 'react';
 import { Route } from 'react-router-dom';
@@ -23,7 +24,7 @@ export type ScopeProps = {
   badgeSlot: ScopeBadgeSlot;
   overviewLineSlot: OverviewLineSlot;
   cornerSlot: CornerSlot;
-  context?: ScopeContextType;
+  context: ScopeContextType[];
   onSidebarTogglerChange: (callback: () => void) => void;
 };
 
@@ -38,7 +39,7 @@ export function Scope({
   badgeSlot,
   overviewLineSlot,
   cornerSlot,
-  context,
+  context = [],
   onSidebarTogglerChange,
 }: ScopeProps) {
   const { scope } = useScopeQuery();
@@ -50,14 +51,13 @@ export function Scope({
   }
   const CornerOverride = cornerSlot?.values()[0];
   scopeUi.setComponents(scope.components);
-  const defaultContext = ({ children }) => <div>{children}</div>;
-  const Context = context || defaultContext;
+  const Context = context.map((ctx) => [ctx, { scope }] as ComponentTuple);
 
   onSidebarTogglerChange(handleSidebarToggle);
 
   return (
     <ScopeProvider scope={scope}>
-      <Context scope={scope}>
+      <Composer components={Context}>
         <div className={styles.scope}>
           <TopBar
             className={styles.topbar}
@@ -86,7 +86,7 @@ export function Scope({
             </Pane>
           </SplitPane>
         </div>
-      </Context>
+      </Composer>
     </ScopeProvider>
   );
 }